/*
 * Interactive METEOSAT
 * Copyright(c) 2010-2011, Advanced Studies & Research Center
 * Author: Vasile Craciunescu
 * vasile.craciunescu@asrc.ro
 *
 */

var mapPanel;
var map;
var westPanel;
var infoContainer;
var ir108;
var vis08;
var observatii;
function initializare() {
	Ext.QuickTips.init();
	
//vars
	var navigationHistoryControl = new OpenLayers.Control.NavigationHistory();
	var loadingpanel = new OpenLayers.Control.LoadingPanel();
	var controlZoomBox = new OpenLayers.Control.ZoomBox({CLASS_NAME:'zoomIn'});
	var navigation = new OpenLayers.Control.Navigation();
	var options = {
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",		
		maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
		controls:
		[
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.KeyboardDefaults(),
			new OpenLayers.Control.Attribution(),
			controlZoomBox,
			navigation,
			navigationHistoryControl
		]
	};
	map = new OpenLayers.Map('map', options);
	map.addControl(loadingpanel);
	var zoom = 4;	
	var lat = 50.5;
	var lon = 8;


//layers definition
	var gmapMap = new OpenLayers.Layer.Google(
		"Google Map",
		{
			minZoomLevel: 3,
			maxZoomLevel: 7,
			type: G_NORMAL_MAP,
			iconCls: "street_icon",			
			sphericalMercator:true
		}
	);	

	var gmapPhysical = new OpenLayers.Layer.Google(
		"Google Physical",
		{
			minZoomLevel: 3,
			maxZoomLevel: 7,
			type: G_PHYSICAL_MAP,
			iconCls: "dem_icon",
			sphericalMercator:true
		}
	);
	
	var gmapSatellite = new OpenLayers.Layer.Google(
		"Google Satellite",
		{
			minZoomLevel: 3,
			maxZoomLevel: 7,			
			type: G_SATELLITE_MAP,
			iconCls: "satellite_icon",			
			sphericalMercator:true
		}
	);

	var osm = new OpenLayers.Layer.OSM("OpenStreetMap", {iconCls: "osm_icon"});

	var osm = new OpenLayers.Layer.OSM.Mapnik(
		"OpenStreetMap",
		{
			//resolutions: [1222.99245234375, 2445.9849046875, 4891.969809375, 9783.93961875, 19567.8792375],
			//zoomOffset: 3,
			//numZoomLevels: 5,
			minZoomLevel: 3,
			maxZoomLevel: 7,
			iconCls: "osm_icon",
			//attribution: '<a href="http://www.openstreetmap.org" class="osm" target="_blank">(c) OpenStreetMap and contributors, CC-BY-SA</a>',			
			sphericalMercator:true
		});  

	var ir016 = new OpenLayers.Layer.Image(
		'NIR 1.6 (2024-04-28 09:00)',		'data/meteosat/google/ir016_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			qtip: "Near Infrared Spectral Channel 1.6 &mu;m, band 3",
			iconCls: "grayscale_icon",			
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	);
	
	var vis08 = new OpenLayers.Layer.Image(
		'VIS 0.8 (2024-04-28 09:00)',		'data/meteosat/google/vis08_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			qtip: "Visible Channel 0.8 &mu;m, band 2",
			iconCls: "grayscale_icon",			
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	);	
	
	var rgb = new OpenLayers.Layer.Image(
		'RGB (2024-04-28 09:00)',		'data/meteosat/google/rgb_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			iconCls: "rgb_icon",
			qtip: "Natural Color RGB: Red = NIR 1.6, Green = VIS 0.8, Blue = VIS 0.6",
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	);	

	var ir108 = new OpenLayers.Layer.Image(
		'IR 10.8 (2024-04-28 09:00)',		'data/meteosat/google/ir108_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			qtip: "Infrared Spectral Channel 10.8 &mu;m",
			iconCls: "grayscale_icon",
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	);

	var vis06 = new OpenLayers.Layer.Image(
		'VIS 0.6 (2024-04-28 09:00)',		'data/meteosat/google/vis06_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			qtip: "Visible Channel 0.6 &mu;m, band 1",
			iconCls: "grayscale_icon",			
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	);

	var wv062 = new OpenLayers.Layer.Image(
		'WV 6.2 (2024-04-28 09:00)',		'data/meteosat/google/wv062_google.jpg',
		new OpenLayers.Bounds(-4462646, 3549692, 6288081, 10506851),
		new OpenLayers.Size(1389, 899),
		{
			'maxResolution': "auto",
			isBaseLayer: false,
			qtip: "Water Vapour Channel 6.2 &mu;m",	
			iconCls: "grayscale_icon",		
			attribution: '<a href="http://www.eumetsat.int/" class="eumetsat" target="_blank">EUMETSAT</a>'
		}
	); 

	ir108.setOpacity(0.75);
	vis06.setOpacity(0.75);
	wv062.setOpacity(0.75);
	rgb.setOpacity(0.75);
	ir016.setOpacity(0.75);
	vis08.setOpacity(0.75);							

	var logo_asrc = new OpenLayers.Layer.Vector('ASRC', { 
    	'attribution': '<a href="http://www.asrc.ro" target="_blank" style="" id="asrc"><img src="images/logo_asrc.png" /></a>' 
	});

	map.addLayers([logo_asrc, rgb, ir108, wv062, ir016, vis08, vis06, gmapPhysical, gmapSatellite, gmapMap, osm]);

	var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
	map.setCenter (lonLat, zoom);
	vis06.setVisibility(false);
	wv062.setVisibility(false);
	ir108.setVisibility(false);
	ir016.setVisibility(false);
	vis08.setVisibility(false);		
	
	var today = new Date();
	addGlobeMin('');
	addGlobeMax('');
	addGlobeMean('');			
	addObsYahoo('');	
	addObs('');	

// Tools panel
	var tools = new Ext.Toolbar({
		items: [new GeoExt.Action({
			control: new OpenLayers.Control.ZoomIn(),
			map: map,
			iconCls: 'tool_zoom_in',
			tooltip: 'Zoom in'
		}), new GeoExt.Action({
			control: new OpenLayers.Control.ZoomOut(),
			map: map,
			iconCls: 'tool_zoom_out',
			tooltip: 'Zoom out'
		}), new GeoExt.Action({
			cls: "execute",
			handler: function() {
				map.zoomToExtent(new OpenLayers.Bounds(-4676723, 3869548, 6457400, 10180189));
				var lonLat = new OpenLayers.LonLat(890338, 7024868);
				map.setCenter (lonLat, 1);					
			},
			map: map,
			iconCls: 'tool_zoom_all',
			tooltip: 'Zoom out to maximum extent'
		}), new Ext.Button({
			control: new OpenLayers.Control.ZoomBox(),
			map: map,
			iconCls: 'tool_zoom_box',
			tooltip: 'Zoom box',
			enableToggle: true,
			toggleGroup: "zoom_pan_toggle",
			allowDepress: true,
			toggleHandler: function (a, b) {
				if (b) {
					controlZoomBox.activate();
					navigation.deactivate()
				} else {
					controlZoomBox.deactivate();
					navigation.activate()
				}
			}
		}), new GeoExt.Action({
			iconCls: 'tool_zoom_previous',
			tooltip: 'Previous zoom',
			control: navigationHistoryControl.previous
		}), new GeoExt.Action({
			iconCls: 'tool_zoom_next',
			tooltip: 'Next zoom',
			control: navigationHistoryControl.next
		}), new GeoExt.Action({
			control: new OpenLayers.Control.SelectFeature([imObs, imObsYahoo, globeMinObs, globeMaxObs, globeMeanObs], {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}),
			map: map,
			iconCls: 'tool_pan',
			tooltip: 'Pan map',
			enableToggle: true,
			toggleGroup: "zoom_pan_toggle",
			pressed: true,
			allowDepress: false
		}),
		'-',
		{
			iconCls: 'tool_geostationary_view',
			tooltip: 'Switch to Geostationary View',
			text: 'Switch to Geostationary View',			
			cls: "execute",
			handler: function() {
				window.location = 'geostationary_view.php?lang=en';
			}
		},				
		{
		   xtype: 'tbfill'
		},
		{
			xtype: 'datefield',
			name: 'archiveDate',
			id: 'archiveDate',
			minValue:'2010-06-06',
			format: 'Y-m-d',
			maxValue: today,
			emptyText: 'pick a date',
			listeners: {
			select: function(frm){
				dataSelectata = frm.getValue();
				data = dataSelectata.format('Y-m-d');
				data2 = dataSelectata.format('d/m/y');
				dataCurenta = new Date();
				var zi = dataCurenta.getDate();
				if (zi < 10)
					zi = '0' + zi;
				var luna = dataCurenta.getMonth();
				luna++;
				if (luna < 10)
					luna = '0' + luna;				
				var an = dataCurenta.getFullYear();
				dataCurenta = an + "-" + luna + "-" + zi;
				var obsDate = dataSelectata.format('Y-m-d');
				if (dataCurenta != data)
				{
					ir108.setUrl('data/meteosat/google/' + data + '/ir108_google.jpg');
					vis06.setUrl('data/meteosat/google/' + data + '/vis06_google.jpg');
					wv062.setUrl('data/meteosat/google/' + data + '/wv062_google.jpg');
					rgb.setUrl('data/meteosat/google/' + data + '/rgb_google.jpg');
					ir016.setUrl('data/meteosat/google/' + data + '/ir016_google.jpg');
					vis08.setUrl('data/meteosat/google/' + data + '/vis08_google.jpg');
					ir108.setName('IR 10.8 ('+ data + ' 09:00)');
					vis06.setName('VIS 0.6 ('+ data + ' 09:00)');
					wv062.setName('WV 6.2 ('+ data + ' 09:00)');
					rgb.setName('RGB ('+ data + ' 09:00)');
					ir016.setName('NIR 1.6 ('+ data + ' 09:00)');
					vis08.setName('VIS 0.8 ('+ data + ' 09:00)');
					globeMinObs.setUrl("get-globe-geojson.php?tempType=min&coordType=wgs84&date=" + obsDate);
					globeMinObs.setName("GLOBE minimum temperature (" + obsDate + ")");
					globeMaxObs.setUrl("get-globe-geojson.php?tempType=max&coordType=wgs84&date=" + obsDate);
					globeMaxObs.setName("GLOBE maximum temperature (" + obsDate + ")");	
					globeMeanObs.setUrl("get-globe-geojson.php?tempType=mean&coordType=wgs84&date=" + obsDate);
					globeMeanObs.setName("GLOBE mean temperature (" + obsDate + ")");					
				}
				else
				{
					ir108.setUrl('data/meteosat/google/ir108_google.jpg');
					vis06.setUrl('data/meteosat/google/vis06_google.jpg');
					wv062.setUrl('data/meteosat/google/wv062_google.jpg');
					rgb.setUrl('data/meteosat/google/rgb_google.jpg');
					ir016.setUrl('data/meteosat/google/ir016_google.jpg');
					vis08.setUrl('data/meteosat/google/vis08_google.jpg');
					ir108.setName('IR 10.8 (2024-04-28 09:00)');					vis06.setName('VIS 0.6 (2024-04-28 09:00)');					wv062.setName('WV 6.2 (2024-04-28 09:00)');					rgb.setName('RGB (2024-04-28 09:00)');					ir016.setName('NIR 1.6 (2024-04-28 09:00)');					vis08.setName('VIS 0.8 (2024-04-28 09:00)');					globeMinObs.setUrl("get-globe-geojson.php?tempType=min&coordType=wgs84&date=" + obsDate);
					globeMinObs.setName("GLOBE minimum temperature (yesterday)");
					globeMaxObs.setUrl("get-globe-geojson.php?tempType=max&coordType=wgs84&date=" + obsDate);
					globeMaxObs.setName("GLOBE maximum temperature (yesterday)");	
					globeMeanObs.setUrl("get-globe-geojson.php?tempType=mean&coordType=wgs84&date=" + obsDate);
					globeMeanObs.setName("GLOBE mean temperature (yesterday)");					
				}
				var obsDate = dataSelectata.format('Y-m-d');													
				imObs.setUrl("get-geojson.php?lang=en&layerType=im&coordType=wgs84&date=" + obsDate);
				imObs.setName("Meteorological observations (" + obsDate + ")");
				imObsYahoo.setUrl("get-geojson.php?lang=en&layerType=yahoo&coordType=wgs84&date=" + obsDate);
				imObsYahoo.setName("Yahoo! Weather (" + obsDate + " 09:00 AM)");
				loadObservations(obsDate);
				infoPanelText = '<div id="info"><p>Click on the symbols (map or table bellow) to get more detailed information about meteorological observations.</p><br />';
				infoPanelText += '<table style="width: 270px; font-size: 11px">';
				i = 0;
				observatii.on('load',function(msg) {
					observatii.each(function(msg){
						if(i % 2 == 0)
							backgroundColor = '#eff3fa';
						else
							backgroundColor = '#f1f5ec';
						infoPanelText += '<tr>';
						infoPanelText += '<td style="height: 52px; background-color: ' + backgroundColor + '"><b>School</b>: ' + msg.get("schoolname") + '<br /><b>Date</b>: ' + msg.get("date") + '<br /><b>Time</b>: ' + msg.get("time") + '<br /></td>';
						infoPanelText += '<td style="background-color: ' + backgroundColor + '"><center><a href="javascript:displayObservationDetails(' + msg.get("obsId") + ')"><img src="' + msg.get("imgName") + '" border="0" /></a></center></td>';
						infoPanelText += '</tr>';
						i++;
					});
					infoPanelText += '</table>';
					infoPanelText += '</div>';
					infoContainer.body.update(infoPanelText);
				})				
			}}
		}]	
	});

Ext.override(Ext.DatePicker, {
	todayText : 'Today', 
	okText : 'Ok', 
	cancelText : 'Cancel', 
	todayTip : '{0} (Spacebar)', 
	minText : 'This date is before the minimum date', 
	maxText : 'This date is after the maximum date', 
	nextText : 'Next Month (Control+Right)', 
	prevText : 'Previous Month (Control+Left)', 
	monthYearText : 'Choose a month (Control+Up/Down to move years)', 
	monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
	dayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
});

//slider
	var slider = new GeoExt.LayerOpacitySlider({
		width: 165,
		decimalPrecision: 1,
		increment: 10,
		value: 50,
		disabled: true,
		layer: null,
		plugins: new GeoExt.LayerOpacitySliderTip({template: '<div>Transparency: {opacity}%</div>'}),		
		listeners: {
			change: function (a, b) {
				this.layer.setOpacity(b / 100)
			}
		}
	});

//slider adjustment 
	var sliderAdjust = function (b) {
		if (!b.hasListener("radiochange")) {
			b.on("radiochange", function (a) {
				slider.layer = a.layer;
				slider.setValue(a.layer.opacity * 100);
				slider.enable()
			})
		}
	};

//mapPanel
	mapPanel = new GeoExt.MapPanel({
		border: true,
		tbar: tools,
		region: "center",
		map: map,
		zoom: 1,
		center: [890338, 7024868],
		extent: [-4676723, 3869548, 6457400, 10180189]
	});

	var LayerNodeUI = Ext.extend(
    	GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin()
	);
      
	var treeConfig = [{
		nodeType: "gx_overlaylayercontainer",
		text: "Observations",
		isLeaf: false,
		loader: {
			baseAttrs: {
			},			
			filter: function(record) {
				var layer = record.get("layer");
				this.baseAttrs.iconCls = layer.iconCls;
				return (layer.name == "Meteorological observations (today)" || layer.name == "Yahoo! Weather (today 09:00 AM)" || layer.name == "GLOBE minimum temperature (yesterday)" || layer.name == "GLOBE maximum temperature (yesterday)" || layer.name == "GLOBE mean temperature (yesterday)") 
			}
		},
		expanded: true
	},{
		nodeType: "gx_overlaylayercontainer",
		text: "METEOSAT",
		isLeaf: false,
		loader: {
			baseAttrs: {
				radioGroup: "foo",
				uiProvider: "use_radio"
			},
			filter: function(record) {
				var layer = record.get("layer");
				this.baseAttrs.qtip = layer.qtip;
				this.baseAttrs.iconCls = layer.iconCls;
				return (layer.name.indexOf("VIS 0.6") !== -1 || layer.name.indexOf("WV") !== -1 || layer.name.indexOf("IR 10.8") !== -1 || layer.name.indexOf("RGB") !== -1 || layer.name.indexOf("NIR 1.6") !== -1 || layer.name.indexOf("VIS 0.8") !== -1) 
			}
		},
		expanded: true
	},{
		nodeType: "gx_baselayercontainer",
		text: "Base maps",
		loader: {
			baseAttrs: {
			},
			filter: function(record) {
				var layer = record.get("layer");
				this.baseAttrs.iconCls = layer.iconCls;
				return (layer.name == "Google Map" || layer.name == "Google Physical" || layer.name == "Google Satellite" || layer.name == "OpenStreetMap") 
			}			
		},				
		expanded: true
	}];

//tree panel
	var tree = new Ext.tree.TreePanel({
		plugins:  [new GeoExt.plugins.TreeNodeRadioButton({
            listeners: {
                "radiochange": function(node) {
				slider.layer = node.layer;
				slider.setValue(node.layer.opacity * 100);
				slider.enable()
                }
            }
        })],		
		width: 298,
		loader: new Ext.tree.TreeLoader({
			applyLoader: false,
			uiProviders: {
				"use_radio": LayerNodeUI
			}
		}),
		root: {
			nodeType: "async",
			children: treeConfig
		},
		rootVisible: false,
		lines: false,
		listeners: {
			"insert": sliderAdjust,
			"append": sliderAdjust
		}
	});
 
//layer container
	var layersContainer = new Ext.Panel({
		autoScroll: true,
		border: false,
		title: "Layers",
		items: [tree]
	});

//legend container
	var legendContainer = new Ext.Panel({
		autoScroll: true,
		contentEl: "legend",		
		border: false,
		title: "Legend"
	});	

//help container	
	helpContainer = new Ext.Panel({
		autoScroll: true,
		contentEl: "help",
		border: false,
		title: "Help"
	});

//info container
	infoContainer = new Ext.Panel({
		autoScroll: true,
		contentEl: "info",
		border: false,
		title: "Info"
	});

//credits container	
	creditsContainer = new Ext.Panel({
		autoScroll: true,
		contentEl: "credits",
		border: false,		
		title: "Credits"
	});	

//left panel
	westPanel = new Ext.TabPanel({
        border:true,
        title: 'West Panel',
		width: 300,
		region: 'west',
		activeTab: 0,
		collapsible: true,
		items: [layersContainer, legendContainer, infoContainer, helpContainer, creditsContainer],
		bbar: new Ext.Toolbar({
			id: 'opacityToolbar',
			height: 26,
			style: 'padding-left: 15px;',
			items: ['Layer transparency: ', slider]
		})
	});

//viewport   
	new Ext.Viewport({
		layout: "fit",
		hideBorders: true,
		items: {
			layout: "border",
			deferredRender: false,
			items: [mapPanel, westPanel,{
                region: 'north',
                contentEl: 'header',
                margins: '0 0 5 0'
            }] 
		},
		listeners : {
			afterlayout: function(){
				Ext.get('loader').hide();
				Ext.get('loading-mask').hide();
			}
		}		
		
	});

	osm.events.on({
		moveend: function(e) {
		if (e.zoomChanged) {
			if (map.getZoom() < 3)
				map.zoomIn();
			if (map.getZoom() > 7)
				map.zoomOut();				
			}			
		}
	});
	
	loadObservations ('');
	activeTab = westPanel.getActiveTab();
	westPanel.activate(2);
	westPanel.activate(activeTab.id);
	infoPanelText = '<div id="info"><p>Click on the symbols (map or table bellow) to get more detailed information about meteorological observations.</p><br />';
	infoPanelText += '<table style="width: 270px; font-size: 11px">';
	i = 0;
	observatii.on('load',function(msg) {
		msg.each(function(msg){
			if(i % 2 == 0)
				backgroundColor = '#eff3fa';
			else
				backgroundColor = '#f1f5ec';
			infoPanelText += '<tr>';
			infoPanelText += '<td style="height: 52px; background-color: ' + backgroundColor + '"><b>School</b>: ' + msg.get("schoolname") + '<br /><b>Date</b>: ' + msg.get("date") + '<br /><b>Time</b>: ' + msg.get("time") + '<br /></td>';
			infoPanelText += '<td style="background-color: ' + backgroundColor + '"><center><a href="javascript:displayObservationDetails(' + msg.get("obsId") + ')"><img src="' + msg.get("imgName") + '" border="0" /></a></center></td>';
			infoPanelText += '</tr>';
			i++;
		});
		infoPanelText += '</table>';
		infoPanelText += '</div>';
		infoContainer.body.update(infoPanelText);
	})
};

