/**
 * 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.reformObject();

	},
	

	setObject : function (obj) {		

		this.object = obj;
		this.reformObject();
	},
	

	updateObject : function () {	

		 return true;
	},
	

	reformObject : function () {

		this.fromPlugin = this.object.get('fromPlugin');	
		
		if (this.fromPlugin) {

			if (this.object.get('folderId') == '')
				this.object.set('id','cacheCat');
			else
				this.object.set('id',this.object.get('folderId'));
			

			this.object.set('objName',this.object.get('objName'));
		}
		else {
			this.object.set('id',this.object.get('id'));
			this.object.set('name',this.object.get('name'));
		}

		// load object into view

		if (this.object.get('id') != '')

				this.loadObject();

	},

	reset : function() {

		//reset all fieldsets except the first one (name, intervals)
		var form = this.items.items[0].items.items[0];
		for (var i = 1;  i < 4; i++) {
			var fieldset = form.items.items[i];
			Ext.each(fieldset.query('field'), function(field) {
				field.reset();
			});
		}

		this.resetChart();                    

	},

	/**
	 * load object catalog into this view
	 */
	loadObject : function()

	{     

		var me = this;
		
		var onAfterInit = function(result, e) 

		{
			if (!result) {			
				myDesktopApp.errorMsg(e.message);
				Ext.defer(function(){Ext.Msg.toFront()},10);
				
				return;
			}
			else if (!result.success)

			{
				if (result.message)
					myDesktopApp.errorMsg(result.message);
				else
					myDesktopApp.errorMsg('Unknown error during catalog cache initialisation');

				Ext.defer(function(){Ext.Msg.toFront()},10);
				

				return;
			}

			var fields = [], i = 0, index;

			if (!result.cache) {
				me.object.set('name', result.name);
				me.object.set('nbIntervals', result.totalCount);

				var params = [];
				Ext.Array.each(result.parameters, function(item, index) {
					params[index] = item;	     	  
				}, this);
		
				me.object.set('parameters', params);	  	
			}
			else {
				fields[0] = Ext.create('Ext.data.Field', { name : 'start', id: 'start', text : 'start: date' });
				fields[1] = Ext.create('Ext.data.Field', { name : 'stop',  id: 'stop',  text : 'stop: date' });
				i = 2;
			} 
			
			Ext.Array.each(me.object.get('parameters'), function(obj) {
				index = 'param'+i.toString();

				if (obj.type == 2) {
					fields[i] = Ext.create('Ext.data.Field', { name : index, id: index, text : obj.name + ': string' });
					 

				}
				else if (obj.type == 1){
					fields[i] = Ext.create('Ext.data.Field', { name : index, id: index, text : obj.name + ': date' });
				}
				else {

					fields[i] = Ext.create('Ext.data.Field', { name : index, id: index, text : obj.name,
						convert: function(value, record) {						
							return parseFloat(value);
						}
					});

				}

				i++;
			});

			if (me.chartStore) {				 
				me.parList.removeAll();
				me.reset();
				me.chartStore = null;
			}

			me.parList.add(fields);

			
			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'), 
						         'name' : me.object.get('objName'), 'fromPlugin' : me.fromPlugin},

					reader:
					{
						type: 'json',
						root: 'intervals',
						totalProperty : 'totalCount'
					}
				},
				listeners: {
					scope : me,
					load: function(store,records) {        
						//TODO enable plot button

						// me.object.set('nbIntervals',me.chartStore.getTotalCount());

						// load object into form
						var formPanel =  me.items.items[0].items.items[0];
						formPanel.getForm().loadRecord(me.object);

					}
				}
			});

			
			me.chartStore.load();			 

		}

		AmdaAction.initForChart(this.object.get('id'), this.object.get('objName'), this.fromPlugin, 'catalog', onAfterInit);	

	},
	

	
	/**
	 * Check if changes were made before closing window 
	 * @return true if changes
	 */	
	fclose : function() 

	{  
		return false;

	},

	resetChart : function () {
		

		var emptyAxesConfig =   [{
			type: 'Numeric',
			position: 'bottom',
			fields: [],

			title: 'X axis',

			grid : true

		}, {

			type: 'Numeric',
			position: 'left',
			fields: [],

			title: 'Y axis',

			grid: true
		}];
		

		this.chartConfig.series[0].xField = '';
		this.chartConfig.series[0].yField = '';

		this.chartConfig.theme = 'Blue';
		
		this.chartConfig.axes = emptyAxesConfig; 
		 

		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);		
		this.replaceChart(chart);
										 
	},

	
	plotChart : function () {
		

		this.chartConfig.store = this.chartStore;	
		
		var xTitle = this.items.items[0].items.items[0].items.items[1].items.items[2].getValue(); 
		var yTitle = this.items.items[0].items.items[0].items.items[2].items.items[2].getValue(); 
		
		if (xTitle) this.chartConfig.axes[0].title = xTitle;
		if (xTitle) this.chartConfig.axes[1].title = yTitle;
	    
		// axis modifs
		if (this.comboXrange.getValue() == 'manual') {
			var minX = this.comboXrange.next().next().getValue();			
			var maxX = this.comboXrange.next().next().next().next().getValue();
			this.chartConfig.axes[0].minimum = minX;
			this.chartConfig.axes[0].maximum = maxX ;
		} else {
			// unset min/max in config
			delete this.chartConfig.axes[0].minimum;
			delete this.chartConfig.axes[0].maximum;
		}
		if (this.comboYrange.getValue() == 'manual') {
			var minX = this.comboYrange.next().next().getValue();
			var maxX = this.comboYrange.next().next().next().next().getValue();
		//	if (minX && maxX) {
			this.chartConfig.axes[1].minimum = minX;
			this.chartConfig.axes[1].maximum = maxX;
		//	}						
		} else {
			// unset min/max in config
			delete this.chartConfig.axes[1].minimum;
			delete this.chartConfig.axes[1].maximum;
		}
		
		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);	
					 

		this.replaceChart(chart); 

	},

	   
	replaceChart: function(chart) {	

		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
		});
		

		var rangeStore = Ext.create('Ext.data.Store', {
			fields      :  [],			
			autoload    : false
		});
		

		this.chartConfig = {			
			width: 500,
			height: 500,

			animate: false,
			mask: false,
			shadow: false,

			theme:'Blue',

			background: { fill : "#fff" },

			store: store,

			axes:   [{

				type: 'Numeric',
				position: 'bottom',
				fields: [],

				title: 'X axis',

				grid : true

			}, {

				type: 'Numeric',
				position: 'left',
				fields: [],

				title: 'Y axis',

				grid: true
			}],
			series: [{
				type: 'scatter',

				showMarkers: true,
				highlight: true,

// 		 		markerConfig: {

 //		 			radius: 5,

// 		 			size: 5
// 				},

		// 		//      axes: ['left', 'bottom'],
				xField: '',
				yField: '',

// 				label: {
// //   					display: 'under',
// //   					renderer: function(value, label, storeItem, item, i, display, animate, index) {
// //   						return storeItem.param3;
// //   					}
// 				},

				tips: {

//					trackMouse: true,
					width: 10,
					height: 20,
					hideDelay: 100, //200 ms

					mouseOffset: [0,0],   //[15,18]

					renderer: function(storeItem, item) {						

						this.setTitle(storeItem.index + 1);

					}

				}
			}]

		}

		this.parList  = Ext.create('Ext.data.Store', {
				fields : [ 'text', 'id']	
			});
		

		var chart = Ext.create('Ext.chart.Chart', this.chartConfig);				
 
		this.parCombo = Ext.create('Ext.form.ComboBox', {
			emptyText: 'select parameter',
			editable: false,

			store: this.parList,

			queryMode: 'local',
			displayField: 'text',

			valueField: 'id',

			// tpl:'<tpl for="."><div ext:qtip="{qtip}" class="x-combo-list-item">{Name}</div></tpl>', 

			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {

					if (newValue) {
						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: this.parList,

			queryMode: 'local',
			displayField: 'text',

			valueField: 'id',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {

					if (newValue) {						

						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: ['scatter', 'line'],

			queryMode: 'local',

			valueField: 'type',

			value: 'scatter',

			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {						 
					this.chartConfig.series[0].type = newValue;
				}
			}

		}); 
		
		var plotThemeCombo = Ext.create('Ext.form.ComboBox', {
			emptyText: 'select theme',
			editable: false,
			store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
			//'Category1','Category2','Category3','Category4','Category5','Category6'],
			queryMode: 'local',
			valueField: 'type',
			value: 'Blue',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {						 
					this.chartConfig.theme = newValue;
				}
			}
		});
		
		var comboRangeConfig = {
		//	fieldLabel:'X Range',
			name:'scaling',
			valueField: 'scaling',
			queryMode:'local',
			store:['auto','manual'],
			forceSelection:true,
			value: 'auto',
			width: 80,
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {					
					var minValue = combo.next().next();
					var maxValue  = minValue.next().next();
					var disabled = newValue == "auto";
					minValue.reset();
					maxValue.reset();
					minValue.setDisabled(disabled);										  
					maxValue.setDisabled(disabled);	  										  
				}
			}
		};
		
		this.comboXrange = Ext.create('Ext.form.ComboBox', comboRangeConfig);
		this.comboYrange = Ext.create('Ext.form.ComboBox', comboRangeConfig);
		

		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',				    

						items : [{

							xtype: 'fieldcontainer',
							layout: 'hbox',		      
							items: [
								{ xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true}, 		  
								{ xtype: 'splitter' },			 			 
								{ xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
							]                                                                       

						}]
					},{ 

						xtype : 'fieldset',
						title : 'X axis',
						items : [ 

							this.parCombo,          
							{ 

								xtype : 'fieldcontainer',
								layout: 'hbox',
								items: [{

								xtype:'fieldset',
								title: 'X Range',
								border: false,
								layout: 'hbox',
								items: [ 
									this.comboXrange, 
									{

										xtype: 'splitter'

									}, {

										xtype: 'numberfield',
										hideTrigger: true,
										width: 50,
										disabled: true

									},{

										xtype: 'splitter'

									},{

										xtype: 'numberfield',
										hideTrigger: true,
										width: 50,
										disabled: true

									}]

								}]
							},

// 							{ xtype : 'checkbox', boxLabel: 'Logarithmic'},
							{ xtype: 'textfield', fieldLabel: 'X title', name: 'xtitle'}

						]

					},{ 
						xtype : 'fieldset',

						title : 'Y axis',
						items : [
							this.parCombo1,                   
							{ 

								xtype : 'fieldcontainer',

								layout: 'hbox',

								items: [{
									xtype:'fieldset',
									title: 'Y Range',
									border: false,
									layout: 'hbox',
									items: [ 
										this.comboYrange, 
										{
											xtype: 'splitter'
										}, {
											xtype: 'numberfield',
											hideTrigger: true,
											width: 50,
											disabled: true
										},{
											xtype: 'splitter'
										},{
											xtype: 'numberfield',
											hideTrigger: true,
											width: 50,
											disabled: true

									}]
								}] 

							},

// 						{ xtype : 'checkbox', boxLabel: 'Logarithmic',
// 						listeners: {
// 							scope: this,
// 							change : function( check, newValue, oldValue) {
// 								
// 							}
// 						}
// 						},

							{ xtype: 'textfield', fieldLabel: 'Y title', name: 'ytitle'}

						]
					},

						{ 
							xtype : 'fieldset',
							title : 'Plotting Options',
							items : [
									plotTypeCombo,
									plotThemeCombo
								]
							}
						],
						fbar:[{   
							type: 'button',
							text: 'Plot',
							scope : this,
							handler: this.plotChart
							
						},{   
							type: 'button',
							text: 'Reset',
							scope : this,
							handler: this.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',
									defaultUrl : window.location //'http://apus.irap.omp.eu/NEWAMDA/'
								});
							}
						}]
					}    
				]  

		}); 

	
		var myConf = {
			layout: 'border',
			items: [		   
				formPanel, 		     
				{

					xtype: 'panel', 
					region: 'south',
					title: 'Information',
					collapsible: true,

					collapseMode: 'header',

					height: 100,
					autoHide: false,
					bodyStyle: 'padding:5px',
					iconCls:  'icon-information',
					loader: {
						autoLoad: true,
						url: helpDir+'visuHOWTO'
					} 

				}
			] 
		};
	    
		Ext.apply (this, Ext.apply(arguments, myConf));	

    } 

});