/**
 * Project   : AMDA-NG
 * Name      : PlotStandardForm.js
 * @class   amdaPlotComp.PlotStandardForm
 * @extends Ext.form.Panel
 * @brief   Standard Form used to define some options for a plot element
 * @author  Benjamin Renard
 * @version $Id: PlotStandardForm.js benjamin $
 */

Ext.define('amdaPlotComp.PlotStandardForm', {
	extend: 'Ext.form.Panel',
    
	requires : [                
		        'amdaPlotObj.PlotObjectConfig'
	],
	
    //Object associated to this form
    object: null,
    
    //Link to the tree
    crtTree: null,
    
    constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},
	
	setObject : function(object) {
		this.object = object;
		this.loadRecord(this.object);
	},
	
	//To override to add form components
	getFormItems: function() {
		return [];
	},
	
	addStandardText: function(name, label, onChange) {
		return {
        	xtype: 'textfield',
        	name: name,
        	fieldLabel: label,
            listeners: {
            	change: function(field, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	scope: this
            }
        };
	},
	
	addStandardFloat: function(name, label, min, max, allowBlank, onChange) {
		allowBlank = (typeof allowBlank !== 'undefined') ? allowBlank : false;
		
		return {
	        xtype: 'numberfield',
	        name: name,
	        fieldLabel: label,
	        decimalPrecision : 3,
	        minValue         : min,
	        maxValue         : max,
	        allowBlank       : allowBlank,
	        listeners: {
            	change: function(field, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	scope: this
            }
	    };
	},
	
	addStandardCombo: function(name, label, availableData, onChange) {
		var comboStore = Ext.create('Ext.data.Store', {
		    fields: ['key', 'value'],
		    data : availableData
		});
		
		return {
        	xtype: 'combo',
        	name: name,
        	fieldLabel: label,
        	store: comboStore,
        	queryMode: 'local',
            displayField: 'value',
            valueField: 'key',
            editable: false,
            listeners: {
            	change: function(combo, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	scope: this
            }
        };
	},
	
	addStandardCheck: function(name, label, onChange) {
		return {
        	xtype: 'checkbox',
        	name: name,
        	boxLabel: label,
            listeners: {
            	change: function(combo, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	scope: this
            }
        };
	},
	
	addStandardFieldSet: function(title, checkboxName, items, onChangeCheck) {
		return {
        	xtype: 'fieldset',
        	title: title,
        	collapsible: true,
        	collapsed: true,
        	checkboxName: checkboxName,
        	checkboxToggle: checkboxName != '',
        	layout: {
			    type: 'vbox',
			    pack: 'start',
			    align: 'stretch'
			},
			items: items,
			listeners: {
				expand: function(fieldset, eOpts) {
					if (checkboxName != '')
					{
						this.object.set(checkboxName, true);
						if (onChangeCheck != null)
							onChangeCheck(checkboxName, true, false);
					}
				},
				collapse: function(fieldset, eOpts) {
					if (checkboxName != '')
					{
						this.object.set(checkboxName, false);
						if (onChangeCheck != null)
							onChangeCheck(checkboxName, false, true);
					}
				},
				scope: this
			}
        };
	},
	
	addStandardFont: function(namePrefix) {
		var fontItems = [
		    this.addStandardCombo(namePrefix+'-name', 'Name', amdaPlotObj.PlotObjectConfig.availableFontNames),
		    {
		    	xtype : 'toolbar',
		    	bodyStyle: { background : '#dfe8f6' },  
				border: false,
		    	items : [
		    	      {
		    	    	  xtype: 'numberfield',
		    	    	  name: namePrefix+'-size',
		    	    	  fieldLabel: 'Size',
		    	    	  labelWidth: 60,
		    	    	  width: 150,
		    	    	  maxValue: 32,
		    	          minValue: 6,
		    	          value: 12,
		    	    	  listeners: {
		    	    		  change: function(field, newValue, oldValue, eOpts) {
		    	    			  this.object.set(namePrefix+'-size', newValue);
		    	    		  },
		    	    		  scope: this
		    	    	  }
		    	      },
		    	      ' ',
		    	      {
		    	    	  xtype: 'checkbox',
		    	    	  name: namePrefix+'-bold',
		    	    	  boxLabel: '<b>B</b>',
		    	    	  width: 30,
		    	    	  listeners: {
		    	    		  change: function(combo, newValue, oldValue, eOpts) {
		    	            		this.object.set(namePrefix+'-bold', newValue);
		    	    		  },
		    	    		  scope: this
		    	    	  }
		    	      },
		    	      {
		    	    	  xtype: 'checkbox',
		    	    	  name: namePrefix+'-italic',
		    	    	  boxLabel: '<i>I</i>',
		    	    	  width: 30,
		    	    	  listeners: {
		    	    		  change: function(combo, newValue, oldValue, eOpts) {
		    	            		this.object.set(namePrefix+'-italic', newValue);
		    	    		  },
		    	    		  scope: this
		    	    	  }
		    	      }
		    	]
		    }
		];
		
		return this.addStandardFieldSet('Font', namePrefix+'-activated', fontItems);
	},
	
	addStandardColor: function(name, label, availableData, onChange) {
		var comboStore = Ext.create('Ext.data.Store', {
		    fields: ['color', 'value'],
		    data : availableData
		});
		
		return {
        	xtype: 'combo',
        	name: name,
        	fieldLabel: label,
        	store: comboStore,
        	queryMode: 'local',
            displayField: 'value',
            valueField: 'color',
            editable: false,
            tpl: Ext.create('Ext.XTemplate',
            		'<ul class="x-list-plain"><tpl for=".">',
            		'<li role="option" class="x-boundlist-item" style="color: {color};">{value}</li>',
            		'</tpl></ul>'
            ),
            // template for the content inside text field
            displayTpl: Ext.create('Ext.XTemplate',
            		'<tpl for=".">',
            			'{value}',
            		 '</tpl>'
            ),
            
            
            listeners: {
            	change: function(combo, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	scope: this
            }
        };
	},
	
	addStandardParamDropTarget: function(name, label, onChange) {
		return {
	        xtype: 'textfield',
	        name: name,
	        fieldLabel: label,
	        readOnly: true,
	        emptyText: 'Drop a parameter',
	        listeners: {
            	change: function(field, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
            	afterrender: function(field, eOpts ){
            		var paramTarget = new Ext.dd.DropTarget(field.el.dom, 
            				{
            					ddGroup: 'explorerTree',
            					notifyEnter: function(ddSource, e, data) {
            					},
            					notifyDrop: function(ddSource, e, data) {
            						var selectedRecord = ddSource.dragData.records[0];

            						field.setValue(selectedRecord.get('id'));
            						
            						return true;
            					}
            				}
            		);
            	},
            	scope: this
            }
	    };
	},
	
	addStandardDate: function(name, label, onChange) {
		return { 
            xtype: 'datefield',
            name: name,
            format: 'Y/m/d H:i:s',
            enforceMaxLength : true,
            maxLength: 19,
            fieldLabel: label,
            listeners: {
                change: function(field, newValue, oldValue, eOpts) {
            		this.object.set(name, newValue);
            		if (onChange != null)
            			onChange(name, newValue, oldValue);
            	},
                scope : this
            } 
        };
	},
	
	addStandardLineItems: function(namePrefix) {
		return [
		    this.addStandardCombo(namePrefix+'-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles),
		    this.addStandardFloat(namePrefix+'-width', 'Width', 1, 10),
		    this.addStandardColor(namePrefix+'-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
		];
	},
	
	addStandardSymbolsItems: function(namePrefix) {
		return [
		    this.addStandardCombo(namePrefix+'-type', 'Type', amdaPlotObj.PlotObjectConfig.availableSymbolsTypes),
		    this.addStandardFloat(namePrefix+'-size', 'Size', 1, 10),
		    this.addStandardColor(namePrefix+'-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
        ];
	},
	
	init : function(config) {
		var me = this;
		
		var myConf = {
				bodyPadding: 5,
				bodyStyle: { background : '#dfe8f6' },  
				border: false,
				layout: {
				    type: 'vbox',
				    pack: 'start',
				    align: 'stretch'
				},
				items: this.getFormItems()
		};
		
		Ext.apply (this , Ext.apply (arguments, myConf));
	}
});