function addObs(obsDate)
{
//Style
	var style = new OpenLayers.Style(
        {
            graphicWidth: "${symbolWidth}",
            graphicHeight: "${symbolHeight}",
			graphicXOffset: "${symbolOffsetX}",
			graphicYOffset: "${symbolOffsetY}",
			externalGraphic: "${imgName}"
        }
    ); 	
	imObs = new OpenLayers.Layer.GML("Meteorological observations (today)", "get-geojson.php?lang=en&layerType=im&coordType=wgs84&date=" + obsDate,
		{ 
			format: OpenLayers.Format.GeoJSON,
			projection: new OpenLayers.Projection("EPSG:4326"),
			iconCls: "im_icon",
			styleMap: new OpenLayers.StyleMap(style)
		}
	);
	map.addLayer(imObs);
	imObs.setOpacity(1);
	return true;
}

function addGlobeMin(obsDate)
{
//Style
	var style = new OpenLayers.Style(
        {
			graphicWidth: 19,
			graphicHeight: 45,
			graphicYOffset: -23,
			externalGraphic: "${iconMin}"
        }
    ); 	
	globeMinObs = new OpenLayers.Layer.GML("GLOBE minimum temperature (yesterday)", "get-globe-geojson.php?tempType=min&coordType=wgs84&date=" + obsDate,
		{ 
			format: OpenLayers.Format.GeoJSON,
			projection: new OpenLayers.Projection("EPSG:4326"),
			iconCls: "globemin_icon",			
			styleMap: new OpenLayers.StyleMap(style)
		}
	);
	map.addLayer(globeMinObs);
	globeMinObs.setOpacity(1);
	globeMinObs.setVisibility(false);
	return true;
}

