Index: main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js	(revision 26914)
+++ main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js	(revision 26924)
@@ -10,8 +10,14 @@
 	var _elements = new Array();
 	var _itemSelected = false; //Used to prevent multiple elements from being highlighted
+	var _editModeText = false;
+	var _selectedTemplate;
 	
 	//Page elements
 	var _mainDiv;
-	var _textDiv;
+	
+	var _textEditor;
+	var _vEditor;
+	
+	var _templateSelector;
 	var _editor;
 	var _editingDiv;
@@ -20,4 +26,5 @@
 	var _xmlStatusBar;
 	var _saveButton;
+	var _swapEditorButton;
 	
 	//Editor state-keeping variables
@@ -27,4 +34,5 @@
 	var _currentMatch;
 	var _currentNamespace;
+	var _isVisualEditor = true;
 	
 	var createDebugDiv = function()
@@ -34,5 +42,5 @@
 		{
 			"position":"fixed",
-			"font-size":"0.7em",
+			"font-size":"0.8em",
 			"bottom":"0px",
 			"width":"100%",
@@ -46,9 +54,11 @@
 		var toolBarDiv = $("<div>");
 		toolBarDiv.css({"height":"40px"});
+
 		var buttonDiv = $("<div>");
 		buttonDiv.css("float", "left");
 		toolBarDiv.append(buttonDiv);
-		_textDiv = $("<div>");
-		_textDiv.css({"overflow":"auto", "width":"100%"});
+
+		_templateSelector = $("<div>", {"id":"templateSelector"});
+		_templateSelector.css({"overflow":"auto", "width":"100%"});
 
 		var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">");
@@ -120,4 +130,5 @@
 					_xmlStatusBar.attr("title", error);
 					_saveButton.attr("disabled", "disabled");
+					_swapEditorButton.attr("disabled", "disabled");
 					return;
 				}
@@ -130,4 +141,8 @@
 					_saveButton.removeAttr("disabled");
 				}
+				if(_swapEditorButton.val() == "Switch to Visual Editor")
+				{
+					_swapEditorButton.removeAttr("disabled");
+				}
 			}
 			
@@ -139,5 +154,15 @@
 			if(_editor)
 			{
-				var xmlString = _editor.getValue().replace(/&/g, "&amp;");
+				var xmlString;
+				if(_isVisualEditor)
+				{
+					xmlString = new XMLSerializer().serializeToString(_vEditor.getXML());
+				}
+				else
+				{
+					xmlString = _editor.getValue();
+				}
+				xmlString = xmlString.replace(/&/g, "&amp;");
+				
 				try
 				{
@@ -184,24 +209,46 @@
 		});
 		
-		var minimiseButton = $("<img>", {"src":gs.imageURLs.collapse});
-		minimiseButton.css({"cursor":"pointer", "float":"right", "margin-right":"20px"});
-		minimiseButton.click(function()
-		{
-			if($(this).attr("src") == gs.imageURLs.collapse)
-			{
-				_textDiv.hide();
-				$(this).attr("src", gs.imageURLs.expand);
-			}
-			else
-			{
-				_textDiv.show();
-				$(this).attr("src", gs.imageURLs.collapse);
-			}
-		});
-		
+		_swapEditorButton = $("<input type=\"button\" value=\"Switch to XML Editor\">");
+		_swapEditorButton.click(function()
+		{
+			if(_vEditor && _textEditor)
+			{
+				if(_isVisualEditor)
+				{
+					_vEditor.getMainDiv().hide();
+					var containerNode = _vEditor.getXML().firstChild;
+					var templateNode = containerNode.firstChild;
+					while(templateNode)
+					{
+						if(templateNode.nodeType == 1)
+						{
+							break;
+						}
+						templateNode = templateNode.nextSibling;
+					}
+					var xmlText = new XMLSerializer().serializeToString(templateNode);
+					_editor.setValue(xmlText);
+					_editor.clearSelection();
+					_textEditor.show();
+					_swapEditorButton.val("Switch to Visual Editor");
+					_isVisualEditor = false;
+				}
+				else
+				{
+					_textEditor.hide();
+					var xmlText = _editor.getValue();
+					_vEditor.getMainDiv().remove();
+					_vEditor = new visualXMLEditor(xmlText);
+					_editingDiv.append(_vEditor.getMainDiv());
+					_vEditor.selectRootElement();
+					_vEditor.getMainDiv().show();
+					_swapEditorButton.val("Switch to XML Editor");
+					_isVisualEditor = true;
+				}
+			}
+		});
+
 		var clear = $("<span>");
 		clear.css("clear", "both");
