var options = {};
var lengthUnits = "meter"; // options: [meter] [kilometer]
var areaUnits = "meter" // options: [meter] [kilometer] [hectare] [acre]
var myArea, myLength, tmpoverlay;
var arrLineAreaOverlays = new Array();
var inEditMode = false;


function removeLineAreaGeoms()
{
 
  //remove all geoms from map
  for (g=0;g<arrLineAreaOverlays.length;g++)
  {
  	tmpoverlay = arrLineAreaOverlays[g];
  	googleMap.removeOverlay(tmpoverlay);
  }
  
  //clear arrGeomoverlays Array.
  arrGeomoverlays.length = 0;
  
   // Remove previously drawn polygon
	if (myArea != null){googleMap.removeOverlay(myArea);myArea = null;}
  	if (myLength != null){googleMap.removeOverlay(myLength);myLength = null;}
}

//
// aan- en uitzetten van de teken knoppen
//
function select(buttonId) {
	document.getElementById("hand_b").className="unselected";
	document.getElementById("shape_b").className="unselected";
	document.getElementById("line_b").className="unselected";
	document.getElementById(buttonId).className="selected";
}

function stopEditing() {
	select("hand_b");
}
//
// tekenen vlak
//

function startShape() {

	//if not in edit mode, start shape

	if (!inEditMode)
	{
		inEditMode = true;
		//alert ('startshape');
		select("shape_b");

		removeLineAreaGeoms();

		var detailInfo = document.getElementById("editFeaturedetails");
		var debugInfo = document.getElementById('editDebug');	

		if (myArea != null) 
		{
			googleMap.removeOverlay(myArea);
			myArea = null;
		}
		var color = '#ffa500';
		myArea = new GPolygon([], color, 2, 0.7, color, 0.3);
		arrLineAreaOverlays[arrLineAreaOverlays.length] = myArea;
		googleMap.addOverlay(myArea);
		myArea.enableDrawing(options);
		myArea.enableEditing({onEvent: "mouseover"});
		myArea.disableEditing({onEvent: "mouseout"});

		GEvent.addListener(myArea, "endline", function() {
			select("hand_b");
			debugInfo.innerHTML = "endline";
		});

		GEvent.addListener(myArea, "click", function(latlng, index) {
			if (typeof index == "number") {
				debugInfo.innerHTML = "click-delete";
				myArea.deleteVertex(index);
			}
			else
			{
				debugInfo.innerHTML = "click-notdelete";
				displayArea(myArea, detailInfo);
			}
		});

		GEvent.addListener(myArea, "lineupdated", function() {
			debugInfo.innerHTML = "lineupdated";
			displayArea(myArea, detailInfo);
		});

	}	
}
//
// tonen oppervlak afhankelijk van gekozen unit
//
function displayArea(myArea, field) {
	
	if (myArea.getArea() < 10000) 
	{
		areaUnits = 'meter';
	}
	if (myArea.getArea() >= 10000 && myArea.getArea() < 1000000) 
	{
		areaUnits = 'hectare';
	}
	if (myArea.getArea() >= 1000000) 
	{
		areaUnits = 'kilometer';
	}

	//area in meters
	areaInSqMtrs = Math.round(myArea.getArea() * 100) / 100;
	//area in hectares
	areaInHectares = areaInSqMtrs / 10000;
	areaInHectares = Math.round(areaInHectares * 100) / 100;
	//area in kilometers
	areaInSqKmtrs = areaInSqMtrs / 1000000;
	areaInSqKmtrs = Math.round(areaInSqKmtrs * 100) / 100;
	//area in acres
	var sqMtrsPerAcre = 4046.8564224;
	var areaInAcres = areaInSqMtrs / sqMtrsPerAcre;
	areaInAcres = Math.round(areaInAcres * 100) / 100;
	//display area
	if (areaUnits == "kilometer")
	{
		field.innerHTML = "Oppervlakte is <span class='meting'>" + areaInSqKmtrs + "</span> km<sup>2</sup>";
	}
	else if (areaUnits == "hectare")
	{
		field.innerHTML = "Oppervlakte is <span class='meting'>" + areaInHectares + "</span> hectare";
	}
	else if (areaUnits == "acre")
	{
		field.innerHTML = "Oppervlakte is <span class='meting'>" + areaInAcres + "</span> acre";
	}
	else //meter
	{
		field.innerHTML = "Oppervlakte is <span class='meting'>" + areaInSqMtrs + "</span> m<sup>2</sup>";
	}
}
//
// tekenen lijn
//
function startLine() {
	if (!inEditMode)
	{
		inEditMode = true;
		select("line_b");
		var detailInfo = document.getElementById("editFeaturedetails");
		var debugInfo = document.getElementById('editDebug');
		//remove old line if any
		if (myLength != null) 
		{
			googleMap.removeOverlay(myLength);
			myLength = null;
		}
		var color = '#ff0000';

		myLength = new GPolyline([], color);
		googleMap.addOverlay(myLength);
		myLength.enableDrawing(options);
		myLength.enableEditing({onEvent: "mouseover"});
		myLength.disableEditing({onEvent: "mouseout"});

		GEvent.addListener(myLength, "endline", function() {
			select("hand_b");
			debugInfo.innerHTML = "endline";
		});

		GEvent.addListener(myLength, "click", function(latlng, index) {
			if (typeof index == "number") {
				debugInfo.innerHTML = "click-delete";
				myLength.deleteVertex(index);
			}
			else
			{
				debugInfo.innerHTML = "click-notdelete";
				displayLength(myLength, detailInfo);
			}
		});

		GEvent.addListener(myLength, "lineupdated", function() {
			debugInfo.innerHTML = "lineupdated";
			displayLength(myLength, detailInfo);
		});
	}
}
//
// tonen lengte afhankelijk van gekozen unit
//
function displayLength(myLength, field) {
	//length in meters
	lengthInMtrs = myLength.getLength();
	lengthInMtrs = Math.round(lengthInMtrs * 100) / 100;
	//length in kilometers
	lengthInKmtrs = lengthInMtrs / 1000;
	lengthInKmtrs = Math.round(lengthInKmtrs * 100) / 100;
	//display length
	if (lengthUnits == "kilometer")
	{
		field.innerHTML = "Lengte is <span class='meting'>" + lengthInKmtrs + "</span> kilometer";		
	}
	else //meter
	{
		field.innerHTML = "Lengte is <span class='meting'>" + lengthInMtrs + "</span> meter";
	}
}
//
// opruimen vlakken en lijnen
//
function clear_map() {
	
	var detailInfo = document.getElementById("editFeaturedetails");
	var debugInfo = document.getElementById('editDebug');
	removeLineAreaGeoms();
	if (myArea != null ) googleMap.removeOverlay(myArea);
	if (myLength != null ) googleMap.removeOverlay(myLength);
	dspfld = document.getElementById("editFeaturedetails");
	dspfld.innerHTML = "";
	inEditMode = false;
	
	//alert('cleared');
}