// JavaScript Document
    //<![CDATA[

   var side_bar_html = ""; //this variable will collect the html which will eventually be placed in the side_bar
   var gmarkers = []; //arrays to hold copies of the markers used by the side_bar
   var htmls = [];
   var i = 0;  // Counter for the read Data
   var defaultZoomLevel = 11;
   var imagePath = "http://www.down-syndrom-darmstadt.de/fileadmin/js/images/";
   
   var geocoder = null;
   var contextmenu;

   // === Create an associative array of GIcons() ===
   var baseIcon = new GIcon();
   baseIcon.iconSize=new GSize(70,80);
   baseIcon.iconAnchor=new GPoint(24,57);
   baseIcon.infoWindowAnchor=new GPoint(40,10); //definiert den Punkt der Sprechblase

   function setDefaultLocation() {
      //G_HYBRID_MAP)
      map.setCenter(new GLatLng(49.878154649315334, 8.683919906616211),defaultZoomLevel); // leicht verschoben, das Spießfeld zu sehen
      map.checkResize();
   }

   function createContextMenu(map)
   {
      contextmenu = document.createElement("div");
      contextmenu.style.visibility="hidden";
      contextmenu.style.background="#ffffff";
      contextmenu.style.border="1px solid #8888FF";

      contextmenu.innerHTML = //'<a href="javascript:zoomIn()"><div class="context">&nbsp;&nbsp;Vergrößern&nbsp;&nbsp;</div></a>'
                            //+ '<a href="javascript:zoomOut()"><div class="context">&nbsp;&nbsp;Verkleinern&nbsp;&nbsp;</div></a>'
                             '<a href="javascript:zoomInHere()"><div class="context">&nbsp;&nbsp;Hier vergrößern&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOutHere()"><div class="context">&nbsp;&nbsp;Hier verkleinern&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:centreMapHere()"><div class="context">&nbsp;&nbsp;Karte hier zentrieren&nbsp;&nbsp;</div></a>';

      map.getContainer().appendChild(contextmenu);
      GEvent.addListener(map,"singlerightclick",function(pixel,tile)
      {
          clickedPixel = pixel;
          var x=pixel.x;
          var y=pixel.y;
          if (x > map.getSize().width - 120)
          {
            x = map.getSize().width - 120
          }
          if (y > map.getSize().height - 100)
          {
            y = map.getSize().height - 100
          }
          var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));
          pos.apply(contextmenu);
          contextmenu.style.visibility = "visible";
     });
     GEvent.addListener(map, "click", function()
     {
          contextmenu.style.visibility="hidden";
     });
   }
   function zoomIn()
   {
            map.zoomIn();
            contextmenu.style.visibility="hidden";
   }
   function zoomOut()
   {
           map.zoomOut();
           contextmenu.style.visibility="hidden";
   }
   function zoomInHere()
   {
           var point = map.fromContainerPixelToLatLng(clickedPixel)
           //map.setZoom(16);
           map.zoomIn(point,true);
           contextmenu.style.visibility="hidden";
   }
   function zoomOutHere()
   {
          var point = map.fromContainerPixelToLatLng(clickedPixel)
          map.setCenter(point,map.getZoom()-1);
          contextmenu.style.visibility="hidden";
   }
   function centreMapHere()
   {
         var point = map.fromContainerPixelToLatLng(clickedPixel)
         map.setCenter(point);
         contextmenu.style.visibility="hidden";
   }


   if (GBrowserIsCompatible()) {
      //===== A function to create the marker and set up the event window =====
      function createMarker(point,name,html,myIcon,mySideMapIcon) {
        // The info window version with the "to here" form open
        var to_html = '<div id="wolke">' + html + '<br><br>Routenplanung: <b>Hier hin</b> - <a href="javascript:fromhere(' + i + ')">Von hier</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Routenplanung" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' +
           point.lat() + ',' + point.lng() + "(" + name + ")" + '"/>' + '</div>' ;

        // The info window version with the "to here" form open
        var from_html = '<div id="wolke">' + html + '<br><br>Routenplanung: <a href="javascript:tohere(' + i + ')">Hier hin</a> - <b>Von hier</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Routenplanung" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' +
           point.lat() + ',' + point.lng() + "(" + name + ")" + '"/>' + '</div>';

        // The inactive version of the direction info
        html = '<div id="wolke">' + html + '<br><br>Routenplanung: <a href="javascript:tohere('+i+')">Hier hin</a> - <a href="javascript:fromhere('+i+')">Von hier</a>' + '</div>';
        // title:name = Tooltip wir gesetzt, kann aber auch individuell gestaltet werden
        var marker = new GMarker(point, {icon:myIcon, title:name});

        GEvent.addListener(marker, "click", function() { //var marker = new GMarker(point);
            marker.openInfoWindowHtml(html);
        });
        GEvent.addListener(marker, "to", function() { // The custom "to" listener
          marker.openInfoWindowHtml(to_html);
        });
        GEvent.addListener(marker, "from", function() { // The custom "from" listener
          marker.openInfoWindowHtml(from_html);
        });

        //===== save the info we need to use later for the side_bar =====
        gmarkers[i] = marker;
        htmls[i] = html;
        //===== add a line to the side_bar html =====
        if(i % 2 == 0)
            side_bar_html += '<table><tr><td width="250px"><b><img src="'+mySideMapIcon+'"></b> - <a href="javascript:myclick(' + i + ')">' + name + '</a></td>';
        else 
            side_bar_html += '<td width="250px"><b><img src="'+mySideMapIcon+'"></b> - <a href="javascript:myclick(' + i + ')">' + name + '</a><br></td></tr></table>';
        i++;
        return marker;
      }


      //===== This function picks up the click and opens the corresponding info window =====
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
      function tohere(i) { // This function triggers a "to" event on the marker
        GEvent.trigger(gmarkers[i],"to");
      }
      function fromhere(i) { // This function triggers a "from" event on the marker
        GEvent.trigger(gmarkers[i],"from");
      }

      //===== create the map =====
      var map = new GMap2(document.getElementById("map"), { size: new GSize(530,450) } );
      map.addControl(new GMapTypeControl()); // verschieben
      map.addControl(new GLargeMapControl()); //or GSmallMapControl : Zoomdarstellung und DefaultLocation
      map.enableScrollWheelZoom(); //zoom über Scrollrad
      createContextMenu(map);

      setDefaultLocation();

        //=== Markerdaten werden über eine Datei eingelesen
        GDownloadUrl("http://www.down-syndrom-darmstadt.de/fileadmin/js/data.xml", function(data, responseCode) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; 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("html"); //Infotext für die Marker
            var name = markers[i].getAttribute("name"); //Bezeichnung des Markers auch im Tooltip
            var icon = markers[i].getAttribute("icon"); //Grafik des Markers
            var icon_side_map = markers[i].getAttribute("icon_side_map"); //Kleines Bild wie der Marker für die SideMap

            var myIcon = new GIcon(baseIcon, imagePath + icon, null, null);
            var mySideMapIcon = imagePath + icon_side_map;
            
            var marker = createMarker(point,name,html,myIcon,mySideMapIcon); // create the marker, passing the icontype string
            map.addOverlay(marker);
            map.checkResize();
          }

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

    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

//]]>