var map = null;
var addingMarker = false;
var areaLayer, drawControls, geom;

var home_lat = -28.34132;
var home_lon = 134.68867;
var home_zoom = 4;

var panel;
var defaultBtn = new OpenLayers.Control.Button({displayClass: "defaultBtn", trigger: defaultButton, title:"Default Mouse Controls"});
var zoomboxBtn = new OpenLayers.Control.Button({displayClass: "zoomboxBtn", trigger: zoomboxButton, title:"Zoom Box"});
var drawBtn = new OpenLayers.Control.Button({displayClass: "drawBtn", trigger: drawButton, title:"Draw Area"});
var clearBtn = new OpenLayers.Control.Button({displayClass: "clearBtn", trigger: clearButton, title:"Clear Area"});
var maxzoom = new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"});
var defaultView = new OpenLayers.Control.Button({displayClass: "defaultViewBtn", trigger: goHome, title:"Reset View"});

var problem = new OpenLayers.Control.Button({displayClass: "addMarkerBtn", trigger: addMarker, title:"Add problem"});

function init_map(div_id, lon, lat, zoom)
{
	OpenLayers.ImgPath = 'http://maps.bigtincan.com/img/openlayers/';
	map = new OpenLayers.Map(div_id, {
		controls: [
			new OpenLayers.Control.Navigation(),
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.ScaleLine(),
			new OpenLayers.Control.LayerSwitcher(),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.Permalink()
		],
		maxResolution: 156543,
		numZoomLevels: 19,
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326")
	});

	var layerBTC = new OpenLayers.Layer.OSM.BTC("Default");
	var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	
	areaLayer = new OpenLayers.Layer.Vector("User Areas", {
		onFeatureInsert: function(feature){featureAdded(feature);}
	});

	country = "AU";map.addLayer(layerBTC);map.addLayer(layerMapnik);map.addLayer(areaLayer);            
	drawControls = {
		Default:	new OpenLayers.Control.MouseDefaults(),
		Zoombox:	new OpenLayers.Control.ZoomBox(),
		Draw: 		new OpenLayers.Control.DrawFeature(areaLayer, OpenLayers.Handler.Polygon)				
	};

	for(var key in drawControls) {
		map.addControl(drawControls[key]);
	}

	panel = new OpenLayers.Control.Panel({defaultControl: defaultBtn});
    panel.addControls([
        defaultBtn,zoomboxBtn,
                maxzoom,defaultView,problem
    ]);
    map.addControl(panel);
    
	map.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), zoom);
	
	return map;
}

function featureAdded(feature) {	
	closeNewAreaPopups();
	
	html = "<div id=\"popuptitle\" class=\"olPopupContent\">";
	html+= "	<div id=\"new\">Save Area</div>";
	html+= "	<form>";
	html+= "		<p>";
	html+= "			<b>Reference: </b><input type=\"text\" name=\"pu_reference\" id=\"pu_reference\" value=\"Area Ref\" size=\"10\"/>";
	html+= "        </p>";
	html+= "        <ul>";
	html+= "        	<li>";
	html+= "            	<a href=\"#\" onclick=\"saveGeom();\">Save</a> | ";
	html+= "        	</li>";
	html+= "        	<li>";
	html+= "           		<a href=\"#\" onclick=\"closeNewAreaPopups();clearButton();\">Cancel</a>";
	html+= "        	</li>";
	html+= "		</ul>";
	html+= "	</form>";
	html+= "</div>";
	
	geom = feature.geometry;
	comp = geom.getVertices();
	point = comp[0];
	x = point.x;
	y = point.y;
	popup = new OpenLayers.Popup("NewArea",
			new OpenLayers.LonLat(x, y),
			new OpenLayers.Size(200, 200),
			html,
			true);
	map.addPopup(popup);
	popup.show();
}

function closeNewAreaPopups() {
	for(i=0; i<map.popups.length; i++) {
		p = map.popups[i];
		if(p.id == "NewArea") {
			p.destroy();
		}
	}
}

function defaultButton() {
	addMarkerCancel();
	toggleControl2('Default', defaultBtn);
}

function zoomboxButton() {
	addMarkerCancel();
	toggleControl2('Zoombox', zoomboxBtn);
}

function drawButton() {
	addMarkerCancel();
	toggleControl2('Draw', drawBtn);
}

