Index: /main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 32802)
+++ /main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 32803)
@@ -37,5 +37,5 @@
 MapEditor.prototype.initMapEditorControls = function () {
 	var that = this;
-	console.log(this.id);
+
 
 	var draggableCB = document.querySelector("input[name=draggableCB]");
@@ -60,9 +60,9 @@
 	var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
 	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-	thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
+	thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;
 
 	thicknessSlider.oninput = function () {
 		that.shapeSpecsChangeMD();
-		thicknessSliderOutput.innerHTML = this.value / 20;
+		thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
 		that.thicknessValue = this.value / 20;
 		that.polyOptions.strokeWeight = that.thicknessValue;
@@ -73,9 +73,9 @@
 	var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) / 100;
-
+	opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
+	
 	opacitySlider.oninput = function () {
 		that.shapeSpecsChangeMD();
-		opacitySliderOutput.innerHTML = "% " + this.value;
+		opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
 		that.opacityValue = this.value / 100;
 		that.polyOptions.fillOpacity = that.opacityValue;
@@ -107,4 +107,33 @@
 		//do not write any code here in this function
 	}
+	
+	/* TODO: WORK IN PROGRESS
+	window.onbeforeunload = function (e) {
+		var collection = gs.cgiParams.c;
+		var site_name = gs.xsltParams.site_name;
+		var documentID = this.id;
+		var metadataName = "MapOverlays";
+		
+		
+		//functions.getArchivesMetadata = function(collection, site, documentID, metadataName, metadataPosition, responseFunction);
+		
+		
+		//responseFunction = console.log()
+		
+		var savedOverlays = null;
+		var enableMessage = that.overlays == savedOverlays;
+		var enableMessage = true;
+		var message = "Your confirmation message goes here.",
+		e = e || window.event;
+		// For IE and Firefox
+		if (e) {
+			if(enableMessage){
+				e.returnValue = message;
+				// For Safari
+				return message;			
+			}
+		}
+	}*/
+	
 }
 
@@ -151,6 +180,4 @@
 
 MapEditor.prototype.shapeSpecsChangeMD = function () {
-	console.log(this.selectedShapes);
-
 	if (this.selectedShapes.length > 0) {
 		this.mapEditorHistory.historyOverlayPush();
@@ -313,17 +340,26 @@
 	});
 
-	//Keyboard shortcuts		
-	var mapAndControls = document.getElementById("map-and-controls-" + this.id);
-	mapAndControls.addEventListener('keydown', function () {
-		if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) ||
-			(event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) {
+	//Keyboard shortcuts			
+	var mapAndControls = $("#map-and-controls-" + this.id);
+	
+	mapAndControls.keypress(function (event) {	//mapAndControls.keydown(function (event) {	
+		// https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler
+		//var keyCode = String.fromCharCode(event.keyCode); // for keyDown
+		var keyCode = String.fromCharCode(event.which);
+		//alert("Key pressed: " + keyCode);
+		
+		if (event.keyCode == 'shiftKey') {
+			that.shiftKeyPressed = true;
+		}
+		else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) ||
+			(keyCode == 'z' && keyCode == 'shiftKey' && (event.ctrlKey || event.metaKey))) {
 			that.mapEditorHistory.redo();
 		}
-		if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
+		else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) {
 			if (that.shiftKeyPressed == false) {
 				that.mapEditorHistory.undo();
 			}
 		}
-		if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
+		else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) {
 			event.preventDefault();
 			that.drawingManager.setDrawingMode(null);
@@ -331,25 +367,27 @@
 
 		}
-		if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {
+		else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) {
 			event.preventDefault();
 			that.deselectAll();
 		}
-		if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
+		else if (keyCode == '0' || keyCode == '`') {
 
 			that.drawingManager.setDrawingMode(null);
-		} else if (event.code == 'Digit1') {
+		} else if (keyCode == '1') {
 			that.drawingManager.setDrawingMode('marker');
-		} else if (event.code == 'Digit2') {
+		} else if (keyCode == '2') {
 			that.drawingManager.setDrawingMode('circle');
-		} else if (event.code == 'Digit3') {
+		} else if (keyCode == '3') {
 			that.drawingManager.setDrawingMode('polygon');
-		} else if (event.code == 'Digit4') {
+		} else if (keyCode == '4') {
 			that.drawingManager.setDrawingMode('polyline');
-		} else if (event.code == 'Digit5') {
+		} else if (keyCode == '5') {
 			that.drawingManager.setDrawingMode('rectangle');
-		} else if (event.code == 'KeyQ') {
+		} else if (keyCode == 's') {
+			that.saveToArchives();			
+		} else if (keyCode == 'q') {			
 			that.printHistory();
 		}
-		//							console.log(event.code);
+		//							console.log(keyCode);
 	});
 
@@ -364,6 +402,6 @@
 	
 	//Sets shift as pressed