function addGlobeMean(obsDate)
{
//Style
	var style = new OpenLayers.Style(
        {
			graphicWidth: 19,
			graphicHeight: 45,
			graphicYOffset: -23,
			externalGraphic: "${iconMean}"
        }
    ); 	
	globeMeanObs = new OpenLayers.Layer.GML("GLOBE mean temperature (yesterday)", "get-globe-geojson.php?tempType=mean&coordType=wgs84&date=" + obsDate,
		{ 
			format: OpenLayers.Format.GeoJSON,
			projection: new OpenLayers.Projection("EPSG:4326"),
			iconCls: "globemean_icon",			
			styleMap: new OpenLayers.StyleMap(style)
		}
	);
	map.addLayer(globeMeanObs);
	globeMeanObs.setOpacity(1);
	globeMeanObs.setVisibility(false);
	return true;
}

function addGlobeMax(obsDate)
{
//Style
	var style = new OpenLayers.Style(
        {
			graphicWidth: 19,
			graphicHeight: 45,
			graphicYOffset: -23,
			externalGraphic: "${iconMax}"
        }
    ); 	
	globeMaxObs = new OpenLayers.Layer.GML("GLOBE maximum temperature (yesterday)", "get-globe-geojson.php?tempType=max&coordType=wgs84&date=" + obsDate,
		{ 
			format: OpenLayers.Format.GeoJSON,
			projection: new OpenLayers.Projection("EPSG:4326"),
			iconCls: "globemax_icon",			
			styleMap: new OpenLayers.StyleMap(style)
		}
	);
	map.addLayer(globeMaxObs);
	globeMaxObs.setOpacity(1);
	globeMaxObs.setVisibility(false);
	return true;
}

