/**
  * Project      :  AMDA-NG
  * Name         : PlotExtendShiftPlug.js
  * @plugin 	  amdaPlotComp.PlotZoomPlug
  * @extends 	  Ext.util.Observable 
  * @ptype 	 	  plotExtendShiftPlugin
  * @brief		 Plot Extend/Shift UI (View)
  * @author Benjamin
  * @version $Id: PlotExtendShiftPlug.js
  ********************************************************************************
  *    FT Id     :   Date   : Name - Description
  *******************************************************************************
  *  :          
  */


Ext.define('amdaPlotComp.PlotExtendShiftPlug', {
	extend:  'Ext.util.Observable',
	alias: 'plugin.plotExtendShiftPlugin',
        
	win : null,
	form : null,
	tabId : '',
	
	constructor: function(config) {            
		Ext.apply(this, config);            
        this.callParent(arguments);
	},
	
	onDestroy : function() {          
        this.win = null;
    },
 
	init: function(cmp) {          
		this.hostCmp = cmp;                 
	},

/**
 *  creation of the window
 */        
    show : function(tabId) {          
    	if (!this.win)
    	{
    		this.win = new Ext.Window({                
    			id: 'plot-extendshift-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID                                                   
    			width: 230,
    			height: 120,       
    			x: 0, y: 0,                
    			baseCls:'x-panel',                
    			title: 'Extend / Shift',			                
    			layout: 'fit',			                
    			constrain: true,			                
    			collapsible: true,
    			resizable: false,
    			ghost: false,			                
    			renderTo: this.hostCmp.ownerCt.body,                                 
    			items: this.getFormConfig(),                
    			listeners: {			                      
    				scope: this,			    			                      
    				beforeclose: function() {      
    					this.hostCmp.panelImage.stopZoom();	                    
    					Ext.PluginManager.unregister(this);                                                                   
    				}     
    			},
    			getConstrainVector: function(constrainTo){
    				var me = this;
    				if (me.constrain || me.constrainHeader) {
    					constrainTo = constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container || me.el.getScopeParent();
    					return (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo);
    				}
    			}
    		});
                        
    		this.win.on('destroy', this.onDestroy, this);
    		
    		Ext.PluginManager.register(this);
    	}
    	
    	this.tabId = tabId;
    	this.win.show();
    	this.win.setPosition(0,0);	
    },
    
    close : function() {
    	if (this.win == null)
    		return;
    	this.win.close();
    },
    
    toSec: function(value, unit) {
    	if (value == "")
    		return 0;
    	
    	switch (unit) {
    	case "sec":
    		return value;				
    	case "min":
    		return value * 60;				
    	case "hour":
    		return value * 3600;				 
    	case "day":
    		return value * 86400;				 
    	default:
    		return 0;
    	}		
    },

    executeAction : function(actionType) {
    	var durationField = this.form.getForm().findField('duration');
    	var durationUnitField = this.form.getForm().findField('durationUnit');
    	var duration = this.toSec(durationField.getValue(), durationUnitField.getValue());
    	if (duration) {
    		this.hostCmp.callInteractivePlot({'action' : actionType, 'tabId' : this.tabId, 'duration' : duration});	                								   
    	}	
    	else
    		myDesktopApp.errorMsg('No duration defined');	
    },
    
/**
 *        Main form
 */
    getFormConfig: function(){
    	this.form = new Ext.form.FormPanel( {	    	
    		frame: true,		
    		width: 230,		
    		height: 120,	    	
    		layout: {
			    type: 'vbox',
			    pack: 'start',
			    align: 'stretch'
			},	    	
    		fieldDefaults: {		  
    			labelWidth: 60		
    		},		
    		items: [
    		        {
    		        	xtype: 'fieldcontainer',
    		        	layout: 'hbox',
    		        	fieldLabel: 'Duration to apply to the interval',
    		        	labelAlign: 'top',
    		        	bodyStyle: {background : '#dfe8f6'},
    		        	border: false,
    		        	items: [
    		        	        {
    		        	        	xtype: 'numberfield',
    		        	        	hideTrigger: true,
    		        	        	name: 'duration',
    		        	        	//   minValue: 0,
    		        	        	width: 150
    		        	        },
    		        	        {
    		        	        	xtype: 'splitter',
    		        	        	width: 5
    		        	        },
    		        	        {
    		        	        	xtype:'combo',
    		        	        	name: 'durationUnit',
    		        	        	store:[
    		        	        	       'sec',
    		        	        	       'min',
    		        	        	       'hour',
    		        	        	       'day'
    		        	        	], 
    		        	        	editable: false,
    		        	        	width: 60,
    		        	        	value: 'sec',
    		        	        	triggerAction: 'all'
    		        	        }
    		        	]
    		        }
    		],
    		buttons: [
    		          {
    		        	  text: 'Extend/Shrink',
    		        	  scope : this,
    		        	  handler: function(bt,event) {
    		        		  this.executeAction('extend');
    		        	  }
    		          },
    		          '->',
    		          {
    		        	  text: 'Shift',
    		        	  scope : this,
    		        	  handler: function(bt,event) {
    		        		  this.executeAction('shift');
    		        	  }
    		          }
    		]
    	});   
    	return this.form;   
    }    
});