Ext.namespace('Ext.exampledata');
Ext.exampledata.CASCOHindcastYearValue =[]
var Min = '2025-07-27';
var Max = '2025-09-11';
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+'-'+'2025-07-27'.split("-")[1]+'-'+'2025-07-27'.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});
				CASCOHindcastElevationContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				
			}
		}
	}
});




var CASCOHindcastCurrentDate=new Ext.form.DateField({
	fieldLabel:'Date',  
	emptyText:'-- Select a Date --',  
	format:'Y-m-d', 
	
	minValue :'2025-07-27',
	maxValue :'2025-09-11',
	value: '2025-07-27',
	
	//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});
				CASCOHindcastElevationContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodFilledContoursOverlays.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});
				CASCOHindcastElevationContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastElevationInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastTemperatureInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastSalinityInterpolatedOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightFilledContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastWave_HeightContoursOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodImageOverlays.mergeNewParams({'time': CASCOHindcaststring});
				CASCOHindcastFloodFilledContoursOverlays.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 CASCOHindcastElevationContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Elevation",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color_Scaling_Max":'None',"Color Map":'jet',"Color_Scaling_Min":'None',
});
var CASCOHindcastElevationContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastElevationFilledContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Elevation",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color_Scaling_Max":'None',"Color Map":'jet',"Color_Scaling_Min":'None',
});
var CASCOHindcastElevationFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastElevationImageSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Elevation",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color_Scaling_Max":'None',"Color Map":'jet',"Color_Scaling_Min":'None',
});
var CASCOHindcastElevationImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastElevationInterpolatedSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Interpolated",
	"(type)": "pcolor",
	"(variable)":"Elevation",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color_Scaling_Max":'None',"Color Map":'jet',"Color_Scaling_Min":'None',
});
var CASCOHindcastElevationInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastTemperatureContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Temperature",
	"Layers":1,"Color Scaling Max":36,"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 CASCOHindcastTemperatureImageSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Temperature",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastTemperatureImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastTemperatureInterpolatedSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Interpolated",
	"(type)": "pcolor",
	"(variable)":"Temperature",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastTemperatureInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastSalinityContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Salinity",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastSalinityContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastSalinityFilledContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Salinity",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastSalinityFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastSalinityImageSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Salinity",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastSalinityImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastSalinityInterpolatedSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Interpolated",
	"(type)": "pcolor",
	"(variable)":"Salinity",
	"Layers":1,"Color Scaling Max":36,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastSalinityInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastWave_HeightFilledContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Wave_Height",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Color Map":'jet',
});
var CASCOHindcastWave_HeightFilledContoursAnimationValue =({
	speed: 50,
	increase:5,
	unit:'hour'
});



var CASCOHindcastWave_HeightContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Wave_Height",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color Scaling Max":'None',"Color Map":'jet',"Color Scaling Min":'None',
});
var CASCOHindcastWave_HeightContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var CASCOHindcastFloodImageSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Flood",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color Scaling Max":'None',"Color Map":'jet',"Color Scaling Min":'None',
});
var CASCOHindcastFloodImageAnimationValue =({
	speed: 50,
	increase:5,
	unit:'hour'
});



