// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function naGTypeControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
naGTypeControl.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.
naGTypeControl.prototype.initialize = function(map) {
  map.addMapType(G_PHYSICAL_MAP);
  
  var container = document.createElement("div");
  container.style.backgroundColor = "#aaa";
  container.style.color = "#444";
  container.style.width = "150px";
  container.style.height = "16px";
  container.style.opacity = "0.9";
  container.style.filter = "alpha(opacity=90)";
  
  


  var mapDiv = document.createElement("div");
  this.setButtonStyle_(mapDiv,119,31);
  mapDiv.style.color = "#f60";
  container.appendChild(mapDiv);
  mapDiv.appendChild(document.createTextNode("Karte"));
  GEvent.addDomListener(mapDiv, "click", function() {
    mapDiv.style.color = "#f60";
    satelliteDiv.style.color = "#444";
    hybridDiv.style.color = "#444";
    phisicalDiv.style.color = "#444";         
    map.setMapType(G_NORMAL_MAP);
  });

  var satelliteDiv = document.createElement("div");
  this.setButtonStyle_(satelliteDiv,81,38);
  container.appendChild(satelliteDiv);
  satelliteDiv.appendChild(document.createTextNode("Satellit"));
  GEvent.addDomListener(satelliteDiv, "click", function() {
    mapDiv.style.color = "#444";
    satelliteDiv.style.color = "#f60";
    hybridDiv.style.color = "#444"; 
    phisicalDiv.style.color = "#444";     
    map.setMapType(G_SATELLITE_MAP);
  });

  var hybridDiv = document.createElement("div");
  this.setButtonStyle_(hybridDiv,44,35);
  container.appendChild(hybridDiv);
  hybridDiv.appendChild(document.createTextNode("Hybrid"));
  GEvent.addDomListener(hybridDiv, "click", function() {
    mapDiv.style.color = "#444";
    satelliteDiv.style.color = "#444";
    hybridDiv.style.color = "#f60";
    phisicalDiv.style.color = "#444"; 
    map.setMapType(G_HYBRID_MAP);
  });

  var phisicalDiv = document.createElement("div");
  this.setButtonStyle_(phisicalDiv,0,44);
  container.appendChild(phisicalDiv);
  phisicalDiv.appendChild(document.createTextNode("Gelände"));
  GEvent.addDomListener(phisicalDiv, "click", function() {
    mapDiv.style.color = "#444";
    satelliteDiv.style.color = "#444";
    hybridDiv.style.color = "#444";
    phisicalDiv.style.color = "#f60"; 
    map.setMapType(G_PHYSICAL_MAP);
  });


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

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
naGTypeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, 0));
}

// Sets the proper CSS for the given button element.
naGTypeControl.prototype.setButtonStyle_ = function(button, right, width) {
  //button.style.backgroundColor = "#101010";
  button.style.padding = "1px 0px";
  button.style.font = "10px Arial";
  button.style.textAlign = "center";
  button.style.width = width+"px";
  button.style.cursor = "pointer";
  button.style.position = "absolute";
  button.style.right = right+"px";
}