/**
 * Project       AMDA-NG
 * Name          VisuUI.js
 * @class 	   amdaUI.visuUI
 * @extends      Ext.container.Container
 * @brief	   Visualization Module UI definition (View)
 * @author 	 elena
 */

Ext.define('amdaUI.VisuUI', {
	extend: 'Ext.container.Container',
	alias: 'widget.panelVisu',

	constructor: function(config) 
	{
		this.init(config);
		this.callParent(arguments);
		 
		//if (this.object) this.loadObject();	         
	},
	
	setObject : function (name,id) 
	{
		// set object
		this.object.set('id',id);
		this.object.set('name',name);
		// load object into view
		this.loadObject();
	},
	
	/**
	 * set params description into this.object
	 */
	setParamInfo : function(parameters) 
	{
		var params = [];
		Ext.Array.each(parameters, function(item, index) {
			params[index] = item;	     	  
		}, this);
		
		this.object.set('parameters', params);	  
	},	
	
	updateCount : function() 
	{
// 		this.object.set('nbIntervals',this.TTGrid.getStore().getTotalCount());		
// 		this.formPanel.getForm().findField('nbIntervals').setValue(this.object.get('nbIntervals'));
	},
	
	/**
	 * load object catalog into this view
	 */
	loadObject : function()
	{ 	  
		// load object into form
						 		 		
		var me = this;
		
		var onAfterInit = function(result, e) 
		{		
			if (!result || !result.success)
			{
				if (result.message)
					myDesktopApp.errorMsg(result.message);
				else
					myDesktopApp.errorMsg('Unknown error during catalog cache initialisation');
				return;
			}

									 			 
			 
			var fields = [], i = 0, index;
								
			Ext.Array.each(result.parameters, function(obj) 
			{
				
				index = 'param'+i.toString();			
				fields[i] = Ext.create('Ext.data.Field', { name : index, id: index, text : obj.name,
					convert: function(value, record) {						
						return parseFloat(value);
					}
				}
				);
								
				i++;
			});
			
			var newStore  = Ext.create('Ext.data.Store', {
				fields : [ 'text', 'id'],
				data : fields
			});
			
			me.parCombo.bindStore(newStore);
			me.parCombo1.bindStore(newStore);
			
			me.chartStore = Ext.create('Ext.data.Store', {
				fields : fields, 
				autoDestroy: false,
		//				pageSize : 200,
		//				buffered : true, 
		//				purgePageCount: 0,
		//				remoteSort: true,
				autoload: false,
				proxy: {
					type: 'direct',
					api :
					{
						read   :  AmdaAction.readIntervalsForChart
					},
					// remplir automatiquement tt, sharedtt , catalog, shared catalog
					extraParams : {'typeTT' : 'catalog', 'id' : me.object.get('id')},
					reader:
					{
						type: 'json',
						root: 'intervals',
						totalProperty : 'totalCount'
					}
				},
				listeners: {
					scope : me,
					load: function(store,records) {        
						//TODO enable plot button
					}
				}
			});
	 
			 me.chartStore.load();
									
		}

		AmdaAction.initForChartFromTT(this.object.get('id'), 'catalog', onAfterInit);   			          
	  		
	},
	
	/**
	 * updated object catalog into this view
	 */
	updateObject : function()
	{ 	  
		// load object into form
		//this.formPanel.getForm().loadRecord(this.object);
				 			
		var me = this;				   			          
	  		
	},
	
	/**
	 * Check if changes were made before closing window 
	 * @return true if changes
	 */	
	fclose : function() 
	{
		  
	return false;
	},	
	
	plotChart : function () {
		
		this.chartConfig.store=this.chartStore;
		
		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);
	//	 chart.bindStore(this.chartStore);
		var chartPanel =  this.items.items[0].items.items[1];
		var oldChart = chartPanel.down('chart');
		oldIndex = chartPanel.items.indexOf(oldChart);
		chartPanel.remove(oldChart);
		chartPanel.insert(oldIndex, chart);								 
	},
	
	init : function (config) 
	{	 
		var store = Ext.create('Ext.data.Store', {
			fields      :  [],			
			autoload    : false
		});
		
		this.chartConfig = {			
			width: 500,
			height: 500,
			animate: true,
			mask: true,
			//      theme:'Category2',
			store: store,
			axes: [{
				type: 'Numeric',
				position: 'bottom',
				fields: [],
				title: 'x axe',
				grid : true
				}, {
				type: 'Numeric',
				position: 'left',
				fields: [],
				title: 'y axe',
				grid: true
			}],
			series: [{
				type: 'scatter',
		 		markerConfig: {
		 			radius: 5,
		 			size: 5
				},
		// 		//      axes: ['left', 'bottom'],
				xField: '',
				yField: '',
				label: {
// 					display: 'under',
// 					render: function(value) {
// 						return parseFloat(value);
// 					}
				}
			}]
		}

		var plotTypeList = Ext.create('Ext.data.Store', {
			fields: ['type'],
			data: [
				{ 'type': 'line'    },
				{ 'type': 'scatter' } 
				] 
		});
		
		var parList = Ext.create('Ext.data.Store', {
			fields: [],
			autoload    : false
		});		 
	
		var chart = Ext.create('Ext.chart.Chart', this.chartConfig);				
 
		this.parCombo = Ext.create('Ext.form.ComboBox', {
			emptyText: 'select parameter',
			editable: false,
			store: parList,
			queryMode: 'local',
			displayField: 'text',
			valueField: 'id',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {
					
					this.chartConfig.axes[0].fields = [newValue];
					var rec = combo.findRecordByValue(newValue);
					this.chartConfig.axes[0].title = rec.get('text'); 
					this.chartConfig.series[0].xField = newValue;
				}
			}
		});
                   
		this.parCombo1 = Ext.create('Ext.form.ComboBox', {
			emptyText: 'select parameter',
			editable: false,
			store: parList,
			queryMode: 'local',
			displayField: 'text',
			valueField: 'id',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {
					
					this.chartConfig.axes[1].fields = [newValue];
					var rec = combo.findRecordByValue(newValue);
					this.chartConfig.axes[1].title = rec.get('text'); 
					this.chartConfig.series[0].yField = newValue;
				}
			}
		}); 
		
		var plotTypeCombo = Ext.create('Ext.form.ComboBox', {
			emptyText: 'select plot type',
			editable: false,
			store: plotTypeList,
			queryMode: 'local',
			displayField: 'type',
			valueField: 'type',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {						 
					this.chartConfig.series[0].type = newValue;
				}
			}
		}); 	 
		 
		 
		var formPanel =  Ext.create('Ext.form.Panel', { 
			region : 'center',
			layout:  'hbox', 
			bodyStyle: {background : '#dfe8f6'},
			defaults: { border : false, align: 'stretch',  padding: '3'},
			fieldDefaults: { labelWidth: 80, labelAlign : 'top' },
			items: [ 
				{            
				xtype: 'form',
				flex : 1,
				bodyStyle: {background : '#dfe8f6'}, 
				items: [
				{ 
					xtype : 'fieldset',
					title : 'X axis',
					items : [ 
							this.parCombo,          
							{ 
								xtype : 'fieldcontainer',
								layout: 'hbox',
								items: [{
								xtype: 'textfield',
								flex: 1
								}, {
								xtype: 'splitter'
								}, {
								xtype: 'textfield',
								flex: 1
							}]
						},
						{ xtype : 'checkbox' },
						{ xtype : 'checkbox' }
					]
				},
				{ 
					xtype : 'fieldset',
					title : 'Y axis',
					items : [
						this.parCombo1,                   
						{ 
						xtype : 'fieldcontainer',
						layout: 'hbox',
						items: [{
							xtype: 'textfield',
							flex: 1
							}, {
							xtype: 'splitter'
							}, {
							xtype: 'textfield',
							flex: 1
							}                                
						]
					},
					{ xtype : 'checkbox' },
					{ xtype : 'checkbox' }
					]
				},
				{ 
					xtype : 'fieldset',
					title : 'Plotting Options',
				       items : [
						plotTypeCombo
						]
				}
				],
				fbar:[
					{   
						type: 'button',
						text: 'Plot',
						scope : this,
						handler: this.plotChart
						
					},{   
						type: 'button',
						text: 'Reset'
					
					}
				]
				}, {
				xtype: 'form',		               
		//		    padding: '3',
				flex: 2,
				items : [
					chart
					],
			fbar:[
				{   
				type: 'button',
				text: 'Save Chart',
				scope: this,
				handler: function() {
					var chartPanel =  this.items.items[0].items.items[1];
					var chart = chartPanel.down('chart');
					chart.save({
						type: 'image/png'
					});
				}
				
				}
			]
			}    
		]  
		}); 
		
	
		var myConf = {
			layout: 'border',
			items: [		   
				formPanel, 		     
				{
				xtype: 'panel', 
				region: 'south',
				title: 'Information',
				collapsible: true,
				height: 100,
				autoHide: false,
				bodyStyle: 'padding:5px',
				iconCls:  'icon-information',
				loader: {
					autoLoad: true,
					url: helpDir+'visuHOWTO'
				} 
				}
			] 
		};
	    
		Ext.apply (this, Ext.apply(arguments, myConf));	
    }
	 
});