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