$(document).ready(function() {
if(GBrowserIsCompatible()) {

  $(window).unload( function() { GUnload(); } );

//## dom vorbereiten
  var mapsdiv = $("#maps");
  mapsdiv.empty();

  //# Tabs
  mapsdiv.before('<ul id="tabs"></ul>');
  var tabs = $("#tabs");
  tabs.hide();
  function tabswitch(tab, target) {
    tabs.children().css({"background-color":"transparent","font-weight":"normal"});
    $(tab).css({"background-color":"#5f0101","font-weight":"bold"});
    mapsleft.children().hide();
    target.show();
  }


  //# Tabelle
  mapsdiv.append('<table><tr><td id="mapsleft" width="100%"></td><td id="mapsright"></td></tr></table>');
  var mapsleft = $("#mapsleft");
  var mapsright = $("#mapsright");
  mapsleft.css({"text-align":"left","vertical-align":"top"});
  mapsright.css({"vertical-align":"top"});

  //# Karte
  canvas = mapsright.append('<div id="canvas" style="width: 500px; height: 500px;"></div>').children("*:last");


//## GMap vorbereiten
  map = new GMap2(document.getElementById("canvas"));
  map.addControl(new GLargeMapControl());
  var cfpoint = new GLatLng(51.262483, 7.178953);
  var blueIcon = new GIcon(G_DEFAULT_ICON);
  blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
  markerOptions = { icon:blueIcon };
  var cfmarker = new GMarker(cfpoint, markerOptions);
  map.setCenter(cfpoint, 15);
  GEvent.addListener(map, "clearoverlays", function() {
    map.addOverlay(cfmarker);
  });
  map.clearOverlays();
  map.checkResize();
  cfmarker.openInfoWindowHtml('<div style="width: 250px;"><img style="display: block; width: 150px; margin: auto;" src="/img/maps_logo.gif" alt="Club Fröhlich" /><p class="mapinfo" style="text-align: center">Wittensteinstr. 148</p></div>');


  //# Boxen links
  route = mapsleft.append('<div><p>From here:</p><form id="dirform" action="#"><input type="text" id="fromAddress" name="from" style="border-right: 0; width: 135px; height: 18px; margin: 2px 0 0 0; vertical-align: top; font-size: 1em;" /><input type="image" src="/img/route.gif" name="submit" style="border: 0; width: 102px; height: 31px; margin: 0px !important; margin-top: 1px; padding: 0;" /></form><div id="directions"></div></div>').children("*:last");
    tabs.append('<li style="background: url(\'/img/auto.gif\') no-repeat 3px 3px">Route</li>').children("*:last").click(function() {tabswitch(this, route); map.clearOverlays();});

  $.get('/data/pointer.en_US.xml',function(pointers) {

  railway = mapsleft.append('<div><h3>Bus and Railway</h3><p>Following stops are nearby</p></div>').children("*:last").hide();
   
    var railwaymarkers = new Array();

    $(pointers).find('pointer[category=railway]').each(function(cnt) {

    railway.append('<p>' + $(this).children('title').text() + '<br />' + $(this).children('adr').text() + '<br />' + $(this).children('text').text() + '</p>');
    railwaymarkers[cnt] = new GMarker(new GLatLng($(this).children('lat').text(),$(this).children('lng').text()));
    railway.children("*:last").mouseover(function() {
      $(this).css('font-weight','bold');
      for(var i=0; i<railwaymarkers.length; i++) {
        if(i != cnt) railwaymarkers[i].hide();
      }
    }).mouseout(function() {
      $(this).css('font-weight','normal');
      for(var i=0; i<railwaymarkers.length; i++) {
        if(i != cnt) railwaymarkers[i].show();
      }
    });

    });
    railway.append('<p><b>Bus connection</b><br/>From the main station (Döppersberg) with line 611, direction: Lenneper Str./Oberbarmen<br/>to the stop called Polizeipräsidium<br/><a href="http://www.vrr.de" target="_blank">vrr.de</a></p>');
    railway.append('<p><b>Schwebebahnverbindung</b><br/>From main station (Döppersberg) direction: Oberbarmen<br/>to stop called Völklinger Str.<br/><br/>From station Oberbarmen, direction: Vowinkel<br/>to stop called Völklinger Str.<br/><a href="http://www.vrr.de" target="_blank">vrr.de</a></p>');
    railway.append('<p><b>Alternate direction</b><br/>By taxi from the main station to Club Fröhlich you will pay approximately 7 Euro<br/>Taxi service 0202 275454<br/><a href="http://www.taxi-wuppertal.de" target="_blank">taxi-wuppertal.de</a></p>');

    tabs.append('<li style="background: url(\'/img/bus.gif\') no-repeat 3px 3px">Bus/Train</li>').children("*:last").click(function() {
      tabswitch(this, railway);
      map.setCenter(cfpoint,15);
      map.clearOverlays();
      for(var i=0; i<railwaymarkers.length; i++)  {
        map.addOverlay(railwaymarkers[i]);
      }
    });


  atm = mapsleft.append('<div><h3>Cash machines</h3><p>Cash machines nearby</p></div>').children("*:last").hide();

      var atmmarkers = new Array();
    $(pointers).find('pointer[category=atm]').each(function(cnt) {

    atm.append('<p><a href="' + $(this).children('link').text() + '" target="_blank">' + $(this).children('title').text() + '</a><br />' + $(this).children('adr').text() + '<br />' + $(this).children('text').text() + '</p>');
    atmmarkers[cnt] = new GMarker(new GLatLng($(this).children('lat').text(),$(this).children('lng').text()));
    atm.children("*:last").mouseover(function() {
      $(this).css('font-weight','bold');
      for(var i=0; i<atmmarkers.length; i++) {
        if(i != cnt) atmmarkers[i].hide();
      }
    }).mouseout(function() {
      $(this).css('font-weight','normal');
      for(var i=0; i<atmmarkers.length; i++) {
        if(i != cnt) atmmarkers[i].show();
      }
    });

    });

    tabs.append('<li style="background: url(\'/img/ec.gif\') no-repeat 3px 3px">Cash machine</li>').children("*:last").click(function() {
      tabswitch(this, atm);
      map.setCenter(cfpoint,14);
      map.clearOverlays();
      for(var i=0; i<atmmarkers.length; i++) {
        map.addOverlay(atmmarkers[i]);
      }
    }); 


  hotel = mapsleft.append('<div><h3>Hotels</h3><p>We would like to recommend the following hotels in Wuppertal</p></div>').children("*:last").hide();

    var hotelmarkers = new Array();
    $(pointers).find('pointer[category=hotel]').each(function(cnt) {

    hotel.append('<p><a href="' + $(this).children('link').text() + '" target="_blank">' + $(this).children('title').text() + '</a><br />' + $(this).children('adr').text() + '<br />' + $(this).children('text').text() + '</p>');
    hotelmarkers[cnt] = new GMarker(new GLatLng($(this).children('lat').text(),$(this).children('lng').text()));
    hotel.children("*:last").mouseover(function() {
      $(this).css('font-weight','bold');
      for(var i=0; i<hotelmarkers.length; i++) {
        if(i != cnt) hotelmarkers[i].hide();
      }
    }).mouseout(function() {
      $(this).css('font-weight','normal');
      for(var i=0; i<hotelmarkers.length; i++) {
        if(i != cnt) hotelmarkers[i].show();
      }
    });

    });
 
    tabs.append('<li style="background: url(\'/img/hotel.gif\') no-repeat 3px 3px">Hotel</li>').children("*:last").click(function() {
      tabswitch(this, hotel);
      map.setCenter(cfpoint,11);
      map.clearOverlays();
      for(var i=0; i<hotelmarkers.length; i++) {
        map.addOverlay(hotelmarkers[i]);
      }
    });


  // Erste Box aktivieren
  tabswitch(tabs.children("*:first"), route);

  // Tabs noch stylen
  tabs.css({"display":"block","width":"730px","height":"30px","margin":"auto"});
  tabs.children("li").css({"border-left":"1px solid #e0c9a7","border-top":"1px solid #e0c9a7","border-right":"1px solid #e0c9a7","display":"block","float":"left","width":"100px","height":"30px","padding-left":"40px","padding-top":"8px","cursor":"pointer"});
  tabs.show();


});

//## Routenplaner
  var gdir = new GDirections(map, document.getElementById("directions"));
  function handleErrors(){
    if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
      $("#directions").text("The given address couldn't be found, perhaps the address is not exact or too new.");
    else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
      $("#directions").text("Die angegebene Adresse konnte nicht verarbeitet werden.");
    else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
      $("#directions").text("Es wurde keine Adresse angegeben.");
    else if (gdir.getStatus().code == G_GEO_BAD_KEY)
      $("#directions").text("Es trat ein technischer Fehler auf.");
    else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
      $("#directions").text("Die Anfrage ist fehlerhaft.");
    else $("#directions").text("Es trat ein unbekannter Fehler auf.");
  }
  GEvent.addListener(gdir, "error", handleErrors);
  $("#dirform").submit(function() {
    cfmarker.closeInfoWindow();
    $("#directions").empty();
    gdir.load("from: " + this.from.value + " to: Wittensteinstr. 148 Wuppertal");
    return false;
  });


} //GBrowserIsCompatible
});