// set global variables
   var map;
   var routeData;
   var polyLine;
   var currentSite;
   var townCurrentIcon;
   var townDefaultIcon;
   var mapElements = new MapElements();

   // 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(32.2, 112), 5, 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/chinaflag1.gif";
        townDefaultIcon.iconSize         = new GSize(25, 20);
        townDefaultIcon.iconAnchor       = new GPoint(2, 20);

	mapElements.loadElementsFromXML();

        // initialize page with site 1 (Port Elisabeth)
	if (document.URL.match(/\#[0-9]*$/))
	{
	   siteNr = Number(document.URL.match(/[0-9]*$/));
	   putSite(siteNr);
	}
	else { putSite(1); }
      }
    }

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

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

      // wite the polyline:
      mapElements.putPolyLinesOnMap(site);

      // write the icons:
      mapElements.putSiteIconsOnMap(site);


      // write the title:
      writeTitle(site);

      // put the tooltip on arrow:
      putArrowToolTip(site);
      currentSite = site;
      window.location.href = "#" +site; 
   }

   function writeTitle(site) {
      var 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 putMarker(site,markerIcon) {
      try  { marker[site].remove() }
      catch (e) { }

      var siteData     = routeData.getElementsByTagName('site'+site).item(0);
      var markerTitle  = siteData.getAttribute("name");
      var 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, title : markerTitle});

      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';}
   }

   function SiteIcon(site, icon) {
      this.site = site;
      this.icon = icon;
   }

   function PolyLineSegment(site, polyLine) {
      this.site = site;
      this.polyLine = polyLine;
   }

   function MapElements() {
      this.polyLineSegmentArray = [];
      this.siteIconArray        = [];
      //this.siteIconArray        = new Object();

      this.addSiteIcon = function(icon,site) {
          var siteIcon = new SiteIcon(site,icon);
          this.siteIconArray.push(siteIcon);
      }

      this.addPolyLineSegment = function(points,color,site) {
         var polyLine = new GPolyline(points,color,4,0.8);
	 var polyLineSegment = new PolyLineSegment(site,polyLine);
         this.polyLineSegmentArray.push(polyLineSegment);
       }

      // put the PolyLine onto the Map depending on which site was clicked:
      this.putPolyLinesOnMap = function(site) {
	 //alert('length: ' + this.polyLineSegmentArray.length);
         for (var i=0; i < this.polyLineSegmentArray.length; i++)
	 {
	    if (this.polyLineSegmentArray[i].site <= site)
	    { 
	      //alert(this.polyLineSegmentArray[i].polyLine);
	      map.addOverlay(this.polyLineSegmentArray[i].polyLine); 
	    }
	    //else { return; }
	    //{ this.polyLineSegmentArray[i].polyLine.hide() }
	 }
      }

      this.putSiteIconsOnMap = function(site) {
         for (var i=0; i < this.siteIconArray.length; i++)
	 {
	    if (this.siteIconArray[i].site <= site)
	    { 
	      map.addOverlay(this.siteIconArray[i].icon); 
            }
	    else { return; }
	 }
      }

     this.loadElementsFromXML = function() {
         var points          = [];
	 var inlineCount     = 0;
	 var previousSite    = 1;
	 var polyLineColor   = "#FF9900";
	 var point           = [0,0];

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

         for (var i = 0; i < polyData.length; i++) {

            currentSite= Number(polyData[i].parentNode.tagName.replace(/site/,""));

	    if (polyData[i].getAttribute("color") )
	    {
	       try 
	       { 
	          point = new GLatLng(parseFloat(polyData[i].getAttribute("lat")),
	                              parseFloat(polyData[i].getAttribute("lng")));
	          points.push ( point ); 
                  this.addPolyLineSegment(points,polyLineColor,currentSite);
               }
	       catch(e) {};
	       points = [];
	       polyLineColor = polyData[i].getAttribute("color");
	    }
	    else if (currentSite > previousSite)
	    {
	       //alert('currentSite: ' + currentSite + ' / previousSite: ' + previousSite);
               this.addPolyLineSegment(points,polyLineColor,previousSite);
	       previousSite = currentSite;
	       points = [];

	       // last point of old segment is first point of new segment:
	       try { points.push ( point ); }
	       catch(e) {};
	    }

	    point = new GLatLng(parseFloat(polyData[i].getAttribute("lat")),
	                        parseFloat(polyData[i].getAttribute("lng")));

            points.push ( point );

            // add icon, if exists:
	    if( polyData[i].getAttribute("icon")) 
	    {
	       //iconImage = polyData[i].getAttribute("icon");
	       var polyIcon            = new GIcon();
	       polyIcon.image      = polyData[i].getAttribute("icon");
               //polyIcon.iconAnchor = new GPoint(80, 100);
	       if ( polyData[i].getAttribute("offset") )
	       {
	          offsetX = Number(polyData[i].getAttribute("offset").match(/^-*[0-9]*/));
	          offsetY = Number(polyData[i].getAttribute("offset").match(/-*[0-9]*$/));
		  //alert(offsetY);
                  polyIcon.iconAnchor   = new GPoint(offsetX, offsetY);
	       }
	       else
	       { polyIcon.iconAnchor = new GPoint(20, 20); }
               //polyIcon.iconSize   = new GSize(45, 34);
               var iconMarker = new GMarker(point,{icon : polyIcon,clickable : false});
               this.addSiteIcon(iconMarker,currentSite);
	    }
         }
         this.addPolyLineSegment(points,polyLineColor,currentSite);
      }

   }