Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33085)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33086)
@@ -37,4 +37,5 @@
 	this.resizable = false;
 	this.dontResize = false;
+
 	this.shapeOptions = {
 		suppressUndo: true,
@@ -44,5 +45,6 @@
 		editable: true,
 		geodesic: false,
-		draggable: true
+		draggable: true,
+		description: ""
 	};
 	this.mapEditorHistory = new MapEditorHistory(this);
@@ -85,5 +87,5 @@
 		
 	thicknessSliderOutput.oninput = function () {
-		that.shapeSpecsChangeMD();
+	    that.shapeSpecsChangeMD(); // TODO: DO WE NEED THIS LINE? (LINE COPIED & PASTED FROM ABOVE)
 		if(this.value > that.MAX_THICKNESS) this.value = that.MAX_THICKNESS;
 		if(this.value < that.MIN_THICKNESS) this.value = that.MIN_THICKNESS;
@@ -107,5 +109,5 @@
 	}
 	opacitySliderOutput.oninput = function () {
-		that.shapeSpecsChangeMD();
+		that.shapeSpecsChangeOnInput();
 		if(this.value > that.MAX_OPACITY) this.value = that.MAX_OPACITY;
 		if(this.value < that.MIN_OPACITY) this.value = that.MIN_OPACITY;
@@ -116,7 +118,17 @@
 	}
 	
+	var descriptionInput = document.getElementById("description" + "-" + this.id);
+	descriptionInput.oninput = function () {	    
+	    that.shapeSpecsChangeOnInput(); // takes care of history (undo/redo)		
+		var description = this.value;
+	    that.shapeOptions.description = description;        
+	    that.setSelectedDescription(that.shapeOptions.description);        
+	}
+	
+    // TODO: Do we need these listeners, when we already have onInput methods above? Test.
 	document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() });
 	document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
-	document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function() { that.shapeSpecsChangeMU() } );
+	document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
+	//document.getElementById("description" + "-" + this.id).addEventListener("keypress", function () { that.shapeSpecsChangeOnInput() });
 
 	document.onmousedown = function (ev) {
@@ -214,4 +226,10 @@
 }
 
+MapEditor.prototype.shapeSpecsChangeOnInput = function () {
+    if (this.selectedShapes.length > 0) {
+        this.mapEditorHistory.presentOverlayPush();
+    }
+}
+
 MapEditor.prototype.makeColorButton = function (color) {
 	var that = this;
@@ -332,10 +350,11 @@
 	// store reference to added overlay
 	google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function (e) {
-		
+	    document.getElementById("description" + "-" + that.id).value = "";
+	    var value = document.getElementById("description" + "-" + that.id).value;
 		that.allowDeselect = true;
 		that.mapEditorHistory.historyOverlayPush();
 		that.overlays.push(e.overlay); // store reference to added overlay
 		var newShape = e.overlay;
-		newShape.type = e.type;
+		newShape.type = e.type;		
 		that.mapEditorHistory.presentOverlayPush();
 		
@@ -389,5 +408,5 @@
 			//disable keyboard shortcut within the number input field
 			var activeElement = $(document.activeElement);
-			if(activeElement.attr('type') == 'number'){
+			if(activeElement.attr('type') == 'number' || activeElement.attr('type') == 'text'){
 				//console.log('number detected')
 				return;
@@ -517,5 +536,5 @@
 
 MapEditor.prototype.addShapeListeners = function (newShape, e) {
-	var that = this;
+    var that = this;
 	// Add an event listener that selects the newly-drawn shape when the user
 	// mouses down on it.
@@ -612,8 +631,9 @@
 		//Send the values to be updated
 		var thi = shape.strokeWeight;
-		var opa = shape.fillOpacity;
+		var opa = shape.fillOpacity;		
 		var fCol = shape.fillColor;
 		var sCol = shape.strokeColor;
-		this.updateMenuValues(thi, opa, fCol, sCol);
+		var description = shape.description;
+		this.updateMenuValues(thi, opa, fCol, sCol, description);
 
 	} else if (shape.type == 'marker') {
@@ -636,4 +656,13 @@
 }
 
+//Set selected label
+MapEditor.prototype.setSelectedDescription = function (label) {
+    if (this.selectedShapes.length > 0) {
+        for (var i = 0; i < this.selectedShapes.length; i++) {
+            this.selectedShapes[i].set('description', label); //SAME: this.selectedShapes[i].description = label;            
+        }
+    }
+}
+
 //Set selected thickness
 MapEditor.prototype.setSelectedThickness = function (sWeight) {
@@ -669,5 +698,5 @@
 }
 
-MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {	
+MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol, description) {	
 	//Update thickness slider and value on the settings menu
 	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
@@ -681,4 +710,8 @@
 	opacitySliderOutput.value = opa * 100;
 	document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100;
+
+    // Show the description in the description field
+	var descriptionInput = document.getElementById("description" + "-" + this.id);
+	descriptionInput.value = description;
 
 	if (this.drawingManager.drawingMode == null) {