-		
-		toolBarDiv.append(minimiseButton);
 		toolBarDiv.append(clear);
 		
@@ -211,7 +258,10 @@
 		buttonDiv.append(_xmlStatusBar);
 		buttonDiv.append(_saveButton);
+		buttonDiv.append(_swapEditorButton);
+
+		_mainDiv.append(toolBarDiv);
 		_mainDiv.append(_editingDiv);
-		_mainDiv.append(toolBarDiv);
-		_mainDiv.append(_textDiv);
+		_mainDiv.append("<div>Templates:</div>");
+		_mainDiv.append(_templateSelector);
 	}
 	
@@ -249,4 +299,12 @@
 		infoContainer.click(function()
 		{
+			if(_selectedTemplate)
+			{
+				_selectedTemplate.css("border", _selectedTemplate.prevBorder);
+			}
+			_selectedTemplate = infoContainer;
+			_selectedTemplate.prevBorder = _selectedTemplate.css("border");
+			_selectedTemplate.css("border", "red 1px solid");
+		
 			_currentFilepath = filepath;
 			_currentNodename = nodename;
@@ -275,11 +333,25 @@
 				}
 			
-				var textEditor = $("<div>", {"id":"textEditor"});
-				textEditor.css({"width":"100%"});
-				textEditor.val(template);
+				_textEditor = $("<div>", {"id":"textEditor"});
+				_textEditor.css({"width":"100%", "height":"300px"});
+				_textEditor.val(template);
+				
+				if(_isVisualEditor)
+				{
+					_textEditor.hide();
+				}
 				
 				_editingDiv.empty();
 				_editingDiv.append($("<p>" + filepath + "</p>"));
-				_editingDiv.append(textEditor);
+				_editingDiv.append(_textEditor);
+				
+				_vEditor = new visualXMLEditor(template);
+				_editingDiv.append(_vEditor.getMainDiv());
+				_vEditor.selectRootElement();
+				
+				if(!_isVisualEditor)
+				{
+					_vEditor.getMainDiv().hide();
+				}
 				
 				_editor = ace.edit("textEditor");
@@ -289,10 +361,11 @@
 				_editor.clearSelection();
 				
-				textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
-				textEditor.resizable({handles: 'n', resize:function()
-				{
-					textEditor.css({top:"0px"});
+				_textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
+				_textEditor.resizable({handles: 'n', resize:function()
+				{
+					_textEditor.css({top:"0px"});
 					_editor.resize();
 				}});
+
 				
 				_closeEditorButton.removeAttr("disabled");
@@ -313,5 +386,5 @@
 		});
 	}
-	
+
 	var addMouseEventsToDebugElements = function(debugElems)
 	{
@@ -367,12 +440,7 @@
 					var name = $(this).attr("name");
 					var match = $(this).attr("match");
-
+					
 					var infoContainer = $("<div>");
-					infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
-					var elementDIV = $("<div>");
-
-					elementDIV.css("font-size", "1.1em");
-
-					infoContainer.append(elementDIV);
+					infoContainer.addClass("gbTemplateContainer");
 					
 					_elements.push(infoContainer);
@@ -380,4 +448,5 @@
 					addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match);
 					
+					/*
 					var attrstr = "";
 					var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"];
@@ -394,7 +463,28 @@
 					});
 
-					elementDIV.text("<" + fullNodename + " " + attrstr + ">");
-					
-					_textDiv.prepend(infoContainer);
+					infoContainer.text("<" + fullNodename + " " + attrstr + ">");
+					*/
+					
+					if(name && name.length > 0)
+					{
+						infoContainer.text(name);
+					}
+					if(match && match.length > 0)
+					{
+						infoContainer.text(match);
+					}
+					
+					if(_templateSelector.children("div").length > 0)
+					{
+						var spacer = $("<div>&gt;&gt;</div>");
+						spacer.addClass("gbSpacer");
+
+						_templateSelector.prepend(spacer);
+						_elements.push(spacer);
+					}
+					
+					_templateSelector.prepend(infoContainer);
+					
+					resizeContainers();
 				});
 				
@@ -414,4 +504,19 @@
 			}
 		});
+	}
+	
+	var resizeContainers = function()
+	{
+		var templates = _templateSelector.children(".gbTemplateContainer");
+		var spacers = _templateSelector.children(".gbSpacer");
+		
+		var templateWidth = (79/templates.length) + "%";
+		templates.css("width", templateWidth);
+		
+		if(spacers.length > 0)
+		{
+			var spacersWidth = (19/spacers.length) + "%";
+			spacers.css("width", spacersWidth);
+		}
 	}
 	
