var map;
var centerLatitude = 51.330455;
var centerLongitude = -0.729027;
var startZoom = 11;
var markers_array = Array();
var marker_tracker = '';
//----------------------------------------------
var IconMarker1 = new GIcon();
IconMarker1.image = 'images/marker_1.png';
IconMarker1.iconSize = new GSize(20, 34);
IconMarker1.iconAnchor = new GPoint(9, 34);
IconMarker1.infoWindowAnchor = new GPoint(9, 2);

var IconMarker1_Selected = new GIcon();
IconMarker1_Selected.image = 'images/marker_1_selected.png';
IconMarker1_Selected.iconSize = new GSize(20, 34);
IconMarker1_Selected.iconAnchor = new GPoint(9, 34);
IconMarker1_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarker2 = new GIcon();
IconMarker2.image = 'images/marker_2.png';
IconMarker2.iconSize = new GSize(20, 34);
IconMarker2.iconAnchor = new GPoint(9, 34);
IconMarker2.infoWindowAnchor = new GPoint(9, 2);

var IconMarker2_Selected = new GIcon();
IconMarker2_Selected.image = 'images/marker_2_selected.png';
IconMarker2_Selected.iconSize = new GSize(20, 34);
IconMarker2_Selected.iconAnchor = new GPoint(9, 34);
IconMarker2_Selected.infoWindowAnchor = new GPoint(9, 2);

var IconMarker3 = new GIcon();
IconMarker3.image = 'images/marker_3.png';
IconMarker3.shadow = 'images/marker_shadow.png';
IconMarker3.iconSize = new GSize(20, 34);
IconMarker3.iconAnchor = new GPoint(9, 34);
IconMarker3.infoWindowAnchor = new GPoint(9, 2);

var IconMarker3_Selected = new GIcon();
IconMarker3_Selected.image = 'images/marker_3_selected.png';
IconMarker3_Selected.iconSize = new GSize(20, 34);
IconMarker3_Selected.iconAnchor = new GPoint(9, 34);
IconMarker3_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarker4 = new GIcon();
IconMarker4.image = 'images/marker_4.png';
IconMarker4.iconSize = new GSize(20, 34);
IconMarker4.iconAnchor = new GPoint(9, 34);
IconMarker4.infoWindowAnchor = new GPoint(9, 2);

var IconMarker4_Selected = new GIcon();
IconMarker4_Selected.image = 'images/marker_4_selected.png';
IconMarker4_Selected.iconSize = new GSize(20, 34);
IconMarker4_Selected.iconAnchor = new GPoint(9, 34);
IconMarker4_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarker5 = new GIcon();
IconMarker5.image = 'images/marker_5.png';
IconMarker5.iconSize = new GSize(20, 34);
IconMarker5.iconAnchor = new GPoint(9, 34);
IconMarker5.infoWindowAnchor = new GPoint(9, 2);


var IconMarker5_Selected = new GIcon();
IconMarker5_Selected.image = 'images/marker_5_selected.png';
IconMarker5_Selected.iconSize = new GSize(20, 34);
IconMarker5_Selected.iconAnchor = new GPoint(9, 34);
IconMarker5_Selected.infoWindowAnchor = new GPoint(9, 2);

var IconMarker6 = new GIcon();
IconMarker6.image = 'images/marker_6.png';
IconMarker6.iconSize = new GSize(20, 34);
IconMarker6.iconAnchor = new GPoint(9, 34);
IconMarker6.infoWindowAnchor = new GPoint(9, 2);

var IconMarker6_Selected = new GIcon();
IconMarker6_Selected.image = 'images/marker_6_selected.png';
IconMarker6_Selected.iconSize = new GSize(20, 34);
IconMarker6_Selected.iconAnchor = new GPoint(9, 34);
IconMarker6_Selected.infoWindowAnchor = new GPoint(9, 2);

var IconMarker7 = new GIcon();
IconMarker7.image = 'images/marker_7.png';
IconMarker7.iconSize = new GSize(20, 34);
IconMarker7.iconAnchor = new GPoint(9, 34);
IconMarker7.infoWindowAnchor = new GPoint(9, 2);

var IconMarker7_Selected = new GIcon();
IconMarker7_Selected.image = 'images/marker_7_selected.png';
IconMarker7_Selected.iconSize = new GSize(20, 34);
IconMarker7_Selected.iconAnchor = new GPoint(9, 34);
IconMarker7_Selected.infoWindowAnchor = new GPoint(9, 2);

var IconMarker8 = new GIcon();
IconMarker8.image = 'images/marker_8.png';
IconMarker8.iconSize = new GSize(20, 34);
IconMarker8.iconAnchor = new GPoint(9, 34);
IconMarker8.infoWindowAnchor = new GPoint(9, 2);

var IconMarker8_Selected = new GIcon();
IconMarker8_Selected.image = 'images/marker_8_selected.png';
IconMarker8_Selected.iconSize = new GSize(20, 34);
IconMarker8_Selected.iconAnchor = new GPoint(9, 34);
IconMarker8_Selected.infoWindowAnchor = new GPoint(9, 2);

