//<![CDATA[

    var kml;    


    if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var weg_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var htmlw = [];
      var htmld = [];
      var points = [];
      var i = 0;
      var map;
      
      //icons-Vorlage:
      //Web-Baukasten der Friedrich-Alexander-Universitaet: Beispiel-Karte 2
      //http://www.vorlagen.uni-erlangen.de/vorlagen/karten/beispiel-karte2.shtml
      var farbicon = new GIcon();
//    farbicon.iconSize = new GSize(32, 32);
      farbicon.iconSize = new GSize(27, 27);
      farbicon.shadowSize = new GSize(22, 20);
      farbicon.iconAnchor = new GPoint(16, 16);
      farbicon.infoWindowAnchor = new GPoint(25, 7);


     // create the map
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl()); 



      // === Create an associative array of GIcons() ===
      var gicons = [];
      var shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
      gicons["red"] = new GIcon(farbicon, "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/yellowcirclemarker.png", null, null);
      gicons["yellow"] = new GIcon(farbicon, "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/yellowcirclemarker.png", null, null);
      gicons["green"]  = new GIcon(farbicon, "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png", null, null);
      gicons["blue"]  = new GIcon(farbicon, "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluencirclemarker.png", null, null);


      // A function to create the marker and set up the event window
      // Ergaenzt um Mittelpunkt und Zoom der Teilstrecke
      function createMarker(point,name,html,weg,dat,icontype) {
        // === create a marker with the requested icon ===
        // === Ergaenzt um LabeledMarker-Demo
        opts = { 
          "icon": gicons[icontype],
          "clickable": true,
          "title": html,
          "labelText": name,
          "labelOffset": new GSize(-6, -10)
        };
        var marker = new LabeledMarker(point, opts);      
        //var marker = new GMarker(point, gicons[icontype]);
        GEvent.addListener(marker, "click", function() {
        //  marker.openInfoWindowHtml(html);
          map.showMapBlowup(marker.getLatLng());
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        htmlw[i] = weg;
        htmld[i] = dat;
		points[i] = point;
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + "Etappe&nbsp;" + name + '</a> ';
        i++;
        return marker;
      }

      function myclick(i) {
        // ===== Start with an empty GLatLngBounds object =====     
        // ==== Each time a point is found, extent the bounds ato include it =====
        var bounds = new GLatLngBounds();
        bounds.extend(points[i]);
        bounds.extend(points[i+1]);
        map.setZoom(map.getBoundsZoomLevel(bounds));
        map.setCenter(bounds.getCenter());
		dat_bar_html = htmld[i];
		weg_bar_html = htmlw[i];
        document.getElementById("weg_bar").innerHTML = weg_bar_html;
        document.getElementById("dat_bar").innerHTML = dat_bar_html;
		// map.panTo(new GLatLng(parseFloat(clats[i]),parseFloat(clngs[i])));
		// map.setZoom(parseInt(czooms[i]));
		// gmarkers[i].openInfoWindowHtml(htmls[i] + czooms[i] + "X" + clats[i]  + "X" + clngs[i]);
      }




      // Read the data from mauerlauf.xml
      GDownloadUrl("http://www.startblog-f.de/mauerlauf/info/mauerlauf.xml", function (doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        // Die Karte wird auf den ersten Datensatz (Index 0) und dem Zoom-f: 10 gesetzt
        var lat = parseFloat(markers[0].getAttribute("lat"));
        var lng = parseFloat(markers[0].getAttribute("lng"));
        map.setCenter(new GLatLng( lat,lng), 10);
        // Ergaeze passende kml-Datei falls vorhanden
        kml = new GGeoXml("http://www.startblog-f.de/mauerlauf/info/mauerlauf2.kml");
        map.addOverlay(kml);

        // Nur bis zum vorletzten Datensatz einlesen
        // Der letzte Datensatz wird nur zum einlesen des Ziels verwendet  
        for (var i = 0; i < markers.length-1; 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 html = markers[i].getAttribute("num") + 
                     " | von " + markers[i].getAttribute("ort") + 
                     " nach " + markers[i+1].getAttribute("ort");
          var label = markers[i].getAttribute("num");
          var weg =  "<strong>" + markers[i].getAttribute("num") + 
                     " | von " + markers[i].getAttribute("ort") + 
                     " nach " + markers[i+1].getAttribute("ort") +
                     "</strong><br />" + markers[i].getAttribute("weg");
          var dat =  markers[i].getAttribute("klm")  + " km | Start: " + markers[i].getAttribute("zeit") + " Uhr";

          // === read the icontype attribute ===
          
		  var icontype = markers[i].getAttribute("col");
          // === create the marker, passing the icontype string ===
          var marker = createMarker(point,label,html,weg,dat,icontype);
          map.addOverlay(marker);
        }
        //fuer das letzte Teilstueck muss der Endpunkt extra generiert werden
        //i = markers.length;
        //var lat = parseFloat(markers[i].getAttribute("lat"));
        //var lng = parseFloat(markers[i].getAttribute("lng"));
        //points[i]= new GLatLng(lat,lng);
        points[i]= points[0]; 
        document.getElementById("side_bar").innerHTML = side_bar_html;
        document.getElementById("weg_bar").innerHTML = weg_bar_html;
        //document.getElementById("dat_bar").innerHTML = "165 km <br />4:45 bis 21:45 Uhr";
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://econym.googlepages.com/index.htm
    // mit Ergaenzungen bzw. Anpassungen von Klaus-Jochen Sympher
    // sympher@gmx.de
    // Mauerlauf am 07.06.2008
    //
    //]]>