Ext.namespace('Ext.exampledata');
Ext.exampledata.HindcastCASCOYearValue =[]
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.HindcastCASCOYearValue.push(i);
}
var HindcastCASCOYear = new Ext.form.ComboBox({
	fieldLabel    : 'Hindcast Year',
	name        : 'HindcastCASCOyear',
	allowBlank     : true,
	store        : Ext.exampledata.HindcastCASCOYearValue,
	typeAhead    : true,
	mode        : 'local',
	triggerAction    : 'all',
	emptyText    :'-- Select a Year --',
	selectOnFocus    :true,
	listeners:{
		select:{
			fn:function(){
				HindcastCASCOCurrentDate.setValue(HindcastCASCOYear.value+'-'+'2025-07-27'.split("-")[1]+'-'+'2025-07-27'.split("-")[2]);
				HindcastCASCOstring = HindcastCASCOCurrentDate.value+"T"+HindcastCASCOCurrentTime.value;
				document.getElementById("HindcastCASCOTime").innerHTML = "<b>Time: "+HindcastCASCOCurrentDate.value+"   "+HindcastCASCOCurrentTime.value+"</b>";
				HindcastCASCOVelocityVectorsOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				
			}
		}
	}
});




var HindcastCASCOCurrentDate=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(){
				
				HindcastCASCOYear.setValue(HindcastCASCOCurrentDate.value.split("-")[0]);
				
				HindcastCASCOstring = HindcastCASCOCurrentDate.value+"T"+HindcastCASCOCurrentTime.value;
				document.getElementById("HindcastCASCOTime").innerHTML = "<b>Time: "+HindcastCASCOCurrentDate.value+"   "+HindcastCASCOCurrentTime.value+"</b>";
				HindcastCASCOVelocityVectorsOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				
			}
		}
	} 


});






var HindcastCASCOCurrentTime = 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("HindcastCASCOTime").innerHTML = "<b>Time: "+HindcastCASCOCurrentDate.value+"   "+HindcastCASCOCurrentTime.value+"</b>";
				HindcastCASCOstring = HindcastCASCOCurrentDate.value+"T"+HindcastCASCOCurrentTime.value;
				HindcastCASCOVelocityVectorsOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOVelocityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOElevationInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOTemperatureInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityImageOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOSalinityInterpolatedOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightFilledContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				HindcastCASCOWave_HeightContoursOverlays.mergeNewParams({'time': HindcastCASCOstring});
				
				}
		}
	} 


});

var HindcastCASCOTime = {
		//xtype: 'fieldset',
		title: '<span id="HindcastCASCOTime"><b>Time: '+HindcastCASCOCurrentDate.value+'   '+HindcastCASCOCurrentTime.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: [HindcastCASCOYear,HindcastCASCOCurrentDate,HindcastCASCOCurrentTime,
			
				

            ]
		}]

};

var HindcastCASCOVelocityVectorsSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOVelocityVectorsAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOVelocityContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOVelocityContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOVelocityFilledContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOVelocityFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOVelocityImageSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOVelocityImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOVelocityInterpolatedSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOVelocityInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOElevationContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOElevationContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOElevationFilledContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOElevationFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOElevationImageSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOElevationImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOElevationInterpolatedSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOElevationInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOTemperatureContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOTemperatureContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOTemperatureFilledContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOTemperatureFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOTemperatureImageSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOTemperatureImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOTemperatureInterpolatedSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOTemperatureInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOSalinityContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOSalinityContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOSalinityFilledContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOSalinityFilledContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOSalinityImageSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOSalinityImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOSalinityInterpolatedSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOSalinityInterpolatedAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



var HindcastCASCOWave_HeightFilledContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOWave_HeightFilledContoursAnimationValue =({
	speed: 50,
	increase:5,
	unit:'hour'
});



var HindcastCASCOWave_HeightContoursSettingValue =({
	"(model)":"HindcastCASCO",
	"(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 HindcastCASCOWave_HeightContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});








var HindcastCASCOVelocity = {
		
		//xtype: 'fieldset',
		title: 'Velocity',
		autoHeight: true,
		id: 'HindcastCASCOVelocity',
		//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:'ckHindcastCASCOVelocityVectors'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdHindcastCASCOVelocityVectorsAnimation">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(HindcastCASCOVelocityVectorsAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdHindcastCASCOVelocityVectorsAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'vectors');
			        				document.getElementById("bdHindcastCASCOVelocityVectorsAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'vectors');
			        				document.getElementById("bdHindcastCASCOVelocityVectorsAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(HindcastCASCOVelocityVectorsSettingValue);
			        			HindcastCASCOVelocityVectorsOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};