var IconMarker9 = new GIcon();
IconMarker9.image = 'images/marker_9.png';
IconMarker9.iconSize = new GSize(20, 34);
IconMarker9.iconAnchor = new GPoint(9, 34);
IconMarker9.infoWindowAnchor = new GPoint(9, 2);

var IconMarker9_Selected = new GIcon();
IconMarker9_Selected.image = 'images/marker_9_selected.png';
IconMarker9_Selected.iconSize = new GSize(20, 34);
IconMarker9_Selected.iconAnchor = new GPoint(9, 34);
IconMarker9_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarker10 = new GIcon();
IconMarker10.image = 'images/marker_10.png';
IconMarker10.iconSize = new GSize(20, 34);
IconMarker10.iconAnchor = new GPoint(9, 34);
IconMarker10.infoWindowAnchor = new GPoint(9, 2);

var IconMarker10_Selected = new GIcon();
IconMarker10_Selected.image = 'images/marker_10_selected.png';
IconMarker10_Selected.iconSize = new GSize(20, 34);
IconMarker10_Selected.iconAnchor = new GPoint(9, 34);
IconMarker10_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarker0 = new GIcon();
IconMarker0.image = 'images/marker_0.png';
IconMarker0.iconSize = new GSize(20, 34);
IconMarker0.iconAnchor = new GPoint(9, 34);
IconMarker0.infoWindowAnchor = new GPoint(9, 2);

var IconMarker0_Selected = new GIcon();
IconMarker0_Selected.image = 'images/marker_0_selected.png';
IconMarker0_Selected.iconSize = new GSize(20, 34);
IconMarker0_Selected.iconAnchor = new GPoint(9, 34);
IconMarker0_Selected.infoWindowAnchor = new GPoint(9, 2);


var IconMarkerNO2 = new GIcon();
IconMarkerNO2.image = 'images/marker_no2.png';
IconMarkerNO2.iconSize = new GSize(20, 34);
IconMarkerNO2.iconAnchor = new GPoint(9, 34);
IconMarkerNO2.infoWindowAnchor = new GPoint(9, 2);

var IconMarkerNO2_Selected = new GIcon();
IconMarkerNO2_Selected.image = 'images/marker_no2_selected.png';
IconMarkerNO2_Selected.iconSize = new GSize(20, 34);
IconMarkerNO2_Selected.iconAnchor = new GPoint(9, 34);
IconMarkerNO2_Selected.infoWindowAnchor = new GPoint(9, 2);

//----------------------------------------------
//create the tooltip overlay
function ToolTip(marker,html,width) {
	this.html_ = html;
	this.width_ = (width ? width + 'px' : 'auto');
	this.marker_ = marker;
}

ToolTip.prototype = new GOverlay();

ToolTip.prototype.initialize = function(map) {
	var div = document.createElement("div");
	div.style.display = 'none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
	
	this.map_ = map;
	this.container_ = div;
}

ToolTip.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
}

ToolTip.prototype.copy = function() {
	return new ToolTip(this.html_);
}

ToolTip.prototype.redraw = function(force) {
	if (!force) return;
	
	var pixelLocation = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
	this.container_.innerHTML = this.html_;
	this.container_.style.position = 'absolute';
	this.container_.style.left = (pixelLocation.x+11) + "px";
	this.container_.style.top = (pixelLocation.y-33) + "px";
	this.container_.style.width = this.width_;
	this.container_.style.font = 'bold 10px/10px verdana, arial, sans';
	this.container_.style.border = '1px solid black';
	this.container_.style.background = '#FFFF99';
	this.container_.style.padding = '4px';

	//one line to desired width
	this.container_.style.whiteSpace = 'nowrap';
	if(this.width_ != 'auto') this.container_.style.overflow = 'hidden';
	this.container_.style.display = 'block';
}

GMarker.prototype.ToolTipInstance = null;

GMarker.prototype.openToolTip = function(content) {
	//don't show the tool tip if there is acustom info window
	if(this.ToolTipInstance == null) {
		this.ToolTipInstance = new ToolTip(this,content)
		map.addOverlay(this.ToolTipInstance);
	}
}

GMarker.prototype.closeToolTip = function() {
	if(this.ToolTipInstance != null) {
		map.removeOverlay(this.ToolTipInstance);
		this.ToolTipInstance = null;
	}
}
//---





//----------------------------------------------

function setCenter(newLat, newLong, newZoom) {
	map.setCenter(new GLatLng(newLat, newLong), newZoom);
}//end function

function zoomTo(newLat, newLong, newZoom) {
	map.setCenter(new GLatLng(newLat, newLong), newZoom);
}//end function