function addObsYahoo(obsDate)
{
//Style
	var style = new OpenLayers.Style(
        {
            graphicWidth: "${symbolWidth}",
            graphicHeight: "${symbolHeight}",
			graphicXOffset: "${symbolOffsetX}",
			graphicYOffset: "${symbolOffsetY}",
			externalGraphic: "${imgName}"
        }
    ); 	
	imObsYahoo = new OpenLayers.Layer.GML("Yahoo! Weather (today 09:00 AM)", "get-geojson.php?lang=en&layerType=yahoo&coordType=wgs84&date=",
		{ 
			format: OpenLayers.Format.GeoJSON,
			projection: new OpenLayers.Projection("EPSG:4326"),
			iconCls: "yahoo_icon",
			styleMap: new OpenLayers.StyleMap(style)
		}
	);
	map.addLayer(imObsYahoo);
	imObsYahoo.setVisibility(false);
	return true;
}

function removeLayer(layerName)
{
	map.removeLayer(layerName);
	return true;
}

// select/unselect functions
function onFeatureSelect(feature) {
	selectedFeature = feature;
	westPanel.activate(2);
	if (feature.attributes.lat < 0)
		latType = "South";
	else
		latType = "North";
	if (feature.attributes.lon < 0)
		lonType = "West";
	else
		lonType = "East";
	LatDeg = Math.floor(feature.attributes.lat);
	LatMin = Math.floor((feature.attributes.lat-LatDeg)*60);
	LatSec =  (Math.round((((feature.attributes.lat - LatDeg) - (LatMin/60)) * 60 * 60) * 100) / 100 );
	latDMS =  LatDeg + '&ordm; ' + LatMin + '\' ' + LatSec + '"';
	LonDeg = Math.floor(feature.attributes.lon);
	LonMin = Math.floor((feature.attributes.lon-LonDeg)*60);
	LonSec =  (Math.round((((feature.attributes.lon - LonDeg) - (LonMin/60)) * 60 * 60) * 100) / 100 );
	lonDMS =  LonDeg + '&ordm; ' + LonMin + '\' ' + LonSec + '"';	
	if (feature.attributes.layerType == 'globe')
	{
		var infoPanelText = '<div id="info">';
		infoPanelText += '<center><b>GLOBE temperature observation details</b></center><br/>';
		if (feature.attributes.tempType == 'min')
			infoPanelText += '<img src="' + feature.attributes.iconMin + '" /><br/>';
		if (feature.attributes.tempType == 'max')
			infoPanelText += '<img src="' + feature.attributes.iconMax + '" /><br/>';
		if (feature.attributes.tempType == 'mean')
			infoPanelText += '<img src="' + feature.attributes.iconMean + '" /><br/>';							
		infoPanelText += '<br/>';
		infoPanelText += '<b>School</b>: ' + feature.attributes.schoolName + '<br/>';
		infoPanelText += '<b>Site</b>: ' + feature.attributes.siteName + '<br/>';
		infoPanelText += '<b>Latitude</b>: ' + latDMS + ' ' + latType + '<br/>';
		infoPanelText += '<b>Longitude</b>: ' + lonDMS + ' ' + lonType + '<br/>';
		infoPanelText += '<b>Date</b>: ' + feature.attributes.date + '<br/>';
		infoPanelText += '<b>Minimum temperature</b>: ' + feature.attributes.minTemp + '&ordm; Celsius<br/>';
		infoPanelText += '<b>Maximum temperature</b>: ' + feature.attributes.maxTemp + '&ordm; Celsius<br/>';
		infoPanelText += '<b>Mean temperature</b>: ' + feature.attributes.meanTemp + '&ordm; Celsius<br/>';		
		infoPanelText += '<div/>';
	}
	else
	{
		var infoPanelText = '<div id="info">';
		infoPanelText += '<center><b>Weather observation details</b></center><br/>';
		infoPanelText += '<img src="' + feature.attributes.imgName + '" /><br/>';
		infoPanelText += '<br/>';
		if (feature.attributes.layerType == 'im')		
		{		
			infoPanelText += '<b>Location</b>: ' + feature.attributes.location + '<br/>';
			infoPanelText += '<b>User Country</b>: ' + feature.attributes.country + '<br/>';
			infoPanelText += '<b>User City</b>: ' + feature.attributes.city + '<br/>';
			infoPanelText += '<b>School</b>: ' + feature.attributes.schoolname + '<br/>';
		}
		if (feature.attributes.layerType == 'yahoo')
		{
			infoPanelText += '<b>Country</b>: ' + feature.attributes.country + '<br/>';
			infoPanelText += '<b>City</b>: ' + feature.attributes.city + '<br/>';			
			infoPanelText += '<b>Source</b>: Yahoo! Weather<br/>';
		}						
		infoPanelText += '<b>Latitude</b>: ' + latDMS + ' ' + latType + '<br/>';
		infoPanelText += '<b>Longitude</b>: ' + lonDMS + ' ' + lonType + '<br/>';
		infoPanelText += '<b>Elevation</b>: ' + feature.attributes.elevation + ' m<br/>';		
		infoPanelText += '<b>Date</b>: ' + feature.attributes.date + '<br/>';
		infoPanelText += '<b>Time</b>: ' + feature.attributes.time + '<br/>';			
		infoPanelText += '<b>Current conditions</b>: ' + feature.attributes.cc_name_en + '<br/>';
		infoPanelText += '<b>Wind direction</b>: ' + feature.attributes.windDirection + '&ordm;<br/>';
		if (feature.attributes.windSpeedUnits == 1)
		{
			windSpeedKnots = feature.attributes.windSpeed;
			windSpeedKnots = roundNumber(windSpeedKnots, 1);
			windSpeedM = feature.attributes.windSpeed * 0.514444444;
			windSpeedM = roundNumber(windSpeedM, 1);
		}
		else
		{
			windSpeedKnots = feature.attributes.windSpeed * 1.94384449;
			windSpeedKnots = roundNumber(windSpeedKnots, 1);				
			windSpeedM = feature.attributes.windSpeed;
			windSpeedM = roundNumber(windSpeedM, 1);				
		}
		infoPanelText += '<b>Wind speed</b>: ' + windSpeedKnots + ' Knots / ' + windSpeedM +' m/s<br/>';
		infoPanelText += '<b>Cloud cover</b>: ' + feature.attributes.ce_name_en + ' (' + feature.attributes.cloudcName +')<br/>';
		infoPanelText += '<b>Temperature</b>: ' + feature.attributes.temperature + '&ordm; Celsius<br/>';
		infoPanelText += '<b>Additional observations</b>: ' + feature.attributes.additionalObservations + '<br/>';
		infoPanelText += '<b>Photo</b>:<br/>';
		if 	(feature.attributes.photo == 0)		
			infoPanelText += '<center><img src="photos/nophoto.jpg"  title="No photo available" alt="No photo available" /></center><br/>';
		else
			infoPanelText += '<center><a href="photos/' + feature.attributes.obsId + '.jpg" target="blank_"><img src="photos/' + feature.attributes.obsId + '_t.jpg" border="0" title="Click to see full size photo" alt="Click to see full size photo" /></a></center><br/>';			
		infoPanelText += '<table style="width: 270px; font-size: 11px">';
		i = 0;
		observatii.each(function(msg){
			if(i % 2 == 0)
				backgroundColor = '#eff3fa';
			else
				backgroundColor = '#f1f5ec';
			infoPanelText += '<tr>';
			infoPanelText += '<td style="height: 52px; background-color: ' + backgroundColor + '"><b>School</b>: ' + msg.get("schoolname") + '<br /><b>Date</b>: ' + msg.get("date") + '<br /><b>Time</b>: ' + msg.get("time") + '<br /></td>';
			infoPanelText += '<td style="background-color: ' + backgroundColor + '"><center><a href="javascript:displayObservationDetails(' + msg.get("obsId") + ')"><img src="' + msg.get("imgName") + '" border="0" /></a></center></td>';
			infoPanelText += '</tr>';
			i++;
		});
		infoPanelText += '</table>';
		infoPanelText += '</div>';		
	}			
	infoContainer.body.update(infoPanelText);
}

