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

Ext.define('amdaUI.CatalogVisuHistogram', {
	extend: 'Ext.form.Panel',
	alias: 'widget.panelCatalogVisuHistogram',

	histogramStore: null,

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

  getChartConfig: function(catalogStore) {

		var paramOpt = {
			paramId: '',

			title: 'Parameter'
		};

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

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

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

			}
		}

    else {
      myDesktopApp.errorMsg('Missing parameter selection');
      return null;
    }

		var paramTitleField = Ext.getCmp('visu-histo-title');
		var paramTitle = paramTitleField.getValue();
		if (paramTitle && (paramTitle != "")) {
			paramOpt.title = paramTitle;
		}

    var nbBinsField = Ext.getCmp('visu-histo-bin-slider');
    var nbBinsValue = nbBinsField.getValue();
		if (nbBinsValue <= 0) {
			nbBinsValue = 1
		}

		this.histogramStore = Ext.create('Ext.data.Store', {
			fields: ['value', 'count']
		});

		var minValue = null;
		var maxValue = null;
		catalogStore.each(function (item) {
			minValue = (minValue == null) ? item.get(paramOpt.paramId) : Math.min(minValue, item.get(paramOpt.paramId));
			maxValue = (maxValue == null) ? item.get(paramOpt.paramId) : Math.max(maxValue, item.get(paramOpt.paramId));
		});

    if ((minValue == null) || (maxValue == null) || (minValue == maxValue)) {
      myDesktopApp.errorMsg('Not enough data or constant data');

      return null;
    }

		var binSize = (maxValue-minValue) / (nbBinsValue-1);
		var data = [];
		for (i = 0; i < nbBinsValue; ++i) {

      var center = minValue + i * binSize;

			data.push({

				center: center,
        min: center - binSize/2,
        max: center + binSize/2,
        count: 0

			});
		}

		catalogStore.each(function (item) {
			var valueIndex = Math.floor((item.get(paramOpt.paramId) - minValue) / binSize);
			++data[valueIndex].count;
		});

		this.histogramStore = Ext.create('Ext.data.Store', {

			fields: ['center', 'min', 'max', 'count']

		});
		this.histogramStore.loadData(data);

		var chartConfig = {
			style: 'background:#fff',
			animate: false,
			shadow: false,
			store: this.histogramStore,
      id: 'visu-chart',
			axes:   [{
				type: 'Numeric',
				position: 'left',
				fields: ['count'],
				title: 'Number of Hits',
				grid : true,
				minimum: 0
			}, {
				type: 'Category',
				position: 'bottom',
				fields: ['center'],

				title: paramOpt.title,
        label: {
          renderer: function(value, label, storeItem, item, i, display, animate, index) {
            return value.toFixed(2);
          }
        }

			}],
			series: [{
				type: 'column',
				axis: 'left',
				highlight: true,
				gutter: 5,
				xField: 'center',

				yField: 'count',

        tips: {

					height: 20,

					hideDelay: 200,

					mouseOffset: [0,0],   //[15,18]
					renderer: function(storeItem, item) {

            this.setTitle('['+storeItem.get('min').toFixed(2)+', '+storeItem.get('max').toFixed(2)+']');

					}

				}

			}]
		};

    return chartConfig;

  },

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

      displayField: 'name',

      valueField: 'id',

      id: 'visu-histo-param'

    };

    var sliderConfig = {
      xtype : 'fieldcontainer',
      layout: 'hbox',
      items: [
        {
          xtype:'fieldset',
          title: 'Nb. bins',
          border: false,
          layout: 'hbox',
          items: [
            {
              xtype: 'slider',
              width: 150,
              value: 10,
              increment: 1,
              minValue: 2,
              maxValue: 100,

              id: 'visu-histo-bin-slider',
              listeners: {
                change: function ( slider, newValue, thumb, eOpts ) {
                  var binValueField = Ext.getCmp('visu-histo-bin-value');
                  binValueField.setValue(newValue);
                },
                scope: this
              }

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

              value: 10,

              id: 'visu-histo-bin-value'
            }
        ]
      }
      ]
     };

    return {
      xtype : 'fieldset',
      title : 'Histogram axis',
      items : [
        paramComboConfig,
        sliderConfig,
        {
          xtype: 'textfield',
          fieldLabel: 'Title',
          id: 'visu-histo-title'
        }
      ]
    };
  },

	init : function (config)
	{
		var myConf = {

			items: [

          this.getHistoConfig(config.parametersStore)
      ]

		};

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