var  polyline, lengthDiv;

function MeasureControl() {
}
MeasureControl.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.
MeasureControl.prototype.initialize = function(gmap) {
	var container = document.createElement("div");

	var measureDiv = document.createElement("div");
	this.setButtonStyle_(measureDiv);
	container.appendChild(measureDiv);
	GEvent.addDomListener(measureDiv, "click", function() {
		enableDrawing();
	});
	
	//lengthDiv = document.createElement("div");
	//this.setTextStyle_(lengthDiv);
	//container.appendChild(lengthDiv);

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

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

// Sets the proper CSS for the given button element.
MeasureControl.prototype.setButtonStyle_ = function(button) {
	button.style.backgroundColor = "white";
	button.style.border = "1px solid black";
	button.style.padding = "1px";
	button.style.marginBottom = "3px";
	button.style.textAlign = "center";
	button.style.width = "1em";
	button.style.height = "1em";
	button.style.cursor = "pointer";
	button.title = "Measure Distance";
	button.style.backgroundImage = "url('images/measure_btn.png')";
}

//// Sets the proper CSS for the given button element.
//MeasureControl.prototype.setTextStyle_ = function(button) {
//	button.style.padding = "1px";
//	button.style.marginBottom = "3px";
//	button.style.textAlign = "left";
//	button.style.color = "#FF0000";
//	//button.style.fontFamily = "arial";
//	button.style.width = "12em";
//	button.style.height = "1em";
//}

function enableDrawing() {
	polyline && gmap.removeOverlay(polyline);

	// add a polyline to the map with no vertices
	polyline = new GPolyline([], "#FF0000", 2, 1.0);
	gmap.addOverlay(polyline);

	//lengthDiv.innerText = "";

	// register a listener for "endline" event and enable drawing
	GEvent.addListener(polyline, "endline", calculateLengths);
	polyline.enableDrawing();
}

function calculateLengths() {
	var geometryService = new esri.arcgis.gmaps.Geometry("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
	geometryService.getLengths([ [ polyline ] ], displayLengths);
}

function displayLengths(response, error) {
	// Display error message, if any
	if (error) {
		alert("Error " + error.code + ": " + (error.message || (error.details && error.details.join(" ")) || "Unknown error" ));
		return;
	}

	// Display lengths
	var measureFeet = response.lengths[0] * 3.2808399;
	var measureMiles = measureFeet / 5280;
	alert("Length: " + measureMiles.toFixed(2) + " mi (" + Math.round(measureFeet) + " ft)");
	//lengthDiv.innerText = "Length: " + measureMiles.toFixed(2) + " mi (" + Math.round(measureFeet) + " ft)";
	//NOTE: Window status does not work in default config for most browsers...
	//window.status = "Length: " + measureMiles.toFixed(2) + " mi (" + Math.round(measureFeet) + " ft)";
}