//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      var gmarkers = [];
      var gicons = [];
      var map = null;

gicons["default"] = new google.maps.MarkerImage("images/mapIcons/marker_default.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
 
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('images/mapIcons/marker_default.png',
      // This marker is 32 pixels wide by 37 pixels tall.
		new google.maps.Size(32.0, 37.0),
	// The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 16,18.
      new google.maps.Point(16.0, 18.0));
  var iconShadow = new google.maps.MarkerImage('images/mapIcons/shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(51.0, 37.0),
      new google.maps.Point(0,0),
      new google.maps.Point(16.0, 18.0));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.

function getMarkerImage(iconType) {
   if ((typeof(iconType)=="undefined") || (iconType==null)) { 
      iconType = "default"; 
   }
   if (!gicons[iconType]) {
      gicons[iconType] = new google.maps.MarkerImage("images/mapIcons/marker_"+ iconType +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(32.0, 37.0),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(16.0, 18.0));
   } 
   return gicons[iconType];

}

function category2icon(category) {
   var icon = "default";
   switch(category) {
     case "cemetery": icon = "cemetery";
                break;
     case "home":    icon = "home";
                break;
     case "info":    icon = "yellow";
                break;
     default:   icon = "red";
                break;
   }
   return icon;
}

      gicons["cemetery"] = getMarkerImage(category2icon("cemetery"));
      gicons["home"] = getMarkerImage(category2icon("home"));
      gicons["info"] = getMarkerImage(category2icon("info"));

      // A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: gicons[category],
        shadow: iconShadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

  function initialize() {
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(38.298559,-92.114868),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL //The initial display options for the navigation control. Identifiers for common types of navigation controls. types - DEFAULT, SMALL, ZOOM_PAN, ANDROID
    }

    
  }
    map = new google.maps.Map(document.getElementById("map"), myOptions);


    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data
      downloadUrl("map.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.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 google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var html = markers[i].getAttribute("html");
          var name = markers[i].getAttribute("name");
          var directions = '<form action="http://maps.google.com/maps" method="get"><fieldset><input type="text" name="saddr" class="cleartxt" value="Enter Starting Address..." onFocus="clearText(this)" style="width:140px; height:20px" /><input type="hidden" name="daddr" value="' + lat+ ',' + lng + '" /><input type="Submit" value="Get Directions" style="color:white; background-color:#002E5B; width: 100px;font-size:12px;height:25px; padding-top:3px; padding-bottom:3px; font-weight:bold;font-family:Arial, Helvetica, sans-serif" /></fieldset></form>' 
          html = '<div style="line-height:195%; padding-top: 20px;">' + '<div id="mapheader">'+ name + '</div>'  + '<br />' + html + directions + '</div>';

          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      });
    }
    
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(0,0)
  });
//]]>