function clearButton() {
	addMarkerCancel();
	areaLayer.destroyFeatures();
}

function toggleControl2(selected, ctrl) {
	for (key in drawControls) {
		var control = drawControls[key];
		if(key == selected) {
			control.activate();
		} else {
			control.deactivate();
		}
	}

	for(i = 0; i < panel.controls.length; i++) {
		aCtrl = panel.controls[i];
		aCtrl.deactivate();
	}
	ctrl.activate();
}

function goHome() {
	map.setCenter(new OpenLayers.LonLat(home_lon, home_lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), home_zoom);
}

function init()
{
	loadNickname();
	var regex = new RegExp("[\\?&]z=([^&#]*)");
	var result = regex.exec(window.location.href);
	if(result == null)
		zoomlevel = 4;
	else
		zoomlevel = result[1];

        var map = init_map('map', home_lon, home_lat, zoomlevel);
        init_openstreetbugs(map, "/api/");
}

function loadNickname() {
	var nickname = "";
	var nameEQ = "name=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) {
			nickname = c.substring(nameEQ.length,c.length);
			break;
		}
  	}
  	if (nickname == "") {nickname = "NoName";}
  	document.getElementById('nickname').value = nickname;
}

function saveNickname() {
  	var nickname = document.getElementById('nickname').value;
  	var expires = (new Date((new Date()).getTime() + 157680000000)).toGMTString();
  	document.cookie="name="+encodeURIComponent(nickname)+";expires="+expires+";path=/";
}

function addMarker() {
	toggleControl2('', problem);
	addingMarker = !addingMarker;
	if (addingMarker) {
		document.getElementById("map_OpenLayers_Container").style.cursor = 'crosshair';
	} else {
		document.getElementById("map_OpenLayers_Container").style.cursor = 'auto';
	}
}

function addMarkerCancel() {
	addingMarker = false;
	document.getElementById("map_OpenLayers_Container").style.cursor = 'auto';
}

function toggleControl(element) {
	for (key in drawControls) {
		var control = drawControls[key];
		if (element.value == key) {
			control.featureAdded = function(feature) {
				geom = feature.geometry;
				control.deactivate();
			};
			control.activate();
			if (element.value == 'Draw') {
				document.getElementById('drawn').innerHTML = '<br><input type="text" name="reference" id="reference" value="Area Ref" size="10"/><input type="submit" value="Save Area" onclick="saveGeom();"/>';
			}
		} else if (element.value == 'Clear') {
			document.getElementById('drawn').innerHTML = '<input type="submit" value="Draw" onclick="toggleControl(this);"/>';
			areaLayer.destroyFeatures();
			control.deactivate();	
		} else {
			control.deactivate();
		}
	}
}

function saveGeom() {
	var temp = new String(geom);
	var temp_array = temp.split("((");
	var temp_array2 = temp_array[1].split("))");
	
	var points = [];
	var coords = temp_array2[0].split(",");
	
	for (x in coords) {
		var p = coords[x].split(" ");
		
		var merc = new OpenLayers.LonLat(p[0],p[1]);
		
		var lon = (merc.lon / 20037508.34) * 180;
		var lat = (merc.lat / 20037508.34) * 180;
		lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
		
		points.push(lon + " " + lat);
	}
	
	//var reference = document.getElementById('reference').value;
	var reference = document.getElementById('pu_reference').value;
	
	var http = new XMLHttpRequest();
	
	var url = "/api/addarea.php";
	var params = "area=";
	
	for (x in points) {
		if(x==points.length-1) {
			params += points[x];
		} else {
			params += points[x] + ",";
		}
	}
	params+= "&ref="+reference;
	
	http.open("POST", url, true);

	//Send the proper header information along with the request
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http.setRequestHeader("Content-length", params.length);
	http.setRequestHeader("Connection", "close");

	http.onreadystatechange = function() { //Call a function when the state changes.
		if(http.readyState == 4 && http.status == 200) {
			alert('Area has been saved successfully.');
		}
	};
	http.send(params);
	
	//document.getElementById('drawn').innerHTML='<input type="submit" value="Draw" onclick="toggleControl(this);"/>';
	//areaLayer.destroyFeatures();
	closeNewAreaPopups();
	clearButton();
}