// When the page loads
function load() {
	
	// Set the variable "map" to all elements that have the ID of Map in the HTML file.
	var map = document.getElementById("map");
	// If we are using a compatible browser
	if ( GBrowserIsCompatible() ) {
		// Create a new gmap variable that is an instance of GMap2
		var gmap = new GMap2(map);
		// Add the Map Control Object
		gmap.addControl( new GLargeMapControl() );
		// Add the Type of Map (Satellite, Hybrid etc)
		gmap.addControl( new GMapTypeControl() );
		// Add the small map overview map at the bottom left of screeen
		gmap.addControl( new GOverviewMapControl( new GSize(100,100) ) );
		// Set the view area to the centre of the screen
		gmap.setCenter( new GLatLng(53.47655357975259,-2.2464895248413086),12);
		//Enable Zooming
		gmap.enableDoubleClickZoom()
		// Format the Popup Windows
		function formatWindow(input) {
			// Start to build the variable that creates the bubbles
			var html = "<div class=\"bubble\">";
			html += "<h1 class=\"googlemap\">" + input.company + "</h1>";
			
			if (input.url == "empty"){
				
			}else{
				
				if (input.markerImage == "../images/accommodation.png"){
					html += "<a class=\"googlemapURL\" href=\"" + input.url + "\" target=\"_blank\">To book click here</a>"		
				}
				else{
					html += "<a class=\"googlemapURL\" href=\"" + input.url + "\" target=\"_blank\">Click here for more info</a>"	
				}
				
				
			}
			
			

			html += "</div>";
			// Return the whole html variable
			return html;
		}
		
		function makeIcon (image) {
			var icon = new GIcon();
			icon.image = image;
			icon.shadow = "../images/restaurants.png";
			icon.iconSize = new GSize(21, 28);
			icon.shadowSize = new GSize(21, 28);
			icon.iconAnchor = new GPoint(8, 16);
			icon.infoShadowAnchor = new GPoint(0, 0);
			icon.infoWindowAnchor = new GPoint(8, 1);
			return icon;
		}
		
		// Create a marker
		function createMarker(input) {
			// Create a marker at the reference mentioned in points.json
			//var marker = new GMarker(input.point);
			var marker = new GMarker(input.point, makeIcon(input.markerImage));
			// Add the event listener for clicks on the pins
			GEvent.addListener(marker,"click",function() {
				// On click open the info window specified in the above formatWindow(input) function
				marker.openInfoWindowHtml( formatWindow(input) );
			});
			
			// Return the marker onto the map
			return marker;
		
		}
		
	
		// Parse the JSON file to get the markers
		function parseJson (doc) {
			// Evaluate the jsonData
			var jsonData = eval("(" + doc + ")");
			// As long as there is data to parse
			for (var i=0; i<jsonData.markers.length; i++) {
				// Create a marker
				var marker = createMarker(jsonData.markers[i]);
				// And add the marker
				gmap.addOverlay(marker);
			}
		}
		
		
		var d = new Date();
		// Downloads the JOSON file
		GDownloadUrl("../json/points.json?" + d + "", function(data, responseCode) {
			// And passes the data onto the parseJson(data) function
			parseJson(data);
		});
		
		// Or if the browser isn't compatible
		} else {
			// Display an alert message
			alert("Sorry, your browser cannot handle Google Maps - please download a PDF version");
	}
}

// When the window loads start the load function above.
window.onload = load;
// When the window unloads unload using the Google Maps Unload function.
window.onunload = GUnload;// JavaScript Document