// JavaScript Document

//<![CDATA[

if (GBrowserIsCompatible()) {
  // ==== first part of the select box ===
  var select_html = '<select onChange="handleSelected(this)">' +
					'<option selected> - Select a location - <\/option>';
  // =====================================
  var gmarkers = [];
  var htmls = [];
  var i = 0;


  // A function to create the marker and set up the event window
  function createPinMarker(point,name,html) {
	var icon = new GIcon(icon, "http://www.lvcchotels.com/slides/bedicons/bed1.png");
	icon.shadow = "http://www.lvcchotels.com/slides/bedicons/shadow1.png";
	icon.iconSize = new GSize(37, 38);
	icon.shadowSize = new GSize(60, 38);
	icon.iconAnchor = new GPoint(18, 38);
	icon.infoWindowAnchor = new GPoint(18, 0);
	var marker = new GMarker(point, {icon:icon});
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	  map.setCenter(point);
	});
	gmarkers[i] = marker;
	htmls[i] = html;
	
	// ======= Add the entry to the select box =====
	select_html += '<option> ' + name + '<\/option>';
	// ==========================================================
	
	i++;
	return marker;
  }
  
  function createMarker(point,html) {
	var icon = new GIcon(icon, "http://www.lvcchotels.com/slides/bedicons/bed2.png");
	icon.shadow = "http://www.lvcchotels.com/slides/bedicons/shadow2.png";
	icon.iconSize = new GSize(37, 38);
	icon.shadowSize = new GSize(60, 38);
	icon.iconAnchor = new GPoint(18, 38);
	icon.infoWindowAnchor = new GPoint(18, 0);
	var marker = new GMarker(point, {icon:icon});
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	return marker;
  }


  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) {
	var i = opt.selectedIndex - 1;
	if (i > -1) {
	  GEvent.trigger(gmarkers[i],"click");
	}
	else {
	  map.closeInfoWindow();
	}
  }



  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl3D());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl());
  map.addControl(new GOverviewMapControl());
  map.setCenter(new GLatLng(41.8807929391998, -87.6240348815918), 15);



  // Read the data from poi.xml
  GDownloadUrl("xml/poi.xml", function (doc) {
	var xmlDoc = GXml.parse(doc);
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	  
	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 html = markers[i].getAttribute("html");
	  var label = markers[i].getAttribute("label");
	  // create the marker
	  var marker = createPinMarker(point,label,html);
	  map.addOverlay(marker);
	}
	// ===== final part of the select box =====
	select_html += '<\/select>';
	document.getElementById("selection").innerHTML = select_html;
  });
  
  // Read the data from xml file
  GDownloadUrl("xml/chicagohotelmap.xml", function(doc) {
	var xmlDoc = GXml.parse(doc);
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	  
	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 html = markers[i].getAttribute("html");
	  // create the marker
	  var marker = createMarker(point,html);
	  map.addOverlay(marker);
	}
  });
}

else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

//]]>