// CUSTOM ZOOM CONTROLLER CODE    
    
function CustomZoomControl() { };
CustomZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in acontainer
// DIV which is returned as our control element. We add thecontrol to
// to the map container and return the element for the map classto
// position properly.
CustomZoomControl.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.id = "zoomcontrol";
	
	var panUpDiv= document.createElement("div");
	panUpDiv.id = "panUp";
	this.setButtonStyle_(panUpDiv);
	container.appendChild(panUpDiv);
	panUpDiv.innerHTML = '<img src="/images/googlemaps/up.png">';
	GEvent.addDomListener(panUpDiv, "click", function() {
		map.panDirection(0,1);
	});

	var panLeftDiv= document.createElement("div");
	panLeftDiv.id = "panLeft";
	this.setButtonStyle_(panLeftDiv);
	container.appendChild(panLeftDiv);
	panLeftDiv.innerHTML = '<img src="/images/googlemaps/left.png">';
	GEvent.addDomListener(panLeftDiv, "click", function() {
		map.panDirection(1,0);
	});

	var panRightDiv= document.createElement("div");
	panRightDiv.id = "panRight";
	this.setButtonStyle_(panRightDiv);
	container.appendChild(panRightDiv);
	panRightDiv.innerHTML = '<img src="/images/googlemaps/right.png">';
	GEvent.addDomListener(panRightDiv, "click", function() {
		map.panDirection(-1,0);
	});
	
	var panDownDiv= document.createElement("div");
	panDownDiv.id = "panDown";
	this.setButtonStyle_(panDownDiv);
	container.appendChild(panDownDiv);
	panDownDiv.innerHTML = '<img src="/images/googlemaps/down.png">';
	GEvent.addDomListener(panDownDiv, "click", function() {
		map.panDirection(0,-1);
	});
	
	var zoomInDiv = document.createElement("div");
	zoomInDiv.id = "zoomIn";
	this.setButtonStyle_(zoomInDiv);
	container.appendChild(zoomInDiv);
	zoomInDiv.innerHTML = '<img src="/images/googlemaps/plus.png">';
	GEvent.addDomListener(zoomInDiv, "click", function() {
		map.zoomIn();
	});

	var zoomOutDiv = document.createElement("div");
	zoomOutDiv.id = "zoomOut";
	this.setButtonStyle_(zoomOutDiv);
	container.appendChild(zoomOutDiv);
	zoomOutDiv.innerHTML = '<img src="/images/googlemaps/minus.png">';
	GEvent.addDomListener(zoomOutDiv, "click", function() {
		map.zoomOut();
	});

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

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

// Sets the proper CSS for the given button element.
CustomZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.width        = "17px";
	button.style.height       = "17px";
	button.style.cursor       = "pointer";
}

// Sets the Map Type Controls
function customMapControls () {
	//$$('#amtc_option_0').update("<div>Map</div>");
	//$$('#amtc_option_1').update("<div>Satellite</div>");
	//$$('#amtc_option_2').update("<div>Hybrid</div>");
}