-	mapAndControls.addEventListener('keydown', function () {
-		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+	mapAndControls.keydown(function (event) {
+		if (event.keyCode == 'shiftKey') {
 			that.shiftKeyPressed = true;
 
@@ -373,6 +411,6 @@
 
 	//Sets shift as unpressed
-	mapAndControls.addEventListener('keyup', function () {
-		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+	mapAndControls.keyup(function (event) {		
+		if (event.keyCode == 'shiftKey') {
 			that.shiftKeyPressed = false;
 		}
@@ -381,4 +419,25 @@
 
 	this.buildColorPalette();
+	
+	
+	
+	
+	var collection = gs.cgiParams.c;
+	var site_name = gs.xsltParams.site_name;
+	var nodeID = this.id; // documentID, hopefully contains section ID too
+	var metaname = "GPS.mapOverlay";
+	
+	// collection, site, documentID, metadataName, metadataPosition, responseFunction
+	gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){
+			// responseText is of type GSMetadata
+			
+			// called when data has been retrieved from archives
+			var JSONString = responseText.getValue();			
+			that.LOAD(JSONString);
+			//var json_overlays = ShapesUtil.overlayToJSON(this.overlays);	
+		}
+	); // TODO: responseFunction in setMeta call
+	
+	
 }
 
@@ -583,10 +642,10 @@
 	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
 	thicknessSliderOutput.innerHTML = thi;
-	document.getElementById("thicknessRange" + "-" + this.id).value = thi * 20;
+	document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
 
 	//Update the opacity slider and value on the settings menu
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = "% " + opa * 100;
-	document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100;
+	opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
+	document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
 
 	if (this.drawingManager.drawingMode == null) {
@@ -611,23 +670,46 @@
 }
 
+
+MapEditor.prototype.saveToArchives = function () {
+	alert("Save pressed");
+	
+	var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
+	var collection = gs.cgiParams.c;
+	var site_name = gs.xsltParams.site_name;
+	var nodeID = this.id; // documentID, hopefully contains section ID too
+	var metaname = "GPS.mapOverlay";
+	
+	// collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction	
+	gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){
+			alert("SAVED");
+		}
+	);
+}
+
+
 MapEditor.prototype.printHistory = function () {
-	//console.log("prev", this.mapEditorHistory.prevOverlays);
-	//console.log("present ", this.mapEditorHistory.presentOverlays);
-	//console.log("undone ", this.mapEditorHistory.undoneOverlays);
+	console.log("prev", this.mapEditorHistory.prevOverlays);
+	console.log("present ", this.mapEditorHistory.presentOverlays);
+	console.log("undone ", this.mapEditorHistory.undoneOverlays);
 	//console.log(this.selectedShapes);
+	var collection = gs.cgiParams.c;
+	console.log(collection);
 	console.log(this.overlays);
-	
 	var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
 	
 	console.log("JSON overlay:\n" + JSON.stringify(json_overlays));
 	
-}
-
-MapEditor.LOAD = function (json_str) {
-	
-    var map_editor = Object.values(gsmap_store)[0]
-	
+	/*
+	this.LOAD('[{"strokeColor":"#32CD32","strokeWeight":1,"fillColor":"#32CD32","fillOpacity":0.4,"bounds":{"north":-37.78190971734986,"south":-37.787200748043546,"east":175.33850727431195,"west":175.3324991261186},"type":"rectangle"},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"bounds":{"north":-37.78550494611987,"south":-37.791270513892385,"east":175.33764896742719,"west":175.3284650837602},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.793034009483115,"south":-37.79723909833998,"east":175.3225427662553,"west":175.31498966566937},"type":"rectangle"},{"strokeColor":"#4B0082","strokeWeight":5,"fillColor":"#4B0082","fillOpacity":0.62,"bounds":{"north":-37.78991395018121,"south":-37.79737474238258,"east":175.30846653334515,"west":175.2955060993852},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.79961283312584,"south":-37.80700483276894,"east":175.3281217610063,"west":175.31241474501508},"type":"rectangle"},{"geodesic":false,"strokeColor":"#FF8C00","strokeWeight":1,"path":[{"lat":-37.77824647420985,"lng":175.31842289320844},{"lat":-37.792627052698045,"lng":175.32425938002484},{"lat":-37.79079571942646,"lng":175.31061230055707},{"lat":-37.78597977458094,"lng":175.2910429035844},{"lat":-37.78055298179892,"lng":175.29413280836957},{"lat":-37.77912838266847,"lng":175.3034883534135},{"lat":-37.77668614885508,"lng":175.30537662856},{"lat":-37.78218106147165,"lng":175.3079515492143}],"type":"polygon","fillColor":"#FF8C00","fillOpacity":0.4},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"center":{"lat":-37.7737689305036,"lng":175.33549693998134},"radius":811.9768269278177,"type":"circle"},{"position":{"lat":-37.77431167751719,"lng":175.3143825906161},"type":"marker"},{"position":{"lat":-37.782452404597294,"lng":175.3337803262118},"type":"marker"},{"geodesic":false,"strokeColor":"#4B0082","strokeOpacity":1,"strokeWeight":5,"path":[{"lat":-37.759203725669785,"lng":175.33033457820488},{"lat":-37.771688357854,"lng":175.35162058894707},{"lat":-37.79339574144619,"lng":175.3646668535955},{"lat":-37.81536797134891,"lng":175.35436717097832},{"lat":-37.819978597019684,"lng":175.32861796443535},{"lat":-37.81970739171663,"lng":175.2929123980291},{"lat":-37.806688365360884,"lng":175.26235667293145},{"lat":-37.795294834173575,"lng":175.25789347713066},{"lat":-37.78389954558992,"lng":175.2541169268377},{"lat":-37.77033143470697,"lng":175.26132670466973},{"lat":-37.760018005052494,"lng":175.27746287410332},{"lat":-37.75757514001425,"lng":175.31076518123223},{"lat":-37.759203725669785,"lng":175.33033457820488}],"type":"polyline"}]');
+	*/
+	 
+}
+
+// to be called after reading back in stored JSON from archives meta
+MapEditor.prototype.LOAD = function (json_str) {
+	this.mapEditorHistory.historyOverlayPush();
+	
+    var map_editor = Object.values(gsmap_store)[0];
 	var new_overlays = ShapesUtil.JSONToOverlays(json_str);
-	
 	for (var i=0; i<map_editor.overlays.length; i++) {
 		map_editor.overlays[i].setMap(null);
@@ -639,4 +721,6 @@
 		map_editor.overlays[i].setMap(map_editor.map);
 	}
+	
+	this.mapEditorHistory.presentOverlayPush();
 	
 }
