var CASCOCurrentDate=new Ext.form.DateField({
	fieldLabel:'Date',  
	emptyText:'-- Select a Date --',  
	format:'Y-m-d', 
	
	minValue :new Date().format('Y-m-d'),
	maxValue :new Date().add(Date.DAY, 5),
	value: new Date().format('Y-m-d'),
	
	//value :'2010-03-08',
	//emptyText: 'Select a date... ...',
	listeners:{
		select:{
			fn:function(){
				
				
				CASCOstring = CASCOCurrentDate.value+"T"+CASCOCurrentTime.value;
				document.getElementById("CASCOTime").innerHTML = "<b>Time: "+CASCOCurrentDate.value+"   "+CASCOCurrentTime.value+"</b>";
				CASCOVelocityVectorsOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOWave_HeightContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOWave_HeightFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOFloodinnudationOverlays.mergeNewParams({'time': CASCOstring});
				CASCOFloodImageOverlays.mergeNewParams({'time': CASCOstring});
				
			}
		}
	} 


});






var CASCOCurrentTime = 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("CASCOTime").innerHTML = "<b>Time: "+CASCOCurrentDate.value+"   "+CASCOCurrentTime.value+"</b>";
				CASCOstring = CASCOCurrentDate.value+"T"+CASCOCurrentTime.value;
				CASCOVelocityVectorsOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOVelocityInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOElevationInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOTemperatureInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityImageOverlays.mergeNewParams({'time': CASCOstring});
				CASCOSalinityInterpolatedOverlays.mergeNewParams({'time': CASCOstring});
				CASCOWave_HeightContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOWave_HeightFilledContoursOverlays.mergeNewParams({'time': CASCOstring});
				CASCOFloodinnudationOverlays.mergeNewParams({'time': CASCOstring});
				CASCOFloodImageOverlays.mergeNewParams({'time': CASCOstring});
				
				}
		}
	} 


});

var CASCOTime = {
		//xtype: 'fieldset',
		title: '<span id="CASCOTime"><b>Time: '+CASCOCurrentDate.value+'   '+CASCOCurrentTime.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: [CASCOCurrentDate,CASCOCurrentTime,{
			
				
				'boxLabel':'Time Series',
				
				
				'xtype':'checkbox',
				
				
				'name':'CASCOTimeSeries',
				
				
				'id':'ckCASCOTimeSeries',
				
				

            }]
		}]

};

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



var CASCOVelocityContoursSettingValue =({
	"(model)":"CASCO",
	"(name)": "Contours",
	"(type)": "contours",
	"(variable)":"Velocity",
	"Layers":1,"Color Scaling Max":1.5,"Case Sensitive":true,"Color Scaling Min":0,"Color Bar":true,
        
	"Arrow Size":'None',"Color Map":'jet',"Arrow Width":'None',
});
var CASCOVelocityContoursAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



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



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



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



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



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



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



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



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



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



var CASCOTemperatureImageSettingValue =({
	"(model)":"CASCO",
	"(name)": "Image",
	"(type)": "facets",
	"(variable)":"Temperature",
	"Layers":1,"Case Sensitive":true,"Color Bar":true,
        
	"Color Scaling Max":'None',"Color Map":'jet',"Color Scaling Min":'None',
});
var CASCOTemperatureImageAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



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



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



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



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



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



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



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



var CASCOFloodinnudationSettingValue =({
	"(model)":"CASCO",
	"(name)": "innudation",
	"(type)": "innudation",
	"(variable)":"Flood",
	"Layers":1,"Case Sensitive":true,"Color Bar":false,
        
	"Color Scaling Max":'None',"Color Map":'jet',"Color Scaling Min":'None',
});
var CASCOFloodinnudationAnimationValue =({
	speed: 50,
	increase:3,
	unit:'hour'
});



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








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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




var CASCOWave_Height = {
		
		//xtype: 'fieldset',
		title: 'Wave_Height',
		autoHeight: true,
		id: 'CASCOWave_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: 'Contours',id:'ckCASCOWave_HeightContours'},
			        { xtype : "checkboxgroup", 
			        	columns: 2, 
			        	items:[{xtype : "button",
			        		text:'<span id="bdCASCOWave_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(CASCOWave_HeightContoursAnimationValue);	
			        			//Ext.MessageBox.alert('Status', 'Changes saved successfully.');
			        			if(document.getElementById("bdCASCOWave_HeightContoursAnimation").innerHTML=="On"){//OFF
			        				var result = getProSettingValue(false,'contours');
			        				document.getElementById("bdCASCOWave_HeightContoursAnimation").innerHTML = "Off";
			        				//simple.disable();
			        			}
			        			else{//ON
			        				//simple.enable();
			        				var result = getProSettingValue(true,'contours');
			        				document.getElementById("bdCASCOWave_HeightContoursAnimation").innerHTML="On";
			        				
			        			}
			        			propsGrid.setSource(CASCOWave_HeightContoursSettingValue);
			        			CASCOWave_HeightContoursOverlays.mergeNewParams({'styles':result});
			        			Ext.MessageBox.alert('Status', result);

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};




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

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

			        			}



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

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

			        			}



			        		}
			        		]
			        },
			        

			        ],

		}]

};