function onFeatureUnselect(feature) {	
	infoPanelText = '<div id="info"><p>Click on the symbols (map or table bellow) to get more detailed information about meteorological observations.</p><br />';
	infoPanelText += '<table style="width: 270px; font-size: 11px">';
	i = 0;
	observatii.each(function(msg){
		if(i % 2 == 0)
			backgroundColor = '#eff3fa';
		else
			backgroundColor = '#f1f5ec';
		infoPanelText += '<tr>';
		infoPanelText += '<td style="height: 52px; background-color: ' + backgroundColor + '"><b>School</b>: ' + msg.get("schoolname") + '<br /><b>Date</b>: ' + msg.get("date") + '<br /><b>Time</b>: ' + msg.get("time") + '<br /></td>';
		infoPanelText += '<td style="background-color: ' + backgroundColor + '"><center><a href="javascript:displayObservationDetails(' + msg.get("obsId") + ')"><img src="' + msg.get("imgName") + '" border="0" /></a></center></td>';
		infoPanelText += '</tr>';
		i++;
	});
	infoPanelText += '</table>';
	infoPanelText += '</div>';			
	infoContainer.body.update(infoPanelText);	
}

function loadObservations(date){	
	observatii = new Ext.data.JsonStore({
		url: 'get-json.php?lang=en&date=' + date,
		root: 'features',
		successProperty: 'success',
		id: 'obsId',
		fields: [{name: 'windDirection'}, {name: 'cc_name_en'}, {name: 'lat'}, {name: 'lon'}, {name: 'windSpeed'}, {name: 'elevation'}, {name: 'ce_name_en'}, {name: 'cloudcName'}, {name: 'additionalObservations'}, {name: 'temperature'}, {name: 'schoolname'}, {name: 'imgName'}, {name: 'city'}, {name: 'windSpeedUnits'}, {name: 'country'}, {name: 'location'}, {name: 'date'}, {name: 'time'}, {name: 'photo'}, {name: 'obsId'}]
});
observatii.load();
}

