// JavaScript Document

function load () 
{
	var map = document.getElementById("map");
	if (GBrowserIsCompatible())
	{
		var gmap = new GMap2(map);
		gmap.addControl( new GSmallMapControl() );
		gmap.addControl( new GMapTypeControl()) ;
		gmap.addControl( new GOverviewMapControl(new GSize(100,100)) );
		gmap.setCenter( new GLatLng(36.137741,-5.345374), 12);
		
		GDownloadUrl("maps/markersENG.json", function(data, responseCode){parseJson(data);});
		
		function parseJson (doc) 
		{
			var jsonData = eval("(" + doc + ")");
			for (var i = 0; i < jsonData.markers.length; i++) 
			{
				var marker = createMarker(jsonData.markers[i]);
				gmap.addOverlay(marker);
			}
		}


		function createMarker(input) 
		{
			var marker = new GMarker(input.point, makeIcon(input.markerImage) );
			GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml( formatWindow(input) ); });
		return marker;
		}



	
	function formatWindow (input) 
	{
		var html = "<div class=\"bubble\">";
		html += "<table cellpadding='4'><tr><td rowspan='2'><img src='" + input.locImage;
		html += "'></td><td valign='top'><strong>" + input.locName + "</strong></td></tr>";		
		html += "<td valign='top'>" + input.locDescription;
		html += "</td></tr></table>";
		html += "</div>";
		return html;
	}


	function makeIcon (image) 
	{
		var icon = new GIcon();
		icon.image = image;
		icon.shadow = "maps/blue_pin.png";
		icon.iconSize = new GSize(20, 34);
		icon.shadowSize = new GSize(20, 34);
		icon.iconAnchor = new GPoint(20, 34);
		icon.infoShadowAnchor = new GPoint(0, 0);
		icon.infoWindowAnchor = new GPoint(8, 1);
		return icon;
	}



	} 
	else 
	{
	alert("Sorry, your browser cannot handle the true power of Google Maps");
	}
	
	


}


window.onload = load;
window.onunload = GUnload;