Changeset 27130 for main

Timestamp:

2013-03-27T12:04:48+13:00 (11 years ago)

Author:

sjm84

Message:

Some code tidying and well as adding more documentation

Location:

main/trunk/greenstone3/web/interfaces/default/js

Files:

• debug_scripts.js (modified) (36 diffs)
• visual-xml-editor.js (modified) (80 diffs)

main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js

@@ -4 +4 @@
     //Private member variables
     //************************
-    
+
     //The this variable
     var _greenbug = this;
-    
+
     //Debugger state-keeping variables
     var _debugOn = false;
@@ -15 +15 @@
     var _editModeText = false;
     var _selectedTemplate;
-    
+
     //Page elements
     var _mainDiv;
-    
+
     var _textEditor;
     var _vEditor;
-    
+
     var _navArea;
     var _fileSelector;
@@ -27 +27 @@
     var _editor;
     var _editingDiv;
-    var _unpauseButton;
+    var _selectNewElementButton;
     var _closeEditorButton;
     var _xmlStatusBar;
     var _saveButton;
     var _swapEditorButton;
-    
+
     //Editor state-keeping variables
     var _currentFileName;
@@ -41 +41 @@
     var _currentNamespace;
     var _isVisualEditor = true;
-    
+
     var _styleFunctions = new Array();
-    
+
+    //Used to reload the page while keeping the state of the editor
     var partialPageReload = function(callback)
     {
@@ -53 +54 @@
             var bodyEndIndex = response.indexOf("</body>");
             var bodyText = response.substring(bodyStartIndex, bodyEndIndex + 7);
-            
+
             //Get the current top area and container
             var topLevelTopArea = $("#topArea");
             var topLevelContainer = $("#container");
-            
+
             //Create a temporary div and put the html into it
             var tempDiv = $("<div>");
             tempDiv.html(bodyText);
-            
+
             //Replace the contents of the old elements with the new elements
             var topArea = tempDiv.find("#topArea");
@@ -67 +68 @@
             topLevelTopArea.html(topArea.html());
             topLevelContainer.html(container.html());
-            
+
             //Update the events for the debug elements that currently don't have events associated with them
             var debugElems = $('debug, [debug="true"]').filter(function(){return (!($.data(this, "events"))) ? true : false});
@@ -76 +77 @@
             alert("There was an error reloading the page, please reload manually.");
         });
-        
+
         if(callback)
         {
@@ -82 +83 @@
         }
     }
-    
+
+    //Some functions need to be called after an element is added to the page. So we store them and call them later.
     var callStyleFunctions = function()
     {
@@ -91 +93 @@
         }
     }
-    
+
+    //Create the area where the buttons are stored
     var createButtonDiv = function(buttonDiv)
     {
-        var pickElementButton = $("<button>Enable selector</button>");
-        pickElementButton.click(function()
+        //Used to enable the selector to get the templates of a particular area of the page
+        var enableSelectorButton = $("<button>Enable selector</button>");
+        enableSelectorButton.click(function()
         {
             if(!_debugOn)
             {
-                pickElementButton.button("option", "label", "Disable selector");
+                enableSelectorButton.button("option", "label", "Disable selector");
                 $("a").click(function(e)
                 {
@@ -108 +112 @@
             else
             {
-                pickElementButton.button("option", "label", "Enable selector");
+                enableSelectorButton.button("option", "label", "Enable selector");
                 $("a").off("click");
                 clearAll();
-                _unpauseButton.button("option", "disabled", true);
+                _selectNewElementButton.button("option", "disabled", true);
                 _pauseSelector = false;
                 _debugOn = false;
             }
         });
-        _styleFunctions.push(function(){pickElementButton.button({icons:{primary:"ui-icon-power"}})});
-
-        _unpauseButton = $("<button>Select new element</button>");
-        _unpauseButton.click(function()
+        _styleFunctions.push(function(){enableSelectorButton.button({icons:{primary:"ui-icon-power"}})});
+
+        //Used to change what is currently selected
+        _selectNewElementButton = $("<button>Select new element</button>");
+        _selectNewElementButton.click(function()
         {
             if(_pauseSelector)
             {
                 _pauseSelector = false;
-                _unpauseButton.button("option", "disabled", true);
-            }
-        });
-        _styleFunctions.push(function(){_unpauseButton.button({icons:{primary:"ui-icon-pencil"}, disabled:true})});
-        
+                _selectNewElementButton.button("option", "disabled", true);
+            }
+        });
+        _styleFunctions.push(function(){_selectNewElementButton.button({icons:{primary:"ui-icon-pencil"}, disabled:true})});
+
+        //Used to minimise/restore the editor
         _closeEditorButton = $("<button>Close editor</button>");
         _closeEditorButton.click(function()
@@ -145 +151 @@
         _closeEditorButton.css("float", "right");
         _styleFunctions.push(function(){_closeEditorButton.button({icons:{secondary:"ui-icon-newwin"}, disabled:true})});
-        
+
+        //Used to save any changes that have been made to this template
         _saveButton = $("<button>Save changes</button>");
         _saveButton.click(function()
@@ -162 +169 @@
                 }
                 xmlString = xmlString.replace(/&/g, "&amp;");
-                
+
                 try
                 {
@@ -172 +179 @@
                     return;
                 }
-                
+
                 var url = gs.xsltParams.library_name;
                 var parameters = {"a":"g", "rt":"r", "s":"SaveXMLTemplateToFile", "s1.locationName":_currentLocation, "s1.fileName":_currentFileName, "s1.interfaceName":gs.xsltParams.interface_name, "s1.siteName":gs.xsltParams.site_name, "s1.collectionName":gs.cgiParams.c, "s1.namespace":_currentNamespace, "s1.nodename":_currentNodename, "s1.xml":xmlString};
@@ -207 +214 @@
         });
         _styleFunctions.push(function(){_saveButton.button({icons:{primary:"ui-icon-disk"}, disabled:true})});
-        
+
+        //Used to switch between the XML and Visual editors
         _swapEditorButton = $("<button>Switch to XML editor</button>");
         _swapEditorButton.button().click(function()
@@ -253 +261 @@
         });
         _styleFunctions.push(function(){_swapEditorButton.button({icons:{primary:"ui-icon-refresh"}})});
-        
+
         undoButton = $("<button>Undo</button>");
         undoButton.click(function()
@@ -267 +275 @@
         });
         _styleFunctions.push(function(){undoButton.button({icons:{primary:"ui-icon-arrowreturnthick-1-w"}})});
