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


Ext.define('amdaPlotComp.PlotZoomPlug', {
	extend:  'Ext.util.Observable',
	alias: 'plugin.plotZoomPlugin',
        
	ttModuleId : 'timetab-win',

	win : null,
	form : null,
	zoomType : '',
	tabId : '',
	panelId : -1,
	
	constructor: function(config) {            
		Ext.apply(this, config);            
        this.callParent(arguments);
	},
	
	onDestroy : function() {          
        this.win = null;
    },
 
	init: function(cmp) {          
		this.hostCmp = cmp;                 
	},

	setMinValue : function(min) {
		if (!this.form)
			return;

		if (this.zoomType == 'timeAxis')
			this.form.getForm().findField('zoom-min-time').setValue(min);
		else
			this.form.getForm().findField('zoom-min-float').setValue(min);
	},	
		
    setMaxValue : function(max) {
    	if (!this.form)
			return;

		if (this.zoomType == 'timeAxis')
		{
			var minValue = this.form.getForm().findField('zoom-min-time').getValue();
			if (minValue <= max)
				this.form.getForm().findField('zoom-max-time').setValue(max);
			else
			{
				this.form.getForm().findField('zoom-min-time').setValue(max);
                this.form.getForm().findField('zoom-max-time').setValue(minValue);
			}
		}
		else
		{
			var minValue = this.form.getForm().findField('zoom-min-float').getValue();
			if (minValue <= max)
				this.form.getForm().findField('zoom-max-float').setValue(max);
			else
			{
				this.form.getForm().findField('zoom-min-float').setValue(max);
                this.form.getForm().findField('zoom-max-float').setValue(minValue);
			}
		}              
    },
        
/**
 *  add Interval to Time table
 **/        
    insertInterval: function() {
    	if (this.zoomType != 'timeAxis')
    		return;
    	
    	myDesktopApp.getLoadedModule(this.ttModuleId, true, function(module){
    		var targetModuleUI = targetModule.getUiContent();
    		//if (targetModuleUI)
    		//	targetModuleUI.addInterval(this.start,this.stop);
    	});
    },

/**
 *  creation of the window
 */        
    show : function(tabId, zoomType, panelId) {          
    	if (!this.win)
    	{
    		this.win = new Ext.Window({                
    			id: 'plot-zoom-win-' + this.hostCmp.ownerCt.getId(), // Plot window ID                                                   
    			width: 250,
    			height: 250,       
    			x: 0, y: 0,                
    			baseCls:'x-panel',                
    			title: 'Zoom',			                
    			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.updateWinByType(zoomType, panelId);
    	this.win.show();
    	this.win.setPosition(0,0);	
    },
    
    close : function() {
    	if (this.win == null)
    		return;
    	this.win.close();
    },
    
    updateWinByType : function(zoomType, panelId) {
    	if (this.win == null)
    		return;
    	
    	this.zoomType = zoomType;
    	this.panelId  = panelId;
    	
    	switch (zoomType)
    	{
    	case 'timeAxis':
			this.win.setTitle('Zoom on time axis & Interval selection - Panel Id : '+panelId);
			break;
		case 'y-left' :
			this.win.setTitle('Zoom on Y Left axis - Panel Id : '+panelId);
			break;
		case 'y-right' :
			this.win.setTitle('Zoom on Y Right axis - Panel Id : '+panelId);
			break;
		case 'xaxis_id' :
			this.win.setTitle('Zoom on X axis - Panel Id : '+panelId);
			break;
    	}
    	
    	this.form.getForm().findField('zoom-min-time').setVisible(this.zoomType == 'timeAxis');
    	this.form.getForm().findField('zoom-max-time').setVisible(this.zoomType == 'timeAxis');
    	
    	this.form.getForm().findField('zoom-min-float').setVisible(this.zoomType != 'timeAxis');
    	this.form.getForm().findField('zoom-max-float').setVisible(this.zoomType != 'timeAxis');
    	
    	var ttNameField = this.form.getForm().findField('tt-name');
    	if (ttNameField)
    		ttNameField.findParentByType('fieldset').setVisible(this.zoomType == 'timeAxis');
    	
    	this.win.setHeight((this.zoomType == 'timeAxis') ? 250 : 160);
    },
        
    resetMinMaxValue: function() {
    	if (this.zoomType == 'timeAxis')
    	{
    		this.form.getForm().findField('zoom-min-time').setValue('');                               
        	this.form.getForm().findField('zoom-max-time').setValue('');  
    	}
    	else
    	{
    		this.form.getForm().findField('zoom-min-float').setValue(null);                               
        	this.form.getForm().findField('zoom-max-float').setValue(null);  
    	}
    	                               
    	this.hostCmp.panelImage.resetZoom();                  
    }, 

/**
 *        Main form
 */
    getFormConfig: function(){
    	
    	var intervalFieldSet = {
    			xtype: 'fieldset',
    			title: 'Interval Selection',
    			name: 'interval-selection-fieldset',
    			collapsible: false,
    			layout: {
    			    type: 'vbox',
    			    pack: 'start',
    			    align: 'stretch'
    			},
    			items : [
    				{                             
    					xtype:'datefield', name:'zoom-min-time', fieldLabel: 'Start Time',                           
        			    format : 'Y-m-d\\TH:i:s'                                                                           
    				},                         
        			{                                                      
    					xtype:'datefield', name:'zoom-max-time', fieldLabel: 'Stop Time',                                                      
        			    format : 'Y-m-d\\TH:i:s'                                                                                                                                                         
        			},
        			{                             
        				xtype:'numberfield', name:'zoom-min-float', fieldLabel: 'Min Value'                                                                         
        			},                         
        			{                                                      
        				xtype:'numberfield', name:'zoom-max-float', fieldLabel: 'Max Value'                                                                                                              
        			},
        			{                            
        	        	xtype: 'button',	
        	        	width: 100,
        	        	text: 'Reset interval',                                                       
        	        	scope: this,                            
        	        	handler: function() {
        	        		this.resetMinMaxValue();
        	        	}
        	        }
        		]
    	};
    	
    	var insertTTFieldSet = {
    			xtype: 'fieldset',
    			title: 'TimeTable Insertion',
    			name: 'tt-insertion-fieldset',
    			collapsible: false,
    			layout: {
    			    type: 'vbox',
    			    pack: 'start',
    			    align: 'stretch'
    			},
    			items : [
    			         {
    			        	 xtype: 'textfield',                               
    			        	 fieldLabel: 'TimeTable Name',                            
    			        	 name: 'tt-name',    
    			        	 listeners :
    			        	 {                             
    			        		 render : function(o,op)  
    			        		 { 
    			        			 var me = this;   
    			        			 var el = me.el;
    			        			 var dropTarget = Ext.create('Ext.dd.DropTarget', el, {
    			        				 ddGroup: 'explorerTree',
    			        				 notifyOver  : function(ddSource, e, data)
    			        				 {
    			        					 if ((data.records[0].data.nodeType == 'timeTable') && (data.records[0].data.leaf))						
    			        					 {  
    			        						 this.valid = true; 
    			        						 return this.dropAllowed;                                    
    			        					 }
    			        					 this.valid = false;
    			        					 return this.dropNotAllowed;                                  
    			        				 },
    			        				 notifyDrop  : function(ddSource, e, data)	
    			        				 {
    			        					 if (!this.valid)
    			        						 return false;  
    			        					 me.setValue(data.records[0].get('text'));
    			        					 return true;                           
    			        				 }                                    
    			        			 });                                                                                          
    			        		 }
    			        	 }
    			         },
    			         {                            
		        	        	xtype: 'button',   
		        	        	width: 100,	
		        	        	text: 'Insert Interval',                         			    
		        	        	scope: this,                            
		        	        	handler: function(){
		        	        		if (this.zoomType != 'timeAxis')
		        	            		return;
		        	        		
		        	        		this.start = this.form.getForm().findField('zoom-min-time').getValue();                                
		        	        		this.stop = this.form.getForm().findField('zoom-max-time').getValue();
		        	        		// new TimeTable or typed manually
		        	        		var me = this;
		        	        		var targetModule = myDesktopApp.getLoadedModule(this.ttModuleId, true, function(module) {
		        	        			var targetModuleUI = module.getUiContent();
		        	        			var TTname =  me.form.getForm().findField('tt-name').getValue();
		        	        			//ToDo
		        	        		});
                                                                                                                      
		        	        	}                                             
		        	        }
    			         ]
    	};
    	
    	this.form = new Ext.form.FormPanel( {	    	
    		frame: true,		
    		width: 250,		
    		height: 250,	    	
    		layout: {
			    type: 'vbox',
			    pack: 'start',
			    align: 'stretch'
			},	    	
    		fieldDefaults: {		  
    			labelWidth: 60		
    		},		
    		items: [
    		        intervalFieldSet,
    		        insertTTFieldSet
    		],	    
    		fbar : [		    	    
    		        {                        
    		        	text: 'Apply Zoom',			                      
    		            	width: 100,			                      
    		                	scope: this,			                      
    		                	handler: function(){
    		                		if (this.zoomType == 'timeAxis')
    		                		{
    		                			var minZoom = this.form.getForm().findField('zoom-min-time').getValue();			    
    		                			var maxZoom = this.form.getForm().findField('zoom-max-time').getValue();
    		                		}
    		                		else
    		                		{
    		                			var minZoom = this.form.getForm().findField('zoom-min-float').getValue();			    
    		                			var maxZoom = this.form.getForm().findField('zoom-max-float').getValue();
    		                		}
    		                			
    		                		if(!maxZoom || !minZoom || !this.form.getForm().isValid()) {
    		                			myDesktopApp.warningMsg('Error in values definition');
    		                			return;
    		                		}
    		                		
    		                		this.hostCmp.callInteractivePlot({'action' : 'zoom', 'tabId' : this.tabId, 'panelId' : this.panelId, 'axeId' : this.zoomType, 'min' : minZoom, 'max' : maxZoom});	                			
    		                		this.hostCmp.panelImage.resetZoom();                                  
    		                	}
    		                },
    		                {                              
    		                	text: 'Undo Zoom', 
    		                	width: 100,                       
    		                	scope : this,
    		                	handler: function(){
    		                		this.hostCmp.callInteractivePlot({'action' : 'undozoom', 'tabId' : this.tabId, 'panelId' : this.panelId, 'axeId' : this.zoomType});
    		                		this.hostCmp.panelImage.resetZoom();
    		                	}            
    		                }       
    		                ]
    	});   
    	return this.form;   
    }    
});