// JavaScript Document

    var map = null;
	
	function load() {
		if (GBrowserIsCompatible()) {
		
		  var i = 0;
	
		  // Create the map
		  // Make sure this element has the same ID as your div
		  map = new GMap2(document.getElementById("map"));
		  // Add controls for moving and zooming the map.  Use GSmallMapControl for small maps
		  map.addControl(new GLargeMapControl3D());
		  // Add controls for switching between regular and satellite views
		  map.setMapType(G_HYBRID_MAP);
		  map.addControl(new GMapTypeControl());
		  // Set the starting position and zoom level when the map loads
		  map.setCenter(new GLatLng(39.246412, -105.887354), 6);
	
		  // Read the data from XML
		  var request = GXmlHttp.create();
		  // Open the XML file
		  request.open("GET", "/assets/xml/ranches.xml", true);
		  request.onreadystatechange = function() {
			if (request.readyState == 4) {
			  var xmlDoc = request.responseXML;
			  // Obtain the array of markers and loop through it
			  var markers = xmlDoc.documentElement.getElementsByTagName("location");
			  
			  for (var i = 0; i < markers.length; i++) {
				// Obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var id = markers[i].getAttribute("id");
				var name = markers[i].getAttribute("name");
				var phone = markers[i].getAttribute("phone");
				var address = markers[i].getAttribute("address");
				var city = markers[i].getAttribute("city");
				// var state = markers[i].getAttribute("state");
				var zip = markers[i].getAttribute("zip");
				// var url = markers[i].getAttribute("url");
				var img = markers[i].getAttribute("img");
				// Call the function to create the marker
				var marker = createMarker(point,id,name,phone,address,city,zip,img);
				map.addOverlay(marker);
			  }
			}
		  }
		  request.send(null);
		  
		  // Function to create the marker and set up the event window
		  function createMarker(point,id,name,phone,address,city,zip,img) {
		  
		    // Create our "tiny" marker icon
  			var tinyIcon = new GIcon();
  			tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
  			tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  			tinyIcon.iconSize = new GSize(12, 20);
  			tinyIcon.shadowSize = new GSize(22, 20);
  			tinyIcon.iconAnchor = new GPoint(6, 20);
  			tinyIcon.infoWindowAnchor = new GPoint(5, 1);

  			// Set up our GMarkerOptions object literal
  			markerOptions = { icon:tinyIcon };
  
		  	// Create the HTML text based on the values passed in from XML
			var markerhtml = "";
			markerhtml += "<div style=width:158px;text-align:left; font-size:10px;>";
			markerhtml += "<img src=" + img + " />" + "<br>";
			markerhtml += "<b>" + name + "</b><br>";
			markerhtml += address + "<br>" + city + ",&nbsp;" + zip + "<br>";
			markerhtml += "Phone: " + phone + "<br>";
			markerhtml += "<a href=/ranch.php?id=" + id + ">" + "View Ranch Information" + "</a>";
			markerhtml += "</div>";
		    
			// Create the map marker
			var marker = new GMarker(point,markerOptions);
			
			// Add a click event to each marker which will open the HTML window
			GEvent.addListener(marker, "mouseover", function() {
			  marker.openInfoWindowHtml(markerhtml);
			});
			i++;
			return marker;
		  }
		}
		// Javascript alert for older browsers where Google Maps isn't supported
		else {
		  alert("Sorry, the Google Maps API is not compatible with this browser");
		}
	}
    //]]>