function ExtMapTypeControl() {
}

var current = null;

ExtMapTypeControl.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 ExtMapTypeControl added to it.
 * @return {DOM Object} Div that holds the control
 */ 
ExtMapTypeControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var me = this;

  var mapDiv = me.createButton_("Map", "mapid");
  var satDiv = me.createButton_("Satellite", "satelliteid");
  var terDiv = me.createButton_("Terrain", "terrainid");
 
  me.assignButtonEvent_(satDiv, map, G_SATELLITE_MAP, [mapDiv, terDiv]);
  me.assignButtonEvent_(terDiv, map, G_PHYSICAL_MAP, [satDiv, mapDiv]);
  me.assignButtonEvent_(mapDiv, map, G_NORMAL_MAP, [satDiv, terDiv]);
  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_PHYSICAL_MAP) {
      GEvent.trigger(terDiv, "click");
    }
  });
  
  container.appendChild(mapDiv);
  container.appendChild(satDiv);
  container.appendChild(terDiv);

  map.getContainer().appendChild(container);
  
  GEvent.trigger(mapDiv, "click"); 
  
  return container;
}

/*
 * Creates simple buttons with text nodes. 
 * @param {String} text Text to display in button
 * @return {DOM Object} The div for the button.
 */
ExtMapTypeControl.prototype.createButton_ = function(text, id) {
  var buttonDiv = document.createElement("div");
  buttonDiv.id = id;
  buttonDiv.mapType = text;
  this.setButtonStyle_(buttonDiv, text);
  buttonDiv.style.cssFloat = "left";
  buttonDiv.style.styleFloat = "left";
  var textDiv = document.createElement("div");
  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
 */  
ExtMapTypeControl.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);
	current = mapType;
  });
  
  GEvent.addDomListener(div, "mouseover", function() {
    if (current != mapType) {
		div.style.background = "url('"+ path +"img/" + div.mapType + "_down.png')";
	}
  });
  
  GEvent.addDomListener(div, "mouseout", function() {
  if (current != mapType) {												  
	    div.style.background = "url('" + path + "img/" + div.mapType + ".png')";
	}
  });
}

/*
 * 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
 */
ExtMapTypeControl.prototype.toggleButton_ = function(div, boolCheck) {
  var add = boolCheck ? "_down" : "";
  div.style.background = "url('" + path + "img/" + div.mapType + add + ".png')";
}

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

/*
 * Sets the proper CSS for the given button element.
 * @param {DOM Object} button Button div to set style for
 */
ExtMapTypeControl.prototype.setButtonStyle_ = function(button, label) {
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.background = "url('" + path + "img/" + label + ".png')";
  if (label == "Map") {
	  button.style.width = "44px";
	  button.style.height = "34px";
  } else if (label == "Satellite") {
	  button.style.width = "59px";
	  button.style.height = "34px";
  } else {
	  button.style.width = "59px";
	  button.style.height = "34px";
  }
  
  button.style.font = "small Arial";
  button.style.border = "0px";
  button.style.padding = "0px";
  button.style.margin= "0px";
  button.style.textAlign = "center";
  button.style.fontSize = "12px"; 
  button.style.cursor = "pointer";
}