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

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

  var oTable = document.createElement("table");
  oTable.setAttribute('border', '0');
  oTable.setAttribute('cellspacing', '0');
  oTable.setAttribute('cellpadding', '0');
  var oTBody = document.createElement("tbody");
	var oTR1 = document.createElement("tr");
  
  var oTD1 = document.createElement("td");
  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);  
	var zoomInImg = document.createElement('img');
	zoomInImg.src="img/zoom_in.gif";
	zoomInImg.setAttribute('border', '0');
	zoomInDiv.appendChild(zoomInImg); 
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });
  oTD1.appendChild(zoomInDiv);
  oTR1.appendChild(oTD1);
 
 	var oTR2 = document.createElement("tr");
	var oTD2 = document.createElement("td");
  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
 	var zoomOutImg = document.createElement('img');
	zoomOutImg.src="img/zoom_out.gif";
	zoomOutImg.setAttribute('border', '0');
	zoomOutDiv.appendChild(zoomOutImg); 
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });
	oTD2.appendChild(zoomOutDiv);
	oTR2.appendChild(oTD2);

  oTBody.appendChild(oTR1);
  oTBody.appendChild(oTR2);
  oTable.appendChild(oTBody);
	container.appendChild(oTable);

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

// Sets the proper CSS for the given button element.
TravelersZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "0px solid black";
  button.style.padding = "0px";
  button.style.marginBottom = "1px";
  button.style.marginRight = "0px";
  button.style.textAlign = "center";
  button.style.cursor = "pointer";
}