function displayObservationDetails(id){
	var selectedObservation = observatii.getById(id);
		var infoPanelText = '<div id="info">';
		infoPanelText += '<center><b>Weather observation details</b></center><br/>';
		infoPanelText += '<img src="' + selectedObservation.get("imgName") + '" /><br/>';
		infoPanelText += '<br/>';
		infoPanelText += '<b>Location</b>: ' + selectedObservation.get("location") + '<br/>';		
		infoPanelText += '<b>User Country</b>: ' + selectedObservation.get("country") + '<br/>';
		infoPanelText += '<b>User City</b>: ' + selectedObservation.get("city") + '<br/>';	
		infoPanelText += '<b>School</b>: ' + selectedObservation.get("schoolname") + '<br/>';
		if (selectedObservation.get("lat") < 0)
			latType = "South";
		else
			latType = "North";
		if (selectedObservation.get("lon") < 0)
			lonType = "West";
		else
			lonType = "East";
		LatDeg = Math.floor(selectedObservation.get("lat"));
		LatMin = Math.floor((selectedObservation.get("lat")-LatDeg)*60);
		LatSec =  (Math.round((((selectedObservation.get("lat") - LatDeg) - (LatMin/60)) * 60 * 60) * 100) / 100 );
		latDMS =  LatDeg + '&ordm; ' + LatMin + '\' ' + LatSec + '"';
		LonDeg = Math.floor(selectedObservation.get("lon"));
		LonMin = Math.floor((selectedObservation.get("lon")-LonDeg)*60);
		LonSec =  (Math.round((((selectedObservation.get("lon") - LonDeg) - (LonMin/60)) * 60 * 60) * 100) / 100 );
		lonDMS =  LonDeg + '&ordm; ' + LonMin + '\' ' + LonSec + '"';						
		infoPanelText += '<b>Latitude</b>: ' + latDMS + ' ' + latType + '<br/>';
		infoPanelText += '<b>Longitude</b>: ' + lonDMS + ' ' + lonType + '<br/>';
		infoPanelText += '<b>Elevation</b>: ' + selectedObservation.get("elevation") + ' m<br/>';		
		infoPanelText += '<b>Date</b>: ' + selectedObservation.get("date") + '<br/>';
		infoPanelText += '<b>Time</b>: ' + selectedObservation.get("time") + '<br/>';			
		infoPanelText += '<b>Current conditions</b>: ' + selectedObservation.get("cc_name_en") + '<br/>';
		infoPanelText += '<b>Wind direction</b>: ' + selectedObservation.get("windDirection") + '&ordm;<br/>';
		if (selectedObservation.get("windSpeedUnits") == 1)
		{
			windSpeedKnots = selectedObservation.get("windSpeed");
			windSpeedKnots = roundNumber(windSpeedKnots, 1);
			windSpeedM = selectedObservation.get("windSpeed") * 0.514444444;
			windSpeedM = roundNumber(windSpeedM, 1);
		}
		else
		{
			windSpeedKnots = selectedObservation.get("windSpeed") * 1.94384449;
			windSpeedKnots = roundNumber(windSpeedKnots, 1);				
			windSpeedM = selectedObservation.get("windSpeed");
			windSpeedM = roundNumber(windSpeedM, 1);				
		}
		infoPanelText += '<b>Wind speed</b>: ' + windSpeedKnots + ' Knots / ' + windSpeedM +' m/s<br/>';
		infoPanelText += '<b>Cloud cover</b>: ' + selectedObservation.get("ce_name_en") + ' (' + selectedObservation.get("cloudcName") +')<br/>';
		infoPanelText += '<b>Temperature</b>: ' + selectedObservation.get("temperature") + '&ordm; Celsius<br/>';
		infoPanelText += '<b>Additional observations</b>: ' + selectedObservation.get("additionalObservations") + '<br/>';
		infoPanelText += '<b>Photo</b>:<br/>';
		if 	(selectedObservation.get("photo") == 0)		
			infoPanelText += '<center><img src="photos/nophoto.jpg"  title="No photo available" alt="No photo available" /></center><br/>';
		else
			infoPanelText += '<center><a href="photos/' + selectedObservation.get("obsId") + '.jpg" target="blank_"><img src="photos/' + selectedObservation.get("obsId") + '_t.jpg" border="0" title="Click to see full size photo" alt="Click to see full size photo" /></a></center><br/>';			
		infoPanelText += '<table style="width: 270px; font-size: 11px">';
		i = 0;
		observatii.each(function(msg){
			if(i % 2 == 0)
				backgroundColor = '#eff3fa';
			else
				backgroundColor = '#f1f5ec';
			infoPanelText += '<tr>';
			infoPanelText += '<td style="height: 52px; background-color: ' + backgroundColor + '"><b>School</b>: ' + msg.get("schoolname") + '<br /><b>Date</b>: ' + msg.get("date") + '<br /><b>Time</b>: ' + msg.get("time") + '<br /></td>';
			infoPanelText += '<td style="background-color: ' + backgroundColor + '"><center><a href="javascript:displayObservationDetails(' + msg.get("obsId") + ')"><img src="' + msg.get("imgName") + '" border="0" /></a></center></td>';
			infoPanelText += '</tr>';
			i++;
		});
		infoPanelText += '</table>';
		infoPanelText += '</div>';			
		infoContainer.body.update(infoPanelText);
		activeTab = westPanel.getActiveTab();		
		activeTab.body.dom.scrollTop = 0;
}

function roundNumber(num, dec) {
	var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	return result;
}

function dump(arr,level) {
	var dumped_text = "";
	if(!level) level = 0;
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object') { //Array/Hashes/Objects 
		for(var item in arr) {
			var value = arr[item];
			
			if(typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,level+1);
			} else {
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}