// set global variables
   var map;
   var routeData;
   var polyLine;
   var currentSite;
   var townCurrentIcon;
   var townDefaultIcon;

   // set global markers
   var marker = new Array();

   function load() {
      routeData = loadXML("./route.xml");
      if (GBrowserIsCompatible()) {
	// create the map
        map = new GMap2(document.getElementById("map"));
        map.addControl (new GLargeMapControl());
        map.addControl (new GScaleControl());
        map.addControl (new GMapTypeControl());
        map.setCenter(new GLatLng(-33.402, 21.852), 7, G_SATELLITE_MAP);

        var pic = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80,15));
        pic.apply(document.getElementById("picLayer"));
        map.getContainer().appendChild(document.getElementById("picLayer"));

	townCurrentIcon                  = new GIcon();
	townCurrentIcon.image            = "./icons/townArrowMarker.gif";
        townCurrentIcon.iconAnchor       = new GPoint(22, 25);
        townCurrentIcon.iconSize         = new GSize(45, 34);

        townDefaultIcon                  = new GIcon();
        townDefaultIcon.image            = "./icons/southafricaflag.gif";
        townDefaultIcon.iconSize         = new GSize(25, 20);
        townDefaultIcon.iconAnchor       = new GPoint(2, 20);

        // initialize page with site 1 (Port Elisabeth)
        putSite(1);
      }
    }

   function putSite(site) {
      map.clearOverlays();

      // write the markers onto the page:
      for (var i= 1; i<= 9; ++i) 
      {
	if (i == site)
           putMarker(i,townCurrentIcon);
	else
           putMarker(i,townDefaultIcon);
      }
	
      // wite the polyline:
      putPolyLine(site);

      // write the title:
      writeTitle(site);

      // put the tooltip on arrow:
      putArrowToolTip(site);
      currentSite = site;
   }

   function writeTitle(site) {
      titleArray = getTitle(site);
      document.getElementById('title').innerHTML = titleArray[0];
      document.getElementById('linkPictures').setAttribute("href",titleArray[2],0);
      document.getElementById('pic').setAttribute("src","./picture_preview/site"+site+".jpg",0);
      setVisible('picLayer');
   }

   function getTitle(site) {
      var siteData    = routeData.getElementsByTagName('site'+site).item(0);
      var toolTipData = new Array();

      toolTipData[0]  = siteData.getAttribute("name");
      toolTipData[1]  = siteData.getAttribute("date");
      toolTipData[2]  = siteData.getAttribute("link");

      return toolTipData;
   }

   function putPolyLine(site) {
      var points = [];

      try { polyData = routeData.getElementsByTagName('poly'); }
      catch (e) {return;}

      for (var i = 0; i < polyData.length; i++) {
         currentParentID = polyData[i].parentNode.tagName.replace(/site/,"");
	 if (Number(currentParentID) > site)
	 {
            writePolyLine(points);
	    return;
	 }
         points.push ( new GLatLng(parseFloat(polyData[i].getAttribute("lat")),
                                   parseFloat(polyData[i].getAttribute("lng")))
		     );
      }
         writePolyLine(points);
   }

   function writePolyLine(points) {
      try  { polyLine.remove() }
      catch (e) { }

      if (points.length > 0) {
         polyLine = new GPolyline(points,"#FF9900",4,0.8);
         map.addOverlay(polyLine);
      }
   }

   function putMarker(site,markerIcon) {
      try  { marker[site].remove() }
      catch (e) { }

      var siteData = routeData.getElementsByTagName('site'+site).item(0);
      coordinates  = siteData.getElementsByTagName('coordinates').item(0);
      var point    = new GLatLng(parseFloat(coordinates.getAttribute("lat")),
                                 parseFloat(coordinates.getAttribute("lng")));
      marker[site] = new GMarker(point,{icon : markerIcon});

      GEvent.addListener(marker[site], "click", function() {
           putSite(site);
        });

      //alert('adding: ' + site);
      map.addOverlay(marker[site]);
   }

   function loadXML(xmlFile) {
     if (window.XMLHttpRequest)
       { xhttp=new XMLHttpRequest(); }
     else // Internet Explorer 5/6
       { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

     xhttp.open("GET",xmlFile,false);
     xhttp.send("");
     xmlDoc=xhttp.responseXML;
     return xmlDoc;
   }

    function setInvisible(objID) {
      document.getElementById(objID).style.visibility = 'hidden';
    }

    function setVisible(objID) {
      document.getElementById(objID).style.visibility = 'visible';
    }

    function invert(objID) {
      //alert('invert');
      document.getElementById(objID).setAttribute("src","./icons/"+objID+"_invert.gif",0);
    }

    function unInvert(objID) {
      //alert('uninvert');
      document.getElementById(objID).setAttribute("src","./icons/"+objID+".gif",0);
    }


   function getCoordinates() {
      var center = map.getCenter();
      x = center.lat();
      y = center.lng();
      alert("lat: " + x + " / lng: " + y);
   }

   function linkHover(objID,type)
   {
   if (type == 'in') {document.getElementById(objID).style.textDecoration = 'underline'; }
      else {document.getElementById(objID).style.textDecoration = 'none';}
   }