Ext.namespace('Ext.exampledata');
Ext.exampledata.CascoHindcastYearValue =[]
var Min = '2016-03-31';
var Max = '2016-04-10';
var minyear = parseInt(Min.split("-")[0]);
var maxyear = parseInt(Max.split("-")[0]);

for ( var i=minyear; i <= maxyear; i++){
	Ext.exampledata.CascoHindcastYearValue.push(i);
}
var CascoHindcastYear = new Ext.form.ComboBox({
	fieldLabel    : 'Hindcast Year',
	name        : 'CascoHindcastyear',
	allowBlank     : true,
	store        : Ext.exampledata.CascoHindcastYearValue,
	typeAhead    : true,
	mode        : 'local',
	triggerAction    : 'all',
	emptyText    :'-- Select a Year --',
	selectOnFocus    :true,
	listeners:{
		select:{
			fn:function(){
				CascoHindcastCurrentDate.setValue(CascoHindcastYear.value+'-'+'2016-03-31'.split("-")[1]+'-'+'2016-03-31'.split("-")[2]);
				CascoHindcaststring = CascoHindcastCurrentDate.value+"T"+CascoHindcastCurrentTime.value;
				document.getElementById("CascoHindcastTime").innerHTML = "<b>Time: "+CascoHindcastCurrentDate.value+"   "+CascoHindcastCurrentTime.value+"</b>";
				CascoHindcastVelocityVectorsOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityImageOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityInterpolatedOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				
			}
		}
	}
});




var CascoHindcastCurrentDate=new Ext.form.DateField({
	fieldLabel:'Date',  
	emptyText:'-- Select a Date --',  
	format:'Y-m-d', 
	
	minValue :'2016-03-31',
	maxValue :'2016-04-10',
	value: '2016-03-31',
	
	//value :'2010-03-08',
	//emptyText: 'Select a date... ...',
	listeners:{
		select:{
			fn:function(){
				
				CascoHindcastYear.setValue(CascoHindcastCurrentDate.value.split("-")[0]);
				
				CascoHindcaststring = CascoHindcastCurrentDate.value+"T"+CascoHindcastCurrentTime.value;
				document.getElementById("CascoHindcastTime").innerHTML = "<b>Time: "+CascoHindcastCurrentDate.value+"   "+CascoHindcastCurrentTime.value+"</b>";
				CascoHindcastVelocityVectorsOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityImageOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityInterpolatedOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				
			}
		}
	} 


});






var CascoHindcastCurrentTime = new Ext.form.TimeField({
	fieldLabel:'Time',
	emptyText:'-- Select a Time --',
	
	increment: 60,
	format: 'H:i:s',
	value: new Date().format('H')+':00:00',
	
	listeners:{
		select:{
			fn:function(){
				document.getElementById("CascoHindcastTime").innerHTML = "<b>Time: "+CascoHindcastCurrentDate.value+"   "+CascoHindcastCurrentTime.value+"</b>";
				CascoHindcaststring = CascoHindcastCurrentDate.value+"T"+CascoHindcastCurrentTime.value;
				CascoHindcastVelocityVectorsOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityImageOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastVelocityInterpolatedOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				CascoHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CascoHindcaststring});
				
				}
		}
	} 


});

var CascoHindcastTime = {
		//xtype: 'fieldset',
		title: '<span id="CascoHindcastTime"><b>Time: '+CascoHindcastCurrentDate.value+'   '+CascoHindcastCurrentTime.value+'</b></span>',
		iconCls: 'clock',
		autoHeight: true,
		//layout: 'form',
		collapsed: true,   // initially collapse the group
		collapsible: true,
		items: [{
			// Use the default, automatic layout to distribute the controls evenly
			// across a single row
			xtype: 'checkboxgroup',
			//fieldLabel: 'Multi-Column (vertical)',
			columns: 1,
			
			items: [CascoHindcastYear,CascoHindcastCurrentDate,CascoHindcastCurrentTime,
			
				

            ]
		}]

};

var CascoHindcastVelocityVectorsSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "Vectors",
	"(type)": "vectors",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":false,
        
	"Arrow Size":'None',"Color Map":'jet',"Arrow Width":'None',
});
var CascoHindcastVelocityVectorsAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastVelocityContoursSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastVelocityContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastVelocityFilledContoursSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastVelocityFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastVelocityImageSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastVelocityImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastVelocityInterpolatedSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "Interpolated",
	"(type)": "pcolor",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastVelocityInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastTemperatureContoursSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Temperature",
	"Layers":1,"Color Scaling Max":32,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastTemperatureContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CascoHindcastTemperatureFilledContoursSettingValue =({
	"(model)":"CascoHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Temperature",
	"Layers":1,"Color Scaling Max":32,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CascoHindcastTemperatureFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});








