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

  requires: [
    'amdaUI.CatalogVisuScatter',
    'amdaUI.CatalogVisuHistogram'
  ],

  visuTabContents: [],

  parametersStore: null,

	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
						//BRE - 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('folderId'), this.object.get('objName'), this.fromPlugin, 'catalog', onAfterInit);
    this.formPanel.getForm().loadRecord(this.object);

    this.parametersStore.removeAll();
    Ext.Array.each(this.object.get('parameters'), function(param) {
			for (index = 0; index < param.size; ++index) {
				me.parametersStore.add({'paramId': param.id+'_'+index, 'name' : param.name, 'index': index, 'size': param.size});
			}
		});

    Ext.Array.each(this.visuTabContents, function(content) {
      content.initVisu();
    });
	},


	/**
	 * 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);*/
    var chart = Ext.getCmp('visu-chart');
    var tabPanel = Ext.getCmp('visu-tabpanel');

    var chartPanel = chart.up();
    chartPanel.remove(chart);
    chartPanel.insert(tabPanel.activeTab.items.items[0].getChart());
	},

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

  initChartTypes: function() {
    var me = this;

    var tabPanel = Ext.getCmp('visu-tabpanel');
    if (!tabPanel)
      return;

    var chartTypes = [
      {
        title: 'Scatter',
        widget: 'widget.panelCatalogVisuScatter'
      },
      {
        title: 'Histogram',
        widget: 'widget.panelCatalogVisuHistogram'
      }
    ];

    var isFirst = true;
    Ext.Array.each(chartTypes, function(chartType) {
      var tabContent = Ext.create(chartType.widget, {parametersStore : me.parametersStore});
      var tab = tabPanel.add({
        title: chartType.title,
        items: [
          tabContent
        ],
        layout: 'fit'
      });
      me.visuTabContents.push(tabContent);
      if (isFirst) {
        tabPanel.setActiveTab(tab);
        isFirst = false;
      }
    });
  },

	init : function (config)
	{
    this.parametersStore =  Ext.create('Ext.data.Store', {
			fields: [
				{name: 'paramId', type: 'string'},
				{name: 'name',  type: 'string'},
				{name: 'index',  type: 'int'},
				{name: 'size', type: 'int'}
			],
			data: []
		});

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

		this.formPanel = Ext.create('Ext.form.Panel', {
      region: 'center',
			layout:  'border',
			bodyStyle: {background : '#dfe8f6'},
			defaults: { border : false, align: 'stretch',  padding: '3'},
			items: [
        {
          xtype : 'fieldset',
          region: 'north',
  				items : [
            {
              xtype: 'fieldcontainer',
              layout: 'hbox',
              fieldDefaults: { labelWidth: 80, labelAlign : 'right' },
              items: [
                { xtype:'textfield', fieldLabel: 'Catalog Name', name: 'name', readOnly: true},
                { xtype: 'splitter' },
                { xtype:'textfield', fieldLabel: 'Intervals', name: 'nbIntervals', readOnly: true}
              ]
            }
          ],
        },
        {
          xtype: 'container',
          region: 'center',
          layout: 'border',
          items: [
            {
              xtype: 'tabpanel',
              region: 'west',
              width: 250,
//              height: 400,
              id: 'visu-tabpanel'
            },
            {
              xtype: 'chart',
              region: 'center',
              store: store,
              id: 'visu-chart',
              animate: false,
        			mask: false,
        			shadow: false,
        			theme:'Blue',
        			background: { fill : "#fff" }
            }
          ]
        }
      ],
      fbar:[
        {
          type: 'button',
          text: 'Plot',
          scope : this,
          handler: this.plotChart
        },
        {
          type: 'button',
          text: 'Reset',
          scope : this,
          handler: this.reset
      },
      {
        type: 'button',
        text: 'Save Chart',
        scope : this,
        handler: this.saveChart
      }
    ]
    });

    var myConf = {
			layout: 'border',
			items: [
        this.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'
					}
				}
			]
		};

    this.initChartTypes();

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