//Custom text control

//TextualZoomControl is a GControl that displays textual "Zoom In"
//and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps)
function TextualZoomControl() {
}
	TextualZoomControl.prototype = new GControl();

	// Creates one div for each of the buttons and places them in a container
	// div which is returned as the control element
	TextualZoomControl.prototype.initialize = function(map) {
		var container = document.createElement("div");

		var zoomInDiv = document.createElement("div");
		this.setButtonStyle_(zoomInDiv);
		container.appendChild(zoomInDiv);
		zoomInDiv.appendChild(document.createTextNode("+"));//Text may later be removed and buttons added via CSS background image
		GEvent.addDomListener(zoomInDiv, "click", function() {
			map.zoomIn();
		});

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

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

	//Control will appear top left with 10 pixels of padding
	TextualZoomControl.prototype.getDefaultPosition = function() {
		return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
	}

	//CSS for button element
	TextualZoomControl.prototype.setButtonStyle_ = function(button) {
		button.style.textDecoration = "none";
		button.style.color = "#afa18c";
		button.style.backgroundColor = "#503d25";
		button.style.font = "medium Arial bold";
		button.style.border = "none";
		button.style.padding = "1px";
		button.style.marginBottom = "2px";
		button.style.textAlign = "center";
		button.style.width = "1.2em";
		button.style.cursor = "pointer";
	} //End of custom text control

//Set map, controls, markers, location etc
function load() {
	if (GBrowserIsCompatible()) {

		//Create the marker and set up the event window
		function createMarker(point,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			return marker;
		}

		//Display map, controls and set the center
		var map = new GMap2(document.getElementById("google-map"));
		map.addControl(new TextualZoomControl());
		map.setCenter(new GLatLng(-37.818056, 144.965458), 15);

		//Markers with info windows
		var point = new GLatLng(-37.82037, 144.965458);
		var marker = createMarker(point,'<div style="width:240px; height: 50px; text-align: center; border: none;"><img src="/melba/template-images/map-logo.png" /></div>')
		map.addOverlay(marker);
	}

	// display a warning if the browser was not compatible
	else {
		alert("Sorry, the Google Maps API is not compatible with this browser");
	}
}