/**
 * 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,
  catalogStore: null,
  emptyChartConfig: null,

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

	setObject : function (obj) {
		this.object = obj;
		this.loadObject();
	},

	updateObject : function () {
		 return true;
	},

	reset : function() {
    var tabPanel = Ext.getCmp('visu-tabpanel');
    Ext.Array.each(tabPanel.items.items, function(item) {
      Ext.each(item.query('field'), function(field) {
          field.reset();
      });
    });
    this.replaceChart(null);
	},

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

      me.parametersStore.removeAll();
      Ext.Array.each(result.parameters, function(param) {
        if ((param.type == 0) || (param.type == 1) || (param.type == 3)) {
          me.parametersStore.add(param);
        }
      });

      var dateConvert = function (value, rec) {
          if (!Ext.isDate(value)) {
              var valueString = new String(value);
              return new Date(valueString+'Z');
          }
          return value;
      };

      var fieldsConfig = [];
      fieldsConfig.push({type: 'date', id: 'start', name : 'start',   dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});
      fieldsConfig.push({type: 'date', id: 'stop', name : 'stop',  dateFormat: 'Y-m-d\\TH:i:s', convert: dateConvert});
      me.parametersStore.each(function (param) {
        switch (param.get('type')) {
          case 0: //double
            fieldsConfig.push({
              type: 'float',
              id: param.get('id'),
              name: param.get('id')
            });
            break;
          case 1: //dateTime
            fieldsConfig.push({
              type: 'date',
              id: param.get('id'),
              name : param.get('id'),
              convert: dateConvert
            });
            break;
          case 3: //int
            fieldsConfig.push({
              type: 'int',
              id: param.get('id'),
              name: param.get('id')
            });
            break;
        }
      });

      me.catalogStore = Ext.create('Ext.data.Store', {
        fields : fieldsConfig
      });
      me.catalogStore.loadData(result.intervals);

      me.reset();
		}

    var opt = {
      'typeTT' : 'catalog', 'id' : this.object.get('id'),
						         'name' : this.object.get('name')
    };

    this.formPanel.getForm().loadRecord(this.object);
		AmdaAction.readIntervalsForChart(opt, onAfterInit);
	},

	/**
	 * Check if changes were made before closing window
	 * @return true if changes
	 */
	fclose : function()
	{
		return false;
	},

	plotChart : function () {
    var tabPanel = Ext.getCmp('visu-tabpanel');
    var newChartConfig = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore);
    this.replaceChart(newChartConfig);
	},

  replaceChart: function(newChartConfig) {
    if (!newChartConfig) {
      newChartConfig = this.emptyChartConfig;
    }
    var chart = Ext.getCmp('visu-chart');
    var chartPanel = chart.up();
    chartPanel.remove(chart);
    chartPanel.insert(Ext.create('Ext.chart.Chart', newChartConfig));
  },

  saveChart : function() {
    var chart = Ext.getCmp('visu-chart');
    if (chart) {
      chart.save({
  		   type: 'image/png',
  			 defaultUrl : window.location
  		});
    }
  },

  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.catalogStore = Ext.create('Ext.data.Store', {
      fields: []
    });

    this.parametersStore =  Ext.create('Ext.data.Store', {
			fields: [
        {name: 'id', type: 'string'},
				{name: 'name',  type: 'string'},
        {name: 'type', type: 'int'}
			],
			data: []
		});

    this.emptyChartConfig = {
      xtype: 'chart',
      region: 'center',
      store: this.catalogStore,
      id: 'visu-chart',
      animate: false,
      mask: false,
      shadow: false,
      theme:'Blue',
      background: { fill : "#fff" }
    };

		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'
            },
            this.emptyChartConfig
          ]
        }
      ],
      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));
    }
});