Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-history.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-history.js	(revision 32766)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-history.js	(revision 32766)
@@ -0,0 +1,377 @@
+var prevOverlays = [];
+var presentOverlays = [];
+var undoneOverlays = [];
+var cycleComplete = true;
+
+function MapEditorHistory()
+{
+	this.prevOverlays = [];
+	this.presentOverlays = [];
+	this.undoneOverlays = [];
+	this.cycleComplete = true;
+}
+
+MapEditorHistory.prototype.undo = function(overlays) {
+	for (var i = 0; i < overlays.length; i++) {
+		overlays[i].setMap(null);
+	}
+	if (this.prevOverlays.length != 0) {
+		selectedShapes = [];
+		overlays = [];
+		this.undoneOverlaysPush();
+		let prev_overlay = this.prevOverlays.pop();
+
+		if (prev_overlay.length > 0) {
+			for (var i = 0; i < prev_overlay.length; i++) {
+				overlays[i] = prev_overlay[i];
+				overlays[i].setMap(map);
+				overlays[i].draggable = draggableState;
+			}
+		}
+	}
+};
+	
+
+	
+function undo() {
+
+	for (var i = 0; i < overlays.length; i++) {
+		overlays[i].setMap(null);
+	}
+	if (prevOverlays.length != 0) {
+		selectedShapes = [];
+		overlays = [];
+		undoneOverlaysPush();
+		var prev_overlay = prevOverlays.pop();
+
+		if (prev_overlay.length > 0) {
+			for (var i = 0; i < prev_overlay.length; i++) {
+				overlays[i] = prev_overlay[i];
+				overlays[i].setMap(map);
+				overlays[i].draggable = draggableState;
+			}
+		}
+	}
+}
+
+function redo() {
+
+	if (undoneOverlays.length != 0) {
+		selectedShapes = [];
+		for (var i = 0; i < overlays.length; i++) {
+			overlays[i].setMap(null);
+		}
+
+		overlays = [];
+		var lastEntry = undoneOverlays[undoneOverlays.length - 1];
+		for (var i = 0; i < lastEntry.length; i++) {
+			overlays[i] = lastEntry[i];
+			overlays[i].setMap(map);
+			overlays[i].draggable = draggableState;
+		}
+
+		var conditionPrevious = presentOverlays[0];
+		if (conditionPrevious !== undefined) {
+			if (conditionPrevious.length == 0) {
+				prevOverlays.push(presentOverlays[0]);
+			} else {
+				var overlays_copy = [];
+				for (var i = 0; i < presentOverlays[0].length; i++) {
+					var clone_shape = cloneShape(presentOverlays[0][i]);
+					if (overlayItemIsShape(clone_shape)) {
+						addShapeListeners(clone_shape, null);
+					} else {
+						addMarkerListeners(clone_shape, null);
+					}
+					overlays_copy[i] = clone_shape;
+				}
+				prevOverlays.push(overlays_copy);
+			}
+		}
+		presentOverlays = [];
+		presentOverlays.push(undoneOverlays[undoneOverlays.length - 1]);
+		undoneOverlays.pop();
+	}
+}
+
+function clonePath(path) {
+	var clone_path = [];
+
+	for (var i = 0; i < path.length; i++) {
+		var lati = path.getAt(i).lat();
+		var lngi = path.getAt(i).lng();
+		clone_lat_lng = {
+			lat: lati,
+			lng: lngi
+		};
+		clone_path.push(clone_lat_lng);
+	}
+
+	return clone_path;
+}
+
+function clonePolyline(polyline) {
+	var path = polyline.getPath();
+	var geodesic = polyline.geodesic;
+	var strokeColor = polyline.strokeColor;
+	var strokeOpacity = polyline.strokeOpacity;
+	var strokeWeight = polyline.strokeWeight;
+	var clone_path = clonePath(path);
+	//var editable      = rect.editable;
+
+	var clone_polyline = new google.maps.Polyline({
+			geodesic: geodesic,
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			path: clone_path,
+			draggable: draggableState,
+			editable: false
+		});
+
+	clone_polyline.type = google.maps.drawing.OverlayType.POLYLINE;
+
+	return clone_polyline;
+}
+
+function clonePolygon(polygon) {
+	var path = polygon.getPath();
+	var geodesic = polygon.geodesic;
+	var strokeColor = polygon.strokeColor;
+	var strokeOpacity = polygon.strokeOpacity;
+	var strokeWeight = polygon.strokeWeight;
+	var fillColor = polygon.fillColor;
+	var fillOpacity = polygon.fillOpacity;
+	var clone_path = clonePath(path);
+	//var editable      = rect.editable;
+
+	var clone_polygon = new google.maps.Polygon({
+			geodesic: geodesic,
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			path: clone_path,
+			draggable: draggableState,
+			editable: false
+		});
+
+	clone_polygon.type = google.maps.drawing.OverlayType.POLYGON;
+
+	return clone_polygon;
+}
+
+function cloneRectangle(rect) {
+	var strokeColor = rect.strokeColor;
+	var strokeOpacity = rect.strokeOpacity;
+	var strokeWeight = rect.strokeWeight;
+	var fillColor = rect.fillColor;
+	var fillOpacity = rect.fillOpacity;
+	var bounds = rect.getBounds();
+	var type = rect.type;
+	//var editable      = rect.editable;
+
+	var clone_rect = new google.maps.Rectangle({
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			bounds: bounds,
+			draggable: draggableState,
+			editable: false,
+			type: type
+		});
+
+	clone_rect.type = google.maps.drawing.OverlayType.RECTANGLE;
+
+	return clone_rect;
+}
+
+function cloneCircle(circ) {
+	var strokeColor = circ.strokeColor;
+	var strokeOpacity = circ.strokeOpacity;
+	var strokeWeight = circ.strokeWeight;
+	var fillColor = circ.fillColor;
+	var fillOpacity = circ.fillOpacity;
+	var center = circ.center;
+	var radius = circ.radius;
+	//var editable      = rect.editable;
+
+	var clone_circ = new google.maps.Circle({
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			center: center,
+			radius: radius,
+			draggable: draggableState,
+			editable: false
+		});
+
+	clone_circ.type = google.maps.drawing.OverlayType.CIRCLE;
+
+	return clone_circ;
+}
+
+function cloneMarker(marker) {
+	var position = marker.getPosition();
+	var anchorPoint = marker.anchorPoint;
+	var clone_marker = new google.maps.Marker({
+			anchorPoint: anchorPoint,
+			position: position,
+			clickable: true,
+			draggable: draggableState,
+			editable: false
+		})
+		clone_marker.type = google.maps.drawing.OverlayType.MARKER;
+
+	return clone_marker;
+}
+
+function cloneShape(shape) {
+	if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
+		var clone_polyline = clonePolyline(shape);
+		return clone_polyline;
+	} else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
+		var clone_polygon = clonePolygon(shape);
+		return clone_polygon;
+	} else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
+		var clone_rect = cloneRectangle(shape);
+		return clone_rect;
+
+	} else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
+		var clone_circ = cloneCircle(shape);
+		return clone_circ;
+
+	} else {
+		var clone_marker = cloneMarker(shape);
+		return clone_marker;
+	}
+}
+
+function overlayItemIsShape(overlay_item) {
+	var type = overlay_item.type;
+
+	is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
+	 || (type === google.maps.drawing.OverlayType.POLYGON)
+	 || (type === google.maps.drawing.OverlayType.RECTANGLE)
+	 || (type === google.maps.drawing.OverlayType.CIRCLE);
+
+	return is_shape;
+}
+
+function historyOverlayPush() {
+	if (cycleComplete) {
+		var overlays_copy = [];
+		for (var i = 0; i < overlays.length; i++) {
+			var clone_shape = cloneShape(overlays[i]);
+
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		undoneOverlays = [];
+		prevOverlays.push(overlays_copy);
+	}
+
+	cycleComplete = false;
+}
+function presentOverlayPush() {
+
+	OVbeforeClearing = overlays;
+	PObeforeClearing = presentOverlays;
+	presentOverlays = [];
+	var overlays_copy = [];
+	for (var i = 0; i < overlays.length; i++) {
+		var clone_shape = cloneShape(overlays[i]);
+		if (overlayItemIsShape(clone_shape)) {
+			addShapeListeners(clone_shape, null); // don't have an overlay event!
+		} else {
+			addMarkerListeners(clone_shape, null); // don't have an overlay event!
+		}
+		overlays_copy[i] = clone_shape;
+	}
+	presentOverlays.push(overlays_copy);
+	cycleComplete = true;
+
+}
+
+function undoneOverlaysPush() {
+
+	var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined;
+
+	if (conditionUndone) {
+		var overlays_copy = [];
+		for (var i = 0; i < presentOverlays[0].length; i++) {
+			var clone_shape = cloneShape(presentOverlays[0][i]);
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		undoneOverlays.push(overlays_copy);
+	}
+
+	var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined;
+
+	if (conditionPresent) {
+		presentOverlays = [];
+		var overlays_copy = [];
+		for (var i = 0; i < prevOverlays[prevOverlays.length - 1].length; i++) {
+			var clone_shape = cloneShape(prevOverlays[prevOverlays.length - 1][i]);
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		presentOverlays.push(overlays_copy);
+	}
+}
+
+
+MapEditorHistory.prototype.undoneOverlaysPush = function() {
+
+	var conditionUndone = this.presentOverlays[this.presentOverlays.length - 1] !== undefined;
+
+	if (conditionUndone) {
+		var overlays_copy = [];
+		for (var i = 0; i < this.presentOverlays[0].length; i++) {
+			var clone_shape = cloneShape(this.presentOverlays[0][i]);
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		this.undoneOverlays.push(overlays_copy);
+	}
+
+	var conditionPresent = this.prevOverlays[this.prevOverlays.length - 1] !== undefined;
+
+	if (conditionPresent) {
+		this.presentOverlays = [];
+		var overlays_copy = [];
+		for (var i = 0; i < this.prevOverlays[this.prevOverlays.length - 1].length; i++) {
+			var clone_shape = cloneShape(this.prevOverlays[this.prevOverlays.length - 1][i]);
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		this.presentOverlays.push(overlays_copy);
+	}
+}
+
Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-themes.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-themes.js	(revision 32766)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-themes.js	(revision 32766)
@@ -0,0 +1,926 @@
+var styles = {
+default:
+	null,
+	silver: [{
+			elementType: 'geometry',
+			stylers: [{
+					color: '#f5f5f5'
+				}
+			]
+		}, {
+			elementType: 'labels.icon',
+			stylers: [{
+					visibility: 'off'
+				}
+			]
+		}, {
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#616161'
+				}
+			]
+		}, {
+			elementType: 'labels.text.stroke',
+			stylers: [{
+					color: '#f5f5f5'
+				}
+			]
+		}, {
+			featureType: 'administrative.land_parcel',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#bdbdbd'
+				}
+			]
+		}, {
+			featureType: 'poi',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#eeeeee'
+				}
+			]
+		}, {
+			featureType: 'poi',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#757575'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#e5e5e5'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#9e9e9e'
+				}
+			]
+		}, {
+			featureType: 'road',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#ffffff'
+				}
+			]
+		}, {
+			featureType: 'road.arterial',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#757575'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#dadada'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#616161'
+				}
+			]
+		}, {
+			featureType: 'road.local',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#9e9e9e'
+				}
+			]
+		}, {
+			featureType: 'transit.line',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#e5e5e5'
+				}
+			]
+		}, {
+			featureType: 'transit.station',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#eeeeee'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#c9c9c9'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#9e9e9e'
+				}
+			]
+		}
+	],
+
+	night: [{
+			elementType: 'geometry',
+			stylers: [{
+					color: '#242f3e'
+				}
+			]
+		}, {
+			elementType: 'labels.text.stroke',
+			stylers: [{
+					color: '#242f3e'
+				}
+			]
+		}, {
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#746855'
+				}
+			]
+		}, {
+			featureType: 'administrative.locality',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#d59563'
+				}
+			]
+		}, {
+			featureType: 'poi',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#d59563'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#263c3f'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#6b9a76'
+				}
+			]
+		}, {
+			featureType: 'road',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#38414e'
+				}
+			]
+		}, {
+			featureType: 'road',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#212a37'
+				}
+			]
+		}, {
+			featureType: 'road',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#9ca5b3'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#746855'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#1f2835'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#f3d19c'
+				}
+			]
+		}, {
+			featureType: 'transit',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#2f3948'
+				}
+			]
+		}, {
+			featureType: 'transit.station',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#d59563'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#17263c'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#515c6d'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'labels.text.stroke',
+			stylers: [{
+					color: '#17263c'
+				}
+			]
+		}
+	],
+
+	retro: [{
+			elementType: 'geometry',
+			stylers: [{
+					color: '#ebe3cd'
+				}
+			]
+		}, {
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#523735'
+				}
+			]
+		}, {
+			elementType: 'labels.text.stroke',
+			stylers: [{
+					color: '#f5f1e6'
+				}
+			]
+		}, {
+			featureType: 'administrative',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#c9b2a6'
+				}
+			]
+		}, {
+			featureType: 'administrative.land_parcel',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#dcd2be'
+				}
+			]
+		}, {
+			featureType: 'administrative.land_parcel',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#ae9e90'
+				}
+			]
+		}, {
+			featureType: 'landscape.natural',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#dfd2ae'
+				}
+			]
+		}, {
+			featureType: 'poi',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#dfd2ae'
+				}
+			]
+		}, {
+			featureType: 'poi',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#93817c'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'geometry.fill',
+			stylers: [{
+					color: '#a5b076'
+				}
+			]
+		}, {
+			featureType: 'poi.park',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#447530'
+				}
+			]
+		}, {
+			featureType: 'road',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#f5f1e6'
+				}
+			]
+		}, {
+			featureType: 'road.arterial',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#fdfcf8'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#f8c967'
+				}
+			]
+		}, {
+			featureType: 'road.highway',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#e9bc62'
+				}
+			]
+		}, {
+			featureType: 'road.highway.controlled_access',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#e98d58'
+				}
+			]
+		}, {
+			featureType: 'road.highway.controlled_access',
+			elementType: 'geometry.stroke',
+			stylers: [{
+					color: '#db8555'
+				}
+			]
+		}, {
+			featureType: 'road.local',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#806b63'
+				}
+			]
+		}, {
+			featureType: 'transit.line',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#dfd2ae'
+				}
+			]
+		}, {
+			featureType: 'transit.line',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#8f7d77'
+				}
+			]
+		}, {
+			featureType: 'transit.line',
+			elementType: 'labels.text.stroke',
+			stylers: [{
+					color: '#ebe3cd'
+				}
+			]
+		}, {
+			featureType: 'transit.station',
+			elementType: 'geometry',
+			stylers: [{
+					color: '#dfd2ae'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'geometry.fill',
+			stylers: [{
+					color: '#b9d3c2'
+				}
+			]
+		}, {
+			featureType: 'water',
+			elementType: 'labels.text.fill',
+			stylers: [{
+					color: '#92998d'
+				}
+			]
+		}
+	],
+
+	paleDawn: [{
+			"featureType": "administrative",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"lightness": 33
+				}
+			]
+		}, {
+			"featureType": "landscape",
+			"elementType": "all",
+			"stylers": [{
+					"color": "#f2e5d4"
+				}
+			]
+		}, {
+			"featureType": "poi.park",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#c5dac6"
+				}
+			]
+		}, {
+			"featureType": "poi.park",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"lightness": 20
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "all",
+			"stylers": [{
+					"lightness": 20
+				}
+			]
+		}, {
+			"featureType": "road.highway",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#c5c6c6"
+				}
+			]
+		}, {
+			"featureType": "road.arterial",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#e4d7c6"
+				}
+			]
+		}, {
+			"featureType": "road.local",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#fbfaf7"
+				}
+			]
+		}, {
+			"featureType": "water",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"color": "#acbcc9"
+				}
+			]
+		}
+	],
+
+	avocadoWorld: [{
+			"featureType": "water",
+			"elementType": "geometry",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"color": "#aee2e0"
+				}
+			]
+		}, {
+			"featureType": "landscape",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#abce83"
+				}
+			]
+		}, {
+			"featureType": "poi",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#769E72"
+				}
+			]
+		}, {
+			"featureType": "poi",
+			"elementType": "labels.text.fill",
+			"stylers": [{
+					"color": "#7B8758"
+				}
+			]
+		}, {
+			"featureType": "poi",
+			"elementType": "labels.text.stroke",
+			"stylers": [{
+					"color": "#EBF4A4"
+				}
+			]
+		}, {
+			"featureType": "poi.park",
+			"elementType": "geometry",
+			"stylers": [{
+					"visibility": "simplified"
+				}, {
+					"color": "#8dab68"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"visibility": "simplified"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels.text.fill",
+			"stylers": [{
+					"color": "#5B5B3F"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels.text.stroke",
+			"stylers": [{
+					"color": "#ABCE83"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels.icon",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "road.local",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#A4C67D"
+				}
+			]
+		}, {
+			"featureType": "road.arterial",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#9BBF72"
+				}
+			]
+		}, {
+			"featureType": "road.highway",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#EBF4A4"
+				}
+			]
+		}, {
+			"featureType": "transit",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative",
+			"elementType": "geometry.stroke",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"color": "#87ae79"
+				}
+			]
+		}, {
+			"featureType": "administrative",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#7f2200"
+				}, {
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative",
+			"elementType": "labels.text.stroke",
+			"stylers": [{
+					"color": "#ffffff"
+				}, {
+					"visibility": "on"
+				}, {
+					"weight": 4.1
+				}
+			]
+		}, {
+			"featureType": "administrative",
+			"elementType": "labels.text.fill",
+			"stylers": [{
+					"color": "#495421"
+				}
+			]
+		}, {
+			"featureType": "administrative.neighborhood",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}
+	],
+
+	bright: [{
+			"featureType": "all",
+			"elementType": "all",
+			"stylers": [{
+					"saturation": "20"
+				}, {
+					"lightness": "-3"
+				}, {
+					"visibility": "on"
+				}, {
+					"weight": "1.18"
+				}
+			]
+		}, {
+			"featureType": "administrative",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "on"
+				}
+			]
+		}, {
+			"featureType": "landscape",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "landscape.man_made",
+			"elementType": "all",
+			"stylers": [{
+					"saturation": "-70"
+				}, {
+					"lightness": "14"
+				}
+			]
+		}, {
+			"featureType": "poi",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "transit",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "water",
+			"elementType": "all",
+			"stylers": [{
+					"saturation": "100"
+				}, {
+					"lightness": "-14"
+				}
+			]
+		}, {
+			"featureType": "water",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}, {
+					"lightness": "12"
+				}
+			]
+		}
+	],
+
+	turquoise: [{
+			"featureType": "administrative",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "on"
+				}
+			]
+		}, {
+			"featureType": "administrative.country",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"color": "#00858a"
+				}
+			]
+		}, {
+			"featureType": "administrative.country",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative.province",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative.locality",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative.neighborhood",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "administrative.land_parcel",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "landscape.man_made",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#f6ebcb"
+				}
+			]
+		}, {
+			"featureType": "landscape.natural",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#f7f1df"
+				}
+			]
+		}, {
+			"featureType": "landscape.natural.landcover",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#f7f1df"
+				}
+			]
+		}, {
+			"featureType": "landscape.natural.terrain",
+			"elementType": "geometry",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "landscape.natural.terrain",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#f7f1df"
+				}
+			]
+		}, {
+			"featureType": "poi",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "poi.business",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "poi.government",
+			"elementType": "all",
+			"stylers": [{
+					"visibility": "on"
+				}, {
+					"color": "#f3dd9d"
+				}
+			]
+		}, {
+			"featureType": "poi.medical",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#fbd3da"
+				}, {
+					"visibility": "on"
+				}
+			]
+		}, {
+			"featureType": "poi.park",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#bde6ab"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "geometry.stroke",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels",
+			"stylers": [{
+					"visibility": "on"
+				}
+			]
+		}, {
+			"featureType": "road",
+			"elementType": "labels.icon",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "road.highway",
+			"elementType": "geometry.stroke",
+			"stylers": [{
+					"color": "#f8a179"
+				}
+			]
+		}, {
+			"featureType": "road.highway",
+			"elementType": "labels.icon",
+			"stylers": [{
+					"visibility": "off"
+				}
+			]
+		}, {
+			"featureType": "road.arterial",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#ffffff"
+				}
+			]
+		}, {
+			"featureType": "road.local",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#ffffff"
+				}
+			]
+		}, {
+			"featureType": "transit.station.airport",
+			"elementType": "geometry.fill",
+			"stylers": [{
+					"color": "#e6dcbd"
+				}
+			]
+		}, {
+			"featureType": "water",
+			"elementType": "geometry",
+			"stylers": [{
+					"color": "#3dbbc2"
+				}
+			]
+		}
+	],
+
+	hiding: [{
+			featureType: 'poi.business',
+			stylers: [{
+					visibility: 'off'
+				}
+			]
+		}, {
+			featureType: 'transit',
+			elementType: 'labels.icon',
+			stylers: [{
+					visibility: 'off'
+				}
+			]
+		}
+	]
+};
Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 32766)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 32766)
@@ -0,0 +1,695 @@
+var debug = false;
+var shiftKeyPressed = false;
+var beingDragged = false;
+var resizeEntry = false;
+var allowDeselect = true;
+var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
+var selectedColor;
+var colorButtons = {};
+var thicknessValue = 1;
+var opacityValue = 0.4;
+var draggableState = true
+var overlays = [];
+var entryType = [];
+var selectedShapes = [];
+var listenersArray = [];
+var mapsArray = [];
+var controlsId = null;
+var drawingManager;
+var selectedShape;
+var map = null;
+var dragS, dragN;
+var dsNorth, dsSouth, dsEast, dsWest;
+//var gaj, gal, maj, mal;
+var counter = 0;
+var branchNum = 1;
+var mouseState = "up";
+var thicknessRangeListener = thicknessValue;
+var resizable = false;
+var dontResize = false;
+
+var mapEditorHistory = new MapEditorHistory();
+
+var polyOptions = {
+	fillColor: '#CA4A2F',
+	strokeWeight: thicknessValue,
+	fillOpacity: opacityValue,
+	editable: true,
+	draggable: draggableState,
+	geodesic: false
+};
+
+function MapEditor() {
+	this.shiftKeyPressed = false;
+	this.beingDragged = false;
+	this.resizeEntry = false;
+	this.allowDeselect = true;
+	this.colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
+	this.selectedColor;
+	this.colorButtons = {};
+	this.thicknessValue = 1;
+	this.opacityValue = 0.4;
+	this.draggableState = true
+	this.overlays = [];
+	this.entryType = [];
+	this.selectedShapes = [];
+	this.listenersArray = [];
+	this.mapsArray = [];
+	this.controlsId = null;
+	this.drawingManager;
+	this.selectedShape;
+	this.map = null;
+	this.dragS, dragN;
+	this.dsNorth, dsSouth, dsEast, dsWest;
+	// gaj, gal, maj, mal;
+	this.counter = 0;
+	this.branchNum = 1;
+	this.mouseState = "up";
+	this.thicknessRangeListener = thicknessValue;
+	this.resizable = false;
+	this.dontResize = false;
+	
+	this.mapEditorHistory = new MapEditorHistory();
+	
+	this.polyOptions = {
+		fillColor: '#CA4A2F',
+		strokeWeight: thicknessValue,
+		fillOpacity: opacityValue,
+		editable: true,
+		draggable: this.draggableState,
+		geodesic: false
+};
+}
+
+//MapEditor.prototype.initMapEditorControls = function(id) {
+//};
+
+	
+function initMapEditorControls(id) {
+	console.log(id);
+	//change draggable
+	var draggableCB = document.querySelector("input[name=draggableCB]");	
+	
+	draggableCB.addEventListener('change', function () {
+		if (this.checked) {
+			draggableState = false;
+			for (var i = 0; i < overlays.length; i++) {
+				overlays[i].draggable = draggableState;
+				polyOptions.draggable = draggableState;
+			}
+		} else {
+			draggableState = true;
+			for (var i = 0; i < overlays.length; i++) {
+				overlays[i].draggable = draggableState;
+				polyOptions.draggable = draggableState;
+			}
+		}
+	});
+
+	//Update thickness
+	var thicknessSlider = document.getElementById("thicknessRange" +"-"+ id);
+	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" +"-"+ id);
+	thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
+	
+	thicknessSlider.oninput = function () {
+		shapeSpecsChangeMD();
+		thicknessSliderOutput.innerHTML = this.value / 20;
+		thicknessValue = this.value / 20;		
+		polyOptions.strokeWeight = thicknessValue;
+		setSelectedThickness(thicknessValue);
+
+	}
+	//Update opacity
+	var opacitySlider = document.getElementById("colourOpacity" +"-"+ id);
+	var opacitySliderOutput = document.getElementById("opacityRangeVal" +"-"+ id);
+	opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) /100;
+
+	opacitySlider.oninput = function () {
+		shapeSpecsChangeMD();
+		opacitySliderOutput.innerHTML = "% " + this.value;
+		opacityValue = this.value / 100;		
+		polyOptions.fillOpacity = opacityValue;
+		setSelectedOpacity(opacityValue);
+	}
+
+	document.getElementById("color-palette1" +"-"+ id).addEventListener("mousedown", shapeSpecsChangeMD);
+	document.getElementById("thicknessRange" +"-"+ id).addEventListener("mouseup", shapeSpecsChangeMU);
+	document.getElementById("colourOpacity"  +"-"+ id).addEventListener("mouseup", shapeSpecsChangeMU);
+	document.onmousemove = mouseMove;
+	document.onmousedown = mouseDown;
+	document.onmouseup = mouseUp;
+}
+
+
+function settingThePath() {
+	listenersArray = []
+	counter = 0;
+	branchNum = 1;
+
+	for (var i = 0; i < selectedShapes.length * 2; i++) {
+		for (var j = 1; j < 5; j++) {
+			var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div";
+			listenersArray[counter] = getElementByXpath(path);
+			if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) {
+				listenersArray[counter].addEventListener("mousemove", function () {
+					resizable = true;
+					shapeResize();
+				});
+				listenersArray[counter].addEventListener("mouseout", function () {
+					if (mouseDown) {
+						resizable = true;
+						shapeResize();
+					}
+				});
+			}
+			counter++;
+		}
+		branchNum++;
+	}
+}
+
+
+
+function shapeResize() {
+	if (mouseState == "down") {
+		if (selectedShapes.length > 0) {
+			if (resizable) {
+				if(dontResize == false){
+					historyOverlayPush();
+				}
+				
+			}
+		}
+	}
+}
+
+function shapeSpecsChangeMD() {
+
+	if (selectedShapes.length > 0) {
+		historyOverlayPush();
+	}
+}
+
+function shapeSpecsChangeMU() {
+	if (selectedShapes.length > 0) {
+		presentOverlayPush();
+	}
+}
+
+function makeColorButton(color) {
+	var button = document.createElement('span');
+	button.className = 'color-buttons1';
+	button.style.backgroundColor = color;
+	google.maps.event.addDomListener(button, 'click', function () {
+		selectColor(color);
+		setSelectedShapeColor(color);
+		shapeSpecsChangeMU();
+	});
+	return button;
+}
+function buildColorPalette(id) {
+	console.log("colour palette build");
+	var colorPalette = document.getElementById("color-palette1" +"-"+ id);
+	for (var i = 0; i < colors.length; ++i) {
+		var currColor = colors[i];
+		var colorButton = makeColorButton(currColor);
+		colorPalette.appendChild(colorButton);
+		colorButtons[currColor] = colorButton;
+	}
+	selectColor(colors[0]);
+};
+function selectColor(color) {
+	selectedColor = color;
+	for (var i = 0; i < colors.length; ++i) {
+		var currColor = colors[i];
+		colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
+	}
+
+	// Retrieves the current options from the drawing manager and replaces the
+	// stroke or fill color as appropriate.
+	var polylineOptions = drawingManager.get('polylineOptions');
+	polylineOptions.strokeColor = color;
+	drawingManager.set('polylineOptions', polylineOptions);
+
+	var rectangleOptions = drawingManager.get('rectangleOptions');
+	rectangleOptions.fillColor = color;
+	drawingManager.set('rectangleOptions', rectangleOptions);
+
+	var circleOptions = drawingManager.get('circleOptions');
+	circleOptions.fillColor = color;
+	drawingManager.set('circleOptions', circleOptions);
+
+	var polygonOptions = drawingManager.get('polygonOptions');
+	polygonOptions.fillColor = color;
+	drawingManager.set('polygonOptions', polygonOptions);
+}
+
+function initMapEditor(id) {
+	var that = this;
+	
+	map = new google.maps.Map(document.getElementById("map-" + id), {
+			center: {
+				lat: -37.7891,
+				lng: 175.3180
+			},
+			zoom: 14,
+			mapId: id,
+		});
+	mapsArray.push(map);	
+	console.log(map);	
+	// Add a style-selector control to the map.
+	var styleControl = document.getElementById('style-selector-control' +"-"+ id);
+	map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
+
+	// Set the map's style to the initial value of the selector.
+	var styleSelector = document.getElementById('style-selector' +"-"+ id);
+	console.log(styleSelector);
+	//map = google.maps.Map(document.getElementById('map' +"-"+ id));
+	console.log(map);
+	map.setOptions({
+		styles: styles[styleSelector.value]
+		
+	});
+	
+	// Apply new JSON when the user selects a different style.
+	styleSelector.addEventListener('change', function () {
+		console.log(id);
+		mapsArray.indexOf(map).setOptions({
+			styles: styles[styleSelector.value]
+		});
+	});
+
+	drawingManager = new google.maps.drawing.DrawingManager({
+			drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
+			drawingControl: true,
+			drawingControlOptions: {
+				position: google.maps.ControlPosition.TOP_CENTER,
+				drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
+			},
+			markerOptions: {
+				draggable: draggableState
+			},
+			circleOptions: polyOptions,
+			polylineOptions: polyOptions,
+			polygonOptions: polyOptions,
+			rectangleOptions: polyOptions,
+		});
+
+	drawingManager.setMap(map);
+
+	google.maps.event.addListener(drawingManager, "drawingmode_changed", function () {
+		if(shiftKeyPressed != true && drawingManager.drawingMode !== null){
+			deselectAll();
+		}
+		settingThePath();
+
+	})
+
+	// store reference to added overlay
+	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
+		allowDeselect = true;
+		historyOverlayPush();
+		overlays.push(e.overlay); // store reference to added overlay
+		var newShape = e.overlay;
+		newShape.type = e.type;
+		presentOverlayPush();
+
+		if (e.type !== google.maps.drawing.OverlayType.MARKER) {
+			addShapeListeners(newShape, e);
+			setSelection(newShape, e);
+		} else {
+
+			addMarkerListeners(newShape, e);
+			setSelection(newShape, e);
+		}
+	});
+
+	//Clears selection if clicked on the map when shift is not presseed
+	google.maps.event.addListener(map, 'click', function (e) {
+		var c = document.body.childNodes;
+		if (e.target && e.target.matches("a.classA")) {
+			console.log("Anchor element clicked!");
+		}
+		if (shiftKeyPressed == false) {
+			clearSelection();
+			selectedShape = null;
+		}
+	});
+	
+	google.maps.event.addListener(map, 'mousedown', function (e) {
+		dontResize = true;
+	});	
+	
+	google.maps.event.addListener(map, 'mouseup', function (e) {
+		dontResize = false;
+	});	
+	
+	//Keyboard shortcuts
+	document.addEventListener('keydown', function () {
+		if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) {
+			redo();
+		}
+		if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
+			if (shiftKeyPressed == false) {
+				undo();
+				mapEditorHistory.undo(overlays); // ***** when we only have MapEditorHistory as a class
+				//that.mapEditorHistory.undo(that.overlays); // ***** when we have both MapEditorHistory and MapEditor as classes
+				
+			}
+		}
+		if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			drawingManager.setDrawingMode(null);
+			selectAll();
+			
+		}
+		if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			deselectAll();
+		}
+		if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
+
+			drawingManager.setDrawingMode(null);
+		} else if (event.code == 'Digit1') {
+			drawingManager.setDrawingMode('marker');
+		} else if (event.code == 'Digit2') {
+			drawingManager.setDrawingMode('circle');
+		} else if (event.code == 'Digit3') {
+			drawingManager.setDrawingMode('polygon');
+		} else if (event.code == 'Digit4') {
+			drawingManager.setDrawingMode('polyline');
+		} else if (event.code == 'Digit5') {
+			drawingManager.setDrawingMode('rectangle');
+		} else if (event.code == 'KeyQ') {
+			printHistory();
+		}
+		//							console.log(event.code);
+	});
+
+	//Sets shift as pressed
+	document.addEventListener('keydown', function () {
+		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+			shiftKeyPressed = true;
+
+		}
+
+	});
+
+	//Sets shift as unpressed
+	document.addEventListener('keyup', function () {
+		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+			shiftKeyPressed = false;
+		}
+
+	});
+
+	buildColorPalette(id);
+}
+
+//Deletes a vertex if clicked on it
+function vertexAndPolyDel(e, newShape) {
+	var vertex = e.vertex;
+	if (e.vertex !== undefined) {
+		if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
+			var path = newShape.getPaths().getAt(e.path);
+			path.removeAt(e.vertex);
+			if (path.length < 3) {
+				newShape.setMap(null);
+			}
+		}
+		if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
+			var path = newShape.getPath();
+			path.removeAt(e.vertex);
+			if (path.length < 2) {
+				newShape.setMap(null);
+			}
+		}
+	}
+}
+
+function addMarkerListeners(newShape, e) {
+	//cLICK EVENT IF A MARKER IS CREATED
+	google.maps.event.addListener(newShape, 'click', function (e) {
+		setSelection(newShape, e);
+	});
+
+	google.maps.event.addListener(newShape, 'dragstart', function (e) {
+		beingDragged = true;
+		historyOverlayPush();
+
+	});
+
+	google.maps.event.addListener(newShape, 'dragend', function () {
+		beingDragged = false;
+		presentOverlayPush();
+		allowDeselect = false;
+	});
+}
+
+function addShapeListeners(newShape, e) {
+	// Add an event listener that selects the newly-drawn shape when the user
+	// mouses down on it.
+	google.maps.event.addListener(newShape, 'click', function (e) {
+
+		vertexAndPolyDel(e, newShape);
+
+	});
+
+	google.maps.event.addListener(newShape, 'dragstart', function (e) {
+		allowDeselect = false;
+		historyOverlayPush();
+	});
+
+
+
+	google.maps.event.addListener(newShape, 'dragend', function () {
+		beingDragged = false;
+		presentOverlayPush();
+		settingThePath();
+		
+		allowDeselect = false;
+		setSelection(newShape, e);
+	});
+
+	//Store information after the event ends
+	google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
+		if (beingDragged == false) {
+			presentOverlayPush();
+		}
+	});
+
+	//Add an event listener to select a shape if the mouse hovers over it
+	google.maps.event.addListener(newShape, 'mousedown', function (e) {
+		if (e.target && e.target.matches("a.classA")) {
+			console.log("Anchor element clicked!");
+		}
+		if (e.vertex !== undefined || e.edge !== undefined) {
+			historyOverlayPush()
+		}
+		if (drawingManager.drawingMode == null) {
+			setSelection(newShape, e);
+		}
+	});
+
+	google.maps.event.addListener(newShape, 'mouseup', function (e) {
+		if (e.vertex !== undefined || e.edge !== undefined) {
+			presentOverlayPush()
+		} else {
+			//setSelection(newShape, e);
+		}
+		
+	});
+}
+function clearSelection() {
+	if (selectedShape) {
+		if (selectedShape.type !== 'marker') {
+			selectedShape.setEditable(false);
+			if (shiftKeyPressed == false) {
+				for (var i = 0; i < selectedShapes.length; i++) {
+					selectedShapes[i].setEditable(false);
+				}
+				selectedShapes = [];
+			}
+		}
+		selectedShape = null;
+	}
+}
+
+//Set selection for the selected overlay
+function setSelection(shape, e) {
+	if (shape.type !== 'marker') {
+		if (shiftKeyPressed == false) {
+			if(e !== null) {
+				if (e.vertex == undefined) {
+					if (e.edge == undefined) {
+						clearSelection();
+						shape.setEditable(true);
+					}
+				}				
+			}
+		}
+		if (selectedShapes.includes(shape)) {
+			if(e !== null){
+				if (e.vertex == undefined) {
+					if (e.edge == undefined) {
+						allowDeselect = true;
+						removeFromSelectedShapes(shape);
+					}
+				}
+			}
+		} else {
+			allowDeselect = false;
+			shape.setEditable(true);
+			selectedShapes.push(shape);
+		}
+
+		//Send the values to be updated
+		var thi = shape.strokeWeight;
+		var opa = shape.fillOpacity;
+		var fCol = shape.fillColor;
+		var sCol = shape.strokeColor;
+		//updateMenuValues(thi, opa, fCol, sCol);
+
+	} else if (shape.type == 'marker') {
+		clearSelection();
+	}
+	selectedShape = shape;
+	settingThePath();
+}
+
+function removeFromSelectedShapes(shape) {
+	if (selectedShapes.includes(shape)) {
+		if (allowDeselect) {
+			const index = selectedShapes.indexOf(shape);
+			selectedShapes.splice(index, 1);
+			shape.setEditable(false);
+		}
+		allowDeselect = true;
+	} 
+}
+
+//Set selected thickness
+function setSelectedThickness(sWeight) {
+	if (selectedShapes.length > 0) {
+		//historyOverlayPush();
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('strokeWeight', sWeight);
+		}
+	}
+}
+
+//Set selected opacity
+function setSelectedOpacity(fOpacity) {
+
+	if (selectedShapes.length > 0) {
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('fillOpacity', fOpacity);
+		}
+	}
+}
+
+//set selected fill colour
+function setSelectedShapeColor(color) {
+	if (selectedShapes.length > 0) {
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('fillColor', color);
+			selectedShapes[i].set('strokeColor', color);
+		}
+	}
+}
+function getElementByXpath(path) {
+	return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+}
+
+function updateMenuValues(thi, opa, fCol, sCol, id) {
+	//Update thickness slider and value on the settings menu
+	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" +"-"+ id);
+	thicknessSliderOutput.innerHTML = thi;
+	document.getElementById("thicknessRange" +"-"+ id).value = thi * 20;
+
+	//Update the opacity slider and value on the settings menu
+	var opacitySliderOutput = document.getElementById("opacityRangeVal" +"-"+ id);
+	opacitySliderOutput.innerHTML = "% " + opa * 100;
+	document.getElementById("colourOpacity" +"-"+ id).value = opa * 100;
+
+	if (drawingManager.drawingMode == null) {
+		selectColor(fCol);
+	}
+}
+function selectAll() {
+	shiftKeyPressed = true;
+	var e = new Object();
+	e.vertex = undefined;
+	selectedShapes = [];
+	for (var i = 0; i < overlays.length; i++) {
+		setSelection(overlays[i], e);
+	}
+	shiftKeyPressed = false;
+}
+
+function deselectAll() {
+	for (var i = 0; i < selectedShapes.length; i++) {
+		selectedShapes[i].setEditable(false);
+	}
+	selectedShapes = [];
+}
+
+function printHistory() {
+	console.log("prev", prevOverlays);
+	console.log("present ", presentOverlays);
+	console.log("undone ", undoneOverlays);
+	console.log(mouseState);
+}
+
+function mouseMove(ev) {
+
+	//How can I know the state of mouse from here
+	if (mouseState == 'down') {
+		//console.log('mouse down state')
+	}
+
+	if (mouseState == 'up') {
+		//console.log('mouse up state')
+	}
+}
+
+function mouseDown(ev) {
+	mouseState = "down";
+	//    console.log('Down State you can now start dragging');
+	//do not write any code here in this function
+}
+
+function mouseUp(ev) {
+	mouseState = "up";
+	//    console.log('up state you cannot drag now because you are not holding your mouse')
+	//do not write any code here in this function
+}
+
+function deleteSelectedShape() {
+	//console.log("this fires");
+	historyOverlayPush();
+	for (var i = 0; i < selectedShapes.length; i++) {
+		selectedShapes[i].setMap(null);
+
+		if (overlays.includes(selectedShapes[i])) {
+			const index = overlays.indexOf(selectedShapes[i]);
+			overlays.splice(index, 1);
+			selectedShapes[i].setEditable(false);
+		}
+	}
+	selectedShapes = [];
+	//console.log("this fires");
+	presentOverlayPush();
+}
+
+function deleteAllShape(nId) {
+	console.log(nId);
+	//console.log("this fires");
+	historyOverlayPush();
+	for (var i = 0; i < overlays.length; i++) {
+		overlays[i].setMap(null);
+	}
+	overlays = [];
+	//console.log("this fires");
+	presentOverlayPush();
+}
