From a0c4058686cdf7c0a88b078c01a615d78d38fef2 Mon Sep 17 00:00:00 2001
From: JohnSmith-LT <J.J.Smith@gcu.ac.uk>
Date: Tue, 20 May 2014 13:42:51 +0100
Subject: [PATCH] REFACTOR: Code moved around into 'modules' to make it a bit
 more organised. Needs more comments.

---
 editor/js/application.js   | 564 +++++++++++++------------------------
 editor/js/data.js          |  57 ++++
 editor/js/layout.js        | 129 +++++++++
 editor/js/toolbox.js       | 487 ++++++++++++++++++++++++++++++++
 editor/js/tree.js          | 370 ++++++++++++++++++++++++
 modules/xerte/edithtml.php |   6 +-
 6 files changed, 1248 insertions(+), 365 deletions(-)
 create mode 100644 editor/js/data.js
 create mode 100644 editor/js/layout.js
 create mode 100644 editor/js/toolbox.js
 create mode 100644 editor/js/tree.js

diff --git a/editor/js/application.js b/editor/js/application.js
index 10ac9c52b0..ccd42ea813 100755
--- a/editor/js/application.js
+++ b/editor/js/application.js
@@ -2,385 +2,223 @@ var wizard_data = {};
 var lo_data = {};
 var menu_data = [];
 
