// 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 TextualZoomControl() 
{
}

function initialize() {

	// To "subclass" the GControl, we set the prototype object to
	// an instance of the GControl object
	TextualZoomControl.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.
	TextualZoomControl.prototype.initialize = function(map) {
	  var container = document.createElement("div");
	  container.style.width = "350px";

	  var zoomInDivOuter = document.createElement("div");
	  var zoomInDivInner = document.createElement("div");
	  var isActive = false;

	  this.setOuterButtonStyle_ (zoomInDivOuter);
	  this.setInnerButtonStyleInactive_ (zoomInDivInner, "Zoom In");

	  container.appendChild(zoomInDivOuter);
	  zoomInDivOuter.appendChild(zoomInDivInner);

	  GEvent.addDomListener(zoomInDivOuter, "click", function() {
		map.zoomIn();
	  });

	  var zoomOutDivOuter = document.createElement("div");
	  var zoomOutDivInner = document.createElement("div");

	  this.setOuterButtonStyle_(zoomOutDivOuter);
	  this.setInnerButtonStyleInactive_(zoomOutDivInner, "Zoom Out");

	  container.appendChild(zoomOutDivOuter);
	  zoomOutDivOuter.appendChild(zoomOutDivInner);

	  GEvent.addDomListener(zoomOutDivOuter, "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.
	TextualZoomControl.prototype.getDefaultPosition = function() {
	  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
	}

	TextualZoomControl.prototype.setInnerButtonStyleInactive_ = function(button, name) {

		button.style.borderStyle = "solid;";
	   	button.style.borderColor = "white rgb(176, 176, 176) rgb(176, 176, 176) white"; 
		button.style.borderWidth = "1px"; 
		button.style.fontSize = "12px";
		button.title = name;
		button.innerHTML = name;
		button.style.display = "inline-block";
	}

	TextualZoomControl.prototype.setOuterButtonStyle_ = function(button) {

		button.style.border = "1px solid black"; 
		button.style.backgroundColor = "white"; 
		button.style.textAlign = "center"; 
		button.style.width = "6em"; 
		button.style.cursor = "pointer"; 
		button.style.display = "inline-block";
	}

	TextualZoomControl.prototype.setInnerButtonStyleActive_ = function(button, name) {

		button.style.borderStyle = "solid"; 
		button.style.borderColor = "rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132)"; 
		button.style.borderWidth = "1px"; 
		button.style.fontSize = "12px"; 
		button.style.fontWeight = "bold";
		button.title = name;
		button.innerHTML = name;
	}

	var map = new GMap2(document.getElementById("map"));
	map.addControl(new TextualZoomControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.441944, -122.141944), 13);
}