function create_markers(markerstype) {

	switch (markerstype) {
		default:
		case "all":
			//output NO2 markers
			for(id in no2_markers) {
				initializePoint(no2_markers[id]);
				//no2_markers[id].hide();
			}//end for
			//output AQ markers
			
			for(id in aql_markers) {
				initializePoint(aql_markers[id]);
				//aql_markers[id].hide();
			}//end for
		
		
		break;
		//-------------------------------------------------------------
		case "aql":
			//output AQ markers
			if (document.getElementById('type_'+markerstype).checked == false) {
				for(id in aql_markers) {
					if (aql_markers[id].site_type == markerstype) {
						aql_markers[id].hide();
					}//end if
				}//end for
				
			} else {
				for(id in aql_markers) {
					if (aql_markers[id].site_type == markerstype) {
						aql_markers[id].show();
					}//end if
				}//end for
			}//end if
			break;
		//-------------------------------------------------------------
		case "no2":
			//output NO2 markers
			if (document.getElementById('type_'+markerstype).checked == false) {
				for(id in no2_markers) {
					if (no2_markers[id].site_type == markerstype) {
						no2_markers[id].hide();
					}//end if
				}//end for
				
			} else {
				for(id in no2_markers) {
					if (no2_markers[id].site_type == markerstype) {
						no2_markers[id].show();
					}//end if
				}//end for
			}//end if
			break;
	}//end switch

	
}//end function


//var deselectCurrent = function() {}; //Empty function

function initializePoint(pointData) {
	var visible = false;
	
	var point = new GLatLng(pointData.latitude, pointData.longitude);
	var overall_index = pointData.overall_index;
	
	//get the selected site id - from the url or internal
	var site_id_url = get_selected_siteid();
	var site_id_int = marker_tracker;
	
	//check whether this marker should be displayed
	if (site_id_int != '' && site_id_int == pointData.site_id) {
		overall_index = overall_index+'_Selected';
	} else if (site_id_url != '' && site_id_url == site_id_int && site_id_url == pointData.site_id) {
		overall_index = overall_index+'_Selected';
	} else if (site_id_url != '' && site_id_url == pointData.site_id && site_id_int == '') {
		overall_index = overall_index+'_Selected';
	}//end if
	
	//create the marker
	var marker = new GMarker(point, eval("IconMarker"+overall_index));
	
	var focusPoint = function() {
		marker_tracker = pointData.site_id;
		
		//clear overlays and then re-make them 
		map.clearOverlays();
		create_markers('all');
		create_markers('no2');
		create_markers('aql');

		//marker.openInfoWindowHtml(pointData.description);
		
		//Use GDownloadURL to get the data for the balloon
		addBalloonContent(marker, pointData.site_id, pointData.site_type);
		document.location='#data'
		return false;
	}//end function
	
	GEvent.addListener(marker, 'click', focusPoint);
	
	GEvent.addListener(marker, 'mouseover', function () {
			marker.openToolTip(pointData.name);
	});
	
	
	GEvent.addListener(marker, 'mouseout', function () {
			//if (marker_tracker != pointData.site_id) {
				marker.closeToolTip();
			//}//end if
	});
	
	
	pointData.show = function() {
		if (!visible) {
			map.addOverlay(marker);
			visible = true;
		}//end if
	}//end function

	pointData.hide = function() {
		if (visible) {
			map.removeOverlay(marker);
			visible = false;
		}//end if
	}//end function
	
	
	
	pointData.show();
	
}//end function



function addBalloonContent(marker, site_id, site_type) {
	var selected_view = get_selected_view();

	GDownloadUrl("ajax_process/marker_onclick_process.php?site_id="+site_id+"&t_action="+selected_view+"&site_type="+site_type, function(data, responseCode) {
	// To ensure against HTTP errors that result in null or bad data,
	// always check status code is equal to 200 before processing the data
	// alert("response "+responseCode);
	if(responseCode == 200) {
		//marker.openInfoWindowHtml(data);
		change_latest_data_panel(site_id, data);
	} else if(responseCode == -1) {
		alert("Sorry,  timeout");
	} else { 
		alert("Request resulted in error. ");
	}
   });//end function
}//end function


function processMarkers(markerstype) {
	if (markerstype == "") {
		markerstype = 'all'	;
	}//end if
	
	//call function to create the markers on the map
	//map.removeOverlay();
	create_markers(markerstype);
}//end function

function changeLoadingClass(from, to) {
	if (document.getElementById('loading')) {
		document.getElementById('loading').className = document.getElementById('loading').className.replace(from,to);
	}
	return false;
}//end function 

function addZoomButton() {
	document.getElementById('button_nearby').innerHTML = '<a href="#" onclick="zoomTo(51.361599,-0.691452, 9);change_zoom_view();return false;"><img id="zoom_view_button" src="images/button_zoomtonearbylevels.png" alt="Change Current View" border="0" /></a>';
}//end function

function init() {
	map = new GMap2(document.getElementById("google_map"));
	//map.addControl(new GLargeMapControl());
	//map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	map.setUIToDefault();
	zoomTo(51.330455,-0.729027, 11);

	addZoomButton();
	processMarkers('all');
	
	//check for site type
	var site_type = get_selected_sitetype();
	if (site_type == 'aql' || site_type == '') {	
		//Turn these markers off.
		processMarkers('no2');
	}//end if

	if (site_type == 'no2') {
		//Turn these markers off	
		processMarkers('aql');
	}//end if
	
	
	//processMarkers('no2');
	changeLoadingClass('loading', 'standby');
}


window.onload = init;