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

Ext.define('amdaUI.CatalogVisuScatter', {
	extend: 'Ext.form.Panel',
	alias: 'widget.panelCatalogVisuScatter',

	constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},

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

    var xAxisTitleField = Ext.getCmp('visu-scatter-X-title');
    xAxisTitle = xAxisTitleField.getValue();
    if (!xAxisTitle || (xAxisTitle == ''))
      xAxisTitle = 'X axis';

    this.getAxisOptions('X');

    var chartConfig = {
			animate: false,
			mask: false,
			shadow: false,
			theme:'Blue',
			background: { fill : "#fff" },
			store: store,
			axes:   [{
				type: 'Numeric',
				position: 'bottom',
				fields: [],
				title: xAxisTitle,
				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);
					}
				}
			}]
		};

    return Ext.create('Ext.chart.Chart', chartConfig);
  },

	initVisu: function() {
		var me = this;
	},

  getAxisOptions: function(axisName) {
    var axisParamField = Ext.getCmp('visu-scatter-' + axisName + '-param');
    console.log(axisParamField.getValue());


    var axisTitleField = Ext.getCmp('visu-scatter-'+axisName+'-title');
    axisTitle = axisTitleField.getValue();
    if (!axisTitle || (axisTitle == ''))
      axisTitle = axisName+' axis';
  },

	getAxisConfig: function(axisIndex, axisName, parametersStore) {
		var paramComboConfig = {
			xtype: 'combo',
			emptyText: 'select parameter',
			editable: false,
			store: parametersStore,
			queryMode: 'local',
			displayField: 'text',
			valueField: 'id',
			axisIndex: axisIndex,
      id: 'visu-scatter-' + axisName + '-param',
			tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="x-boundlist-item">{name}<tpl if="size &gt; 1">[{index}]</tpl></div>',
        '</tpl>'
    ),
			displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '{name}<tpl if="size &gt; 1">[{index}]</tpl>',
        '</tpl>'
      ),
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {
					if (!combo.axisIndex || combo.axisIndex < 0) {
						return;
					}
					if (newValue) {
						/*this.chartConfig.axes[combo.axisIndex].fields = [newValue];
						var rec = combo.findRecordByValue(newValue);

						this.chartConfig.axes[combo.axisIndex].title = rec.get('text');
						this.chartConfig.series[combo.axisIndex].xField = newValue;*/
						console.log(combo.axisIndex);
					}
				}
			}
		};

		var comboRangeConfig = {
			xtype : 'combo',
			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);
				}
			}
		};

		var axisRangeConfig = {
			xtype : 'fieldcontainer',
			layout: 'hbox',
			items: [
				{
					xtype:'fieldset',
					title: axisName + ' Range',
					border: false,
					layout: 'hbox',
					items: [
						comboRangeConfig,
						{
							xtype: 'splitter'
						},
						{
							xtype: 'numberfield',
							hideTrigger: true,
							width: 50,
							disabled: true
						},
						{
							xtype: 'splitter'
						},
						{
							xtype: 'numberfield',
							hideTrigger: true,
							width: 50,
							disabled: true
						}
					]
				}
			]
		};

		return {
			xtype : 'fieldset',
			title : axisName + ' axis',
			items : [
				paramComboConfig,
				axisRangeConfig,
				{
					xtype: 'textfield',
					fieldLabel: axisName + ' title',
          id: 'visu-scatter-' + axisName + '-title'
				}
			]
		};
	},

	getPlottingOptionConfig: function() {
		var plotTypeComboConfig = {
			xtype: 'combo',
			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 plotThemeComboConfig = {
			xtype: 'combo',
			emptyText: 'select theme',
			editable: false,
			store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
			queryMode: 'local',
			valueField: 'type',
			value: 'Blue',
			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {
					//this.chartConfig.theme = newValue;
				}
			}
		};

		return {
			xtype : 'fieldset',
			title : 'Plotting Options',
			items : [
				plotTypeComboConfig,
				plotThemeComboConfig
			]
		};
	},

	init : function (config)
	{
		var myConf = {
			items: [
				this.getAxisConfig(0,'X', config.parametersStore),
				this.getAxisConfig(0,'Y', config.parametersStore),
				this.getPlottingOptionConfig()
			]
		};

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