-        
-        buttonDiv.append(pickElementButton);
-        buttonDiv.append(_unpauseButton);
+
+        buttonDiv.append(enableSelectorButton);
+        buttonDiv.append(_selectNewElementButton);
         buttonDiv.append(_closeEditorButton);
         buttonDiv.append(_saveButton);
@@ -275 +283 @@
         buttonDiv.append(undoButton);
     }
-    
+
+    //Used to monitor the state of the XML in the XML editor and will notify the user if there is an error
     var createXMLStatusBar = function(buttonDiv)
     {
@@ -282 +291 @@
         _xmlStatusBar.addClass("ui-corner-all");
         _styleFunctions.push(function(){_xmlStatusBar.hide();});
-        
+
         //Check the XML for errors every 2 seconds
         setInterval(function()
@@ -304 +313 @@
                     return;
                 }
-                
+
                 _xmlStatusBar.text("XML OK!");
                 _xmlStatusBar.addClass("ui-state-active");
@@ -318 +327 @@
                 }
             }
-            
         }, 2000);
         buttonDiv.append(_xmlStatusBar);
     }
-    
+
+    //Create the elements that allow 
     var createFileAndTemplateSelectors = function(buttonDiv)
     {
@@ -338 +347 @@
         });
         _templateSelector.append(templateSelectBox);
-        _fileSelector = $("<div>", {"id":"veFileSelector", "class":"ui-state-default ui-corner-all"});
+        _fileSelector = $("<div>", {"id":"veFileSelector"});
         buttonDiv.append(_fileSelector);
         buttonDiv.append(_templateSelector);
