var markers = [];
var map;

$(function() {
/*******************************************************************************
 ****  BEGIN MY MAP TYPE CONTROL INCLUDE  **************************************
 ******************************************************************************/

function MyMapTypeControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
MyMapTypeControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
MyMapTypeControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var tmapDiv = document.createElement("div");
  this.setButtonStyle_(tmapDiv);
  container.appendChild(tmapDiv);
  tmapDiv.appendChild(document.createTextNode("Karte"));
  GEvent.addDomListener(tmapDiv, "click", function() {
    map.setMapType(G_NORMAL_MAP);
    $(this).siblings().css({color:'#999'});
    $(this).css({color:'#555'});
  });
  
  var tsatDiv = document.createElement("div");
  this.setButtonStyle_(tsatDiv);
  container.appendChild(tsatDiv);
  tsatDiv.appendChild(document.createTextNode("Satellit"));
  GEvent.addDomListener(tsatDiv, "click", function() {
    map.setMapType(G_SATELLITE_MAP);
    $(this).siblings().css({color:'#999'});
    $(this).css({color:'#555'});
  });
  
  var thybDiv = document.createElement("div");
  this.setButtonStyle_(thybDiv);
  container.appendChild(thybDiv);
  thybDiv.appendChild(document.createTextNode("Hybrid"));
  GEvent.addDomListener(thybDiv, "click", function() {
    map.setMapType(G_HYBRID_MAP);
    $(this).siblings().css({color:'#999'});
    $(this).css({color:'#555'});
  });
  
  var tterDiv = document.createElement("div");
  this.setButtonStyle_(tterDiv);
  container.appendChild(tterDiv);
  tterDiv.appendChild(document.createTextNode("Gelände"));
  GEvent.addDomListener(tterDiv, "click", function() {
    map.setMapType(G_PHYSICAL_MAP);
    $(this).siblings().css({color:'#999'});
    $(this).css({color:'#555'});
  });
  $(tterDiv).css({color:'#555'});

  map.getContainer().appendChild(container);
  return container;
}

MyMapTypeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0,0));
}

MyMapTypeControl.prototype.setButtonStyle_ = function(button) {
  $(button).css({ color: "#999",
                    backgroundColor: "#fff",
                    fontFamily: "Verdana",
                    fontWeight: "bold",
                    fontSize: "10px",
                    padding: "3px 0px 5px 0px",
                    textAlign: "center",
                    width: "5.5em",
                    cssFloat: "left",
                    cursor: "pointer"
  });
}

/*******************************************************************************
 ****  END MY MAP TYPE CONTROL INCLUDE  ****************************************
 ******************************************************************************/


    map = new GMap2(document.getElementById("gmap"));
    map.setCenter(new GLatLng(mapinfo.center.lat, mapinfo.center.lng), mapinfo.zoom);
    map.addMapType(G_PHYSICAL_MAP);
           map.addControl(new MyMapTypeControl());
           map.addControl(new GSmallMapControl());
           map.setMapType(G_PHYSICAL_MAP);
           
    $(markerinfo).each(function() {
      var t = this;
      
      var ico = jQuery.extend(new GIcon(), {
        image: t.marker_normal,
        shadow: "/images/map/marker_shadow.png",
        transparent: "/images/map/marker_transparent.png",
        iconSize: new GSize(28, 28),
        shadowSize: new GSize(28, 28),
        iconAnchor: new GPoint(14, 14),
        infoWindowAnchor: new GPoint(28, 28),
        imageMap: [18,4,19,5,21,6,21,7,22,8,23,9,23,10,23,11,23,12,23,13,23,14,23,15,23,16,23,17,23,18,22,19,21,20,21,21,19,22,18,23,9,23,8,22,6,21,6,20,5,19,4,18,4,17,4,16,4,15,4,14,4,13,4,12,4,11,4,10,4,9,5,8,6,7,6,6,8,5,9,4]
      });
      
      
      $('#maplink-'+t.id).colorbox({
        current: "Location {current} von {total}",
    		previous: "Zurück",
    		next: "Vor",
    		close: "Schließen",
    		slideshowStart: "Diashow starten",
    		slideshowStop: "Diashow anhalten",
    		initialWidth: 135,
    		initialHeight: 135
      });
      
      var marker = new GMarker(new GLatLng(t.lat, t.lng), {icon: ico, id: 'marker-'+t.id});
      GEvent.addListener(marker, "mouseover", function(latlng) {
      marker.setImage(t.marker_hover);
      $('#mapinfo').html('<strong>'+t.title+'</strong> '+t.address);
    });
    GEvent.addListener(marker, "mouseout", function() {
      marker.setImage(t.marker_normal);
      $('#mapinfo').html('&nbsp;');
    });
    GEvent.addListener(marker, 'click', function() {
      $('#maplink-'+t.id).trigger('click');
    });
    
    map.addOverlay(marker);
    markers[t.id] = marker;
  });
    
    
  $('#mapfilter label').click(function(e) {
    if (e.altKey) {
      $(this).children('input').attr('checked', true).trigger('change');
      $('#mapfilter input').not($(this).children('input')).attr('checked', false).trigger('change');
    }
  });
  $('#mapfilter input').change(function() {
    $this=$(this);
    if ($this.attr('checked')) {
      $this.parent().addClass('checked').removeClass('unchecked');
      // add the markers
      $(markerinfo).each(function() {
        if (jQuery.inArray($this.val(), this.cats) != -1) {
          map.addOverlay(markers[this.id]);
        }
      });
    } else {
      $this.parent().addClass('unchecked').removeClass('checked');
      // remove the markers
      $(markerinfo).each(function() {
        if (jQuery.inArray($this.val(), this.cats) != -1) {
          map.removeOverlay(markers[this.id]);
        }
      });
    }
  });
});