//
// 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.652438, 8.723145), 9, 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 width="150" 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="left" valign="top">'  + '&nbsp;<a href="javascript:myclick(' + i + ')" class="textlink">' + name + '</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.652438, 8.723145), 9, 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: "a{{aHac`u@sKhs@iGjS_P|LyKtEoR~T{E`RmFbOOvQoMxk@qBhV|@fQzC~MoEt[UvTvDfJxFdPvD`VoAlTwJdf@wJ|^oNbb@aL`OqH~ImI~XsO`l@kFx`@y@nMc@l[y@tWcClPiC`SQvE",
  levels: "P?FGEHFGEIFGEHFEGJFGHGIEGHFGKFGFP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline1);


var polyline_reuss =  new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "ab_`Hav{q@uEvTqEpGgHlEkGa@yDyC{AyFKeI~@mIfBqGdAcDpCiGzEuEjCiCdAmEWyCoCaGqEs@eGz@eGbDeEvBuInFsHdEkCbHmFrH}CdI_CjKiCjHyFpCqENaHwBeEuAsJbD_AzGr@zHxB|DdEtAfFNxBXvCbHZ`Ky@hGeCdEmH?_Oi@aDoBmBgFgBoFcDoFoE}@kC`CiBhGJ`G|ChOhG~TvArO?dP_AxNqAlLsDnJuClEyFpCcHXsF_CwHuEyDoBeCz@oBz@}Bh@cDq@oMp@oWGeEfBeApGEpNKfNyDpJyFlAiGh@cF~EuCbL_GjO{G~MyJnJeG|DcMrDeIdEaD~FqQjV{OrOiKvFkE~IiM`YqE`O[zG`@jLeAbHsBr@iC{@iBG",
  levels: "P?EFEGDEFDGEFDECGDHEFEGEFHEFEGIDFDEFDEFGEFDFGDEFEGHDEFGEHEIEFEJEFDGDEDFHDEFGEFIEFGEHEFGEKFGEHEFEGDEP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline_reuss);

    // Punkte 47.677178 8.810349
     var point = new GLatLng(47.677178, 8.810349);
   var marker = createMarker(point,"Rhein","<div>Rhein<br />Stein am Rhein - Diessenhofen<br /><a href=\"index.cfm/fuseaction/seite_anzeigen/seite/rhein_feierabendtour.htm\">Beschreibung der Tour</a></div>")
   map.addOverlay(marker);
   
    var point = new GLatLng(47.393527, 8.307209);
   var marker = createMarker(point,"Reuss","<div>Reuss<br />Bremgarten - Mellingen<br /><a href=\"index.cfm/fuseaction/seite_anzeigen/seite/reuss_feierabendtour.htm\">Beschreibung der Tour</a></div>")
   map.addOverlay(marker);
      

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