-    }
-    
+
+        //Populate the file selector
+        var url = gs.xsltParams.library_name + "?a=g&rt=r&s=GetXSLTFilesForCollection&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
+        $.ajax(url)
+        .success(function(response)
+        {
+            var listStartIndex = response.indexOf("<fileListJSON>") + "<fileListJSON>".length;
+            var listEndIndex = response.indexOf("</fileListJSON>");
+
+            var listString = response.substring(listStartIndex, listEndIndex).replace(/&quot;/g, "\"").replace(/\\/g, "/");
+            var list = eval(listString);
+
+            var selectBox = $("<select>");
+            selectBox.append($("<option>-- Select a file --</option>", {value:"none"}));
+            _fileSelector.addClass("ui-state-default");
+            _fileSelector.addClass("ui-corner-all");
+            _fileSelector.append("<span>Files: </span>");
+            _fileSelector.append(selectBox);
+            for(var i = 0; i < list.length; i++)
+            {
+                var item = list[i];
+                var option = $("<option>" + item.path + " (" + item.location + ")</option>", {value:item.path});
+                option.data("fileItem", item);
+                selectBox.append(option);
+            }
+
+            selectBox.change(function()
+            {
+                var selectedItem = selectBox.find(":selected");
+
+                if(!selectedItem.data("fileItem"))
+                {
+                    return;
+                }
+
+                var getURL = gs.xsltParams.library_name + "?a=g&rt=r&s=GetTemplateListFromFile&s1.fileName=" + selectedItem.data("fileItem").path + "&s1.locationName=" + selectedItem.data("fileItem").location + "&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
+                $.ajax(getURL)
+                .success(function(templateResponse)
+                {
+                    var templateListStart = templateResponse.indexOf("<templateList>") + "<templateList>".length;
+                    var templateListEnd = templateResponse.indexOf("</templateList>");
+                    var templateListString = templateResponse.substring(templateListStart, templateListEnd).replace(/&quot;/g, "\"");
+                    var templateList = eval(templateListString);
+
+                    clearAll();
+
+                    _templateSelector.children("select").empty();
+                    if(templateList.length == 0)
+                    {
+                        _templateSelector.children("select").append("<option>-- No templates --</option>");
+                    }
+                    else
+                    {
+                        _templateSelector.children("select").append("<option>-- Select a template --</option>");
+                    }
+
+                    for(var i = 0; i < templateList.length; i++)
+                    {
+                        var fileName = selectedItem.data("fileItem").path;
+                        var location = selectedItem.data("fileItem").location;
+                        var namespace = templateList[i].namespace;
+                        var nodename = "template";
+                        var name = templateList[i].name;
+                        var match = templateList[i].match;
+
+                        if(name)
+                        {
+                            name = templateList[i].name.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
+                        }
+                        if(match)
+                        {
+                            match = templateList[i].match.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
+                        }
+
+                        var infoContainer = $("<option>");
+
+                        _elements.push(infoContainer);
+
+                        addChangeEventToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
+
+                        if(name && name.length > 0)
+                        {
+                            infoContainer.text(name);
+                        }
+                        if(match && match.length > 0)
+                        {
+                            infoContainer.text(match);
+                        }
+
+                        _templateSelector.children("select").append(infoContainer);
+                    }
+                });
+            });
+        })
+        .error(function()
+        {
+            console.log("Error retrieving XSLT files");
+        });
+    }
+
+    //The function that creates all the necessary elements for Greenbug
     var createDebugDiv = function()
     {
@@ -368 +476 @@
         createFileAndTemplateSelectors(buttonDiv);
         createXMLStatusBar(buttonDiv);
-        
-        //Populate the file selector
-        var url = gs.xsltParams.library_name + "?a=g&rt=r&s=GetXSLTFilesForCollection&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
-        $.ajax(url)
-        .success(function(response)
-        {
-            var listStartIndex = response.indexOf("<fileListJSON>") + "<fileListJSON>".length;
-            var listEndIndex = response.indexOf("</fileListJSON>");
-            
-            var listString = response.substring(listStartIndex, listEndIndex).replace(/&quot;/g, "\"").replace(/\\/g, "/");
-            var list = eval(listString);
-            
-            var selectBox = $("<select>");
-            selectBox.append($("<option>-- Select a file --</option>", {value:"none"}));
-            _fileSelector.append("<span>Files: </span>");
-            _fileSelector.append(selectBox);
-            for(var i = 0; i < list.length; i++)
-            {
-                var item = list[i];
-                var option = $("<option>" + item.path + " (" + item.location + ")</option>", {value:item.path});
-                option.data("fileItem", item);
-                selectBox.append(option);
-            }
-
-            selectBox.change(function()
-            {
-                var selectedItem = selectBox.find(":selected");
-                
-                if(!selectedItem.data("fileItem"))
-                {
-                    return;
-                }
-                
-                var getURL = gs.xsltParams.library_name + "?a=g&rt=r&s=GetTemplateListFromFile&s1.fileName=" + selectedItem.data("fileItem").path + "&s1.locationName=" + selectedItem.data("fileItem").location + "&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
-                $.ajax(getURL)
-                .success(function(templateResponse)
-                {
-                    var templateListStart = templateResponse.indexOf("<templateList>") + "<templateList>".length;
-                    var templateListEnd = templateResponse.indexOf("</templateList>");
-                    var templateListString = templateResponse.substring(templateListStart, templateListEnd).replace(/&quot;/g, "\"");
-                    var templateList = eval(templateListString);
-                    
-                    clearAll();
-                    
-                    _templateSelector.children("select").empty();
-                    if(templateList.length == 0)
-                    {
-                        _templateSelector.children("select").append("<option>-- No templates --</option>");
-                    }
-                    else
-                    {
-                        _templateSelector.children("select").append("<option>-- Select a template --</option>");
-                    }
-                    
-                    for(var i = 0; i < templateList.length; i++)
-                    {
-                        var fileName = selectedItem.data("fileItem").path;
-                        var location = selectedItem.data("fileItem").location;
-                        var namespace = templateList[i].namespace;
-                        var nodename = "template";
-                        var name = templateList[i].name;
-                        var match = templateList[i].match;
-                        
-                        if(name)
-                        {
-                            name = templateList[i].name.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
-                        }
-                        if(match)
-                        {
-                            match = templateList[i].match.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
-                        }
-                        
-                        var infoContainer = $("<option>");
-                        
-                        _elements.push(infoContainer);
-                        
-                        addMouseEventsToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
-                        
-                        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.children("select").append(infoContainer);
-                        
-                        //resizeContainers();
-                    }
-                });
-            });
-        })
-        .error(function()
-        {
-            console.log("Error retrieving XSLT files");
-        });
-        
+
         _styleFunctions.push(function(){$(".ui-button").css({"margin-right":"0.5em"});});
-        
+
         _mainDiv.append(toolBarDiv);
         _mainDiv.append(_editingDiv);
         _mainDiv.append(_navArea);
     }
