//<![CDATA[

// ========= Big Shout Out Thanks to Eric and Chad who offered invaluable help in this!!!

// ========= Assign variables to hold copies of the markers and html used by the locations
      var map = new GMap2(document.getElementById("map"));
      var locations_html = '';
      var routes_html = '';
      var gmarkers = [];
      var files = [];
      var polylines = [];
      var onlines = [];
      var maplat = 0;
      var maplng = 0;
      var mapzoom = 0;
      var maplocation = '';
      var markertype = '';
      var i = 0;
      var a = 0;
      var xmlname = unescape(location.href)
      document.getElementById("maploc").innerHTML = '<B><FONT size=+1>Loading Map...</FONT></B>';

// ========= Read the data from xml ========= 

      if(xmlname.indexOf('?') > 0) {
      xmlname = xmlname.substr(xmlname.lastIndexOf('?')+1) + '.xml';
      } else {
      xmlname = 'PWlines.xml';
      } 

	var request = GXmlHttp.create();
	request.open("GET", xmlname, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
		var xmlDoc = request.responseXML;
		
// ========= Obtain map information ===========
		var mapinfo = xmlDoc.documentElement.getElementsByTagName("myMap");

	    maplat = parseFloat(mapinfo[0].getAttribute("lat"));
            maplng = parseFloat(mapinfo[0].getAttribute("lng"));
            mapzoom = parseFloat(mapinfo[0].getAttribute("zoom"));
            maplocation = mapinfo[0].getAttribute("location");
            document.getElementById("maploc").innerHTML = '<B><FONT size=+1>' + maplocation + '</FONT></B>';

// ========= Read and process Markers ===========
		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        markertype = markers[0].getAttribute("type");
        locations_html += '<B>' + markertype + '</B><BR><SPAN CLASS="menu"><UL>';

		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 file = markers[i].getAttribute("file");
            var label = markers[i].getAttribute("label");
            
            // create the marker
            var marker = createMarker(point,label,file);
          }
          
// ========= put the assembled locations_html contents into the locations div ========== 
          locations_html += '<LI><a href="javascript:myclick()">Clear ' + markertype + '</a></LI>';
          locations_html += '</UL></SPAN>';
          document.getElementById("locations").innerHTML = locations_html;
          
// ========= Read and process Polylines =========== 
	var vecRoutes = new Array();
	var vecRouteTypes = new Array();

	// create a structure to hold the necessary info
	function MapData() {}
	MapData.prototype.name = null;
	MapData.prototype.polyline = null;

	var lines = xmlDoc.documentElement.getElementsByTagName("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 name = lines[a].getAttribute("name");
            
    // 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")));
    }

    var polyline = createPolyline(pts,color,width,name);

// ========= get the route type ========== 
    var type = lines[a].getAttribute("type");

    // have we seen this type of route yet?
    if (vecRoutes[type] == null) {
        // we haven't seen this type yet.  Let's create an array to store
        // all routes of this type
        vecRoutes[type] = new Array();
        vecRouteTypes.push(type); 
    }

// ========= store route info ========== 
    var mapData = new MapData();
    mapData.name = name;
    mapData.polyline = polyline;
    
    // add the route
    vecRoutes[type].push(mapData);
}

// now we have a mapping of the route types to their maps, we can create the
// sections for each route type
var routenumber = 0;
for (var i = 0; i < vecRouteTypes.length; ++i) {
    var type = vecRouteTypes[i];  // e.g. "Asphalt Routes" or "Dirt Trails"

	routes_html += '<B>' + type + '</B><BR><SPAN CLASS="menu"><UL>';

// ========= go through each route type and process all of its routes ========== 
    for (var j = 0; j < vecRoutes[type].length; ++j) {
        var mapData = vecRoutes[type][j];
        // mapData.name will give you the name of the map
        // mapData.polyline is your map's polyline
        
        routes_html += '<LI><A ID="rloc' + routenumber + '"HREF="javascript:lineclick(' + routenumber + ')"><SPAN CLASS="goff">' + mapData.name + '</SPAN></A></LI>';
		routenumber += 1;
    	  }
	}

// ========= put the assembled routes_html contents into the routes div ========== 
          routes_html += '<BR> ';
          routes_html += '<LI><a href="javascript:lineclick(-1)">Clear Routes</a></LI>';
          routes_html += '</UL></SPAN>';
          document.getElementById("routes").innerHTML = routes_html;
          
// ========= Finished reading polylines ===========
          {
		showMap();
			} 
        }
      }
      request.send(null);
// ========= Finished reading XML ===========

// ========= Display maps and map info ===========
	function showMap() { 

      //var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());

      var center = new GLatLng(maplat,maplng);
      if(isNaN(mapzoom)) {mapzoom=14;}
      map.setCenter(center,mapzoom);
	}

      // A function to create the marker and set up the event window
      function createMarker(point,name,file) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(file);
		  });
        
        // save the info we need to use later for the locations
        gmarkers[i] = marker;
        files[i] = '<iframe src="markerinfo/' + file + '" width=185 height=120 scrolling=no>';
        
        // add a line to the locations html
        locations_html += '<LI><A ID="rmrk' + i + '" HREF="javascript:myclick(' + i + ')"><SPAN CLASS="goff">' + name + '</SPAN></A></LI>';
        i++;
        return marker;
        }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
      	for (var n = 0; n < gmarkers.length; n++) {
       		map.removeOverlay(gmarkers[n]);
        	map.closeInfoWindow();
			document.getElementById("rmrk" + n).innerHTML = document.getElementById("rmrk" + n).innerHTML.replace("gon" , "goff");
      		}

        if (typeof(i) != 'undefined') {
        	map.addOverlay(gmarkers[i]);
        	gmarkers[i].openInfoWindowHtml(files[i]);
		document.getElementById("rmrk" + i).innerHTML = document.getElementById("rmrk" + i).innerHTML.replace("goff" , "gon");
        	}
      }


	// A function to create the polylines and set up the event window
	function createPolyline(pts,color,width,name,type) {
		var polyline = new GPolyline(pts,color,width,1);	
		polylines[a] = polyline;
		a++;
		return polyline;	
	}

	// This function picks up the click and opens the corresponding info window
	function lineclick(a) {
	if (a<0) {
		for (var n = 0; n < polylines.length; n++) {
			map.removeOverlay(polylines[n]);
			document.getElementById("rloc" + n).innerHTML = document.getElementById("rloc" + n).innerHTML.replace("gon" , "goff");
			onlines[n] = 0;
      			}
	} else {
		if (onlines[a] > 0) {
			map.removeOverlay(polylines[a]);
			document.getElementById("rloc" + a).innerHTML = document.getElementById("rloc" + a).innerHTML.replace("gon" , "goff");
			onlines[a] = 0;
		} else {
			map.addOverlay(polylines[a]);
			document.getElementById("rloc" + a).innerHTML = document.getElementById("rloc" + a).innerHTML.replace("goff" , "gon");
			onlines[a] = 1;
			}
		}
	}


    //]]>