var map;
var centerLatitude = 52.780996;
var centerLongitude = 0.034705;
var startZoom = 10;
var markers_array = Array();
var marker_tracker = '';
var icons = new Array();
//----------------------------------------------
icons["1"]= new GIcon();
icons["1"].image = 'images/map_markers/marker_1.png';
icons["1"].iconSize = new GSize(16, 32);
icons["1"].iconAnchor = new GPoint(8, 32);
icons["1"].infoWindowAnchor = new GPoint(9, 2);

icons["1selected"] = new GIcon();
icons["1selected"].image = 'images/map_markers/marker_1_selected.png';
icons["1selected"].iconSize =  new GSize(16, 32);
icons["1selected"].iconAnchor = new GPoint(8, 32);
icons["1selected"].infoWindowAnchor = new GPoint(9, 2);


icons["2"] = new GIcon();
icons["2"].image = 'images/map_markers/marker_2.png';
icons["2"].iconSize =  new GSize(16, 32);
icons["2"].iconAnchor = new GPoint(8, 32);
icons["2"].infoWindowAnchor = new GPoint(9, 2);


icons["2selected"] = new GIcon();
icons["2selected"].image = 'images/map_markers/marker_2_selected.png';
icons["2selected"].iconSize = new GSize(16, 32);
icons["2selected"].iconAnchor = new GPoint(8, 32);
icons["2selected"].infoWindowAnchor = new GPoint(9, 2);

icons["3"] = new GIcon();
icons["3"].image = 'images/map_markers/marker_3.png';
icons["3"].iconSize =  new GSize(16, 32);
icons["3"].iconAnchor = new GPoint(8, 32);
icons["3"].infoWindowAnchor = new GPoint(9, 2);

icons["3selected"] = new GIcon();
icons["3selected"].image = 'images/map_markers/marker_3_selected.png';
icons["3selected"].iconSize = new GSize(16, 32);
icons["3selected"].iconAnchor = new GPoint(8, 32);
icons["3selected"].infoWindowAnchor = new GPoint(9, 2);


icons["4"] = new GIcon();
icons["4"].image = 'images/map_markers/marker_4.png';
icons["4"].iconSize = new GSize(16, 32);
icons["4"].iconAnchor = new GPoint(8, 32);
icons["4"].infoWindowAnchor = new GPoint(9, 2);

icons["4selected"] = new GIcon();
icons["4selected"].image = 'images/map_markers/marker_4_selected.png';
icons["4selected"].iconSize = new GSize(16, 32);
icons["4selected"].iconAnchor = new GPoint(8, 32);
icons["4selected"].infoWindowAnchor = new GPoint(9, 2);


icons["5"] = new GIcon();
icons["5"].image = 'images/map_markers/marker_5.png';
icons["5"].iconSize = new GSize(16, 32);
icons["5"].iconAnchor = new GPoint(8, 32);
icons["5"].infoWindowAnchor = new GPoint(9, 2);


icons["5selected"] = new GIcon();
icons["5selected"].image = 'images/map_markers/marker_5_selected.png';
icons["5selected"].iconSize = new GSize(16, 32);
icons["5selected"].iconAnchor = new GPoint(8, 32);
icons["5selected"].infoWindowAnchor = new GPoint(9, 2);

icons["6"] = new GIcon();
icons["6"].image = 'images/map_markers/marker_6.png';
icons["6"].iconSize = new GSize(16, 32);
icons["6"].iconAnchor = new GPoint(8, 32);
icons["6"].infoWindowAnchor = new GPoint(9, 2);

icons["6selected"] = new GIcon();
icons["6selected"].image = 'images/map_markers/marker_6_selected.png';
icons["6selected"].iconSize = new GSize(16, 32);
icons["6selected"].iconAnchor = new GPoint(8, 32);
icons["6selected"].infoWindowAnchor = new GPoint(9, 2);