var CASCOHindcastFloodFilledContoursSettingValue =({
	"(model)":"CASCOHindcast",
	"(name)": "FilledContours",
	"(type)": "filledcontours",
	"(variable)":"Flood",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color Scaling Max":'None',"Color Map":'jet',"Color Scaling Min":'None',
});
var CASCOHindcastFloodFilledContoursAnimationValue =({
	speed: 50,
	increase:5,
	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 CASCOHindcastElevation = {
		
		//xtype: 'fieldset',
		title: 'Elevation',
		autoHeight: true,
		id: 'CASCOHindcastElevation',
		//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:'ckCASCOHindcastElevationContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastElevationContoursAnimation">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(CASCOHindcastElevationContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastElevationContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCASCOHindcastElevationContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCASCOHindcastElevationContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastElevationContoursSettingValue);
			        			CASCOHindcastElevationContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'FilledContours',id:'ckCASCOHindcastElevationFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastElevationFilledContoursAnimation">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(CASCOHindcastElevationFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastElevationFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCASCOHindcastElevationFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCASCOHindcastElevationFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastElevationFilledContoursSettingValue);
			        			CASCOHindcastElevationFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Image',id:'ckCASCOHindcastElevationImage'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastElevationImageAnimation">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(CASCOHindcastElevationImageAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastElevationImageAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'facets');
			        				document.getElementById("bdCASCOHindcastElevationImageAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'facets');
			        				document.getElementById("bdCASCOHindcastElevationImageAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastElevationImageSettingValue);
			        			CASCOHindcastElevationImageOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Interpolated',id:'ckCASCOHindcastElevationInterpolated'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastElevationInterpolatedAnimation">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(CASCOHindcastElevationInterpolatedAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastElevationInterpolatedAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'pcolor');
			        				document.getElementById("bdCASCOHindcastElevationInterpolatedAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'pcolor');
			        				document.getElementById("bdCASCOHindcastElevationInterpolatedAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastElevationInterpolatedSettingValue);
			        			CASCOHindcastElevationInterpolatedOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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);

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Image',id:'ckCASCOHindcastTemperatureImage'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastTemperatureImageAnimation">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(CASCOHindcastTemperatureImageAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastTemperatureImageAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'facets');
			        				document.getElementById("bdCASCOHindcastTemperatureImageAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'facets');
			        				document.getElementById("bdCASCOHindcastTemperatureImageAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastTemperatureImageSettingValue);
			        			CASCOHindcastTemperatureImageOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Interpolated',id:'ckCASCOHindcastTemperatureInterpolated'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastTemperatureInterpolatedAnimation">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(CASCOHindcastTemperatureInterpolatedAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastTemperatureInterpolatedAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'pcolor');
			        				document.getElementById("bdCASCOHindcastTemperatureInterpolatedAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'pcolor');
			        				document.getElementById("bdCASCOHindcastTemperatureInterpolatedAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastTemperatureInterpolatedSettingValue);
			        			CASCOHindcastTemperatureInterpolatedOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




var CASCOHindcastSalinity = {
		
		//xtype: 'fieldset',
		title: 'Salinity',
		autoHeight: true,
		id: 'CASCOHindcastSalinity',
		//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:'ckCASCOHindcastSalinityContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastSalinityContoursAnimation">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(CASCOHindcastSalinityContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastSalinityContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCASCOHindcastSalinityContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCASCOHindcastSalinityContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastSalinityContoursSettingValue);
			        			CASCOHindcastSalinityContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'FilledContours',id:'ckCASCOHindcastSalinityFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastSalinityFilledContoursAnimation">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(CASCOHindcastSalinityFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastSalinityFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCASCOHindcastSalinityFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCASCOHindcastSalinityFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastSalinityFilledContoursSettingValue);
			        			CASCOHindcastSalinityFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Image',id:'ckCASCOHindcastSalinityImage'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastSalinityImageAnimation">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(CASCOHindcastSalinityImageAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastSalinityImageAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'facets');
			        				document.getElementById("bdCASCOHindcastSalinityImageAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'facets');
			        				document.getElementById("bdCASCOHindcastSalinityImageAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastSalinityImageSettingValue);
			        			CASCOHindcastSalinityImageOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Interpolated',id:'ckCASCOHindcastSalinityInterpolated'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastSalinityInterpolatedAnimation">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(CASCOHindcastSalinityInterpolatedAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastSalinityInterpolatedAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'pcolor');
			        				document.getElementById("bdCASCOHindcastSalinityInterpolatedAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'pcolor');
			        				document.getElementById("bdCASCOHindcastSalinityInterpolatedAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastSalinityInterpolatedSettingValue);
			        			CASCOHindcastSalinityInterpolatedOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




var CASCOHindcastWave_Height = {
		
		//xtype: 'fieldset',
		title: 'Wave_Height',
		autoHeight: true,
		id: 'CASCOHindcastWave_Height',
		//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: 'FilledContours',id:'ckCASCOHindcastWave_HeightFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastWave_HeightFilledContoursAnimation">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(CASCOHindcastWave_HeightFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastWave_HeightFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCASCOHindcastWave_HeightFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCASCOHindcastWave_HeightFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastWave_HeightFilledContoursSettingValue);
			        			CASCOHindcastWave_HeightFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'Contours',id:'ckCASCOHindcastWave_HeightContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastWave_HeightContoursAnimation">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(CASCOHindcastWave_HeightContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastWave_HeightContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCASCOHindcastWave_HeightContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCASCOHindcastWave_HeightContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastWave_HeightContoursSettingValue);
			        			CASCOHindcastWave_HeightContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




var CASCOHindcastFlood = {
		
		//xtype: 'fieldset',
		title: 'Flood',
		autoHeight: true,
		id: 'CASCOHindcastFlood',
		//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: 'Image',id:'ckCASCOHindcastFloodImage'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastFloodImageAnimation">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(CASCOHindcastFloodImageAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastFloodImageAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'facets');
			        				document.getElementById("bdCASCOHindcastFloodImageAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'facets');
			        				document.getElementById("bdCASCOHindcastFloodImageAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastFloodImageSettingValue);
			        			CASCOHindcastFloodImageOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        
			        {boxLabel: 'FilledContours',id:'ckCASCOHindcastFloodFilledContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOHindcastFloodFilledContoursAnimation">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(CASCOHindcastFloodFilledContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOHindcastFloodFilledContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'filledcontours');
			        				document.getElementById("bdCASCOHindcastFloodFilledContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'filledcontours');
			        				document.getElementById("bdCASCOHindcastFloodFilledContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOHindcastFloodFilledContoursSettingValue);
			        			CASCOHindcastFloodFilledContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};