/**
 * 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);
	},

  getChartConfig: function(catalogStore) {

    var plotTypeField = Ext.getCmp('visu-scatter-type');
    var plotType = plotTypeField.getValue();

    var plotColorField = Ext.getCmp('visu-scatter-color');
    plotColor = plotColorField.getValue();

    var xAxisOpt = this.getAxisOptions('X');
    var yAxisOpt = this.getAxisOptions('Y');

    if ((!xAxisOpt.paramId) || (xAxisOpt.paramId == '')) {

      //myDesktopApp.errorMsg('Missing parameter selection for X axis');

      return null;
    }

    if ((!yAxisOpt.paramId) || (yAxisOpt.paramId == '')) {

      //myDesktopApp.errorMsg('Missing parameter selection for Y axis');

      return null;
    }

	var x=[];
	var y=[];

	var text=[];

	catalogStore.each(function(item){
		x.push(item.get(xAxisOpt.paramId));
		y.push(item.get(yAxisOpt.paramId));

		text.push(''+item.get('start').toISOString()+'<br>'+item.get('stop').toISOString());

	});

	var data =[{
	x: x,
	y: y,
	mode: (plotType=='line') ? 'lines+markers' : 'markers',

	text: text,

	marker:{
		color:plotColor},
	type: 'scatter'}];

	var layout = {
		margin: {l: 50,r: 40, b: 40,t: 40,pad: 5},

		xaxis: {
			title: xAxisOpt.title, range: !xAxisOpt.range ? null : [xAxisOpt.range.min,xAxisOpt.range.max],
			type: xAxisOpt.logscale ? 'log' : null
		},
		yaxis: {
			title: yAxisOpt.title, range: !yAxisOpt.range ? null : [yAxisOpt.range.min,yAxisOpt.range.max],
			type: yAxisOpt.logscale ? 'log' : null
		},

		hovermode: "closest",
		hoverlabel :{ font:{size:10}}	
	};

	var result =  {data:data,layout:layout}
    return result;

  },

  getAxisOptions: function(axisName) {

    var opt = {

      paramId: '',

      title: axisName+' axis'
    };

    var axisParamField = Ext.getCmp('visu-scatter-' + axisName + '-param');
    var paramFieldId = axisParamField.getValue();
    if (paramFieldId && (paramFieldId != "")) {
      var paramField = axisParamField.getStore().getById(axisParamField.getValue());
      if (paramField) {

        opt.paramId = paramField.get('id');

				opt.title = paramField.get('name');

      }
    }

    var axisTitleField = Ext.getCmp('visu-scatter-'+axisName+'-title');

    var axisTitle = axisTitleField.getValue();
    if (axisTitle && (axisTitle != "")) {
      opt.title = axisTitle;
    }

    var axisScalingField = Ext.getCmp('visu-scatter-'+axisName+'-scaling');
    var axisScaling = axisScalingField.getValue();
    if (axisScaling == 'manual') {
      var axisRangeMinField = Ext.getCmp('visu-scatter-' + axisName + '-range-min');
      var axisRangeMin = axisRangeMinField.getValue();
      var axisRangeMaxField = Ext.getCmp('visu-scatter-' + axisName + '-range-max');
      var axisRangeMax = axisRangeMaxField.getValue();
      opt.range = {
        'min' : axisRangeMin,
        'max' : axisRangeMax
      };
    }

	opt.logscale = Ext.getCmp('visu-scatter-' + axisName + '-logbox').getValue();

    return opt;

  },

	getAxisConfig: function(axisIndex, axisName, parametersStore) {
		var paramComboConfig = {
			xtype: 'combo',
			emptyText: 'select parameter',
			editable: false,
			store: parametersStore,
			queryMode: 'local',

			displayField: 'name',

			valueField: 'id',
			axisIndex: axisIndex,

      		id: 'visu-scatter-' + axisName + '-param',
			listeners:{
				change:function(){
					this.visuUI.plotChart();
				},
				scope: this
			}

		};

		var comboRangeConfig = {
			xtype : 'combo',
			name:'scaling',
			valueField: 'scaling',
			queryMode:'local',
			store:['auto','manual'],
			forceSelection:true,
			value: 'auto',
			width: 80,

      id: 'visu-scatter-' + axisName + '-scaling',

			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 logbox={
				xtype: 'fieldcontainer',
				fieldLabel: 'Log Scale',
				defaultType: 'checkboxfield',
				items: [
					{
						name      : 'logscale',
						inputValue: false,
						id        : 'visu-scatter-' + axisName + '-logbox',
						listeners:{
						change:function(){
							this.visuUI.plotChart();
						},
						scope: this
						}
					}
				],
		  };

		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,

              				id: 'visu-scatter-' + axisName + '-range-min',
							listeners:{
								change:function(){
									this.visuUI.plotChart();
								},
								scope: this
							}

						},
						{
							xtype: 'splitter'
						},
						{
							xtype: 'numberfield',
							hideTrigger: true,
							width: 50,

							disabled: true,

             				id: 'visu-scatter-' + axisName + '-range-max',
							listeners:{
								change:function(){
									this.visuUI.plotChart();
								},
								scope: this
							}

						},

					]

				},

			]
		};

		return {
			xtype : 'fieldset',
			title : axisName + ' axis',
			items : [
				paramComboConfig,
				axisRangeConfig,

				logbox,

				{
					xtype: 'textfield',
					fieldLabel: axisName + ' title',

          			id: 'visu-scatter-' + axisName + '-title',
					listeners:{
						change:function(){
							this.visuUI.plotChart();
						},
						scope: this

					},

				}
			]
		};
	},

	getPlottingOptionConfig: function() {
		var plotTypeComboConfig = {
			xtype: 'combo',
			emptyText: 'select plot type',
			editable: false,
			store: ['scatter', 'line'],
			queryMode: 'local',
			valueField: 'type',
			value: 'scatter',

      		id: 'visu-scatter-type',

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

					this.visuUI.plotChart();

				}

			},scope: this

		};

		var plotThemeComboConfig = {
			xtype: 'combo',
			emptyText: 'select theme',
			editable: false,
			store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
			queryMode: 'local',
			valueField: 'type',
			value: 'Blue',

      		id: 'visu-scatter-color',

			listeners : {
				scope : this,
				change : function(combo, newValue, oldValue) {
					//this.chartConfig.theme = newValue;

					this.visuUI.plotChart();

				}
			}
		};

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