var CascoHindcastVelocity = {
		
		//xtype: 'fieldset',
		title: 'Velocity',
		autoHeight: true,
		id: 'CascoHindcastVelocity',
		//layout: 'form',
		iconCls: 'mapIcon',
		collapsed: true,   // initially collapse the group
		collapsible: true,
		items: [{
			// Use the default, automatic layout to distribute the controls evenly
			// across a single row
			xtype: 'checkboxgroup',
			//fieldLabel: 'Multi-Column (vertical)',
			columns: 2,
			items: [
			        
			        {boxLabel: 'Vectors',id:'ckCascoHindcastVelocityVectors'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastVelocityVectorsAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastVelocityVectorsAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastVelocityVectorsAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'vectors');
			        				document.getElementById("bdCascoHindcastVelocityVectorsAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'vectors');
			        				document.getElementById("bdCascoHindcastVelocityVectorsAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastVelocityVectorsSettingValue);
			        			CascoHindcastVelocityVectorsOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastVelocityVectorsSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastVelocityVectorsSettingValue);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Contours',id:'ckCascoHindcastVelocityContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastVelocityContoursAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastVelocityContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastVelocityContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCascoHindcastVelocityContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCascoHindcastVelocityContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastVelocityContoursSettingValue);
			        			CascoHindcastVelocityContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastVelocityContoursSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastVelocityContoursSettingValue);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'FilledContours',id:'ckCascoHindcastVelocityFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastVelocityFilledContoursAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastVelocityFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastVelocityFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCascoHindcastVelocityFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCascoHindcastVelocityFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastVelocityFilledContoursSettingValue);
			        			CascoHindcastVelocityFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastVelocityFilledContoursSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastVelocityFilledContoursSettingValue);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Image',id:'ckCascoHindcastVelocityImage'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastVelocityImageAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastVelocityImageAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastVelocityImageAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'facets');
			        				document.getElementById("bdCascoHindcastVelocityImageAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'facets');
			        				document.getElementById("bdCascoHindcastVelocityImageAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastVelocityImageSettingValue);
			        			CascoHindcastVelocityImageOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastVelocityImageSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastVelocityImageSettingValue);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Interpolated',id:'ckCascoHindcastVelocityInterpolated'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastVelocityInterpolatedAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastVelocityInterpolatedAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastVelocityInterpolatedAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'pcolor');
			        				document.getElementById("bdCascoHindcastVelocityInterpolatedAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'pcolor');
			        				document.getElementById("bdCascoHindcastVelocityInterpolatedAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastVelocityInterpolatedSettingValue);
			        			CascoHindcastVelocityInterpolatedOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastVelocityInterpolatedSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastVelocityInterpolatedSettingValue);

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




var CascoHindcastTemperature = {
		
		//xtype: 'fieldset',
		title: 'Temperature',
		autoHeight: true,
		id: 'CascoHindcastTemperature',
		//layout: 'form',
		iconCls: 'mapIcon',
		collapsed: true,   // initially collapse the group
		collapsible: true,
		items: [{
			// Use the default, automatic layout to distribute the controls evenly
			// across a single row
			xtype: 'checkboxgroup',
			//fieldLabel: 'Multi-Column (vertical)',
			columns: 2,
			items: [
			        
			        {boxLabel: 'Contours',id:'ckCascoHindcastTemperatureContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastTemperatureContoursAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastTemperatureContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastTemperatureContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCascoHindcastTemperatureContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCascoHindcastTemperatureContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastTemperatureContoursSettingValue);
			        			CascoHindcastTemperatureContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastTemperatureContoursSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastTemperatureContoursSettingValue);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'FilledContours',id:'ckCascoHindcastTemperatureFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCascoHindcastTemperatureFilledContoursAnimation">Off</span>',
			        		iconCls:'film',
			        		handler: function(){
			        			//var w = Ext.getCmp('mainTab');
			        			//w.setActiveTab(0);
			        			//w.expand();
			        			//w.collapsed ? w.expand() : w.collapse();
			        			simple.getForm().setValues(CascoHindcastTemperatureFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCascoHindcastTemperatureFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCascoHindcastTemperatureFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCascoHindcastTemperatureFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CascoHindcastTemperatureFilledContoursSettingValue);
			        			CascoHindcastTemperatureFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

			        		}},
			        		{xtype : "button",iconCls:'edit',id:'bdCascoHindcastTemperatureFilledContoursSetting',
			        			handler: function(){
			        				propsGrid.setSource(CascoHindcastTemperatureFilledContoursSettingValue);

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};