icons["7"] = new GIcon();
icons["7"].image = 'images/map_markers/marker_7.png';
icons["7"].iconSize = new GSize(16, 32);
icons["7"].iconAnchor = new GPoint(8, 32);
icons["7"].infoWindowAnchor = new GPoint(9, 2);

icons["7selected"] = new GIcon();
icons["7selected"].image = 'images/map_markers/marker_7_selected.png';
icons["7selected"].iconSize = new GSize(16, 32);
icons["7selected"].iconAnchor = new GPoint(8, 32);
icons["7selected"].infoWindowAnchor = new GPoint(9, 2);

icons["8"] = new GIcon();
icons["8"].image = 'images/map_markers/marker_8.png';
icons["8"].iconSize = new GSize(16, 32);
icons["8"].iconAnchor = new GPoint(8, 32);
icons["8"].infoWindowAnchor = new GPoint(9, 2);

icons["8selected"] = new GIcon();
icons["8selected"].image = 'images/map_markers/marker_8_selected.png';
icons["8selected"].iconSize = new GSize(16, 32);
icons["8selected"].iconAnchor = new GPoint(8, 32);
icons["8selected"].infoWindowAnchor = new GPoint(9, 2);

icons["9"] = new GIcon();
icons["9"].image = 'images/map_markers/marker_9.png';
icons["9"].iconSize = new GSize(16, 32);
icons["9"].iconAnchor = new GPoint(8, 32);
icons["9"].infoWindowAnchor = new GPoint(9, 2);

icons["9selected"] = new GIcon();
icons["9selected"].image = 'images/map_markers/marker_9_selected.png';
icons["9selected"].iconSize = new GSize(16, 32);
icons["9selected"].iconAnchor = new GPoint(8, 32);
icons["9selected"].infoWindowAnchor = new GPoint(9, 2);


icons["10"] = new GIcon();
icons["10"].image = 'images/map_markers/marker_10.png';
icons["10"].iconSize = new GSize(16, 32);
icons["10"].iconAnchor = new GPoint(8, 32);
icons["10"].infoWindowAnchor = new GPoint(9, 2);

icons["10selected"] = new GIcon();
icons["10selected"].image = 'images/map_markers/marker_10_selected.png';
icons["10selected"].iconSize = new GSize(16, 32);
icons["10selected"].iconAnchor = new GPoint(8, 32);
icons["10selected"].infoWindowAnchor = new GPoint(9, 2);


icons["0"] = new GIcon();
icons["0"].image = 'images/map_markers/marker_0.png';
icons["0"].iconSize = new GSize(16, 32);
icons["0"].iconAnchor = new GPoint(8, 32);
icons["0"].infoWindowAnchor = new GPoint(9, 2);

icons["0selected"] = new GIcon();
icons["0selected"].image = 'images/map_markers/marker_0_selected.png';
icons["0selected"].iconSize = new GSize(16, 32);
icons["0selected"].iconAnchor = new GPoint(8, 32);
icons["0selected"].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 = '#FFFFE7';
	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 AQ markers
			for(id in aql_markers) {
				initializePoint(aql_markers[id]);
				//aql_markers[id].hide();
			}//end for
		
		
		break;
		//-------------------------------------------------------------
		case "aql":
			//output AQ markers
				for(id in aql_markers) {
					if (aql_markers[id].site_type == markerstype) {
						aql_markers[id].hide();
					}//end if
				}//end for
			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, icons[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);
		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) {
	
	//marker.openToolTip(site_id);

	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('map_loading')) {
		document.getElementById('map_loading').className = document.getElementById('map_loading').className.replace(from,to);
	}
	return false;
}//end function 

function init() {
	map = new GMap2(document.getElementById("google_map"),
          {mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP]});
	//map.addControl(new GLargeMapControl());
	//map.addControl(new GMapTypeControl());
	map.setUIToDefault();
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);

	processMarkers('all');
	
	changeLoadingClass('loading', 'standby');
}


window.onload = init;