//
// 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.377415, 8.312359), 10, 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.377415, 8.312359), 10, 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: "mfg_Hkxfr@mQyJ}QaZkUsZ{Hk@gHOaQePeQ_JmJ|DuTpVkGdLqEnFmLp@aKiDsHmEcJfCsHxJqKtHoJs@sLkDyLsDkIr@yH|L{R~\\qMxFqSrDmZ|LqYpYqIbLwKpYsN`VcPhG_QPgFmAoTwBgRuEqKs@yFbDeIjHeM~IeIGgNQgFhCiJzOuYdq@cBtPb@~ToDpK_GrGiCdMwGnMaLp]cHzVyNnMmJX_GiCg@cHnAeEhH_CtC{Gg@uIeCyF}AmBiAc@",
  levels: "P?FHEFGIEGEHEFGEIFJFGEFHFGIGFHJKFEGHEFGIEFGFHEFIEJEGHFGEDFEFGDEP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline1);



var polyline2 =  new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "ku}_Ho_}q@i@bDm@fAcGTu@d@kAhAeEzAwDtAiABsAj@q@|Ao@~AyB}Aa@dAa@nDE~BIdAItAMNi@S]nB",
  levels: "P?CECFDEGCDEDCFCDCACP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline2);

 var polyline3 =  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{@iBGsF|A{EjAaFGyFpCeC|HaD|Sa@zKl@lM?`NgDvFmF?iF?oEoBaD{@mHi@_GtAkEeAyBwBuCiGeE_JcEwFwE{DuGcDsLcD}FqCeGkAaD`DkGdIiI|HgDbDsFdIqCjHuAbHeEzDmDzK{AnMu@pUJjLjA`VJ`RQbHg@zGgDfCeEG_CaGoCiK_GoFoK{GaHz@qG~BgFmBgHmAaDXuEdBsJ|HcIdIkGfJmDbK_ChDgDP}BqC",
  levels: "P?EFEGDEFDGEFDECGDHEFEGEFHEFEGIDFDEFDEFGEFDFGDEFEGHDEFGEHEIEFEJEFDGDEDFHDEFGEFIEFGEHEFGEKFGEHEFEGDECFIEFEGEFHEFEFGEFHDEFGIJFEGDFGHEFDGEFIEFGDEFDEFGFHEFEGELEFGDEP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline3);


var polyline4 =  new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "wrx`H_oeq@F_L`AuGr@wEMcEBkK_AaDyG_FuIgF_DiEuDkFuG_JwAiB{BJiBd@uC|ByC~BoDvD{FpA_CFkF?oDGk@?",
  levels: "P?DEFEDGEFEHDECFDEGDEFP",
  zoomFactor: 2,
  numLevels: 18
});


map.addOverlay(polyline4);


var polyline5 = new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
 points: "gk{`Hu{gq@sCd@wHfD_GdGgEpCsFE{B_AoEi@oI|A_IGaKz@iF\\sGxAqGrB{FNyEOkDa@sD?gCF",
  levels: "PBDBFCBECC@DAEBAB@P",
  zoomFactor: 2, 
  numLevels: 18
});

map.addOverlay(polyline5);








    // Punkte 
    var point = new GLatLng(47.227860, 8.396237);
    var marker = createMarker(point,"Treffpunkt","<div>Treffpunkt in M&uuml;hlau<br>bei der Br&uuml;cke</div>")
      map.addOverlay(marker);
      
      
    var point = new GLatLng(47.375729, 8.311651);
    var marker = createMarker(point,"1. Tag","<div>Tagesziel 1. Tag<br />Zeltplatz Sulz bei K&uuml;nten</div>")
       map.addOverlay(marker);   
      
    var point = new GLatLng(47.516512, 8.232611);
    var marker = createMarker(point,"Ende der Tour","<div>Ende der Tour<br />Schiffl&auml;nde in Stilli</div>")
       map.addOverlay(marker);
      

          
      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
         
    
   }
   
}