-jQuery(document).ready(function($) {
-
-    var init = function() {
-
-        //top buttons
-        (function() {
-            $( "#insert-dialog" ).hide();
-            $( "#insert-buttons" ).hide();
-
-            var insert_page = function() {
-                $( "#insert-dialog" ).dialog({ width: '60%' });
-            },
-
-            delete_page = function() {
-                deleteSelectedNodes();
-            },
-
-            duplicate_page = function() {
-                duplicateSelectedNodes();
-            },
-
-            buttons = $('<div />').attr('id', 'top_buttons');
-            $([
-                {name:'Insert', icon:'editor/img/insert.png', id:'insert_button', click:insert_page},
-                {name:'Copy', icon:'editor/img/copy.png', id:'copy_button', click:duplicate_page},
-                {name:'Delete', icon:'editor/img/delete.gif', id:'delete_button', click:delete_page}
-            ])
-            .each(function(index, value) {
-                var button = $('<button>')
-                    .attr('id', value.id)
-                    .click(value.click)
-                    .append($('<img>').attr('src', value.icon).height(14))
-                    .append(value.name);
-                buttons.append(button);
-            });
-            $('.ui-layout-west .header').append(buttons);
-
-            buttons = $('<div />').attr('id', 'save_buttons');
-            $([
-                {name:'Preview', icon:'editor/img/insert.png', id:'insert_button', click:preview},
-                {name:'Publish', icon:'editor/img/copy.png', id:'copy_button', click:publish},
-            ])
-            .each(function(index, value) {
-                var button = $('<button>')
-                    .attr('id', value.id)
-                    .click(value.click)
-                    .append($('<img>').attr('src', value.icon).height(14))
-                    .append(value.name);
-                buttons.append(button);
-            });
-            $('.ui-layout-east .content').append(buttons);
-        })();
-
-        (function(){
-            // load and parse the wizard xml
-            $.ajax({
-                type: "GET",
-                url: originalpathvariable + "wizards/" + languagecodevariable + "/data.xwd",
-                dataType: "text",
-                success: function(xml) {
-
-                    var wizard_xml = $($.parseXML(xml)).find("wizard");
 
-                    // Build the page menu object
-                    var j, temp_menu_data = [],
-                        categories = String(wizard_xml[0].attributes.menus.value).split(',');
+// *******************
+// *     Language    *
+// *******************
+var EDITOR = (function ($, parent) {
 
-                    for (j=0; j<categories.length; j++) {
-                        temp_menu_data.push(
-                            {
-                                "name"      : categories[j],
-                                "submenu"   : []
-                            }
-                        );
-                    }
-                    menu_data = {"menu": temp_menu_data};
-
-                    // Parse the xml
-                    $(wizard_xml.children()).each(function(i) {
-                        var main_node = $(this)[0].nodeName;
-                        //console.log("Main node: " + main_node);
-                        var menu_options = {};
-                        for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
-                            menu_options[a[j].name] = a[j].value;
-                        }
-
-                        var node_options = {};
-                        var all_options = [];
-                        var name_option = [];
-                        var normal_options = [];
-                        var opt_options  = [];
-                        var adv_options  = [];
-                        var lang_options = [];
-
-                        var attributes = {};
-                        for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
-                            if (a[j].name == 'menu') is_menu = true;
-                            //console.log("  attr: " + a[j].name + ":" + a[j].value);
-                            attributes[a[j].name] = a[j].value;
-                        }
-
-                        // If we have a menu item then lets store it for the menu
-                        if (attributes.menu != undefined) {
-                            var lookup = ((function (item) {
-                                var i = menu_data.menu.length;
-                                while (i--) if (menu_data.menu[i].name == item) return i;
-                                return -1;
-                            })(attributes.menu));
-
-                            if (lookup > -1) {
-                                menu_data.menu[lookup].submenu.push(
-                                    {
-                                        "name"  : attributes.menuItem,
-                                        "hint"  : attributes.hint,
-                                        "thumb" : attributes.thumb,
-                                        "icon"  : attributes.icon
-                                    }
-                                );
-                            }
-                        }
+    var my = parent.language = {},
+        toolbox = parent.toolbox,
 
-                        $($(this).children()).each(function() {
-                            //console.log("   sub node: " + $(this)[0].nodeName);
-                            var node_params = {};
-                            for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
-                                //console.log("      attr: " + a[j].name + ":" + a[j].value);
-                                node_params[a[j].name] = a[j].value;
-                            }
-                            all_options.push({name: [$(this)[0].nodeName], value: node_params});
-                        });
-
-                        // search attribute name and put that as the first one
-                        $(all_options).each(function(key, option) {
-                            if (option.name == 'name')
-                            {
-                                name_option.push(option);
-                            }
-                        });
-
-                        // if attr.type in text,html,drawing
-                        var cdataoption = {};
-                        if (attributes['type'] == 'text'
-                            || attributes['type'] == 'script'
-                            || attributes['type'] == 'html'
-                            || attributes['type'] == 'drawing'
-                            || attributes['type'] == 'hotspot'
-                            || attributes['type'] == 'custom')
-                        {
-                            node_options['cdata'] = true;
-                            node_options['cdata_name'] = $(this)[0].nodeName;
-                            cdataoption = {name: $(this)[0].nodeName, value: attributes};
-                            normal_options.push(cdataoption);
-                        }
+    parse_wizard_xml = function (wizard_xml) {
+        // Build the page menu object
+        var j, temp_menu_data = [],
+            categories = String(wizard_xml[0].attributes.menus.value).split(',');
 
-                        // do the rest of the options
-                        $(all_options).each(function(key, option) {
-                            if (option.value['optional'])
-                            {
-                                opt_options.push(option);
-                            }
-                            else if (option.value['advanced'])
-                            {
-                                adv_options.push(option);
-                            }
-                            else if (option.value['language'])
-                            {
-                                lang_options.push(option);
-                            }
-                            else
-                            {
-                                if (option.name != 'name')
-                                {
-                                    normal_options.push(option);
-                                }
-                            }
-                        });
-                        // Add cdata also to all_options
-                        if (node_options['cdata_name'])
+        for (j=0; j<categories.length; j++) {
+            temp_menu_data.push(
+                {
+                    "name"      : categories[j],
+                    "submenu"   : []
+                }
+            );
+        }
+        menu_data = {"menu": temp_menu_data};
+
+        // Parse the xml
+        $(wizard_xml.children()).each(function(i) {
+            var main_node = $(this)[0].nodeName;
+            //console.log("Main node: " + main_node);
+            var menu_options = {};
+            for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
+                menu_options[a[j].name] = a[j].value;
+            }
+
+            var node_options = {};
+            var all_options = [];
+            var name_option = [];
+            var normal_options = [];
+            var opt_options  = [];
+            var adv_options  = [];
+            var lang_options = [];
+
+            var attributes = {};
+            for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
+                if (a[j].name == 'menu') is_menu = true;
+                //console.log("  attr: " + a[j].name + ":" + a[j].value);
+                attributes[a[j].name] = a[j].value;
+            }
+
+            // If we have a menu item then lets store it for the menu
+            if (attributes.menu != undefined) {
+                var lookup = ((function (item) {
+                    var i = menu_data.menu.length;
+                    while (i--) if (menu_data.menu[i].name == item) return i;
+                    return -1;
+                })(attributes.menu));
+
+                if (lookup > -1) {
+                    menu_data.menu[lookup].submenu.push(
                         {
-                            all_options.push(cdataoption);
+                            "name"  : attributes.menuItem,
+                            "hint"  : attributes.hint,
+                            "thumb" : attributes.thumb,
+                            "icon"  : attributes.icon
                         }
-
-                        node_options['name'] = name_option;
-                        node_options['normal'] = normal_options;
-                        node_options['advanced'] = adv_options;
-                        node_options['language'] = lang_options;
-                        node_options['optional'] = opt_options;
-                        node_options['all'] = all_options;
-
-                        wizard_data[main_node] = {'menu_options' : menu_options, 'node_options' : node_options};
-                    });
-                    //wizard_data.menus = String(wizard_xml[0].attributes["menus"].value).split(',');
-
-                    // Now we build the "insert page" menu
-                    (function () {
-                        var getMenuItem = function (itemData) {
-                            var data = {
-                                href: '#',
-                                html: itemData.name
-                            };
-
-                            if (itemData.hint != undefined) {
-                                data.hint = itemData.hint;
-                            }
-
-                            if (itemData.thumb != undefined) {
-                                data.thumb = itemData.thumb;
-                            }
-
-                            if (itemData.icon != undefined) {
-                                data.icon = itemData.icon;
-                            }
-
-                            var item = $("<li>").append(
-                                $("<a>", data)
-                            );
-
-                            if (itemData.submenu != undefined) {
-                                var subList = $("<ul>");
-                                $.each(itemData.submenu, function () {
-                                    subList.append(getMenuItem(this));
-                                });
-                                item.append(subList);
-                            }
-                            return item;
-                        };
-
-                        var $menu = $("<ul>", {
-                            id: 'menu'
-                        });
-                        $.each(menu_data.menu, function () {
-                            $menu.append(
-                                getMenuItem(this)
-                            );
-                        });
-                        $("#insert-menu").append(
-                            $menu.menu({
-                                select: function(event, ui) {
-                                    if (ui.item.children().attr('hint') != undefined) {
-                                        $("#insert-info img").attr("src", "modules/xerte/parent_templates/Nottingham/" + ui.item.children().attr('thumb'));
-                                        $("#insert-info span").text(ui.item.children().attr('hint'));
-                                        $("#insert-buttons").show();
-                                    }
-                                }
-                            })
-                        );
-
-                    })();
+                    );
                 }
+            }
+
+            $($(this).children()).each(function() {
+                //console.log("   sub node: " + $(this)[0].nodeName);
+                var node_params = {};
+                for (var j=0, a=$(this)[0].attributes; j<a.length; j++) {
+                    //console.log("      attr: " + a[j].name + ":" + a[j].value);
+                    node_params[a[j].name] = a[j].value;
+                }
+                all_options.push({name: [$(this)[0].nodeName], value: node_params});
             });
 
-        })();
-
-
-
+            // search attribute name and put that as the first one
+            $(all_options).each(function(key, option) {
+                if (option.name == 'name')
+                {
+                    name_option.push(option);
+                }
+            });
 
-        (function(){
-            // get xml data and sorts it
+            // if attr.type in text,html,drawing
+            var cdataoption = {};
+            if (attributes['type'] == 'text'
+                || attributes['type'] == 'script'
+                || attributes['type'] == 'html'
+                || attributes['type'] == 'drawing'
+                || attributes['type'] == 'hotspot'
+                || attributes['type'] == 'custom')
+            {
+                node_options['cdata'] = true;
+                node_options['cdata_name'] = $(this)[0].nodeName;
+                cdataoption = {name: $(this)[0].nodeName, value: attributes};
+                normal_options.push(cdataoption);
+            }
+
+            // do the rest of the options
+            $(all_options).each(function(key, option) {
+                if (option.value['optional'])
+                {
+                    opt_options.push(option);
+                }
+                else if (option.value['advanced'])
+                {
+                    adv_options.push(option);
+                }
+                else if (option.value['language'])
+                {
+                    lang_options.push(option);
+                }
+                else
+                {
+                    if (option.name != 'name')
+                    {
+                        normal_options.push(option);
+                    }
+                }
+            });
+            // Add cdata also to all_options
+            if (node_options['cdata_name'])
+            {
+                all_options.push(cdataoption);
+            }
+
+            node_options['name'] = name_option;
+            node_options['normal'] = normal_options;
+            node_options['advanced'] = adv_options;
+            node_options['language'] = lang_options;
+            node_options['optional'] = opt_options;
+            node_options['all'] = all_options;
+
+            wizard_data[main_node] = {'menu_options' : menu_options, 'node_options' : node_options};
+        });
+        //wizard_data.menus = String(wizard_xml[0].attributes["menus"].value).split(',');
+
+        toolbox.create_insert_page_menu();
+    },
+
+
+    process_language_file = function (xml) {
+        console.log("language file is loaded...");
+
+        // Parse the file
+
+        wait();
+    },
+
+    process_data_xwd = function (xml) {
+        console.log("data.xwd is loaded...");
+
+        var wizard_xml = $($.parseXML(xml)).find("wizard");
+
+        parse_wizard_xml(wizard_xml);
+
+        wait();
+    },
+
+    process_config_file = function (xml) {
+        console.log("config file is loaded...");
+
+        // Parse the file
+
+        wait();
+    },
+
+    language_files = [
+        {
+            "u" : "languages/wizard_" + languagecodevariable + ".xml",
+            "c" : process_language_file
+        },
+        {
+            "u" : originalpathvariable + "wizards/" + languagecodevariable + "/data.xwd",
+            "c" : process_data_xwd
+        },
+        {
+            "u" : "languages/language-config.xml",
+            "c" : process_config_file
+        }
+    ],
+
+    wait = function () {
+        var count = 0;
+        $(language_files).each(function() {
+            count += (this.loaded) ? 1 : 0;
+        });
+
+        if (count == language_files.length) {
+            proceed();
+        }
+    },
+
+    proceed = function () {
+        parent.tree.do_buttons();
+    },
+
+    init = function () {
+        // Start loading of the xml files
+        $(language_files).each(function() {
+            var _this = this;
             $.ajax({
                 type: "GET",
-                url: xmlvariable,
+                url: _this.u,
                 dataType: "text",
-                success: function(text) {
-                    // replace all line breaks in attributes with ascii code - otherwise these are replaced with spaces when parsed to xml
-                    var newString = FixLineBreaks(text);
-
-                    var tree_json = build_lo_data($($.parseXML(newString)).find("learningObject"), null);
-                    //console.log(JSON.stringify(tree_json));
-                    var treeview = $('<div />').attr('id', 'treeview');
-                    $(".ui-layout-west .content").append(treeview);
-                    $("#treeview").jstree({
-                        /*"plugins" : [ "wholerow"],*/
-                        "core" : {
-                            "data" : tree_json,
-                            "check_callback" : true, // Need this to allow the copy_node function to work...
-                            "multiple" : false // Need to disable this just now as nodes could be on different levels
-                        }
-                    })
-                    .bind('select_node.jstree', function(event, data) {
-                        console.log(data.node.id);
-                        showNodeData(data.node.id);
-                    })
-                    .bind("copy_node.jstree", function (e, data) {
-                        var new_id = generate_lo_key(),
-                            original_id =  data.original.id,
-                            tree = $('#treeview').jstree(true);
-
-                        // Change the id
-                        tree.set_id(data.node, new_id);
-
-                        // Copy the lo_data from the old node to the new one
-                        lo_data[new_id] = lo_data[original_id];
-
-                        // Do the same for all the children
-                        for(var i = 0, j = data.original.children_d.length; i < j; i++) {
-                            new_id = generate_lo_key();
-                            original_id =  data.original.children_d[i];
-                            tree.set_id(data.node.children_d[i], new_id);
-                            lo_data[new_id] = lo_data[original_id];
-                        }
-                    })
-                    .one('ready.jstree', function (e, data) {
-                        data.instance.open_node(["treeroot"]);
-                        data.instance.select_node(["treeroot"]);
-                    });
+                success: function (data) { //console.log("**** " + _this.u); console.log(data);
+                    _this.loaded = true;
+                    _this.c(data);
                 }
             });
-        })();
-
-
-
-        //bottom buttons
-        (function() {
-            var up = function() {
-                console.log("move node up");
-                move(-1);
-            },
-
-            down = function() {
-                console.log("move node down");
-                move(1);
-            },
-
-            move = function(dir) {
-                var tree = $.jstree.reference("#treeview");
-                var copy_node, new_node, id, ids = tree.get_selected();
-
-                if(!ids.length) { return false; } // Something needs to be selected
-
-                id = ids[0];
-
-                if (id == "treeroot") {  // Can't remove the root node
-                    alert("You can't move the LO node");
-                    return false;
-                }
-
-                current_node = tree.get_node(id, false); //console.log(current_node);
-                parent_node_id = tree.get_parent(current_node); console.log(parent_node_id);
-                //parent_node = tree.get_node(parent_node_id, false); console.log(parent_node);
-
-                //var pos = (dir > 0) ? 'next' : 'previous';
-
-                //tree.move_node(current_node, parent_node, 2, function(node, parent, position){
-                //    console.log("done");
-
-                    //var copied_node_id = current_node.id;
-                    //var node_id = node.id;
-                    //var new_node_id = generate_lo_key();
-
-                    // Update the id
-                    //node.id = new_node_id;
-
-                    // Copy the lo_data from the old node to the new one
-                    //lo_data[new_node_id] = lo_data[copied_node_id];
-
-                    //console.log(lo_data[node.id]);
-                //});
-
-                return true;
-            },
-
-            buttons = $('<div />').attr('id', 'bottom_buttons');
-            $([
-                {name:'UP', icon:'', id:'up_button', click:up},
-                {name:'DOWN', icon:'', id:'down_button', click:down}
-            ])
-            .each(function(index, value) {
-                var button = $('<button>')
-                    .attr('id', value.id)
-                    .click(value.click)
-                    .append($('<img>').attr('src', value.icon).height(14))
-                    .append(value.name);
-                buttons.append(button);
-            });
-            $('.ui-layout-west .footer').append(buttons);
-        })();
-
+        });
     };
 
     init();
+    return parent;
 
-});
\ No newline at end of file
+})(jQuery, EDITOR || {});
diff --git a/editor/js/data.js b/editor/js/data.js
new file mode 100644
index 0000000000..d19cb12863
--- /dev/null
+++ b/editor/js/data.js
@@ -0,0 +1,57 @@
+// *******************
+// *       Data      *
+// *******************
+var EDITOR = (function ($, parent) {
+
+    var my = parent.data = {},
+        toolbox = parent.toolbox,
+
+    // replace all line breaks in attributes with ascii code - otherwise these are replaced with spaces when parsed to xml
+    FixLineBreaks = function (text) {
+        var split_up = text.split(/<\!\[CDATA\[|\]\]>/),
+            temp, i, j, len, len2;
+
+        for (i=0, len=split_up.length; i<len; i+=2) {
+            temp = split_up[i].split('"');
+            for (j=1, len2=temp.length; j<len2; j+=2) {
+                temp[j] = temp[j].replace(/(\n|\r|\r\n)/g, "&#10;");
+            }
+            split_up[i] = temp.join('"');
+        }
+
+        // Put the CDATA blocks back...
+        temp = [];
+        for (i=0, len=split_up.length-1; i<len; i+=2) {
+            temp.push(split_up[i] + "<![CDATA[" + split_up[i+1]);
+        }
+        temp.push(split_up[i]);
+
+        return temp.join("]]>");
+    },
+
+    process_data = function (xml) {
+        //console.log(xmlvariable + " is loaded...");
+
+        // replace all line breaks in attributes with ascii code
+        // otherwise these are replaced with spaces when parsed to xml
+        parent.tree.build( FixLineBreaks(xml) );
+    },
+
+    init = function (xmlurl) {
+        // Start loading of the data file
+
+        var _this = this;
+        $.ajax({
+            type: "GET",
+            url: xmlurl,
+            dataType: "text",
+            success: function (data) {
+                process_data(data);
+            }
+        });
+    };
+
+    init(xmlvariable);
+    return parent;
+
+})(jQuery, EDITOR || {});
\ No newline at end of file
diff --git a/editor/js/layout.js b/editor/js/layout.js
new file mode 100644
index 0000000000..efb0c6e9cb
--- /dev/null
+++ b/editor/js/layout.js
@@ -0,0 +1,129 @@
+// *******************
+// *     Layout    *
+// *******************
+var EDITOR = (function ($, parent) {
+
+    var my = parent.layout = {},
+
+    setup = function () {
+        var xerte_layout,
+            xerte_editor_layout_settings = {
+                name: "xerte_editor_layout"
+            ,   defaults: {
+                    size:                   "auto",
+                    minSize:                50,
+                    paneClass:              "pane",
+                    resizerClass:           "resizer",
+                    togglerClass:           "toggler",
+                    buttonClass:            "button",
+                    contentSelector:        ".content",
+                    contentIgnoreSelector:  "span",
+                    togglerLength_open:     35,
+                    togglerLength_closed:   35,
+                    hideTogglerOnSlide:     true,
+                    togglerTip_open:        "Close This Pane",
+                    togglerTip_closed:      "Open This Pane",
+                    resizerTip:             "Resize This Pane",
+                    fxName:                 "slide",
+                    fxSpeed_open:           750,
+                    fxSpeed_close:          1500,
+                    fxSettings_open:        { easing: "easeInQuint" },
+                    fxSettings_close:       { easing: "easeOutQuint" }
+                },
+                north: {
+                    minSize:                65,
+                    spacing_open:           1,
+                    togglerLength_open:     0,
+                    togglerLength_closed:   -1,
+                    resizable:              false,
+                    slidable:               false,
+                    fxName:                 "none"
+                },
+                south: {
+                    maxSize:                75,
+                    spacing_closed:         0,
+                    spacing_open:           4,
+                    slidable:               false,
+                    initClosed:             false
+                },
+                west: {
+                    size:                   250,
+                    minSize:                150,
+                    maxSize:                450,
+                    spacing_open:           4,
+                    spacing_closed:         21,
+                    togglerLength_closed:   21,
+                    togglerAlign_closed:    "top",
+                    togglerLength_open:     0,
+                    togglerTip_open:        "Close This Pane",
+                    togglerTip_closed:      "Open This Pane",
+                    resizerTip_open:        "Resize This Pane",
+                    slideTrigger_open:      "click",
+                    initClosed:             false,
+                    fxSettings_open:        { easing: "easeOutBounce" }
+                },
+                east: {
+                    size:                   150,
+                    minSize:                150,
+                    maxSize:                350,
+                    spacing_open:           4,
+                    spacing_closed:         21,
+                    togglerLength_closed:   21,
+                    togglerAlign_closed:    "top",
+                    togglerLength_open:     0,
+                    togglerTip_open:        "Close This Pane",
+                    togglerTip_closed:      "Open This Pane",
+                    resizerTip_open:        "Resize This Pane",
+                    slideTrigger_open:      "mouseover",
+                    initClosed:             false,
+                    fxName:                 "drop",
+                    fxSpeed:                "normal",
+                    fxSettings:             { easing: "" } // remove default
+                },
+                center: {
+                    paneSelector:           "#mainContent",
+                    minWidth:               200,
+                    minHeight:              200
+                }
+            };
+
+        xerte_layout = $("body").layout( xerte_editor_layout_settings );
+        var left_column = "body > .ui-layout-west";
+        var right_column = "body > .ui-layout-east";
+
+        // ** Add pin buttons and wire them up **
+        $("<span></span>").addClass("pin-button").prependTo( left_column );
+        $("<span></span>").addClass("pin-button").prependTo( right_column );
+        xerte_layout.addPinBtn( left_column +" .pin-button", "west");
+        xerte_layout.addPinBtn( right_column +" .pin-button", "east" );
+
+        // ** Add close buttons and wire them up **
+        $("<span></span>").attr("id", "west-closer" ).prependTo( left_column );
+        $("<span></span>").attr("id", "east-closer").prependTo( right_column );
+        xerte_layout.addCloseBtn("#west-closer", "west");
+        xerte_layout.addCloseBtn("#east-closer", "east");
+
+        // ** stop # links reloading page **
+        $("a").each(function () {
+            var path = document.location.href;
+            if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
+            if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
+        });
+    }
+
+    // Create the layout once the document has finished loading
+    $(document).ready(setup);
+
+    return parent;
+
+})(jQuery, EDITOR || {});
+
+
+
+
+
+
+
+
+
+
diff --git a/editor/js/toolbox.js b/editor/js/toolbox.js
new file mode 100644
index 0000000000..171cc96a97
--- /dev/null
+++ b/editor/js/toolbox.js
@@ -0,0 +1,487 @@
+// *******************
+// *     Toolbox    *
+// *******************
+var EDITOR = (function ($, parent) {
+
+    var my = parent.toolbox = {},
+
+    // Build the "insert page" menu
+    create_insert_page_menu = function () {
+        var getMenuItem = function (itemData) {
+            var data = {
+                href: '#',
+                html: itemData.name
+            };
+
+            if (itemData.hint != undefined) {
+                data.hint = itemData.hint;
+            }
+
+            if (itemData.thumb != undefined) {
+                data.thumb = itemData.thumb;
+            }
+
+            if (itemData.icon != undefined) {
+                data.icon = itemData.icon;
+            }
+
+            var item = $("<li>").append(
+                $("<a>", data)
+            );
+
+            if (itemData.submenu != undefined) {
+                var subList = $("<ul>");
+                $.each(itemData.submenu, function () {
+                    subList.append(getMenuItem(this));
+                });
+                item.append(subList);
+            }
+            return item;
+        };
+
+        var $menu = $("<ul>", {
+            id: 'menu'
+        });
+        $.each(menu_data.menu, function () {
+            $menu.append(
+                getMenuItem(this)
+            );
+        });
+        $("#insert-menu").append(
+            $menu.menu({
+                select: function(event, ui) {
+                    if (ui.item.children().attr('hint') != undefined) {
+                        $("#insert-info img").attr("src", "modules/xerte/parent_templates/Nottingham/" + ui.item.children().attr('thumb'));
+                        $("#insert-info span").text(ui.item.children().attr('hint'));
+                        $("#insert-buttons").show();
+                    }
+                }
+            })
+        );
+    },
+
+
+    generate_lo_key = function () {
+        var key;
+
+        function lo_key_exists(key) {
+            for (var lo_key in lo_data) if (lo_key == key) return true;
+            return false;
+        };
+
+        do {
+            key = "ID_";
+            for (var i=0; i<10; i++) key += String(parseInt(Math.random()*9));
+        } while (lo_key_exists(key));
+        return key;
+    },
+
+
+    // ** Recursive function to traverse the xml and build
+    build_lo_data = function (xmlData, parent_id) {
+
+        // First lets generate a unique key
+        var key = generate_lo_key();
+        if (parent_id == null)
+        {
+            key = 'treeroot';
+        }
+
+        // Parse the attributes and store in the data store
+        var attributes = [{ name: 'nodeName', value: xmlData[0].nodeName }];
+        $(xmlData[0].attributes).each(function() {
+            attributes.push({name: this.name, value: this.value});
+        });
+        lo_data[key] = {};
+        lo_data[key]['attributes'] = attributes;
+        if (xmlData[0].firstChild && xmlData[0].firstChild.nodeType == 4)  // cdata-section
+        {
+            lo_data[key]['data'] = xmlData[0].firstChild.data;
+        }
+
+        // Build the JSON object for the treeview
+        // For version 3 jsTree
+        var this_json = {
+            id : key,
+            text : (xmlData[0].attributes['name'] ? xmlData[0].attributes['name'].value : xmlData[0].nodeName),
+            icon : 'editor/img/page_types/' + xmlData[0].nodeName + '.png'
+        }
+
+        // if we are at top level then make sure it's open and display node data
+        if (parent_id == null) {
+            this_json.state = { opened : true };
+            //showNodeData(key);
+        }
+
+        if (xmlData.children()[0]) {
+            this_json.children = [];
+
+            xmlData.children().each(function(i) {
+                this_json.children.push( build_lo_data($(this), key) );
+            });
+        }
+
+        return this_json;
+    },
+
+
+    getOptionValue = function (all_options, key)
+    {
+        var value="";
+        for (var i=0; i<all_options.length; i++) {
+            if (all_options[i].name == key)
+            {
+                value = all_options[i].value;
+                break;
+            }
+        }
+        return value;
+    },
+
+
+    getAttributeValue = function (attributes, name, options, key)
+    {
+        var attribute_value;
+        var attr_found = false;
+
+        // find the value
+        for (var j=0; !attr_found && j<attributes.length; j++) {
+            if (attributes[j].name == name)
+            {
+                attribute_value = attributes[j].value;
+                attr_found = true;
+            }
+        }
+        if (!attr_found)
+        {
+            if (options.cdata && options.cdata_name == name)
+            {
+                attribute_value = lo_data[key]['data'];
+            }
+            else
+            {
+                return {found: false, value: ""};
+            }
+        }
+        return {found : true, value: attribute_value};
+    },
+
+
+    displayParameter = function (id, all_options, name, value, key)
+    {
+        var options = getOptionValue(all_options, name);
+        if (options != null)
+        {
+            var output_string = '<tr class="wizardattribute">';
+            if (options.optional == 'true')
+            {
+                output_string += '<td class="wizardoptional"><img id="opt_'+ name +'" src="editor/img/optional.gif" class="optional" />&nbsp;</td>';
+            }
+            else
+            {
+                output_string += '<td class="wizardparameter"></td>';
+            }
+            output_string += '<td class="wizardlabel">' + options.label + ' : </td>';
+            output_string += '<td class="wizardvalue">' + displayDataType(value, options, name, key) + '</td>';
+            output_string += '</tr>';
+            $(id).append(output_string);
+            if (options.optional == 'true') {
+                $("#opt_"+ name).on("click", function () {
+                    var this_name = name;
+                    removeOptionalProperty(this_name);
+                });
+            }
+        }
+    },
+
+
+    removeOptionalProperty = function (name) {
+        console.log("Handler for removing optional properties called: " + name);
+
+        // Need to remove row from the screen and
+        // Also need to remove property from the data store
+    },
+
+
+    convertTextAreas = function ()
+    {
+        $.each(textareas_options, function (i, options) {
+            var ckoptions = {};
+
+            if (options.options.height)
+            {
+                var height = parseInt(options.options.height) + 20;
+                ckoptions['height'] = height;
+            }
+            if (options.options.type == 'script')
+            {
+                // enable source mode of ckeditor
+            }
+            $('#'+options.id).ckeditor(function(){
+                // Editor is ready, attach onblur event
+                this.on('blur', function(){
+                    // This is the call back when editor looses focus
+                    if (this.checkDirty())
+                    {
+                        inputChanged(options.id, options.key, options.name, this.getData());
+                    }
+                })
+            }, ckoptions);
+        });
+    },
+
+
+    convertTextInputs = function ()
+    {
+        $.each(textinputs_options, function (i, options) {
+            $('div.inputtext').ckeditor(function(){
+                // Editor is ready, attach onblur event
+                this.on('blur', function(){
+                    // This is the call back when editor looses focus
+                    if (this.checkDirty())
+                    {   var thisValue = this.getData();
+                        thisValue = thisValue.substr(0, thisValue.length-1); // Remove the extra linebreak
+                        inputChanged(options.id, options.key, options.name, thisValue);
+                    }
+                })
+            }, { toolbarGroups : [
+                { name: 'basicstyles', groups: [ 'basicstyles' ] },
+                { name: 'colors' }]
+            });
+        });
+    },
+
+
+    convertColorPickers = function ()
+    {
+        $.each(colorpickers, function (i, options){
+            var myPicker = new jscolor.color(document.getElementById(options.id), {})
+            myPicker.fromString(options.value)  // now you can access API via 'myPicker' variable
+
+        });
+    },
+
+    setAttributeValue = function (key, name, value)
+    {
+        var attributes = lo_data[key]['attributes'];
+        // Get the node name
+        var node_name = '';var i=attributes.length;
+        for(var i=0; i< attributes.length; i++)
+        {
+            if (attributes[i].name == 'nodeName')
+            {
+                node_name = attributes[i].value;
+                break;
+            }
+        }
+
+        var node_options = wizard_data[node_name].node_options;
+
+        if (node_options['cdata'] && node_options['cdata_name'] == name)
+        {
+            lo_data[key]['data'] = value;
+        }
+        else
+        {
+            var attr_found = false;
+
+            // find the value
+            for (var j=0; !attr_found && j<attributes.length; j++) {
+                if (attributes[j].name == name)
+                {
+                    attributes[j].value = value;
+                    attr_found = true;
+                }
+            }
+        }
+    },
+
+
+    cbChanged = function (id, key, name)
+    {
+        //console.log(id + ': ' + key + ', ' +  name);
+        var value = $('#' + id).is(':checked');
+        if (value)
+        {
+            value = 'true';
+        }
+        else
+        {
+            value = 'false';
+        }
+        setAttributeValue(key, name, value);
+    },
+
+
+    selectChanged = function (id, key, name)
+    {
+        //console.log(id + ': ' + key + ', ' +  name);
+        var value = $('#' + id).val();
+        setAttributeValue(key, name, value);
+    },
+
+
+    inputChanged = function (id, key, name, passedValue)
+    {
+        //console.log(id + ': ' + key + ', ' +  name  + ', ' +  passedValue);
+        var value, valuePassed = (arguments.length == 4);
+
+        if (id.indexOf('textinput') >= 0)
+        {
+            value = (valuePassed) ? passedValue : $('#' + id).html();
+            value = value.substr(3);
+            value = value.substr(0, value.length-4);
+            value.trim();
+        }
+        else
+        {
+            value = $('#' + id).val();
+        }
+
+        if (id.indexOf('color')>=0)
+        {
+            value = value.substr(1);
+            value = '0x' + value;
+        }
+        setAttributeValue(key, name, value);
+    },
+
+
+    displayDataType = function (value, options, name, key) {
+        var html;                   //console.log(options);
+
+        switch(options.type.toLowerCase())
+        {
+            case 'checkbox':
+                var id = 'checkbox_' + form_id_offset;
+                form_id_offset++;
+                html = '<input id="' + id + '" type="checkbox" ' + (value=='true'? 'checked' : '') + ' onchange="cbChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')" />';
+                break;
+            case 'combobox':
+                var id = 'select_' + form_id_offset;
+                form_id_offset++;
+                var s_options = options.options.split(',');
+                var s_data = [];
+                if (options.data)
+                {
+                    s_data = options.data.split(',');
+                }
+                html = '<select id="' + id + '" onchange="selectChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')" >';
+                for (var i=0; i<s_options.length; i++) {
+                    html += "<option value=\"" + s_options[i] + (s_options[i]==value ? "\" selected=\"selected\">" : "\">") + (options.data ? s_data[i] : s_options[i]) + "</option>";
+                }
+                html += '</select>';
+                break;
+            case 'text':
+            case 'script':
+            case 'html':
+            case 'textarea':
+                var id = "textarea_" + form_id_offset;
+                form_id_offset++;
+                html = "<div style=\"width:1000px\"><textarea id=\"" + id + "\" class=\"ckeditor\" onchange=\"inputChanged('" + id + "', '" + key + "', '" + name + "')\" style=\"";
+                if (options.height) html += "height:" + options.height + "px";
+                html += "\">" + value + "</textarea></div>";
+                textareas_options.push({id: id, key: key, name: name, options: options});
+                break;
+            case 'numericstepper':
+                var min = parseInt(options.min);
+                var max = parseInt(options.max);
+                var step = parseInt(options.step);
+                var intvalue = parseInt(value);
+                //console.log({min: min, max: max, step: step});
+                if (!Modernizr.inputtypes.number)
+                {
+                    var id = 'select_' + form_id_offset;
+                    form_id_offset++;
+                    html = '<select id="' + id + '" onchange="selectChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')" >';
+                    for (var i=min; i<=max; i += step) {
+                        html += "<option value=\"" + i + (intvalue==i ? "\" selected=\"selected\">" :  "\">") + i + "</option>";
+                    }
+                    html += "</select>";
+                }
+                else
+                {
+                    var id = 'numericstepper_' + form_id_offset;
+                    form_id_offset++;
+                    html = '<input id="' + id + '" type="number" min="' + min + '" max="' + max + '" step="' + step + '" value="' + value + '" onchange="inputChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')" >';
+                }
+                break;
+            case 'pagelist':
+                // Implement differently then in the flash editor
+                // Leave PageIDs untouched, and prefer to use the PageID over the linkID
+                var id = 'select_' + form_id_offset;
+                form_id_offset++;
+                html = '<select id="' + id + '" onchange="selectChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')" >';
+                // Add empty entry
+                html += "<option value=\"\"" + (value == "" ? " selected=\"selected\">" :  ">") + "&nbsp;</option>";
+                $.each(lo_data, function(i, data){
+                    var name = getAttributeValue(data['attributes'], 'name', [], i);
+                    var pageID = getAttributeValue(data['attributes'], 'pageID', [], i);
+                    var linkID = getAttributeValue(data['attributes'], 'linkID', [], i);
+                    if ((pageID.found && pageID.value != "") || (linkID.found && linkID.value != ""))
+                    {
+                        if (pageID.found)
+                        {
+                            html += "<option value=\"" + pageID.value
+                                + (value ==  pageID.value || value == linkID.value ? "\" selected=\"selected\">" :  "\">")
+                                + name.value + "</option>";
+                        }
+                        else
+                        {
+                            html += "<option value=\"" + linkID.value
+                                + (value == linkID.value ? "\" selected=\"selected\">" :  "\">")
+                                + name.value + "</option>";
+                        }
+                    }
+                });
+                html += "</select>";
+                break;
+            case 'colourpicker':
+                var colorvalue = value;
+                var id = 'colorpicker_' + form_id_offset;
+                form_id_offset++;
+                if (colorvalue.indexOf("0x") == 0)
+                {
+                    colorvalue ='#' + colorvalue.substr(2);
+                }
+                if (Modernizr.inputtypes.color)
+                {
+                    html = '<input id='+ id + ' type="color" value="' + colorvalue + '" onchange="inputChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')">';
+                }
+                else
+                {
+                    html = '<input id='+ id + ' class="color" value="' + colorvalue + '" onchange="inputChanged(\'' + id + '\', \'' + key + '\', \'' + name + '\')">';
+                    colorpickers.push({id: id, value: colorvalue, options: options});
+                }
+                break;
+            case 'hotspot':
+            case 'drawing':
+            case 'languagelist':
+            case 'datefield':
+            case 'datagrid':
+            case 'webpage':
+            case 'media':
+            default:
+
+                 //html = "<input type=\"text\" value=\"" + value + "\" />";
+                var id = 'textinput_' + form_id_offset;
+                form_id_offset++;
+                html = "<div id=\"" + id + "\" class=\"inputtext\" contenteditable=\"true\" ><p>" + value + "</p></div>";
+                textinputs_options.push({id: id, key: key, name: name, options: options});
+        }
+        return html;
+    };
+
+    // Add the functions that need to be public
+    my.build_lo_data = build_lo_data;
+    my.create_insert_page_menu = create_insert_page_menu;
+    my.getAttributeValue = getAttributeValue;
+    my.displayParameter = displayParameter;
+    my.convertTextAreas = convertTextAreas;
+    my.convertTextInputs = convertTextInputs;
+    my.convertColorPickers = convertColorPickers;
+
+    return parent;
+
+})(jQuery, EDITOR || {});
+
diff --git a/editor/js/tree.js b/editor/js/tree.js
new file mode 100644
index 0000000000..224c8aee84
--- /dev/null
+++ b/editor/js/tree.js
@@ -0,0 +1,370 @@
+// Tree : Add the tree object to the editor
+var EDITOR = (function ($, parent) {
+
+    // Create the tree object and refer locally to it as 'my'
+    var my = parent.tree = {},
+        toolbox = parent.toolbox,
+
+    // Called once document is ready
+    setup = function () {
+        do_bottom_buttons();
+    },
+
+    // Add the buttons
+    do_buttons = function () {
+        $( "#insert-dialog" ).hide();
+        $( "#insert-buttons" ).hide();
+
+        var insert_page = function() {
+            $( "#insert-dialog" ).dialog({ width: '60%' });
+        },
+
+        delete_page = function() {
+            deleteSelectedNodes();
+        },
+
+        duplicate_page = function() {
+            duplicateSelectedNodes();
+        },
+
+        buttons = $('<div />').attr('id', 'top_buttons');
+        $([
+            {name:'Insert', icon:'editor/img/insert.png', id:'insert_button', click:insert_page},
+            {name:'Copy', icon:'editor/img/copy.png', id:'copy_button', click:duplicate_page},
+            {name:'Delete', icon:'editor/img/delete.gif', id:'delete_button', click:delete_page}
+        ])
+        .each(function(index, value) {
+            var button = $('<button>')
+                .attr('id', value.id)
+                .click(value.click)
+                .append($('<img>').attr('src', value.icon).height(14))
+                .append(value.name);
+            buttons.append(button);
+        });
+        $('.ui-layout-west .header').append(buttons);
+
+        buttons = $('<div />').attr('id', 'save_buttons');
+        $([
+            {name:'Preview', icon:'editor/img/insert.png', id:'insert_button', click:preview},
+            {name:'Publish', icon:'editor/img/copy.png', id:'copy_button', click:publish},
+        ])
+        .each(function(index, value) {
+            var button = $('<button>')
+                .attr('id', value.id)
+                .click(value.click)
+                .append($('<img>').attr('src', value.icon).height(14))
+                .append(value.name);
+            buttons.append(button);
+        });
+        $('.ui-layout-east .content').append(buttons);
+    },
+
+    preview = function () {
+        console.log("preview clicked");
+    },
+
+
+    publish = function () {
+        console.log("publish clicked");
+    },
+
+    // Make a copy of the currently selected node
+    // Presently limited to first node if multiple selected
+    duplicateSelectedNodes = function () {
+    var tree = $.jstree.reference("#treeview");
+        var copy_node, new_node, id, ids = tree.get_selected();
+
+        if(!ids.length) { return false; } // Something needs to be selected
+
+        id = ids[0];
+
+        if (id == "treeroot") { return false; } // Can't copy the root node
+
+        console.log(id);
+
+        current_node = tree.get_node(id, false); console.log(current_node);
+        parent_node_id = tree.get_parent(current_node); console.log(parent_node_id);
+        parent_node = tree.get_node(parent_node_id, false); console.log(parent_node);
+
+        tree.copy_node(current_node, parent_node, 'last');
+
+        return true; // Successful
+
+    },
+
+    // Remove the currently selected node
+    // Presently limited to the first node if multiple selected
+    deleteSelectedNodes = function () {
+        var tree = $.jstree.reference("#treeview");
+        var copy_node, new_node, id, ids = tree.get_selected();
+
+        if(!ids.length) { return false; } // Something needs to be selected
+
+        id = ids[0];
+
+        if (id == "treeroot") {  // Can't remove the root node
+            alert("You can't remove the LO node");
+            return false;
+        }
+
+        if (!confirm('Are you sure you want to delete this page?')) {
+            return;
+        }
+
+        // Delete from the tree
+        tree.delete_node(id);
+
+        // Delete
+        delete lo_data[id];
+
+        //console.log(lo_data[id]);
+        //tree.last_error();
+
+        return true; // Successful
+    },
+
+    // Refresh the page when a new node is selected
+    showNodeData = function (key) {
+
+        var attributes = lo_data[key]['attributes'];
+
+        // Get the node name
+        var node_name = '';
+
+        for (var i=0, len=attributes.length; i<len; i++)
+        {
+            if (attributes[i].name == 'nodeName')
+            {
+                node_name = attributes[i].value;
+                break;
+            }
+        }
+
+        var node_options = wizard_data[node_name].node_options;
+
+        // Clear editor array
+        textareas_options = [];
+        textinputs_options = [];
+        colorpickers = [];
+        form_fields = [];
+        form_id_offset = 0;
+        $("#mainPanel").html("<table class=\"wizard\" border=\"0\">");
+
+        // Build the form
+        var attribute_name;
+        var attribute_value;
+        if (node_options['name'].length > 0)
+        {
+            attribute_name = node_options['name'][0].name;
+            attribute_value = toolbox.getAttributeValue(attributes, attribute_name, node_options, key);
+            if (attribute_value.found)
+            {
+                toolbox.displayParameter('#mainPanel', node_options['name'], attribute_name, attribute_value.value, key);
+            }
+        }
+        // Optional parameters
+        for (var i=0; i<node_options['optional'].length; i++)
+        {
+            attribute_name = node_options['optional'][i].name;
+            attribute_value = toolbox.getAttributeValue(attributes, attribute_name, node_options, key);
+            if (attribute_value.found)
+            {
+                toolbox.displayParameter('#mainPanel', node_options['optional'], attribute_name, attribute_value.value, key);
+            }
+        }
+        // The rest of the normal params
+        for (var i=0; i<node_options['normal'].length; i++)
+        {
+            attribute_name = node_options['normal'][i].name;
+            attribute_value = toolbox.getAttributeValue(attributes, attribute_name, node_options, key);
+            if (attribute_value.found)
+            {
+                toolbox.displayParameter('#mainPanel', node_options['normal'], attribute_name, attribute_value.value, key);
+            }
+        }
+        $('#mainPanel').append("</table>");
+
+        $('#advancedPanel').html("<hr><table class=\"wizard\" border=\"0\">");
+        // advancedOptons
+        for (var i=0; i<node_options['advanced'].length; i++)
+        {
+            attribute_name = node_options['advanced'][i].name;
+            attribute_value = toolbox.getAttributeValue(attributes, attribute_name, node_options, key);
+            if (attribute_value.found)
+            {
+                toolbox.displayParameter('#advancedPanel', node_options['advanced'], attribute_name, attribute_value.value, key);
+            }
+        }
+        $('#advancedPanel').append("</table>");
+
+        $('#languagePanel').html("<hr><table class=\"wizard\" border=\"0\">");
+        // advancedOptons
+        for (var i=0; i<node_options['language'].length; i++)
+        {
+            attribute_name = node_options['language'][i].name;
+            attribute_value = toolbox.getAttributeValue(attributes, attribute_name, node_options, key);
+            if (attribute_value.found)
+            {
+                toolbox.displayParameter('#languagePanel', node_options['language'], attribute_name, attribute_value.value, key);
+            }
+        }
+        $('#languagePanel').append("</table>");
+    /*
+        for (var i=0; i<attributes.length; i++) {
+            if ($.inArray(attributes[i].name, ['nodeName', 'linkID']) < 0) {
+                var attribute_name = attributes[i].name;
+                var attribute_value = attributes[i].value;
+
+                var options = getOptionValue(node_options['all'], attribute_name);
+                if (options != null)
+                {
+                    var output_string = '<tr class="wizardattribute">';
+                    if (options.optional == 'true')
+                    {
+                        output_string += '<td class="wizardoptional"><img src="img/optional.gif" />&nbsp;</td>';
+                    }
+                    else
+                    {
+                        output_string += '<td class="wizardparameter"></td>';
+                    }
+                    output_string += '<td class="wizardlabel">' + options.label + ' : </td>';
+                    output_string += '<td class="wizardvalue">' + displayDataType(attribute_value, options) + '</td>';
+                    output_string += '</tr>';
+                    $('#mainContent').append(output_string);
+                }
+            }
+        }
+    */
+
+        //$('textarea.ckeditor').ckeditor(function(){}, { customConfig: 'config.js' });
+        //$('textarea.ckeditor').ckeditor();
+        toolbox.convertTextAreas();
+        //$('div.inputtext').ckeditor(function(){}, { toolbarGroups : [
+        //    { name: 'basicstyles', groups: [ 'basicstyles' ] },
+        //    { name: 'colors' }]
+        //});
+        toolbox.convertTextInputs();
+        toolbox.convertColorPickers();
+
+        //$('div.inputtext').ckeditor();
+    },
+
+    // Build the tree once the data has loaded
+    build = function (xml) {
+        var tree_json = toolbox.build_lo_data($($.parseXML(xml)).find("learningObject"), null);
+        //console.log(JSON.stringify(tree_json));
+        var treeview = $('<div />').attr('id', 'treeview');
+        $(".ui-layout-west .content").append(treeview);
+        $("#treeview").jstree({
+            /*"plugins" : [ "wholerow"],*/
+            "core" : {
+                "data" : tree_json,
+                "check_callback" : true, // Need this to allow the copy_node function to work...
+                "multiple" : false // Need to disable this just now as nodes could be on different levels
+            }
+        })
+        .bind('select_node.jstree', function(event, data) {
+            showNodeData(data.node.id);
+        })
+        .bind("copy_node.jstree", function (e, data) {
+            var new_id = generate_lo_key(),
+                original_id =  data.original.id,
+                tree = $('#treeview').jstree(true);
+
+            // Change the id
+            tree.set_id(data.node, new_id);
+
+            // Copy the lo_data from the old node to the new one
+            lo_data[new_id] = lo_data[original_id];
+
+            // Do the same for all the children
+            for(var i = 0, j = data.original.children_d.length; i < j; i++) {
+                new_id = generate_lo_key();
+                original_id =  data.original.children_d[i];
+                tree.set_id(data.node.children_d[i], new_id);
+                lo_data[new_id] = lo_data[original_id];
+            }
+        })
+        .one('ready.jstree', function (e, data) {
+            data.instance.open_node(["treeroot"]);
+            data.instance.select_node(["treeroot"]);
+        });
+    },
+
+    // Up button handler
+    up = function() {
+        console.log("move node up");
+        move(-1);
+    },
+
+    // Down button handler
+    down = function() {
+        console.log("move node down");
+        move(1);
+    },
+
+    // Move the selected node up or down
+    move = function(dir) {
+        var tree = $.jstree.reference("#treeview");
+        var copy_node, new_node, id, ids = tree.get_selected();
+
+        if(!ids.length) { return false; } // Something needs to be selected
+
+        id = ids[0];
+
+        if (id == "treeroot") {  // Can't remove the root node
+            alert("You can't move the LO node");
+            return false;
+        }
+
+        current_node = tree.get_node(id, false); //console.log(current_node);
+        parent_node_id = tree.get_parent(current_node); console.log(parent_node_id);
+        //parent_node = tree.get_node(parent_node_id, false); console.log(parent_node);
+
+        //var pos = (dir > 0) ? 'next' : 'previous';
+
+        //tree.move_node(current_node, parent_node, 2, function(node, parent, position){
+        //    console.log("done");
+
+            //var copied_node_id = current_node.id;
+            //var node_id = node.id;
+            //var new_node_id = generate_lo_key();
+
+            // Update the id
+            //node.id = new_node_id;
+
+            // Copy the lo_data from the old node to the new one
+            //lo_data[new_node_id] = lo_data[copied_node_id];
+
+            //console.log(lo_data[node.id]);
+        //});
+
+        return true;
+    },
+
+    do_bottom_buttons = function () {
+        buttons = $('<div />').attr('id', 'bottom_buttons');
+        $([
+        {name:'UP', icon:'', id:'up_button', click:up},
+        {name:'DOWN', icon:'', id:'down_button', click:down}
+        ])
+        .each(function(index, value) {
+        var button = $('<button>')
+            .attr('id', value.id)
+            .click(value.click)
+            .append($('<img>').attr('src', value.icon).height(14))
+            .append(value.name);
+        buttons.append(button);
+        });
+        $('.ui-layout-west .footer').append(buttons);
+    };
+
+    // Create the layout once the document has finished loading
+    $(document).ready(setup);
+
+    my.build = build;
+    my.do_buttons = do_buttons;
+
+    return parent;
+
+})(jQuery, EDITOR || {});
\ No newline at end of file
diff --git a/modules/xerte/edithtml.php b/modules/xerte/edithtml.php
index 70f5b5dd74..6285f34991 100644
--- a/modules/xerte/edithtml.php
+++ b/modules/xerte/edithtml.php
@@ -163,8 +163,6 @@ function output_editor_code($row_edit, $xerte_toolkits_site, $read_status, $vers
 <script type="text/javascript" src="editor/js/vendor/ckeditor/ckeditor.js"></script>
 <script type="text/javascript" src="editor/js/vendor/ckeditor/adapters/jquery.js"></script>
 <script type="text/javascript" src="editor/js/vendor/jscolor.js"></script>
-<script type="text/javascript" src="editor/js/functions.js"></script>
-<script type="text/javascript" src="editor/js/config.js"></script>
 <script>
     <?php
     echo "xmlvariable=\"" . $string_for_flash_xml . "\";\n";
@@ -181,6 +179,10 @@ function output_editor_code($row_edit, $xerte_toolkits_site, $read_status, $vers
     echo "site_url=\"" . $xerte_toolkits_site->site_url . "\";\n";
     ?>
 </script>
+<script type="text/javascript" src="editor/js/toolbox.js"></script>
+<script type="text/javascript" src="editor/js/layout.js"></script>
+<script type="text/javascript" src="editor/js/tree.js"></script>
+<script type="text/javascript" src="editor/js/data.js"></script>
 <script type="text/javascript" src="editor/js/application.js"></script>
 </body>
 </html>