-    
+
+    //Clear all selected elements on the page
     var clearAll = function()
     {
@@ -492 +493 @@
         });
     }
-    
+
+    //Put a border around the given element
     var highlightElement = function(e)
     {
@@ -512 +514 @@
         _elements.push(rightBorderDiv);
     }
-    
+
+    //Change the current template in the XML and Visual editor
     this.changeCurrentTemplate = function(location, fileName, nodename, namespace, name, match)
     {
         var responseName = "requestedNameTemplate";
-        
+
         var url = gs.xsltParams.library_name + "?a=g&rt=r&s=GetXMLTemplateFromFile&s1.fileName=" + fileName + "&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c + "&s1.locationName=" + location + "&s1.namespace=" + namespace + "&s1.nodename=" + nodename;
         if(match && match.length > 0){url += "&s1.match=" + match; responseName = "requestedMatchTemplate";}
@@ -535 +538 @@
                 return;
             }
-        
+
             _textEditor = $("<div>", {"id":"textEditor"});
             _textEditor.css({"width":"100%", "height":"300px"});
             _textEditor.val(template);
-            
+
             if(_isVisualEditor)
             {
                 _textEditor.hide();
             }
-            
+
             _editingDiv.empty();
             _editingDiv.append($("<p>Location: " + location + " <br/>Filename: " + fileName + "</p>"));
             _editingDiv.append(_textEditor);
-            
+
             _vEditor = new visualXMLEditor(template);
             _editingDiv.append(_vEditor.getMainDiv());
             _vEditor.setGreenbug(_greenbug);
             _vEditor.selectRootElement();
-            
+
             if(!_isVisualEditor)
             {
                 _vEditor.getMainDiv().hide();
             }
-            
+
             _editor = ace.edit("textEditor");
             _editor.getSession().setMode("ace/mode/xml");
@@ -566 +569 @@
             var UndoManager = require("ace/undomanager").UndoManager;
             _editor.getSession().setUndoManager(new UndoManager());
-            
+
             _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
             _textEditor.resizable({handles: 'n', resize:function()
@@ -583 +586 @@
         .error(function()
         {
-            console.log("ERROR");
-        });
-    }
-    
-    var addMouseEventsToInfoContainer = function(infoContainer, fileName, location, nodename, namespace, name, match)
+            console.log("Error getting the XML template from the file");
+        });
+    }
+
+    //Store the function that is called when this template is selected from the list
+    var addChangeEventToInfoContainer = function(infoContainer, fileName, location, nodename, namespace, name, match)
     {
         infoContainer.data("changeFunction", function()
@@ -598 +602 @@
             _selectedTemplate.prevBorder = _selectedTemplate.css("border");
             _selectedTemplate.css("border", "red 1px solid");
-        
+
             _currentFileName = fileName;
             _currentLocation = location;
@@ -605 +609 @@
             _currentName = name;
             _currentMatch = match;
-        
+
             _greenbug.changeCurrentTemplate(location, fileName, nodename, namespace, name, match);
         });
-        /*
-        infoContainer.mouseover(function()
-        {
-            $(this).removeClass("ui-state-default");
-            $(this).addClass("ui-state-active");
-        });
-        infoContainer.mouseout(function()
-        {
-            $(this).addClass("ui-state-default");
-            $(this).removeClass("ui-state-active");
-        });
-        */
-    }
-
+    }
+
+    //Add the mouse events to the <debug> elemetns that are called when the selector is anabled
     var addMouseEventsToDebugElements = function(debugElems)
     {
@@ -629 +622 @@
             {
                 _pauseSelector = true;
-                _unpauseButton.button("option", "disabled", false);
+                _selectNewElementButton.button("option", "disabled", false);
             }
         });
@@ -680 +673 @@
                     var location;
                     var fileName;
