/*
* MapKitMapTypeControl Class 
*  Copyright (c) 2007, Google 
*  Author: Pamela Fox, others
* 
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*       http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

/*
 * Constructor for MapKitMapTypeControl, which uses an option hash
 * to decide what elements to put in the control.
 */
function MapKitMapTypeControl(opt_opts) {
  this.options = opt_opts || {};
}


MapKitMapTypeControl.prototype = new GControl();

/**
 * Is called by GMap2's addOverlay method. Creates the button 
 *  and appends to the map div.
 * @param {GMap2} map The map that has had this MapKitMapTypeControl added to it.
 * @return {DOM Object} Div that holds the control
 */ 
MapKitMapTypeControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var me = this;

  var mapDiv = me.createButton_("Map");
  var satDiv = me.createButton_("Satellite");
  var hybDiv = me.createButton_("Hybrid");
 
  me.assignButtonEvent_(satDiv, map, G_SATELLITE_MAP, [mapDiv, hybDiv]);
  me.assignButtonEvent_(hybDiv, map, G_HYBRID_MAP, [satDiv, mapDiv]);
  me.assignButtonEvent_(mapDiv, map, G_NORMAL_MAP, [satDiv, hybDiv]);
  GEvent.trigger(mapDiv, "click"); 
  GEvent.addListener(map, "maptypechanged", function() {
    if (map.getCurrentMapType() == G_NORMAL_MAP) {
      GEvent.trigger(mapDiv, "click");
    } else if (map.getCurrentMapType() == G_SATELLITE_MAP) {
      GEvent.trigger(satDiv, "click");
    } else if (map.getCurrentMapType() == G_HYBRID_MAP) {
      GEvent.trigger(hybDiv, "click");
    }
  });

  container.appendChild(mapDiv);
  container.appendChild(satDiv);
  container.appendChild(hybDiv);

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

/*
 * Creates simple buttons with text nodes. 
 * @param {String} text Text to display in button
 * @return {DOM Object} The div for the button.
 */
MapKitMapTypeControl.prototype.createButton_ = function(text) {
  var buttonDiv = document.createElement("div");
  buttonDiv.mapType = text;
  this.setButtonStyle_(buttonDiv, text);
  buttonDiv.style.cssFloat = "left";
  buttonDiv.style.styleFloat = "left";
  var textDiv = document.createElement("div");
  textDiv.appendChild(document.createTextNode(""));
  textDiv.style.width = "6em";
  buttonDiv.appendChild(textDiv);
  return buttonDiv;
}

/*
 * Assigns events to MapType buttons to change maptype
 *  and toggle button styles correctly for all buttons
 *  when button is clicked.
 *  @param {DOM Object} div Button's div to assign click to
 *  @param {GMap2} Map object to change maptype of.
 *  @param {Object} mapType GMapType to change map to when clicked
 *  @param {Array} otherDivs Array of other button divs to toggle off
 */  
MapKitMapTypeControl.prototype.assignButtonEvent_ = function(div, map, mapType, otherDivs) {
  var me = this;

  GEvent.addDomListener(div, "click", function() {
    for (var i = 0; i < otherDivs.length; i++) {
      me.toggleButton_(otherDivs[i], false);
    }
    me.toggleButton_(div, true);
    map.setMapType(mapType);
  });
}

/*
 * Changes style of button to appear on/off depending on boolean passed in.
 * @param {DOM Object} div  Button div to change style of
 * @param {Boolean} boolCheck Used to decide to use on style or off style
 */
MapKitMapTypeControl.prototype.toggleButton_ = function(div, boolCheck) {
  var add = boolCheck ? "_down" : "";
  
  if(this.options.color == undefined)
  {
    this.options.color = "black";
  }
  div.style.background = "url('/images/map_controls/"+this.options.color+"/" + div.mapType + add + ".png')";
}

/*
 * Required by GMaps API for controls. 
 * @return {GControlPosition} Default location for control
 */
MapKitMapTypeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(78, 7));
}

/*
 * Sets the proper CSS for the given button element.
 * @param {DOM Object} button Button div to set style for
 */
MapKitMapTypeControl.prototype.setButtonStyle_ = function(button, label) {
  if(this.options.color == undefined)
  {
    this.options.color = "black";
  }
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.background = "url('/images/map_controls/"+this.options.color+"/" + label + ".png')";
  button.style.width = "93px";
  button.style.height = "25px";
  button.style.font = "small Arial";
  button.style.border = "0px solid black";
  button.style.padding = "0px";
  button.style.margin= "0px 4px 0px 0px";
  button.style.textAlign = "center";
  button.style.fontSize = "12px"; 
  button.style.cursor = "pointer";
}


// A MapKitPanControl is a GControl that displays MapKit "Pan"
// buttons (as opposed to the iconic buttons used in Google Maps).
function MapKitPanControl(opt_opts) {
  this.options = opt_opts || {};
}


MapKitPanControl.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.
MapKitPanControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var panLeftDiv = document.createElement("div");
  this.setButtonStyle_(panLeftDiv, "left", 6, 23);
  container.appendChild(panLeftDiv);
  GEvent.addDomListener(panLeftDiv, "click", function() {
    map.panDirection(1,0);
  });
  
  var panUpDiv = document.createElement("div");
  this.setButtonStyle_(panUpDiv, "up", 23, 5);
  container.appendChild(panUpDiv);
  GEvent.addDomListener(panUpDiv, "click", function() {
    map.panDirection(0,1);
  });
  
  var panRightDiv = document.createElement("div");
  this.setButtonStyle_(panRightDiv, "right", 41, 23);
  container.appendChild(panRightDiv);
  GEvent.addDomListener(panRightDiv, "click", function() {
    map.panDirection(-1,0);
  });

  var panDownDiv = document.createElement("div");
  this.setButtonStyle_(panDownDiv, "down", 23, 41);
  container.appendChild(panDownDiv);
  GEvent.addDomListener(panDownDiv, "click", function() {
    map.panDirection(0,-1);
  });

  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.
MapKitPanControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 3));
}

// Sets the proper CSS for the given button element.
MapKitPanControl.prototype.setButtonStyle_ = function(button, label, left, top) {
  if(this.options.color == undefined)
  {
    this.options.g = "black";
  }
  button.style.position = "absolute";
  button.style.left = left+"px";
  button.style.top = top+"px";
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.background = "url('/images/map_controls/"+this.options.color+"/pan_" + label +".png')";
  button.style.border = "none";
  button.style.marginBottom = "0px";
  button.style.width = "23px";
  button.style.height = "22px";
  button.style.cursor = "pointer";
}

// A MapKitZoomControl is a GControl that displays MapKit "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).
function MapKitZoomControl(opt_opts) {
  this.options = opt_opts || {};
}

MapKitZoomControl.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.
MapKitZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv, "in");
  container.appendChild(zoomInDiv);
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv, "out");
  container.appendChild(zoomOutDiv);
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  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.
MapKitZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(30, 73));
}

// Sets the proper CSS for the given button element.
MapKitZoomControl.prototype.setButtonStyle_ = function(button, label) {
  if(this.options.color == undefined)
  {
    this.options.color = "black";
  }
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.background = "url('/images/map_controls/"+this.options.color+"/zoom_" + label +".png')";
  button.style.border = "none";
  button.style.marginBottom = "3px";
  button.style.width = "21px";
  button.style.height = "19px";
  button.style.cursor = "pointer";
}