if (GBrowserIsCompatible()) {
  if (typeof currentMarker == 'undefined')
    currentMarker = false;

  if (!currentMarker)
    document.write('<div style="width: 100%; background-color:steelblue; color:White;" >',
		   '<table><tr><td align="center" style="font-size: 8pt; font-family: Verdana;">',
		   '<img class="image" height="32px" width="32px" src="http://www3.niddk.nih.gov/images/blue-dot.png"><br>',
		   'CEMH</td><td align="center" style="font-size: 8pt; font-family: Verdana;">',
		   '<img class="image" height="32px" width="32px" src="http://www3.niddk.nih.gov/images/red-dot.png"><br>',
		   'CFRCT</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/blue-pushpin.png"><br>',
		   'NORC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/ltblue-dot.png"><br>',
		   'DDRCC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/orange-dot.png"><br>',
		   'DDRDC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/purple-dot.png"><br>',
		   'DERC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/yellow-dot.png"><br>',
		   'DRTC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/pink-dot.png"><br>',
		   'MTC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/grn-pushpin.png"><br>',
		   'PKDRTC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/ltblu-pushpin.png"><br>',
		   'RC</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/pink-pushpin.png"><br>',
		   'RCEPN</td><td align="center" style="font-size: 8pt; font-family: Verdana; padding-left: 10px;">',
		   '<img class="image" height=32px width=32px src="http://www3.niddk.nih.gov/images/purple-pushpin.png"><br>',
		   'UC</td></tr>',
		   '<tr><td align="center" style="padding-right: 10px;">',
		   '<input CHECKED id="1box" type="checkbox" onclick="boxclick(this, 1)" name="test1">',
		   '</td><td align="center" style="padding-left: 10px; padding-right:10px; ">',
		   '<input CHECKED id="2box" type="checkbox" onclick="boxclick(this,2)" name="test2">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="3box" type="checkbox" onclick="boxclick(this,3)" name="test3">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="4box" type="checkbox" onclick="boxclick(this,4)" name="test4">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="5box" type="checkbox" onclick="boxclick(this,5)" name="test5">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="6box" type="checkbox" onclick="boxclick(this,6)" name="test6">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="7box" type="checkbox" onclick="boxclick(this,7)" name="test7">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="8box" type="checkbox" onclick="boxclick(this,8)" name="test8">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="9box" type="checkbox" onclick="boxclick(this,9)" name="test9">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="10box" type="checkbox" onclick="boxclick(this,10)" name="test10">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="11box" type="checkbox" onclick="boxclick(this,11)" name="test11">',
		   '</td><td align="center" style="padding-left: 10px;">',
		   '<input CHECKED id="12box" type="checkbox" onclick="boxclick(this,12)" name="test12">',
		   
		   '</td></tr></table></div>');

  document.write('<div id="map" style="width: 650px; height: 500px"></div><br>',
		 '<p>The name of the center once clicked, will show its location on the map</p>',
		 '<br><div id="side_bar"></div>');





  // this variable will collect the html which will eventually be placed in the side_bar
  var side_bar_html = "";

  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];
  var markerOptions = [];
  //var i = 0;
  var gicons = [];
  var htmls = [];

  var CEMH = new GIcon();
  CEMH.image = "http://www3.niddk.nih.gov/images/blue-dot.png";
  CEMH.iconSize = new GSize(32, 32);
  CEMH.iconAnchor = new GPoint(5, 34);
  CEMH.infoWindowAnchor = new GPoint(5, 2);

  gicons["CEMH"] = CEMH;

  var CFRCT = new GIcon();
  CFRCT.image = "http://www3.niddk.nih.gov/images/red-dot.png";
  CFRCT.iconSize = new GSize(32, 32);
  CFRCT.iconAnchor = new GPoint(5, 34);
  CFRCT.infoWindowAnchor = new GPoint(5, 2);

  gicons["CFRCT"] = CFRCT;

  var NORC = new GIcon();
  NORC.image = "http://www3.niddk.nih.gov/images/blue-pushpin.png";
  NORC.iconSize = new GSize(32, 32);
  NORC.iconAnchor = new GPoint(5, 34);
  NORC.infoWindowAnchor = new GPoint(5, 2);

  gicons["NORC"] = NORC;

  var DDRCC = new GIcon();
  DDRCC.image = "http://www3.niddk.nih.gov/images/ltblue-dot.png";
  DDRCC.iconSize = new GSize(32, 32);
  DDRCC.iconAnchor = new GPoint(5, 34);
  DDRCC.infoWindowAnchor = new GPoint(5, 2);

  gicons["DDRCC"] = DDRCC;

  var DDRDC = new GIcon();
  DDRDC.image = "http://www3.niddk.nih.gov/images/orange-dot.png";
  DDRDC.iconSize = new GSize(32, 32);
  DDRDC.iconAnchor = new GPoint(5, 34);
  DDRDC.infoWindowAnchor = new GPoint(5, 2);

  gicons["DDRDC"] = DDRDC;

  var DERC = new GIcon();
  DERC.image = "http://www3.niddk.nih.gov/images/purple-dot.png";
  DERC.iconSize = new GSize(32, 32);
  DERC.iconAnchor = new GPoint(5, 34);
  DERC.infoWindowAnchor = new GPoint(5, 2);

  gicons["DERC"] = DERC;

  var DRTC = new GIcon();
  DRTC.image = "http://www3.niddk.nih.gov/images/yellow-dot.png";
  DRTC.iconSize = new GSize(32, 32);
  DRTC.iconAnchor = new GPoint(5, 34);
  DRTC.infoWindowAnchor = new GPoint(5, 2);

  gicons["DRTC"] = DRTC;

  var MTC = new GIcon();
  MTC.image = "http://www3.niddk.nih.gov/images/pink-dot.png";
  MTC.iconSize = new GSize(32, 32);
  MTC.iconAnchor = new GPoint(5, 34);
  MTC.infoWindowAnchor = new GPoint(5, 2);

  gicons["MTC"] = MTC;

  

  var PKDRTC = new GIcon();
  PKDRTC.image = "http://www3.niddk.nih.gov/images/grn-pushpin.png";
  PKDRTC.iconSize = new GSize(32, 32);
  PKDRTC.iconAnchor = new GPoint(5, 34);
  PKDRTC.infoWindowAnchor = new GPoint(5, 2);

  gicons["PKDRTC"] = PKDRTC;

  var RC = new GIcon();
  RC.image = "http://www3.niddk.nih.gov/images/ltblu-pushpin.png";
  RC.iconSize = new GSize(32, 32);
  RC.iconAnchor = new GPoint(5, 34);
  RC.infoWindowAnchor = new GPoint(5, 2);

  gicons["RC"] = RC;

  var RCEPN = new GIcon();
  RCEPN.image = "http://www3.niddk.nih.gov/images/pink-pushpin.png";
  RCEPN.iconSize = new GSize(32, 32);
  RCEPN.iconAnchor = new GPoint(5, 34);
  RCEPN.infoWindowAnchor = new GPoint(5, 2);

  gicons["RCEPN"] = RCEPN;

  var UC = new GIcon();
  UC.image = "http://www3.niddk.nih.gov/images/purple-pushpin.png";
  UC.iconSize = new GSize(32, 32);
  UC.iconAnchor = new GPoint(5, 34);
  UC.infoWindowAnchor = new GPoint(5, 2);

  gicons["UC"] = UC;


  // arrays to hold variants of the info window html with get direction forms open
  var to_htmls = [];
  var from_htmls = [];

  // A function to create the marker and set up the event window
  function createMarker(point, name, html, url, email, pifirstname, pilastname,
			urlawardm, awardm, announc, state, icontype, category, report) {
    markerOptions = {
    icon: gicons[icontype],
    title: name
    };

    var marker = new GMarker(point, markerOptions);

    marker.mycategory = category;

    marker.myname = name;

    var i = gmarkers.length;

    // The info window version with the "to here" form open
    to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
      '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
      '<input  type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
      '<INPUT  value="Get Directions" TYPE="SUBMIT">' +
      '<input  type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
      // "(" + name + ")" + 
      '"/>';
    // The info window version with the "to here" form open
    from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
      '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
      '<input  type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
      '<INPUT  value="Get Directions" TYPE="SUBMIT">' +
      '<input  type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
      // "(" + name + ")" + 
      '"/>';
    // The inactive version of the direction info
    html = '<a href="' + url + '">' + name +'<\/a><br>' + "PI: " + '<a href="mailto:' + email + '">' + pifirstname + " " + pilastname +'<\/a><br>' + '<a href="' + urlawardm + '">' + awardm + '<\/a>'+ ", " + announc + '<\/li>' + '<br>' + '<br>Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here<\/a>';

    GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(html);
      });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    htmls[i] = html;


    // add a line to the side_bar html
    side_bar_html += '<li>' + '<a href="javascript:myclick(' + i + ')">' + name + '<\/a>' + ', ' + state  + '<br>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Website<\/strong>: ' + '<a href="' + url + '">' + url +'<\/a><br>' + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PI: " + '<a href="mailto:' + email + '">' + pifirstname + " " + pilastname +'<\/a><br>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="' + urlawardm + '">' + awardm + '<\/a>'+ ", " + announc  + '<br>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Report<\/strong>: ' + '<a href="' + report + '">' + report + '<\/a><br><br>' + '<\/li>';
    return marker;
  }

  // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
	gmarkers[i].show();
      }
    }
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;
  }

  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
	gmarkers[i].hide();
      }
    }
    // == clear the checkbox ==
    document.getElementById(category+"box").checked = false;
 
    // == close the info window, in case its open on a marker that we just hid
    map.closeInfoWindow();
  }

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }


  }

  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }

  // functions that open the directions forms
  function tohere(i) {
    gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  }
  function fromhere(i) {
    gmarkers[i].openInfoWindowHtml(from_htmls[i]);
  }


  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(38.953611,-95.26), 4);


  // Read the data from example.xml
  var request = GXmlHttp.create();
  request.open("GET", "AllCentersGoogle.xml", true);
  request.onreadystatechange = function() {
    if (request.readyState != 4)
      return;
    var xmlDoc = GXml.parse(request.responseText);
    if (currentMarker)
      currentMarker = currentMarker.toLowerCase();
    // obtain the array of markers and loop through it
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var icontype = markers[i].getAttribute("icontype");
      if (currentMarker && icontype.toLowerCase() != currentMarker)
	continue;
      // 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 url = markers[i].getAttribute("url");
      var email = markers[i].getAttribute("email");
	  var report = markers[i].getAttribute("report");
      var pifirstname = markers[i].getAttribute("pifirstname");

      // obtain the attribues of each marker
      var point = new GLatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var url = markers[i].getAttribute("url");
      var email = markers[i].getAttribute("email");
      var pifirstname = markers[i].getAttribute("pifirstname");
      var pilastname = markers[i].getAttribute("pilastname");
      var awardm = markers[i].getAttribute("awardm");
      var urlawardm = markers[i].getAttribute("urlawardm");
      var announc = markers[i].getAttribute("announc");
      var label = markers[i].getAttribute("label");
      var state = markers[i].getAttribute("state");
      var category = markers[i].getAttribute("category");
	  var report = markers[i].getAttribute("report");
      // create the marker
      var marker = createMarker(point,label,html,url,email,pifirstname,pilastname,
				urlawardm,awardm,announc,state,icontype,category,report);
      map.addOverlay(marker);
    }
    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
  };
  request.send(null);
};
