// Hurricane City Planning Commission Google Map Code. //
// Copyright 2006 Hurricane Geographics (435)635-3051. //
// Author: Joe Rhodes, jerhodes@charter.net            //

    //<![CDATA[

    if (GBrowserIsCompatible()) {
      // ========= define array to hold copies of the map markers for later functions =========== //
         var gmarkers = [];

      // ========= define array to hold info bubble html (htmls) =========== //
         var info_html = [];

      // ========= Define varible to hold sidemenu menu items =========== //
         var sidemenu_html = "";

      // ========= Index variable =========== //
         var i = 0;

      // ========= variables for map extents =========== //
         var mapcenlat = 37.16932;
         var mapcenlon = -113.351749;
         var mapzoom = 12;

      // ========= table variables =========== //
	 tblhdr = '<table border="1" cellpadding="2px" cellspacing="2px" style="border-collapse: collapse">';
	 apntr = '<tr><td style="font-size: 12px; font-family: Verdana, Arial, Helvetica">Application</td>';
	 apnametr = '<tr><td style="font-size: 12px; font-family: Verdana, Arial, Helvetica">Applicant</td>';
	 desctr = '<tr><td style="font-size: 12px; font-family: Verdana, Arial, Helvetica">Description</td>';
	 loctr = '<tr><td style="font-size: 12px; font-family: Verdana, Arial, Helvetica">Location</td>';
	 endr = '</table>'

      // ========= Create an associative array of GIcons() =========== //
         var gicons = [];
         gicons["cp"] = new GIcon(G_DEFAULT_ICON, "cp.png");
         gicons["cup"] = new GIcon(G_DEFAULT_ICON, "cup.png");
         gicons["fp"]  = new GIcon(G_DEFAULT_ICON, "fp.png");
         gicons["fsp"] = new GIcon(G_DEFAULT_ICON, "fsp.png");
         gicons["ls"]  = new GIcon(G_DEFAULT_ICON, "ls.png");
         gicons["ps"] = new GIcon(G_DEFAULT_ICON, "ps.png");
         gicons["psp"]  = new GIcon(G_DEFAULT_ICON, "psp.png");
         gicons["zc"]  = new GIcon(G_DEFAULT_ICON, "zc.png");

      //** function to create the markers, set up the marker listener, and the side bar menu div elements. **//
           function createMarker(point,name,html,img) {
           html = '<div style=white-space: nowrap">' + html + '</div>';
           var marker = new GMarker(point, gicons[img]);
           GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
           });
        // save the info we need to use later for the sidemenu
           gmarkers[i] = marker;
           info_html[i] = html;
        // add a line to the sidemenu html
           sidemenu_html += '<a href="javascript:sidemenu_click(' + i + ')">' + name + '</a><br>';
           i++;
           return marker;
           } // END FUNCTION //

      //*** This function intercepts side bar clicks & opens associated map marker info window. ***//
         function sidemenu_click(i) {
            gmarkers[i].openInfoWindowHtml(info_html[i]);
         }

      //*** This function recenters the map. ***//
         function recenter() {
            map.closeInfoWindow()
            map.setCenter(new GLatLng(mapcenlat, mapcenlon), mapzoom);
         }
      //*******************************  BEGIN MAIN ***********************************//
      // ========= create the map =========== //
         var map = new GMap2(document.getElementById("map"));
         map.addControl(new GLargeMapControl());
         map.addControl(new GMapTypeControl());
         map.setCenter(new GLatLng(mapcenlat, mapcenlon), mapzoom);
      // ================================================ //
      
      // ========= Read the data from XML file and create markers =========== //
         var request = GXmlHttp.create();
         request.open("GET", "hpcdata.xml", true);
         request.onreadystatechange = function() {
            if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");

         // loop through the array of markers //
            for (var i = 0; i < markers.length; i++) {

               // get marker attributes. //
                  var lat = parseFloat(markers[i].getAttribute("lat"));
                  var lng = parseFloat(markers[i].getAttribute("lng"));
                  var point = new GPoint(lng,lat);
                  var name = markers[i].getAttribute("name");
                  var namet = '<td style="font-size: 9px; font-family: Verdana, Arial, Helvetica">' + markers[i].getAttribute("name") + '</td></tr>';
                  var loc = '<td style="font-size: 9px; font-family: Verdana, Arial, Helvetica">' + markers[i].getAttribute("loc") + '</td></tr>';
                  var desc = '<td style="font-size: 9px; font-family: Verdana, Arial, Helvetica">' + markers[i].getAttribute("desc") + '</td></tr>';
                  var sdesc = markers[i].getAttribute("sdesc");
                  var app = '<td style="font-size: 9px; font-family: Verdana, Arial, Helvetica">' + markers[i].getAttribute("app") + '</td></tr>';
  	          var img = markers[i].getAttribute("img");
		  var name = name + " - " + sdesc
                  var html = tblhdr + apntr + namet + apnametr + app + loctr + loc + desctr + desc + endr;

               // create the marker //
                  var marker = createMarker(point,name,html,img);
                  map.addOverlay(marker);
            } // END FOR LOOP //
         // ================================================ //

         // ========= 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"));
            // 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));
            }
         // ================================================ //

         // ========= put sidemenu_html contents into the sidemenu div. ========= //
            document.getElementById("sidemenu").innerHTML = sidemenu_html;
            } // END IF //

         } // END REQUEST //
         request.send(null);
    }
    else {
         alert("Sorry, Google Maps API is not compatible with this browser");
    } // END IF //

    //]]>