+                    //Use the filepath to work out where this file is from
                     if(filepath.search(/[\/\\]interfaces[\/\\]/) != -1)
                     {
@@ -705 +699 @@
                     _elements.push(infoContainer);
 
-                    addMouseEventsToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
+                    addChangeEventToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
 
                     if(name && name.length > 0)
@@ -716 +710 @@
                     }
 
-                    if(_templateSelector.children("div").length > 0)
-                    {
-                        /*
-                        var spacer = $("<div>&gt;&gt;</div>");
-                        spacer.addClass("gbSpacer");
-
-                        _templateSelector.prepend(spacer);
-                        _elements.push(spacer);
-                        */
-                    }
-
                     _templateSelector.children("select").append(infoContainer);
-
-                    //resizeContainers();
                 });
                 
@@ -750 +731 @@
         });
     }
-    
+
+    //Remove <debug> elements from the title
     var fixTitle = function()
     {
         $("title").text($("title").text().replace(/<[^>]*>/g, ""));
     }
-    
-    /*
-    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);
-        }
-    }
-    */
-    
+
+    //Initialise Greenbug
     this.init = function()
     {
@@ -805 +771 @@
         createDebugDiv();
         $("body").append(_mainDiv);
-        
+
         callStyleFunctions();
 
@@ -811 +777 @@
         fixTitle();
     }
-    
 }
 
+//The code entry point
 $(window).load(function()
 {

main/trunk/greenstone3/web/interfaces/default/js/visual-xml-editor.js

@@ -3 +3 @@
 // This class represents an editor that allows you to modify XML visually //
 // ********************************************************************** //
-
 function visualXMLEditor(xmlString)
 {
+    //Variables that store the visual editor and a link to the DebugWidget
     var _thisEditor = this;
     var _greenbug;
 
+    //Stores what id we are up to (used to compare VEElements)
     var _globalID = 0;
 
+    //Stores the current state of the XML
     var _xml;
-    
+
+    //Elements of the editor
     var _mainDiv = $("<div>", {"id":"veMainDiv"});
     var _toolboxDiv = $("<div>", {"id":"veToolboxDiv"});
@@ -18 +21 @@
     var _editorDiv = $("<div>", {"id":"veEditorDiv"});
     var _infoDiv = $("<div>", {"id":"veInfoDiv"});
+
+    //State-keeping variables
     var _rootElement;
     var _selectedElement;
-
     var _overTrash = false;
-    
     var _validDropSpot = false;
     var _validDropType;
     var _validDropElem;
-    
     var _origDDParent;
     var _origDDPosition;
-    
+
+    //Keep track of what is currently being edited
     var _editingNodes = new Array();
-    
+
+    //Stores what elements we are currently over while dragging (necessary to find the deepest element)
     var _overList = new Array();
     _overList.freeSpaces = new Array();
-    
+
+    //Keep a list of what has been changed so that it can be undone
     var _transactions = new Array();
-    
+
+    //A list of "ready-made" attributes for certain elements
     var _validAttrList = 
     {
@@ -58 +64 @@
         }
     }
-    
+
+    //The list of elements that show up in the toolbox (gslib is added dynamically later)
     var _elemList = 
     {
@@ -80 +87 @@
         ]
     };
-    
+
+    //Restricts what elements can be added to a given element
     var _childRestrictions = 
     {
@@ -89 +97 @@
         }
     };
-    
+
+    //Get a connection to the DebugWidget
     this.setGreenbug = function(gb)
     {
         _greenbug = gb;
     }
-    
+
+    //Get the XML in its current state
     this.getXML = function()
     {
         return _xml;
     }
-    
+
+    //Undo a transation
     this.undo = function()
     {
@@ -118 +129 @@
                 var pos = t.vElemPos;
                 var elem = t.vElem;
-                
+
                 elem.detach();
                 if(pos == 0)
@@ -188 +199 @@
         }
     }
-    
+
+    //Check if an element is allowed as a child to another element
     var checkRestricted = function(child, parent)
     {
@@ -205 +217 @@
             pNodeName = pFullNodename.substring(pFullNodename.indexOf(":") + 1);
         }
-        
+
         var namespaceList = _childRestrictions[pNamespace];
         if(namespaceList)
@@ -222 +234 @@
             }
         }
-        
+
         return true;
     }
-    
+
+    //Add the trash bin to the editor
     var placeTrashBin = function()
     {
@@ -246 +259 @@
         _editorContainer.append(bin);
     }
-    
+
+    //Dynamically retrieve the gslib elements from the gslib.xsl file to put into the toolbox
     var retrieveGSLIBTemplates = function(callback)
     {
@@ -256 +270 @@
             startIndex = response.search("<templateList>") + "<templateList>".length;
             endIndex = response.search("</templateList>");
-            
+
             var listString = response.substring(startIndex, endIndex);
             var list = eval(listString.replace(/&quot;/g, "\""));
             var modifiedList = new Array();
-            
+
             for(var i = 0; i < list.length; i++)
             {
@@ -269 +283 @@
                 }
             }
