//
// Die GoogleMap Polylines (Koordinatendaten) der einzelnen Touren sind Eigentum von Trango - Dominik Schläpfer. 
// Diese Daten sind urheberrechtlich geschützt, jede Verwendung durch Dritte ist ausdrücklich untersagt und wird 
// verfolgt.
//

var map;

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var zmarkers = [];
 
 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
    }

function zoomclick(i) {
    map.setCenter(zmarkers[i],17,G_SATELLITE_MAP);      
    }
   
function resetmap () {
    map.setCenter(new GLatLng(47.675329, 8.738594), 11, G_NORMAL_MAP);
    }


function load(){

    if (GBrowserIsCompatible()) {
    // Initialize
    if(document.implementation.hasFeature(
       "http://www.w3.org/TR/SVG11/feature#SVG","1.1")){ 
      _mSvgEnabled = true;
      _mSvgForced  = true;
    }
    map = new GMap2(document.getElementById("map"));
      
         
    // this variable will collect the html which will eventualkly be placed in the side_bar
    var side_bar_html = "";
    
    // arrays to hold copies of the markers and html used by the side_bar
    // because the function closure trick doesnt work there
    //  var gmarkers = [];
    //  var zmarkers = [];
    var i = 0;  
      
     // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        // use a custom icon with letter A - Z
        var letter = String.fromCharCode("A".charCodeAt(0) + i);
        var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png"); 
        var marker = new GMarker(point, {icon:myIcon});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        zmarkers[i] = point;
        
        // add a line to the side_bar html
        side_bar_html += '<table border="0"><tr><td width="20" valign="top"><a href="javascript:myclick(' + i + ')"><img src="http://www.google.com/mapfiles/icon'+letter+'.png"></a></td><td align="center">'  + '&nbsp;<a href="javascript:myclick(' + i + ')" class="textlink">' + name + '</a><br>' + '<a href="javascript:zoomclick(' + i + ')"><img src="http://www.trango.ch/_admin/vorlagen/seiten/bilder/24-zoom.gif" title="vergr&ouml;ssern"></a></td><td>&nbsp;</td></tr></table>';
        i++;
        return marker;
      }

      
    // Add the controls and set up the map
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    var omc = new GOverviewMapControl();
    map.addControl(omc);
    // omc.hide();
    map.setCenter(new GLatLng(47.675329, 8.738594), 11, G_NORMAL_MAP);


   // Set up the encoded polyline.  This is the thinner, clear blue line.
    
   var polyline1 =  new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "g{{aHyb`u@iItf@cIp`@oElEwQnFqHvI{GxJiK~XoEbLa@vMcGhY}Hn\\g@tWfDjLNpUwD~MeApJ`DdQdJtSpChV]|WcGn\\cIx\\yGtPoGzVwFnJsMpNkJlWaJpYqF~TqF`ZwA~T[nc@mDz^gDtSIln@hAzYbIrb@vD~TjArZ{AxYaF`RiIvQiC~LaD|PqDdP_AxJzEpNjJrHxGrKtGvMfKnQvH~XrDnTEdTmB|[gDbSkJzVyIhRoNnXgFjPy@zA",
  levels: "P?FGFHEGEIFGHEFGEIJFGFHFGIFGHFGKFGHGIFGHFGFJEFGEFHEGFIFGFHFGIP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline1);

    // Punkte 
    var point = new GLatLng(47.662497, 8.854315);
    var marker = createMarker(point,"Treffpunkt","<div>Treffpunkt in Stein am Rhein<br>beim Parkplatz unterhalb des Hafens</div>")
      map.addOverlay(marker);
      
    var point = new GLatLng(47.694469, 8.646154 );
    var marker = createMarker(point,"Ende der Tour","<div>Ende der Tour<br />Schaffhausen beim Bootshaus des Ruderclubs</div>")
       map.addOverlay(marker);
      

          
      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
         
    
   }
   
}