var hash_id = location.hash.substring(3);

var gmarkers = [];

// Create the "business" marker icon
var businessIcon = new GIcon(G_DEFAULT_ICON);
    businessIcon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
    businessIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    businessIcon.iconSize  = new GSize(12, 18);
    businessIcon.shadowSize  = new GSize(20, 18);
    businessIcon.iconAnchor  = new GPoint(12, 9);
  
// Create the "events place" marker icon
var EventPlaceIcon = new GIcon(G_DEFAULT_ICON);
    EventPlaceIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    EventPlaceIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    EventPlaceIcon.iconSize  = new GSize(12, 18);
    EventPlaceIcon.shadowSize  = new GSize(20, 18);
    EventPlaceIcon.iconAnchor  = new GPoint(12, 9);


// This function picks up the click and opens the corresponding info window
function openMapInfoWindow(i) {
  GEvent.trigger(gmarkers[i], "click");
}

// A function to create the marker and set up the event window
function createMarker(point,html,id, title) {
  // Set up our GMarkerOptions object
  businessMarkerOptions = { icon:businessIcon, title:title };

  var marker = new GMarker(point, businessMarkerOptions);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  gmarkers[id]=marker;
  return marker;
}

// A function to create the marker and set up the event window
function createEventPlaceMarker(point,html,title) {
  // Set up our GMarkerOptions object
  eventPlaceMarkerOptions = { icon:EventPlaceIcon, title:title };

  var marker = new GMarker(point, eventPlaceMarkerOptions);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}


jQuery(document).ready(function initialize()  {
  
  var map = new GMap2(document.getElementById("the_map"));
  map.setCenter(new GLatLng(38.970654,-74.840283), 15);  // Default center of map (center of WC)
  map.setUIToDefault();  
  

  // Read the data from xml
  GDownloadUrl("http://visitwildwoodcrest.com/~/wp-content/themes/deepblue/locations_xml.php", 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 title = markers[i].getAttribute("name");
      var id = markers[i].getAttribute("id");
      var html = GXml.value(markers[i].getElementsByTagName("description")[0]);
      // create the marker
      var marker = createMarker(point,html,id, title);
      map.addOverlay(marker);
      if (id == hash_id) { GEvent.trigger(marker, "click") };
    }
  });
  
  // Read the data xml
  GDownloadUrl("http://visitwildwoodcrest.com/~/wp-content/themes/deepblue/event_locations_xml.php", 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 title = markers[i].getAttribute("name");
      var point = new GLatLng(lat,lng);
      var html = GXml.value(markers[i].getElementsByTagName("description")[0]);
      // create the marker
      var epmarker = createEventPlaceMarker(point,html,title);
      map.addOverlay(epmarker);
    }
  });
  
});