-            
+
             _elemList["gslib"] = modifiedList;
-            
+
             if(callback)
             {
@@ -282 +296 @@
         });
     }
-    
+
+    //Create the toolbar
     var populateToolbar = function()
     {
@@ -316 +331 @@
             _toolboxDiv.append(tabDiv);
         }
-        
+
         var otherTab = $("<li>");
         var otherTabLink = $("<a>", {"href":"#veother"});
@@ -323 +338 @@
         otherTab.append(otherTabLink);
         tabHolder.append(otherTab);
-        
+
         var otherTabDiv = $("<div>", {"id":"veother"});
         var textNode = _xml.createTextNode("text");
@@ -331 +346 @@
         textDiv.data("toolbar", true);
         otherTabDiv.append(textDiv);
-        
+
         var customInput = $("<input type=\"text\">");
         var customElemHolder = $("<div>");
@@ -352 +367 @@
         otherTabDiv.append(customCreateButton);
         otherTabDiv.append(customElemHolder);
-        
+
         _toolboxDiv.append(otherTabDiv);
 
         _toolboxDiv.tabs();
-        
+
         customCreateButton.button();
     }
 
+    //Turns the given XML into the nice visual structure recursively
     var constructDivsRecursive = function(currentDiv, currentParent, level)
     {
@@ -370 +386 @@
         container.addClass("veContainerElement");
         currentDiv.append(container);
-        
+
         var allowedList = new Array();
         var counter = currentParent.firstChild;
@@ -394 +410 @@
             var elementDiv = veElement.getDiv();
             veElement.setWidth(width);
-            
+
             if(!_rootElement)
             {
@@ -411 +427 @@
         container.append($("<div>", {"style":"clear:both;"}));
     }
-    
+
+    //Fake a click on the root element
     this.selectRootElement = function()
     {
         var height = _editorDiv.height() + 10;
         if(height < 300){height = 300;}
-        
+
         _editorContainer.css("height", height + "px");
         _infoDiv.css("height", height + "px");
         _rootElement.trigger("click");
     }
-    
+
+    //Return the main visual editor div
     this.getMainDiv = function()
     {
         return _mainDiv;
     }
-    
+
+    //Save any unfinished edits
     this.savePendingEdits = function()
     {
@@ -435 +454 @@
         }
     }
-    
+
+    //Add the given VEElement to the list of VEElements we are currently dragging over
     var addToOverList = function(veElement)
     {
@@ -442 +462 @@
             return;
         }
-    
+
         for(var i = 0; i < _overList.length; i++)
         {
@@ -449 +469 @@
                 continue;
             }
-        
+
             if(_overList[i].getID() == veElement.getID())
             {
@@ -455 +475 @@
             }
         }
-        
+
         if(_overList.freeSpaces.length > 0)
         {
@@ -465 +485 @@
         }
     }
-    
+
+    //Remove the given VEElement from the list of VElements we are currently dragging over
     var removeFromOverList = function(veElement)
     {
@@ -474 +495 @@
                 continue;
             }
-        
+
             if(_overList[i].getID() == veElement.getID())
             {
@@ -482 +503 @@
         }
     }
-    
+
+    //Get the deepest VEElement we are currently dragging over
     var getDeepestOverElement = function()
     {
@@ -512 +534 @@
         return deepestElem;
     }
-    
+
+    //Resize all the VEElements
     var resizeAll = function()
     {
@@ -519 +542 @@
             var toolbarStatus = $(this).data("toolbar");
             var beingDraggedStatus = $(this).data("dragging");
-            
+
             if(beingDraggedStatus || !toolbarStatus)
             {
                 return true;
             }
-            
+
             return false;
         }
-    
+
         var allElems = $(".veElement").filter(filterFunction).each(function()
         {
@@ -550 +573 @@
     }
 
+    //Initialise the visual editor
     var initVXE = function()
     {
@@ -573 +597 @@
         _mainDiv.append($("<div>", {"style":"clear:both;"}));       
     }
-    
+
     // *********************************************************************** //
     // Visual Editor Text                                                      //
     // This inner class represents a single xml text node in the visual editor //
     // *********************************************************************** //
-
     var VEText = function(node)
     {
+        //Constructor code
         var _thisNode = this;
         var _xmlNode = node;
-    
+
         var _textEditor = $("<div>");
         var _nodeText = $("<div>");
@@ -589 +613 @@
 
         _textEditor.append(_nodeText);
-        
+
         var _editButton = $("<button>Edit text</button>");
         _editButton.click(function()
@@ -603 +627 @@
         });
         _textEditor.append(_editButton);
-        
+
+        //Enable editing of this text node
         this.editMode = function()
         {
@@ -615 +640 @@
         }
 
+        //Save edits to this text node
         this.saveEdits = function()
         {
@@ -625 +651 @@
                 }
             }
