// ----------------------------------------------------------------------------
// javascript mapping application
// contact:  jhuber@stlouispark.org 
// 14 April 2007
// ----------------------------------------------------------------------------


    //<![CDATA[
	  
 if (GBrowserIsCompatible()) {
	  var trafficInfo = new GTrafficOverlay();
      var kml = new GGeoXml("http://www.stlouispark.org/city_map/kml/nh_borders.kml");
	  var city = new GGeoXml("http://www.stlouispark.org/police_map/kml/city_border_blue.kml");
	  var side_bar_html = "";
	  var gmarkers = [];
      var htmls = [];
      var i = 0;
	  

      // Create some custom icons
      var policeIcon = new GIcon();
      policeIcon.image = "http://www.stlouispark.org/city_map/icons/cityhall.png";
      policeIcon.iconSize = new GSize(32, 32);
      policeIcon.iconAnchor = new GPoint(20, 30);
      policeIcon.infoWindowAnchor = new GPoint(20, 30);

	   var purpleIcon = new GIcon();
      purpleIcon.image = "http://www.stlouispark.org/city_map/icons/pinpurple.png";
      purpleIcon.iconSize = new GSize(16, 18);
      purpleIcon.iconAnchor = new GPoint(2, 10);
      purpleIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var redIcon = new GIcon();
      redIcon.image = "http://www.stlouispark.org/city_map/icons/pinred.png";
      redIcon.iconSize = new GSize(16, 18);
      redIcon.iconAnchor = new GPoint(2, 14);
	  redIcon.infoWindowAnchor = new GPoint(2, 14);
	  
	  var blueIcon = new GIcon();
      blueIcon.image = "http://www.stlouispark.org/city_map/icons/pinblue.png";
      blueIcon.iconSize = new GSize(16, 18);
      blueIcon.iconAnchor = new GPoint(2, 10);
      blueIcon.infoWindowAnchor = new GPoint(2, 8);
	  
	  var yellowIcon = new GIcon();
      yellowIcon.image = "http://www.stlouispark.org/city_map/icons/pinyellow.png";
      yellowIcon.iconSize = new GSize(16, 18);
      yellowIcon.iconAnchor = new GPoint(2, 10);
      yellowIcon.infoWindowAnchor = new GPoint(2, 8);
	  
	  var greenIcon = new GIcon();
      greenIcon.image = "http://www.stlouispark.org/city_map/icons/pingreen.png";
      greenIcon.iconSize = new GSize(16, 18);
      greenIcon.iconAnchor = new GPoint(2, 10);
      greenIcon.infoWindowAnchor = new GPoint(2, 8);
	  
	  var orangeIcon = new GIcon();
      orangeIcon.image = "http://www.stlouispark.org/city_map/icons/pinorange.png";
      orangeIcon.iconSize = new GSize(16, 18);
      orangeIcon.iconAnchor = new GPoint(2, 10);
      orangeIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var brownIcon = new GIcon();
      brownIcon.image = "http://www.stlouispark.org/city_map/icons/pinbrown.png";
      brownIcon.iconSize = new GSize(16, 18);
      brownIcon.iconAnchor = new GPoint(2, 10);
      brownIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var lightbIcon = new GIcon();
      lightbIcon.image = "http://www.stlouispark.org/city_map/icons/pinlightb.png";
      lightbIcon.iconSize = new GSize(16, 18);
      lightbIcon.iconAnchor = new GPoint(2, 10);
      lightbIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var darkredIcon = new GIcon();
      darkredIcon.image = "http://www.stlouispark.org/city_map/icons/pindred.png";
      darkredIcon.iconSize = new GSize(16, 18);
      darkredIcon.iconAnchor = new GPoint(2, 10);
      darkredIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var lightgIcon = new GIcon();
      lightgIcon.image = "http://www.stlouispark.org/city_map/icons/pinlightg.png";
      lightgIcon.iconSize = new GSize(16, 18);
      lightgIcon.iconAnchor = new GPoint(2, 10);
      lightgIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var znIcon = new GIcon();
      znIcon.image = "http://www.stlouispark.org/city_map/icons/zoom_neighborhood.gif";
      znIcon.iconSize = new GSize(117, 19);
      znIcon.iconAnchor = new GPoint(4, 21);
      znIcon.infoWindowAnchor = new GPoint(4, 21);
	  
	   var infoIcon = new GIcon();
      infoIcon.image = "http://www.stlouispark.org/city_map/icons/more_info_button.gif";
      infoIcon.iconSize = new GSize(117, 19);
      infoIcon.iconAnchor = new GPoint(5, 21);
      infoIcon.infoWindowAnchor = new GPoint(5, 21);
	  
	  var tanIcon = new GIcon();
      tanIcon.image = "http://www.stlouispark.org/city_map/icons/pintan.png";
      tanIcon.iconSize = new GSize(16, 18);
      tanIcon.iconAnchor = new GPoint(2, 10);
      tanIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var mustardIcon = new GIcon();
      mustardIcon.image = "http://www.stlouispark.org/city_map/icons/pinmustard.png";
      mustardIcon.iconSize = new GSize(16, 18);
      mustardIcon.iconAnchor = new GPoint(2, 10);
      mustardIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var blackIcon = new GIcon();
      blackIcon.image = "http://www.stlouispark.org/city_map/icons/pinblack.png";
      blackIcon.iconSize = new GSize(16, 18);
      blackIcon.iconAnchor = new GPoint(2, 10);
      blackIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var skyblueIcon = new GIcon();
      skyblueIcon.image = "http://www.stlouispark.org/city_map/icons/pinskyblue.png";
      skyblueIcon.iconSize = new GSize(16, 18);
      skyblueIcon.iconAnchor = new GPoint(2, 10);
      skyblueIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var grayIcon = new GIcon();
      grayIcon.image = "http://www.stlouispark.org/city_map/icons/pingray.png";
      grayIcon.iconSize = new GSize(16, 18);
      grayIcon.iconAnchor = new GPoint(2, 10);
      grayIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var dorangeIcon = new GIcon();
      dorangeIcon.image = "http://www.stlouispark.org/city_map/icons/pindorange.png";
      dorangeIcon.iconSize = new GSize(16, 18);
      dorangeIcon.iconAnchor = new GPoint(2, 10);
      dorangeIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var brightpurpleIcon = new GIcon();
      brightpurpleIcon.image = "http://www.stlouispark.org/city_map/icons/pinbrightpurple.png";
      brightpurpleIcon.iconSize = new GSize(16, 18);
      brightpurpleIcon.iconAnchor = new GPoint(2, 10);
      brightpurpleIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var pinkIcon = new GIcon();
      pinkIcon.image = "http://www.stlouispark.org/city_map/icons/pinpink.png";
      pinkIcon.iconSize = new GSize(16, 18);
      pinkIcon.iconAnchor = new GPoint(2, 10);
      pinkIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	   var maroonIcon = new GIcon();
      maroonIcon.image = "http://www.stlouispark.org/city_map/icons/pinmaroon.png";
      maroonIcon.iconSize = new GSize(16, 18);
      maroonIcon.iconAnchor = new GPoint(2, 10);
      maroonIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	   var dyellowIcon = new GIcon();
      dyellowIcon.image = "http://www.stlouispark.org/city_map/icons/pindyellow.png";
      dyellowIcon.iconSize = new GSize(16, 18);
      dyellowIcon.iconAnchor = new GPoint(2, 10);
      dyellowIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	   var gpurpleIcon = new GIcon();
      gpurpleIcon.image = "http://www.stlouispark.org/city_map/icons/pingpurple.png";
      gpurpleIcon.iconSize = new GSize(16, 18);
      gpurpleIcon.iconAnchor = new GPoint(2, 10);
      gpurpleIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var agreenIcon = new GIcon();
      agreenIcon.image = "http://www.stlouispark.org/city_map/icons/pinagreen.png";
      agreenIcon.iconSize = new GSize(16, 18);
      agreenIcon.iconAnchor = new GPoint(2, 10);
      agreenIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var gblueIcon = new GIcon();
      gblueIcon.image = "http://www.stlouispark.org/city_map/icons/pingblue.png";
      gblueIcon.iconSize = new GSize(16, 18);
      gblueIcon.iconAnchor = new GPoint(2, 10);
      gblueIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var ggrayblueIcon = new GIcon();
      ggrayblueIcon.image = "http://www.stlouispark.org/city_map/icons/pinggrayblue.png";
      ggrayblueIcon.iconSize = new GSize(16, 18);
      ggrayblueIcon.iconAnchor = new GPoint(2, 10);
      ggrayblueIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  var ggraygreenIcon = new GIcon();
      ggraygreenIcon.image = "http://www.stlouispark.org/city_map/icons/pingraygreen.png";
      ggraygreenIcon.iconSize = new GSize(16, 18);
      ggraygreenIcon.iconAnchor = new GPoint(2, 10);
      ggraygreenIcon.infoWindowAnchor = new GPoint(2, 10);
	  
	  
      // An array of GIcons, to make the selection easier
      var icons = [];
	  icons[0] = policeIcon;
	  icons[1] = purpleIcon;
	  icons[2] = redIcon;
	  icons[3] = blueIcon;
	  icons[4] = yellowIcon;
	  icons[5] = greenIcon;
	  icons[6] = orangeIcon;
	  icons[7] = brownIcon;
	  icons[8] = lightbIcon;
	  icons[9] = darkredIcon;
	  icons[10] = lightgIcon;
	  icons[11] = znIcon;
	  icons[12] = infoIcon;
	  icons[13] = tanIcon;
	  icons[14] = mustardIcon;
	  icons[15] = blackIcon;
	  icons[16] = skyblueIcon;
	  icons[17] = grayIcon;
	  icons[18] = dorangeIcon;
	  icons[19] = brightpurpleIcon;
	  icons[20] = pinkIcon;
	  icons[21] = maroonIcon;
	  icons[22] = dyellowIcon;
	  icons[23] = gpurpleIcon;
	  icons[24] = agreenIcon;
	  icons[25] = gblueIcon;
	  icons[26] = ggrayblueIcon;
	  icons[27] = ggraygreenIcon;
	  
      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point,icons[icontype]);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });     
		
        gmarkers[i] = marker;
        htmls[i] = html;
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(44.949310, -93.373146), 13);
      
	  
function readMap(url) {
      var request = GXmlHttp.create();
      request.open("GET", url, 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("marker");
			// hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            map.clearOverlays();
			map.addOverlay(city);
            // empty the array
            gmarkers = [];
			
            // reset the side_bar
            side_bar_html="";
			
          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");
			var icontype = parseInt(markers[i].getAttribute("icontype"));
            // create the marker
            var marker = createMarker(point,label,html,icontype);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;

          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var color = lines[a].getAttribute("color");
            var width  = parseFloat(lines[a].getAttribute("width"));
			var opacity = lines[a].getAttribute("opacity");
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,color,width,opacity));
          }
          // ================================================           
        }
      }
      request.send(null);
    }
	  // When initially loaded, use the data from 
      readMap("xmldata/start.xml");
    }
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
// ----------------------------------------------------------------------------
// end of javascript library 
// that's all folks !!!  
// 
// ----------------------------------------------------------------------------