// Southern Utah Area Golf Courses, including the Red Rock Golf Trail 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.12966595484084;
         var mapcenlon = -113.49151611328125;
         var mapzoom = 11;

      // ========= table variables =========== //
	 pictbl = '<table class="mkinfo" border="0" cellpadding="2px" cellspacing="0" style="border-collapse: collapse"><tr><td><div>';
	 namedata = '<td style="text-align: left">';
	 feetbl = '<table class="mkinfo" border="0" cellpadding="2px" cellspacing="0" style="border-collapse: collapse; width: 320px"><tr style="background-color: #f1f1f1; border-top : 2px solid #1c6381; border-bottom : 2px solid #1c6381;">';
	 ratetblhdr = '<table class="mkinfo" border="0" cellpadding="2px" cellspacing="0" style="border-collapse: collapse; width: 320px"><tr><td style="text-align: center"><div>Middle Tee Ratings</div></td></tr></table>';
	 ratedatatbl = '<table class="mkinfo" border="0" cellpadding="2px" cellspacing="0" style="border-collapse: collapse; width: 320px"><tr style="text-align: center; background-color: #f1f1f1; border-top : 2px solid #1c6381; border-bottom : 2px solid #1c6381;"><td style="width: 80px"><div>Par</div></td><td style="width: 80px"><div>Rating</div></td><td style="width: 80px"><div>Slope</div></td><td style="width: 80px"><div>Yards</div></td></tr>';
	 ugalnktbl = '<table class="mkinfo" border="0" cellpadding="2px" cellspacing="0" style="border-collapse: collapse; width: 320px">';

      // ========= Create an associative array of GIcons() =========== //
         var gicons = [];
         gicons["muni"] = new GIcon(G_DEFAULT_ICON, "muni.gif");
         gicons["pri"] = new GIcon(G_DEFAULT_ICON, "pri.gif");
         gicons["pub"]  = new GIcon(G_DEFAULT_ICON, "pub.gif");
         gicons["rmuni"] = new GIcon(G_DEFAULT_ICON, "rmuni.gif");
         gicons["rpri"] = new GIcon(G_DEFAULT_ICON, "rpri.gif");
         gicons["rpub"]  = new GIcon(G_DEFAULT_ICON, "rpub.gif");
         gicons["planned"]  = new GIcon(G_DEFAULT_ICON, "planned.gif");

      //** 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 class="mkinfo">' + 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 + ')" class="sbitem">' + 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", "sgdata.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 picdata = '<img src="' + markers[i].getAttribute("pic") + '" width="120" height="98" alt=""/></div></td>';
                  var name = markers[i].getAttribute("name");
                  var link = markers[i].getAttribute("link");
                  if (link!="") {
                     var link = '<div><b><a href="' + markers[i].getAttribute("link") + '" class="iwname">' + name + '</a></b>';
                  }
                  else {
                     var link = "<div><b>" + name +"</b>";
                  } // END IF //
                  var addr = "<br/>" + markers[i].getAttribute("addr") + "<br/>";
                  var cty = markers[i].getAttribute("cty") + "<br/>";
                  var ph = markers[i].getAttribute("ph") + "<br/>";
                  var holes = markers[i].getAttribute("holes") + "</div></td></tr></table>";
                  var gf = '<td style="width: 160px"><div>Typical Green Fee: ' + markers[i].getAttribute("gf") + '</div></td>';
   	          var cf = '<td style="width: 160px"><div>Cart Fee: ' + markers[i].getAttribute("cf") + '</div></td></tr></table>';
                  var par = '<tr style="text-align: center"><td style="width: 80px"><div>' + markers[i].getAttribute("par") + '</div></td>';
   	          var rate = '<td style="width: 80px">' + markers[i].getAttribute("rate") + '</div></td>';
   	          var slope = '<td style="width: 80px"><div>' + markers[i].getAttribute("sl") + '</div></td>';
   	          var yd = '<td style="width: 80px"><div>' + markers[i].getAttribute("yd") + '</div></td></tr></table>';
                  var uga = markers[i].getAttribute("uga");
                  if (uga!="") {
   	             var ugadata = '<tr><td><div><a href="' + markers[i].getAttribute("uga") + '">Course Information from the Utah Golf Association</a></div></td></tr></table>';
                  }
                  else {
                     var ugadata = "";
                  } // END IF //
  	          var img = markers[i].getAttribute("img");
                  var html = pictbl + picdata + namedata + link + addr + cty + ph + holes + feetbl + gf + cf + ratetblhdr + ratedatatbl + par + rate + slope + yd + ugalnktbl + ugadata;
               // 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 //

    //]]>