-        
+
             _transactions.push({type:"editText", elem:_xmlNode, vElem: _nodeText, value:_nodeText.data("prevTextValue")});
             var textArea = _nodeText.find("textarea");
@@ -635 +661 @@
         }
 
+        //Create a text node editor
         this.getDiv = function()
         {
@@ -642 +669 @@
         }
     }
-    
+
     // *********************************************************************** //
     // Visual Editor Attribute                                                 //
     // This inner class represents a single xml attribute in the visual editor //
     // *********************************************************************** //
-
     var VEAttribute = function(attrElem, xmlElem, name, value)
     {
+        //Constructor code
         var _name;
         if(name)
@@ -659 +686 @@
             _name = attrElem.name;
         }
-        
+
         var _value;
         if(value)
@@ -673 +700 @@
 
         var _thisAttr = this;
-        
+
+        //Get the attribute name
         this.getName = function()
         {
@@ -679 +707 @@
         }
 
+        //Get the attribute value
         this.getValue = function()
         {
@@ -684 +713 @@
         }
 
+        //Get the name cell of the attribute table
         var createNameCell = function()
         {
@@ -691 +721 @@
         }
 
+        //Get the value cell of the attribute table
         var createValueCell = function()
         {
@@ -698 +729 @@
         }
 
+        //Get the edit cell of the attribute table
         var createEditCell = function()
         {
             var cell = $("<td>", {"class":"veEditCell"});
             var link = $("<a href=\"javascript:;\">edit</a>");
-            
+
             link.click(function()
             {
@@ -711 +743 @@
         }
 
+        //Get the delete cell of the attribute table
         var createDeleteCell = function()
         {
@@ -725 +758 @@
         }
 
+        //Create a table row from this attribute
         this.getAsTableRow = function()
         {
@@ -745 +779 @@
             return tableRow;
         }
-        
+
+        //Enable editing of this attribute
         this.editMode = function(editValue)
         {
             _editingNodes.push(_thisAttr);
-        
+
             var nameCell = _row.children("td").eq(0);
             var valueCell = _row.children("td").eq(1);
@@ -784 +819 @@
             }
         }
-        
+
+        //Save edits to this attribute
         this.saveEdits = function()
         {
@@ -799 +835 @@
             var valueCell = _row.children("td").eq(1);
             var editLink = _row.children("td").eq(2).find("a");
-        
+
             editLink.text("edit");
             editLink.off("click");
@@ -809 +845 @@
             var nameInput = nameCell.children("input");
             var valueInput = valueCell.children("input");
-            
+
             nameInput.blur();
             valueInput.blur();
@@ -815 +851 @@
             var name = nameInput.val();
             var value = valueInput.val();
-            
+
             if(name.length == 0 || name.search(/\w/g) == -1)
             {
@@ -821 +857 @@
                 return;
             }
-            
+
             nameCell.empty();
             nameCell.text(name);
@@ -827 +863 @@
             valueCell.empty();
             valueCell.text(value);
-            
+
             if(nameCell.data("prevName") != "")
             {
@@ -833 +869 @@
             }
             _xmlElem.setAttribute(name, value);
-            
+
             _transactions.push({type:"editAttr", elem:_xmlElem, row:_row, newName:name, name:_name, value:_value});
-            
+
             _name = name;
             _value = value;
@@ -853 +889 @@
         _div.data("parentVEElement", this);
         _div.data("expanded", "normal");
-        
+
+        //Add the necessary functions to make this VEElement draggable
         var makeDraggable = function()
         {
             _div.draggable(
             {
+                "distance":"20",
                 "revert":"true", 
                 "helper":function()
@@ -864 +902 @@
                     var height = _div.children(".veTitleElement").height();
                     _div.draggable("option", "cursorAt", {top:(height / 2), left:(_div.width() / 2)});
-                
+
                     var tempVEE = new VEElement(_xmlNode);
                     var tempDiv = tempVEE.getDiv();
@@ -952 +990 @@
                                 }
                                 var pos = Math.floor(overChildrenLength * posPercent);
-                                
+
                                 if(pos < overChildrenLength - 1)
                                 {
@@ -982 +1020 @@
                 {
                     var transactionType = (_div.data("toolbar")) ? "addElem" : "remMvElem";
-                    
+
                     if(_div.data("toolbar"))
                     {
@@ -990 +1028 @@
                     _div.css("border", "1px solid black");
                     _div.css("background", _div.data("prevBackground"));
-                    
+
                     //If the element was not dropped in a valid place then put it back
                     if(!_validDropSpot && !_div.data("toolbar"))
@@ -1007 +1045 @@
                             _origDDParent.children(".veElement").eq(_origDDPosition).before(_div);
                         }
-                        
+
                         if(_overTrash)
                         {
@@ -1034 +1072 @@
                         _transactions.push({type:transactionType, vElemParent:_origDDParent, vElemPos:_origDDPosition, vElem:_div});
                     }
-                    
+
                     _div.data("dragging", false);
                     _div.data("toolbar", false);
-                    
+
                     _overList = new Array();
                     _overList.freeSpaces = new Array();
@@ -1043 +1081 @@
             });
 
+            //Also make this element a drop-zone for other elements
             _div.droppable(
             {
@@ -1057 +1096 @@
             });
         }
-        
+
+        //Get the underlying div
         this.getDiv = function()
         {
             return _div;
         }
-        
+
+        //Get the XML for this element
         this.getXMLNode = function()
         {
             return _xmlNode;
         }
-        
+
+        //Get the unique ID of this VEElement
         this.getID = function()
         {
@@ -1073 +1115 @@
         }
 
-        var createTableHeader = function()
-        {
-            var tableHeader = $("<tr>");
-            tableHeader.html("<td class=\"veNameCell\">Name</td><td class=\"veValueCell\">Value</td>");
-            return tableHeader;
-        }
-        
+        //Fill the information area with details about this element
         this.populateInformationDiv = function()
         {
@@ -1104 +1140 @@
                 attributeTable.addClass("veAttributeTableContainer");
 
-                attributeTable.append(createTableHeader());
+                attributeTable.append($("<tr>").html("<td class=\"veNameCell\">Name</td><td class=\"veValueCell\">Value</td>"));
 
                 $(_xmlNode.attributes).each(function()
@@ -1114 +1150 @@
                 _infoDiv.append(attributeTableTitle);
                 _infoDiv.append(attributeTable);
-                
+
                 var addDiv = $("<div>", {"class":"veInfoDivTitle"});
                 var addSelect = $("<select>");
@@ -1144 +1180 @@
                     }
                 }
-                
+
                 var addButton = $("<button>Add attribute</button>");
                 addButton.click(function()
@@ -1170 +1206 @@
                 _infoDiv.append(addDiv);
                 addButton.button();
-                
+
                 /*
                 if(_xmlNode.tagName == "xsl:call-template" && _xmlNode.getAttribute("name").length > 0)
@@ -1246 +1282 @@
         }
 
+        //Add mouseover/out and click events to this element
         var addMouseEvents = function()
         {
@@ -1291 +1328 @@
             });
         }
-        
+
+        //Check if we need to expand an element before we do
         var checkResizeNecessary = function()
         {
@@ -1315 +1353 @@
             return false;
         }
-        
+
+        //Remove this from the editor
         this.remove = function()
         {
@@ -1324 +1363 @@
             _div.detach();
             _infoDiv.empty();
-            
+
             if(divParent.length)
             {
                 divParent.first().trigger("click");
             }
-            
+
             $("#veTrash").children("img").attr("src", gs.imageURLs.trashFull);
         }
 
+        //Expend this element horizontally
         this.expand = function()
         {
@@ -1344 +1384 @@
                     $(this).data("expanded", "small");
                 });
-                
+
                 _div.animate({width:"80%"}, 1000);
                 _div.data("expanded", "expanded");
@@ -1350 +1390 @@
         }
 
+        //Evenly distribute the children of this node evenly
         this.evenlyDistributeChildren = function()
         {
@@ -1361 +1402 @@
         }
 
+        //Expand this node and any parents and evenly distribute its children
         this.focus = function()
         {
@@ -1366 +1408 @@
             {
                 _div.data("parentVEElement").expand();
-                
+
                 var parents = _div.parents(".veElement");
                 parents.each(function()
@@ -1376 +1418 @@
             _div.data("parentVEElement").evenlyDistributeChildren();
         }
-        
+
+        //Set whether to use the short name for this element (i.e. without the namespace)
         this.setShortName = function(short)
         {
@@ -1389 +1432 @@
         }
 
+        //Set the width of this element
         this.setWidth = function(width)
         {
             _div.css("width", width + "%");
         }
-        
+
         //Visual Editor Element constructor
         var initVEE = function()
@@ -1400 +1444 @@
             _div.addClass("ui-corner-all");
             makeDraggable();
-            
+
             var titleText;
             if(_xmlNode.nodeType == 3 && _xmlNode.nodeValue.search(/\S/) != -1)
@@ -1427 +1471 @@
                 titleText = _xmlNode.tagName;
             }
-            
+
             addMouseEvents();
-            
+
             _div.append("<div class=\"veTitleElement\">" + titleText + "</div>");
         }
@@ -1435 +1479 @@
         initVEE();
     }
-    
+
     //Call the constructor
     initVXE();