From 501099056b83a8e4ac0d72169d125690c9437f8e Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Tue, 30 Apr 2013 13:23:06 +0200
Subject: [PATCH] Unified JSONEditor and JSONFormatter. Added method setMode.
 Renamed a lot of stuff.

---
 app/web/app.css                               |   6 +-
 app/web/app.js                                | 121 +--
 app/web/index.html                            |   8 +-
 app/web/test.html                             |  12 +-
 build.xml                                     |   3 +-
 changelog.txt                                 |   4 +
 jsoneditor/examples/02_viewer.html            |   2 +-
 jsoneditor/js/appendnode.js                   |  99 +--
 jsoneditor/js/contextmenu.js                  |  84 +-
 jsoneditor/js/highlighter.js                  |  40 +-
 jsoneditor/js/history.js                      |  44 +-
 jsoneditor/js/jsoneditor.js                   | 762 +++---------------
 jsoneditor/js/module.js                       |  23 +-
 jsoneditor/js/node.js                         | 415 +++++-----
 jsoneditor/js/searchbox.js                    |  55 +-
 .../js/{jsonformatter.js => texteditor.js}    | 110 +--
 jsoneditor/js/treeeditor.js                   | 761 +++++++++++++++++
 jsoneditor/js/util.js                         | 109 +--
 18 files changed, 1383 insertions(+), 1275 deletions(-)
 rename jsoneditor/js/{jsonformatter.js => texteditor.js} (75%)
 create mode 100644 jsoneditor/js/treeeditor.js

diff --git a/app/web/app.css b/app/web/app.css
index 7cf5d08..e7987e5 100644
--- a/app/web/app.css
+++ b/app/web/app.css
@@ -147,7 +147,7 @@ span.header-light {
     overflow: hidden;
 }
 
-#jsonformatter, #jsoneditor {
+#codeEditor, #treeEditor {
     height: 100%;
     width: 400px;
 
@@ -156,12 +156,12 @@ span.header-light {
     box-sizing: border-box;
 }
 
-#jsonformatter {
+#codeEditor {
     float: left;
     padding: 15px 0 15px 15px;
 }
 
-#jsoneditor {
+#treeEditor {
     float: left;
     padding: 15px 15px 15px 0;
 }
diff --git a/app/web/app.js b/app/web/app.js
index 5a0b123..e2f2ab4 100644
--- a/app/web/app.js
+++ b/app/web/app.js
@@ -26,21 +26,21 @@
  * Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @date    2013-03-08
+ * @date    2013-04-30
  */
 
 
-var editor = null;
-var formatter = null;
+var treeEditor = null;
+var codeEditor = null;
 
 var app = {};
 
 /**
  * Get the JSON from the code editor and load it in the tree editor
  */
-app.CodeToEditor = function() {
+app.CodeToTree = function() {
     try {
-        editor.set(formatter.get());
+        treeEditor.set(codeEditor.get());
     }
     catch (err) {
          app.notify.showError(err);
@@ -50,9 +50,9 @@ app.CodeToEditor = function() {
 /**
  * Get the JSON from the tree editor and load it into the code editor
  */
-app.editorToCode = function () {
+app.treeToCode = function () {
     try {
-        formatter.set(editor.get());
+        codeEditor.set(treeEditor.get());
     }
     catch (err) {
         app.notify.showError(err);
@@ -60,7 +60,7 @@ app.editorToCode = function () {
 };
 
 /**
- * Load the interface (editor, formatter, splitter)
+ * Load the interface (tree editor, code editor, splitter)
  */
 // TODO: split the method load in multiple methods, it is too large
 app.load = function() {
@@ -94,31 +94,32 @@ app.load = function() {
             }
         }
 
-        // Store whether editor or formatter is last changed
+        // Store whether tree editor or code editor is last changed
         app.lastChanged = undefined;
 
-        // formatter
-        var container = document.getElementById("jsonformatter");
-        formatter = new jsoneditor.JSONFormatter(container, {
+        // code editor
+        var container = document.getElementById("codeEditor");
+        codeEditor = new jsoneditor.JSONEditor(container, {
             mode: 'code',
             change: function () {
-                app.lastChanged = formatter;
+                app.lastChanged = codeEditor;
             }
         });
-        formatter.set(json);
-        formatter.onError = function (err) {
+        codeEditor.set(json);
+        codeEditor.onError = function (err) {
             app.notify.showError(err);
         };
 
-        // editor
-        container = document.getElementById("jsoneditor");
-        editor = new jsoneditor.JSONEditor(container, {
+        // tree editor
+        container = document.getElementById("treeEditor");
+        treeEditor = new jsoneditor.JSONEditor(container, {
+            mode: 'tree',
             change: function () {
-                app.lastChanged = editor;
+                app.lastChanged = treeEditor;
             }
         });
-        editor.set(json);
-        // TODO: automatically synchronize data of formatter and editor? (editor should keep its state though)
+        treeEditor.set(json);
+        // TODO: automatically synchronize data of code and tree editor? (tree editor should keep its state though)
 
         // splitter
         app.splitter = new Splitter({
@@ -128,18 +129,18 @@ app.load = function() {
             }
         });
 
-        // button Code-to-Editor
-        var toEditor = document.getElementById('toEditor');
-        toEditor.onclick = function () {
+        // button Code-to-Tree
+        var toTree = document.getElementById('toTree');
+        toTree.onclick = function () {
             this.focus();
-            app.CodeToEditor();
+            app.CodeToTree();
         };
 
-        // button Editor-to-Dode
+        // button Tree-to-Code
         var toCode = document.getElementById('toCode');
         toCode.onclick = function () {
             this.focus();
-            app.editorToCode();
+            app.treeToCode();
         };
 
         // web page resize handler
@@ -186,8 +187,8 @@ app.load = function() {
         var domSave = document.getElementById('save');
         domSave.onclick = app.saveFile;
 
-        // set focus on the formatter
-        formatter.focus();
+        // set focus on the code editor
+        codeEditor.focus();
 
         // enforce FireFox to not do spell checking on any input field
         document.body.spellcheck = false;
@@ -203,14 +204,14 @@ app.load = function() {
  */
 app.openCallback = function (err, data) {
     if (!err) {
-        if (data != undefined) {
-            formatter.setText(data);
+        if (data != null) {
+            codeEditor.setText(data);
             try {
                 var json = jsoneditor.util.parse(data);
-                editor.set(json);
+                treeEditor.set(json);
             }
             catch (err) {
-                editor.set({});
+                treeEditor.set({});
                 app.notify.showError(err);
             }
         }
@@ -245,20 +246,20 @@ app.openUrl = function (url) {
  * Open a file explorer to save the file.
  */
 app.saveFile = function () {
-    // first synchronize the editors and formatters contents
-    if (app.lastChanged == editor) {
-        app.editorToCode();
+    // first synchronize both editors contents
+    if (app.lastChanged == treeEditor) {
+        app.treeToCode();
     }
-    /* TODO: also sync from formatter to editor? will clear the history ...
-    if (app.lastChanged == formatter) {
+    /* TODO: also sync from code to tree editor? will clear the history ...
+    if (app.lastChanged == codeEditor) {
         app.CodeToEditor();
     }
     */
     app.lastChanged = undefined;
 
-    // save the text from the formatter
+    // save the text from the code editor
     // TODO: show a 'saving...' notification
-    var data = formatter.getText();
+    var data = codeEditor.getText();
     app.retriever.saveFile(data, function (err) {
         if (err) {
             app.notify.showError(err);
@@ -271,14 +272,14 @@ app.saveFile = function () {
  */
 app.clearFile = function () {
     var json = {};
-    formatter.set(json);
-    editor.set(json);
+    codeEditor.set(json);
+    treeEditor.set(json);
 };
 
 app.resize = function() {
     var domMenu = document.getElementById('menu');
-    var domEditor = document.getElementById('jsoneditor');
-    var domFormatter = document.getElementById('jsonformatter');
+    var domTreeEditor = document.getElementById('treeEditor');
+    var domCodeEditor = document.getElementById('codeEditor');
     var domSplitter = document.getElementById('splitter');
     var domSplitterButtons = document.getElementById('buttons');
     var domSplitterDrag = document.getElementById('drag');
@@ -297,27 +298,27 @@ app.resize = function() {
 
         // calculate horizontal splitter position
         var value = app.splitter.getValue();
-        var showFormatter = (value > 0);
-        var showEditor = (value < 1);
-        var showButtons = showFormatter && showEditor;
+        var showCodeEditor = (value > 0);
+        var showTreeEditor = (value < 1);
+        var showButtons = showCodeEditor && showTreeEditor;
         domSplitterButtons.style.display = showButtons ? '' : 'none';
 
         var splitterWidth = domSplitter.clientWidth;
         var splitterLeft;
-        if (!showFormatter) {
-            // formatter not visible
+        if (!showCodeEditor) {
+            // code editor not visible
             splitterLeft = 0;
             domSplitterDrag.innerHTML = '&rsaquo;';
             domSplitterDrag.title = 'Drag right to show the code editor';
         }
-        else if (!showEditor) {
-            // editor not visible
+        else if (!showTreeEditor) {
+            // tree editor not visible
             splitterLeft = width * value - splitterWidth;
             domSplitterDrag.innerHTML = '&lsaquo;';
             domSplitterDrag.title = 'Drag left to show the tree editor';
         }
         else {
-            // both editor and formatter visible
+            // both tree and code editor visible
             splitterLeft = width * value - splitterWidth / 2;
 
             // TODO: find a character with vertical dots that works on IE8 too, or use an image
@@ -326,10 +327,10 @@ app.resize = function() {
             domSplitterDrag.title = 'Drag left or right to change the width of the panels';
         }
 
-        // resize formatter
-        domFormatter.style.display = (value == 0) ? 'none' : '';
-        domFormatter.style.width = Math.max(Math.round(splitterLeft), 0) + 'px';
-        formatter.resize();
+        // resize code editor
+        domCodeEditor.style.display = (value == 0) ? 'none' : '';
+        domCodeEditor.style.width = Math.max(Math.round(splitterLeft), 0) + 'px';
+        codeEditor.resize();
 
         // resize the splitter
         domSplitterDrag.style.height = (domSplitter.clientHeight -
@@ -337,12 +338,12 @@ app.resize = function() {
             (showButtons ? margin : 0)) + 'px';
         domSplitterDrag.style.lineHeight = domSplitterDrag.style.height;
 
-        // resize editor
+        // resize tree editor
         // the width has a -1 to prevent the width from being just half a pixel
         // wider than the window, causing the content elements to wrap...
-        domEditor.style.display = (value == 1) ? 'none' : '';
-        domEditor.style.left = Math.round(splitterLeft + splitterWidth) + 'px';
-        domEditor.style.width = Math.max(Math.round(width - splitterLeft - splitterWidth - 2), 0) + 'px';
+        domTreeEditor.style.display = (value == 1) ? 'none' : '';
+        domTreeEditor.style.left = Math.round(splitterLeft + splitterWidth) + 'px';
+        domTreeEditor.style.width = Math.max(Math.round(width - splitterLeft - splitterWidth - 2), 0) + 'px';
     }
 
     // align main menu with ads
diff --git a/app/web/index.html b/app/web/index.html
index d4e1a45..2fae00c 100644
--- a/app/web/index.html
+++ b/app/web/index.html
@@ -123,17 +123,17 @@
 
 <div id="auto">
     <div id="contents">
-        <div id="jsonformatter"></div>
+        <div id="codeEditor"></div>
 
         <div id="splitter">
             <div id="buttons">
                 <div>
-                    <button id="toEditor" class="convert" title="Code to editor">
+                    <button id="toTree" class="convert" title="Copy code to tree editor">
                         <div class="convert-right"></div>
                     </button>
                 </div>
                 <div>
-                    <button id="toCode" class="convert" title="Editor to code">
+                    <button id="toCode" class="convert" title="Copy tree to code editor">
                         <div class="convert-left"></div>
                     </button>
                 </div>
@@ -142,7 +142,7 @@
             </div>
         </div>
 
-        <div id="jsoneditor"></div>
+        <div id="treeEditor"></div>
 
         <script type="text/javascript">
             app.load();
diff --git a/app/web/test.html b/app/web/test.html
index 9afefb1..b124c3d 100644
--- a/app/web/test.html
+++ b/app/web/test.html
@@ -56,7 +56,8 @@
     -->
 
     <script type="text/javascript" src="../../jsoneditor/js/jsoneditor.js"></script>
-    <script type="text/javascript" src="../../jsoneditor/js/jsonformatter.js"></script>
+    <script type="text/javascript" src="../../jsoneditor/js/treeeditor.js"></script>
+    <script type="text/javascript" src="../../jsoneditor/js/texteditor.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/node.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/appendnode.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/contextmenu.js"></script>
@@ -64,6 +65,7 @@
     <script type="text/javascript" src="../../jsoneditor/js/searchbox.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/highlighter.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/util.js"></script>
+    <script type="text/javascript" src="../../jsoneditor/js/module.js"></script>
     <script type="text/javascript" src="queryparams.js"></script>
     <script type="text/javascript" src="ajax.js"></script>
     <script type="text/javascript" src="fileretriever.js"></script>
@@ -153,17 +155,17 @@
 
 <div id="auto">
     <div id="contents">
-        <div id="jsonformatter"></div>
+        <div id="codeEditor"></div>
 
         <div id="splitter">
             <div id="buttons">
                 <div>
-                    <button id="toEditor" class="convert" title="JSON to Editor">
+                    <button id="toTree" class="convert" title="Copy code to tree editor">
                         <div class="convert-right"></div>
                     </button>
                 </div>
                 <div>
-                    <button id="toCode" class="convert" title="Editor to JSON">
+                    <button id="toCode" class="convert" title="Copy tree to code editor">
                         <div class="convert-left"></div>
                     </button>
                 </div>
@@ -172,7 +174,7 @@
             </div>
         </div>
 
-        <div id="jsoneditor"></div>
+        <div id="treeEditor"></div>
 
         <script type="text/javascript">
             app.load();
diff --git a/build.xml b/build.xml
index e98fceb..71b1bb5 100644
--- a/build.xml
+++ b/build.xml
@@ -61,7 +61,8 @@
         <!-- concatenate the javascript files -->
         <concat destfile="${jsoneditor}/tmp.js">
             <fileset dir="${js_src}" includes="jsoneditor.js"/>
-            <fileset dir="${js_src}" includes="jsonformatter.js"/>
+            <fileset dir="${js_src}" includes="treeeditor.js"/>
+            <fileset dir="${js_src}" includes="texteditor.js"/>
             <fileset dir="${js_src}" includes="node.js"/>
             <fileset dir="${js_src}" includes="appendnode.js"/>
             <fileset dir="${js_src}" includes="contextmenu.js"/>
diff --git a/changelog.txt b/changelog.txt
index fafb38a..09b6d7e 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -2,6 +2,10 @@
 
 http://jsoneditoronline.org
 
+## not yet released, version 2.2.0
+
+- Unified JSONFormatter and JSONEditor in one editor with a switchable mode.
+
 
 ## 2013-03-11, version 2.1.1
 
diff --git a/jsoneditor/examples/02_viewer.html b/jsoneditor/examples/02_viewer.html
index a302bcc..48642a3 100644
--- a/jsoneditor/examples/02_viewer.html
+++ b/jsoneditor/examples/02_viewer.html
@@ -23,7 +23,7 @@
         // create the editor
         var container = document.getElementById("jsoneditor");
         var options = {
-            mode: "viewer"
+            mode: "view"
         };
         var json = {
             "array": [1, 2, 3],
diff --git a/jsoneditor/js/appendnode.js b/jsoneditor/js/appendnode.js
index 3f06d1e..f4309c5 100644
--- a/jsoneditor/js/appendnode.js
+++ b/jsoneditor/js/appendnode.js
@@ -1,45 +1,23 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * @constructor jsoneditor.AppendNode
- * @extends jsoneditor.Node
- * @param {jsoneditor.JSONEditor} editor
+ * @constructor AppendNode
+ * @extends Node
+ * @param {TreeEditor} editor
  * Create a new AppendNode. This is a special node which is created at the
  * end of the list with childs for an object or array
  */
-jsoneditor.AppendNode = function (editor) {
+function AppendNode (editor) {
+    /** @type {TreeEditor} */
     this.editor = editor;
     this.dom = {};
-};
+}
 
-jsoneditor.AppendNode.prototype = new jsoneditor.Node();
+AppendNode.prototype = new Node();
 
 /**
  * Return a table row with an append button.
  * @return {Element} dom   TR element
  */
-jsoneditor.AppendNode.prototype.getDom = function () {
-    // TODO: do not create the DOM for the appendNode when in viewer mode
+AppendNode.prototype.getDom = function () {
     // TODO: implement a new solution for the append node
     var dom = this.dom;
 
@@ -52,26 +30,21 @@ jsoneditor.AppendNode.prototype.getDom = function () {
     trAppend.node = this;
     dom.tr = trAppend;
 
-    // when in viewer mode, don't create the contents for the append node
-    // but return here.
-    if (!this.editor.mode.editor) {
-        return trAppend;
-    }
-
     // TODO: consistent naming
 
-    // a cell for the dragarea column
-    var tdDrag = document.createElement('td');
-    dom.tdDrag = tdDrag;
+    if (this.editor.mode.edit) {
+        // a cell for the dragarea column
+        dom.tdDrag = document.createElement('td');
 
-    // create context menu
-    var tdMenu = document.createElement('td');
-    var menu = document.createElement('button');
-    menu.className = 'contextmenu';
-    menu.title = 'Click to open the actions menu (Ctrl+M)';
-    dom.menu = menu;
-    dom.tdMenu = tdMenu;
-    tdMenu.appendChild(dom.menu);
+        // create context menu
+        var tdMenu = document.createElement('td');
+        dom.tdMenu = tdMenu;
+        var menu = document.createElement('button');
+        menu.className = 'contextmenu';
+        menu.title = 'Click to open the actions menu (Ctrl+M)';
+        dom.menu = menu;
+        tdMenu.appendChild(dom.menu);
+    }
 
     // a cell for the contents (showing text 'empty')
     var tdAppend = document.createElement('td');
@@ -90,7 +63,7 @@ jsoneditor.AppendNode.prototype.getDom = function () {
 /**
  * Update the HTML dom of the Node
  */
-jsoneditor.AppendNode.prototype.updateDom = function () {
+AppendNode.prototype.updateDom = function () {
     var dom = this.dom;
     var tdAppend = dom.td;
     if (tdAppend) {
@@ -108,15 +81,23 @@ jsoneditor.AppendNode.prototype.updateDom = function () {
     var trAppend = dom.tr;
     if (!this.isVisible()) {
         if (dom.tr.firstChild) {
-            trAppend.removeChild(dom.tdDrag);
-            trAppend.removeChild(dom.tdMenu);
+            if (dom.tdDrag) {
+                trAppend.removeChild(dom.tdDrag);
+            }
+            if (dom.tdMenu) {
+                trAppend.removeChild(dom.tdMenu);
+            }
             trAppend.removeChild(tdAppend);
         }
     }
     else {
         if (!dom.tr.firstChild) {
-            trAppend.appendChild(dom.tdDrag);
-            trAppend.appendChild(dom.tdMenu);
+            if (dom.tdDrag) {
+                trAppend.appendChild(dom.tdDrag);
+            }
+            if (dom.tdMenu) {
+                trAppend.appendChild(dom.tdMenu);
+            }
             trAppend.appendChild(tdAppend);
         }
     }
@@ -127,7 +108,7 @@ jsoneditor.AppendNode.prototype.updateDom = function () {
  * the AppendNode is visible when its parent has no childs (i.e. is empty).
  * @return {boolean} isVisible
  */
-jsoneditor.AppendNode.prototype.isVisible = function () {
+AppendNode.prototype.isVisible = function () {
     return (this.parent.childs.length == 0);
 };
 
@@ -137,9 +118,9 @@ jsoneditor.AppendNode.prototype.isVisible = function () {
  * @param {function} [onClose]   Callback method called when the context menu
  *                               is being closed.
  */
-jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
+AppendNode.prototype.showContextMenu = function (anchor, onClose) {
     var node = this;
-    var titles = jsoneditor.Node.TYPE_TITLES;
+    var titles = Node.TYPE_TITLES;
     var items = [
         // create append button
         {
@@ -187,7 +168,7 @@ jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
         }
     ];
 
-    var menu = new jsoneditor.ContextMenu(items, {close: onClose});
+    var menu = new ContextMenu(items, {close: onClose});
     menu.show(anchor);
 };
 
@@ -195,7 +176,7 @@ jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
  * Handle an event. The event is catched centrally by the editor
  * @param {Event} event
  */
-jsoneditor.AppendNode.prototype.onEvent = function (event) {
+AppendNode.prototype.onEvent = function (event) {
     var type = event.type;
     var target = event.target || event.srcElement;
     var dom = this.dom;
@@ -216,9 +197,9 @@ jsoneditor.AppendNode.prototype.onEvent = function (event) {
         var highlighter = this.editor.highlighter;
         highlighter.highlight(this.parent);
         highlighter.lock();
-        jsoneditor.util.addClassName(dom.menu, 'selected');
+        util.addClassName(dom.menu, 'selected');
         this.showContextMenu(dom.menu, function () {
-            jsoneditor.util.removeClassName(dom.menu, 'selected');
+            util.removeClassName(dom.menu, 'selected');
             highlighter.unlock();
             highlighter.unhighlight();
         });
diff --git a/jsoneditor/js/contextmenu.js b/jsoneditor/js/contextmenu.js
index d1165ff..430eac7 100644
--- a/jsoneditor/js/contextmenu.js
+++ b/jsoneditor/js/contextmenu.js
@@ -1,25 +1,3 @@
-/**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
 /**
  * A context menu
  * @param {Object[]} items    Array containing the menu structure
@@ -29,7 +7,7 @@ var jsoneditor = jsoneditor || {};
  *                                                context menu is being closed.
  * @constructor
  */
-jsoneditor.ContextMenu = function (items, options) {
+function ContextMenu (items, options) {
     this.dom = {};
 
     var me = this;
@@ -162,14 +140,14 @@ jsoneditor.ContextMenu = function (items, options) {
         var height = (items.length + (item.submenu ? item.submenu.length : 0)) * 24;
         me.maxHeight = Math.max(me.maxHeight, height);
     });
-};
+}
 
 /**
  * Get the currently visible buttons
  * @return {Array.<HTMLElement>} buttons
  * @private
  */
-jsoneditor.ContextMenu.prototype._getVisibleButtons = function () {
+ContextMenu.prototype._getVisibleButtons = function () {
     var buttons = [];
     var me = this;
     this.dom.items.forEach(function (item) {
@@ -192,23 +170,23 @@ jsoneditor.ContextMenu.prototype._getVisibleButtons = function () {
 };
 
 // currently displayed context menu, a singleton. We may only have one visible context menu
-jsoneditor.ContextMenu.visibleMenu = undefined;
+ContextMenu.visibleMenu = undefined;
 
 /**
  * Attach the menu to an anchor
  * @param {HTMLElement} anchor
  */
-jsoneditor.ContextMenu.prototype.show = function (anchor) {
+ContextMenu.prototype.show = function (anchor) {
     this.hide();
 
     // calculate whether the menu fits below the anchor
-    var windowHeight = jsoneditor.util.getWindowHeight();
+    var windowHeight = util.getWindowHeight();
     var anchorHeight = anchor.offsetHeight;
     var menuHeight = this.maxHeight;
 
     // position the menu
-    var left = jsoneditor.util.getAbsoluteLeft(anchor);
-    var top = jsoneditor.util.getAbsoluteTop(anchor);
+    var left = util.getAbsoluteLeft(anchor);
+    var top = util.getAbsoluteTop(anchor);
     if (top + anchorHeight + menuHeight < windowHeight) {
         // display the menu below the anchor
         this.dom.menu.style.left = left + 'px';
@@ -228,45 +206,45 @@ jsoneditor.ContextMenu.prototype.show = function (anchor) {
     // create and attach event listeners
     var me = this;
     var list = this.dom.list;
-    this.eventListeners.mousedown = jsoneditor.util.addEventListener(
+    this.eventListeners.mousedown = util.addEventListener(
         document, 'mousedown', function (event) {
             // hide menu on click outside of the menu
             event = event || window.event;
             var target = event.target || event.srcElement;
             if ((target != list) && !me._isChildOf(target, list)) {
                 me.hide();
-                jsoneditor.util.stopPropagation(event);
-                jsoneditor.util.preventDefault(event);
+                util.stopPropagation(event);
+                util.preventDefault(event);
             }
         });
-    this.eventListeners.mousewheel = jsoneditor.util.addEventListener(
+    this.eventListeners.mousewheel = util.addEventListener(
         document, 'mousewheel', function () {
             // hide the menu on mouse scroll
-            jsoneditor.util.stopPropagation(event);
-            jsoneditor.util.preventDefault(event);
+            util.stopPropagation(event);
+            util.preventDefault(event);
         });
-    this.eventListeners.keydown = jsoneditor.util.addEventListener(
+    this.eventListeners.keydown = util.addEventListener(
         document, 'keydown', function (event) {
             me._onKeyDown(event);
         });
 
     // move focus to the first button in the context menu
-    this.selection = jsoneditor.util.getSelection();
+    this.selection = util.getSelection();
     this.anchor = anchor;
     setTimeout(function () {
         me.dom.focusButton.focus();
     }, 0);
 
-    if (jsoneditor.ContextMenu.visibleMenu) {
-        jsoneditor.ContextMenu.visibleMenu.hide();
+    if (ContextMenu.visibleMenu) {
+        ContextMenu.visibleMenu.hide();
     }
-    jsoneditor.ContextMenu.visibleMenu = this;
+    ContextMenu.visibleMenu = this;
 };
 
 /**
  * Hide the context menu if visible
  */
-jsoneditor.ContextMenu.prototype.hide = function () {
+ContextMenu.prototype.hide = function () {
     // remove the menu from the DOM
     if (this.dom.menu.parentNode) {
         this.dom.menu.parentNode.removeChild(this.dom.menu);
@@ -281,14 +259,14 @@ jsoneditor.ContextMenu.prototype.hide = function () {
         if (this.eventListeners.hasOwnProperty(name)) {
             var fn = this.eventListeners[name];
             if (fn) {
-                jsoneditor.util.removeEventListener(document, name, fn);
+                util.removeEventListener(document, name, fn);
             }
             delete this.eventListeners[name];
         }
     }
 
-    if (jsoneditor.ContextMenu.visibleMenu == this) {
-        jsoneditor.ContextMenu.visibleMenu = undefined;
+    if (ContextMenu.visibleMenu == this) {
+        ContextMenu.visibleMenu = undefined;
     }
 };
 
@@ -298,7 +276,7 @@ jsoneditor.ContextMenu.prototype.hide = function () {
  * @param {Object} domItem
  * @private
  */
-jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
+ContextMenu.prototype._onExpandItem = function (domItem) {
     var me = this;
     var alreadyVisible = (domItem == this.expandedItem);
 
@@ -311,7 +289,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
         setTimeout(function () {
             if (me.expandedItem != expandedItem) {
                 expandedItem.ul.style.display = '';
-                jsoneditor.util.removeClassName(expandedItem.ul.parentNode, 'selected');
+                util.removeClassName(expandedItem.ul.parentNode, 'selected');
             }
         }, 300); // timeout duration must match the css transition duration
         this.expandedItem = undefined;
@@ -327,7 +305,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
                 ul.style.padding = '5px 10px';
             }
         }, 0);
-        jsoneditor.util.addClassName(ul.parentNode, 'selected');
+        util.addClassName(ul.parentNode, 'selected');
         this.expandedItem = domItem;
     }
 };
@@ -337,7 +315,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
  * @param {Event} event
  * @private
  */
-jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
+ContextMenu.prototype._onKeyDown = function (event) {
     event = event || window.event;
     var target = event.target || event.srcElement;
     var keynum = event.which || event.keyCode;
@@ -349,7 +327,7 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
 
         // restore previous selection and focus
         if (this.selection) {
-            jsoneditor.util.setSelection(this.selection);
+            util.setSelection(this.selection);
         }
         if (this.anchor) {
             this.anchor.focus();
@@ -437,8 +415,8 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
     // TODO: arrow left and right
 
     if (handled) {
-        jsoneditor.util.stopPropagation(event);
-        jsoneditor.util.preventDefault(event);
+        util.stopPropagation(event);
+        util.preventDefault(event);
     }
 };
 
@@ -448,7 +426,7 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
  * @param {Element} parent
  * @return {boolean} isChild
  */
-jsoneditor.ContextMenu.prototype._isChildOf = function (child, parent) {
+ContextMenu.prototype._isChildOf = function (child, parent) {
     var e = child.parentNode;
     while (e) {
         if (e == parent) {
diff --git a/jsoneditor/js/highlighter.js b/jsoneditor/js/highlighter.js
index 46bdfbb..b321256 100644
--- a/jsoneditor/js/highlighter.js
+++ b/jsoneditor/js/highlighter.js
@@ -1,39 +1,17 @@
-/**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
 /**
  * The highlighter can highlight/unhighlight a node, and
  * animate the visibility of a context menu.
- * @constructor jsoneditor.Highlighter
+ * @constructor Highlighter
  */
-jsoneditor.Highlighter = function () {
+function Highlighter () {
     this.locked = false;
-};
+}
 
 /**
  * Hightlight given node and its childs
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  */
-jsoneditor.Highlighter.prototype.highlight = function (node) {
+Highlighter.prototype.highlight = function (node) {
     if (this.locked) {
         return;
     }
@@ -57,7 +35,7 @@ jsoneditor.Highlighter.prototype.highlight = function (node) {
  * Unhighlight currently highlighted node.
  * Will be done after a delay
  */
-jsoneditor.Highlighter.prototype.unhighlight = function () {
+Highlighter.prototype.unhighlight = function () {
     if (this.locked) {
         return;
     }
@@ -81,7 +59,7 @@ jsoneditor.Highlighter.prototype.unhighlight = function () {
  * Cancel an unhighlight action (if before the timeout of the unhighlight action)
  * @private
  */
-jsoneditor.Highlighter.prototype._cancelUnhighlight = function () {
+Highlighter.prototype._cancelUnhighlight = function () {
     if (this.unhighlightTimer) {
         clearTimeout(this.unhighlightTimer);
         this.unhighlightTimer = undefined;
@@ -92,13 +70,13 @@ jsoneditor.Highlighter.prototype._cancelUnhighlight = function () {
  * Lock highlighting or unhighlighting nodes.
  * methods highlight and unhighlight do not work while locked.
  */
-jsoneditor.Highlighter.prototype.lock = function () {
+Highlighter.prototype.lock = function () {
     this.locked = true;
 };
 
 /**
  * Unlock highlighting or unhighlighting nodes
  */
-jsoneditor.Highlighter.prototype.unlock = function () {
+Highlighter.prototype.unlock = function () {
     this.locked = false;
 };
diff --git a/jsoneditor/js/history.js b/jsoneditor/js/history.js
index 5103873..ac93be7 100644
--- a/jsoneditor/js/history.js
+++ b/jsoneditor/js/history.js
@@ -1,31 +1,9 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * @constructor jsoneditor.History
+ * @constructor History
  * Store action history, enables undo and redo
- * @param {jsoneditor.JSONEditor} editor
+ * @param {JSONEditor} editor
  */
-jsoneditor.History = function (editor) {
+function History (editor) {
     this.editor = editor;
     this.clear();
 
@@ -125,13 +103,13 @@ jsoneditor.History = function (editor) {
         // TODO: restore the original caret position and selection with each undo
         // TODO: implement history for actions "expand", "collapse", "scroll", "setDocument"
     };
-};
+}
 
 /**
  * The method onChange is executed when the History is changed, and can
  * be overloaded.
  */
-jsoneditor.History.prototype.onChange = function () {};
+History.prototype.onChange = function () {};
 
 /**
  * Add a new action to the history
@@ -144,7 +122,7 @@ jsoneditor.History.prototype.onChange = function () {};
  *                         value are provided). params contains all information
  *                         needed to undo or redo the action.
  */
-jsoneditor.History.prototype.add = function (action, params) {
+History.prototype.add = function (action, params) {
     this.index++;
     this.history[this.index] = {
         'action': action,
@@ -164,7 +142,7 @@ jsoneditor.History.prototype.add = function (action, params) {
 /**
  * Clear history
  */
-jsoneditor.History.prototype.clear = function () {
+History.prototype.clear = function () {
     this.history = [];
     this.index = -1;
 
@@ -176,7 +154,7 @@ jsoneditor.History.prototype.clear = function () {
  * Check if there is an action available for undo
  * @return {Boolean} canUndo
  */
-jsoneditor.History.prototype.canUndo = function () {
+History.prototype.canUndo = function () {
     return (this.index >= 0);
 };
 
@@ -184,14 +162,14 @@ jsoneditor.History.prototype.canUndo = function () {
  * Check if there is an action available for redo
  * @return {Boolean} canRedo
  */
-jsoneditor.History.prototype.canRedo = function () {
+History.prototype.canRedo = function () {
     return (this.index < this.history.length - 1);
 };
 
 /**
  * Undo the last action
  */
-jsoneditor.History.prototype.undo = function () {
+History.prototype.undo = function () {
     if (this.canUndo()) {
         var obj = this.history[this.index];
         if (obj) {
@@ -216,7 +194,7 @@ jsoneditor.History.prototype.undo = function () {
 /**
  * Redo the last action
  */
-jsoneditor.History.prototype.redo = function () {
+History.prototype.redo = function () {
     if (this.canRedo()) {
         this.index++;
 
diff --git a/jsoneditor/js/jsoneditor.js b/jsoneditor/js/jsoneditor.js
index 4e718f2..ec4e407 100644
--- a/jsoneditor/js/jsoneditor.js
+++ b/jsoneditor/js/jsoneditor.js
@@ -1,32 +1,10 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * jsoneditor.JSONEditor
+ * @constructor JSONEditor
  * @param {Element} container    Container element
  * @param {Object}  [options]    Object with options. available options:
  *                               {String} mode      Editor mode. Available values:
- *                                                  'editor' (default), 'viewer',
- *                                                  and 'form'.
+ *                                                  'tree' (default), 'view',
+ *                                                  'form', 'text', and 'code'.
  *                               {Boolean} search   Enable search box.
  *                                                  True by default
  *                               {Boolean} history  Enable history (undo/redo).
@@ -34,689 +12,155 @@ var jsoneditor = jsoneditor || {};
  *                               {function} change  Callback method, triggered
  *                                                  on change of contents
  *                               {String} name      Field name for the root node.
+ *                               {Number} indentation   Number of indentation
+ *                                                      spaces. 4 by default.
  * @param {Object | undefined} json JSON object
  */
-jsoneditor.JSONEditor = function (container, options, json) {
-    if (!(this instanceof jsoneditor.JSONEditor)) {
+function JSONEditor (container, options, json) {
+    if (!(this instanceof JSONEditor)) {
         throw new Error('JSONEditor constructor called without "new".');
     }
 
-    // check availability of JSON parser (not available in IE7 and older)
-    if (typeof(JSON) == 'undefined') {
-        throw new Error ('Your browser does not support JSON. \n\n' +
-            'Please install the newest version of your browser.\n' +
-            '(all modern browsers support JSON).');
+    if (arguments.length) {
+        this._create(container, options, json);
     }
+}
 
-    if (!container) {
-        throw new Error('No container element provided.');
-    }
+/**
+ * Configuration for all registered modes. Example:
+ * {
+ *     tree: {
+ *         editor: TreeEditor,
+ *         data: 'json'
+ *     },
+ *     text: {
+ *         editor: TextEditor,
+ *         data: 'text'
+ *     }
+ * }
+ *
+ * @type { Object.<String, {editor: Object, data: String} > }
+ */
+JSONEditor.modes = {};
+
+/**
+ * Create the JSONEditor
+ * @param {Element} container    Container element
+ * @param {Object}  [options]    See description in constructor
+ * @param {Object | undefined} json JSON object
+ * @private
+ */
+JSONEditor.prototype._create = function (container, options, json) {
     this.container = container;
-    this.dom = {};
-    this.highlighter = new jsoneditor.Highlighter();
-    this.selection = undefined; // will hold the last input selection
+    this.options = options || {};
+    this.json = json || {};
 
-    this._setOptions(options);
-
-    if (this.options.history && !this.mode.viewer) {
-        this.history = new jsoneditor.History(this);
-    }
-
-    this._createFrame();
-    this._createTable();
-
-    this.set(json || {});
+    var mode = this.options.mode || 'tree';
+    this.setMode(mode);
 };
 
 /**
- * Initialize and set default options
- * @param {Object}  [options]    Object with options. available options:
- *                               {String} mode      Editor mode. Available values:
- *                                                  'editor' (default), 'viewer',
- *                                                  and 'form'.
- *                               {Boolean} search   Enable search box.
- *                                                  True by default.
- *                               {Boolean} history  Enable history (undo/redo).
- *                                                  True by default.
- *                               {function} change  Callback method, triggered
- *                                                  on change of contents.
- *                               {String} name      Field name for the root node.
+ * Detach the editor from the DOM
  * @private
  */
-jsoneditor.JSONEditor.prototype._setOptions = function (options) {
-    this.options = {
-        search: true,
-        history: true,
-        mode: 'editor',
-        name: undefined   // field name of root node
-    };
-
-    // copy all options
-    if (options) {
-        for (var prop in options) {
-            if (options.hasOwnProperty(prop)) {
-                this.options[prop] = options[prop];
-            }
-        }
-
-        // check for deprecated options
-        if (options['enableSearch']) {
-            // deprecated since version 1.6.0, 2012-11-03
-            this.options.search = options['enableSearch'];
-            console.log('WARNING: Option "enableSearch" is deprecated. Use "search" instead.');
-        }
-        if (options['enableHistory']) {
-            // deprecated since version 1.6.0, 2012-11-03
-            this.options.history = options['enableHistory'];
-            console.log('WARNING: Option "enableHistory" is deprecated. Use "history" instead.');
-        }
-    }
-
-    // interpret the mode options
-    this.mode = {
-        editor: (this.options.mode != 'viewer' && this.options.mode != 'form'),
-        viewer: (this.options.mode == 'viewer'),
-        form: (this.options.mode == 'form')
-    };
-};
-
-// node currently being edited
-jsoneditor.JSONEditor.focusNode = undefined;
+JSONEditor.prototype._delete = function () {};
 
 /**
  * Set JSON object in editor
  * @param {Object | undefined} json      JSON data
- * @param {String}             [name]    Optional field name for the root node.
- *                                       Can also be set using setName(name).
  */
-jsoneditor.JSONEditor.prototype.set = function (json, name) {
-    // adjust field name for root node
-    if (name) {
-        this.options.name = name;
-    }
-
-    // verify if json is valid JSON, ignore when a function
-    if (json instanceof Function || (json === undefined)) {
-        this.clear();
-    }
-    else {
-        this.content.removeChild(this.table);  // Take the table offline
-
-        // replace the root node
-        var params = {
-            'field': this.options.name,
-            'value': json
-        };
-        var node = new jsoneditor.Node(this, params);
-        this._setRoot(node);
-
-        // expand
-        var recurse = false;
-        this.node.expand(recurse);
-
-        this.content.appendChild(this.table);  // Put the table online again
-    }
-
-    // TODO: maintain history, store last state and previous document
-    if (this.history) {
-        this.history.clear();
-    }
+JSONEditor.prototype.set = function (json) {
+    this.json = json;
 };
 
 /**
- * Get JSON object from editor
- * @return {Object | undefined} json
+ * Get JSON from the editor
+ * @returns {Object} json
  */
-jsoneditor.JSONEditor.prototype.get = function () {
-    // remove focus from currently edited node
-    if (jsoneditor.JSONEditor.focusNode) {
-        jsoneditor.JSONEditor.focusNode.blur();
-    }
+JSONEditor.prototype.get = function () {
+    return this.json;
+};
 
-    if (this.node) {
-        return this.node.getValue();
-    }
-    else {
-        return undefined;
-    }
+/**
+ * Set string containing JSON for the editor
+ * @param {String | undefined} jsonText
+ */
+JSONEditor.prototype.setText = function (jsonText) {
+    this.json = util.parse(jsonText);
+};
+
+/**
+ * Get stringified JSON contents from the editor
+ * @returns {String} jsonText
+ */
+JSONEditor.prototype.getText = function () {
+    return JSON.stringify(this.json);
 };
 
 /**
  * Set a field name for the root node.
  * @param {String | undefined} name
  */
-jsoneditor.JSONEditor.prototype.setName = function (name) {
-    this.options.name = name;
-    if (this.node) {
-        this.node.updateField(this.options.name);
+JSONEditor.prototype.setName = function (name) {
+    if (!this.options) {
+        this.options = {};
     }
+    this.options.name = name;
 };
 
 /**
  * Get the field name for the root node.
  * @return {String | undefined} name
  */
-jsoneditor.JSONEditor.prototype.getName = function () {
-    return this.options.name;
+JSONEditor.prototype.getName = function () {
+    return this.options && this.options.name;
 };
 
 /**
- * Remove the root node from the editor
+ * Change the mode of the editor
+ * @param {String} mode
  */
-jsoneditor.JSONEditor.prototype.clear = function () {
-    if (this.node) {
-        this.node.collapse();
-        this.tbody.removeChild(this.node.getDom());
-        delete this.node;
-    }
-};
+JSONEditor.prototype.setMode = function (mode) {
+    var container = this.container,
+        options = util.extend({}, this.options),
+        data,
+        name;
 
-/**
- * Set the root node for the json editor
- * @param {jsoneditor.Node} node
- * @private
- */
-jsoneditor.JSONEditor.prototype._setRoot = function (node) {
-    this.clear();
+    options.mode = mode;
+    var config = JSONEditor.modes[mode];
+    if (config) {
+        if (config.data == 'text') {
+            // text
+            name = this.getName();
+            data = this.getText();
 
-    this.node = node;
+            this._delete();
+            util.clear(this);
+            util.extend(this, config.editor.prototype);
+            this._create(container, options);
 
-    // append to the dom
-    this.tbody.appendChild(node.getDom());
-};
-
-/**
- * Search text in all nodes
- * The nodes will be expanded when the text is found one of its childs,
- * else it will be collapsed. Searches are case insensitive.
- * @param {String} text
- * @return {Object[]} results  Array with nodes containing the search results
- *                             The result objects contains fields:
- *                             - {jsoneditor.Node} node,
- *                             - {String} elem  the dom element name where
- *                                              the result is found ('field' or
- *                                              'value')
- */
-jsoneditor.JSONEditor.prototype.search = function (text) {
-    var results;
-    if (this.node) {
-        this.content.removeChild(this.table);  // Take the table offline
-        results = this.node.search(text);
-        this.content.appendChild(this.table);  // Put the table online again
-    }
-    else {
-        results = [];
-    }
-
-    return results;
-};
-
-/**
- * Expand all nodes
- */
-jsoneditor.JSONEditor.prototype.expandAll = function () {
-    if (this.node) {
-        this.content.removeChild(this.table);  // Take the table offline
-        this.node.expand();
-        this.content.appendChild(this.table);  // Put the table online again
-    }
-};
-
-/**
- * Collapse all nodes
- */
-jsoneditor.JSONEditor.prototype.collapseAll = function () {
-    if (this.node) {
-        this.content.removeChild(this.table);  // Take the table offline
-        this.node.collapse();
-        this.content.appendChild(this.table);  // Put the table online again
-    }
-};
-
-/**
- * The method onChange is called whenever a field or value is changed, created,
- * deleted, duplicated, etc.
- * @param {String} action  Change action. Available values: "editField",
- *                         "editValue", "changeType", "appendNode",
- *                         "removeNode", "duplicateNode", "moveNode", "expand",
- *                         "collapse".
- * @param {Object} params  Object containing parameters describing the change.
- *                         The parameters in params depend on the action (for
- *                         example for "editValue" the Node, old value, and new
- *                         value are provided). params contains all information
- *                         needed to undo or redo the action.
- * @private
- */
-jsoneditor.JSONEditor.prototype._onAction = function (action, params) {
-    // add an action to the history
-    if (this.history) {
-        this.history.add(action, params);
-    }
-
-    // trigger the onChange callback
-    if (this.options.change) {
-        try {
-            this.options.change();
+            this.setName(name);
+            this.setText(data);
         }
-        catch (err) {
-            console.log('Error in change callback: ', err);
+        else {
+            // json
+            name = this.getName();
+            data = this.get();
+
+            this._delete();
+            util.clear(this);
+            util.extend(this, config.editor.prototype);
+            this._create(container, options);
+
+            this.setName(name);
+            this.set(data);
         }
-    }
-};
 
-/**
- * Start autoscrolling when given mouse position is above the top of the
- * editor contents, or below the bottom.
- * @param {Number} mouseY  Absolute mouse position in pixels
- */
-jsoneditor.JSONEditor.prototype.startAutoScroll = function (mouseY) {
-    var me = this;
-    var content = this.content;
-    var top = jsoneditor.util.getAbsoluteTop(content);
-    var height = content.clientHeight;
-    var bottom = top + height;
-    var margin = 24;
-    var interval = 50; // ms
-
-    if ((mouseY < top + margin) && content.scrollTop > 0) {
-        this.autoScrollStep = ((top + margin) - mouseY) / 3;
-    }
-    else if (mouseY > bottom - margin &&
-            height + content.scrollTop < content.scrollHeight) {
-        this.autoScrollStep = ((bottom - margin) - mouseY) / 3;
-    }
-    else {
-        this.autoScrollStep = undefined;
-    }
-
-    if (this.autoScrollStep) {
-        if (!this.autoScrollTimer) {
-            this.autoScrollTimer = setInterval(function () {
-                if (me.autoScrollStep) {
-                    content.scrollTop -= me.autoScrollStep;
-                }
-                else {
-                    me.stopAutoScroll();
-                }
-            }, interval);
+        if (typeof config.load === 'function') {
+            config.load.call(this);
         }
     }
     else {
-        this.stopAutoScroll();
+        throw new Error('Unknown mode "' + options.mode + '"');
     }
 };
-
-/**
- * Stop auto scrolling. Only applicable when scrolling
- */
-jsoneditor.JSONEditor.prototype.stopAutoScroll = function () {
-    if (this.autoScrollTimer) {
-        clearTimeout(this.autoScrollTimer);
-        delete this.autoScrollTimer;
-    }
-    if (this.autoScrollStep) {
-        delete this.autoScrollStep;
-    }
-};
-
-
-/**
- * Set the focus to an element in the JSONEditor, set text selection, and
- * set scroll position.
- * @param {Object} selection  An object containing fields:
- *                            {Element | undefined} dom     The dom element
- *                                                          which has focus
- *                            {Range | TextRange} range     A text selection
- *                            {Number} scrollTop            Scroll position
- */
-jsoneditor.JSONEditor.prototype.setSelection = function (selection) {
-    if (!selection) {
-        return;
-    }
-
-    if ('scrollTop' in selection && this.content) {
-        // TODO: animated scroll
-        this.content.scrollTop = selection.scrollTop;
-    }
-    if (selection.range) {
-        jsoneditor.util.setSelectionOffset(selection.range);
-    }
-    if (selection.dom) {
-        selection.dom.focus();
-    }
-};
-
-/**
- * Get the current focus
- * @return {Object} selection An object containing fields:
- *                            {Element | undefined} dom     The dom element
- *                                                          which has focus
- *                            {Range | TextRange} range     A text selection
- *                            {Number} scrollTop            Scroll position
- */
-jsoneditor.JSONEditor.prototype.getSelection = function () {
-    return {
-        dom: jsoneditor.JSONEditor.domFocus,
-        scrollTop: this.content ? this.content.scrollTop : 0,
-        range: jsoneditor.util.getSelectionOffset()
-    };
-};
-
-/**
- * Adjust the scroll position such that given top position is shown at 1/4
- * of the window height.
- * @param {Number} top
- * @param {function(boolean)} [callback]   Callback, executed when animation is
- *                                         finished. The callback returns true
- *                                         when animation is finished, or false
- *                                         when not.
- */
-jsoneditor.JSONEditor.prototype.scrollTo = function (top, callback) {
-    var content = this.content;
-    if (content) {
-        var editor = this;
-        // cancel any running animation
-        if (editor.animateTimeout) {
-            clearTimeout(editor.animateTimeout);
-            delete editor.animateTimeout;
-        }
-        if (editor.animateCallback) {
-            editor.animateCallback(false);
-            delete editor.animateCallback;
-        }
-
-        // calculate final scroll position
-        var height = content.clientHeight;
-        var bottom = content.scrollHeight - height;
-        var finalScrollTop = Math.min(Math.max(top - height / 4, 0), bottom);
-
-        // animate towards the new scroll position
-        var animate = function () {
-            var scrollTop = content.scrollTop;
-            var diff = (finalScrollTop - scrollTop);
-            if (Math.abs(diff) > 3) {
-                content.scrollTop += diff / 3;
-                editor.animateCallback = callback;
-                editor.animateTimeout = setTimeout(animate, 50);
-            }
-            else {
-                // finished
-                if (callback) {
-                    callback(true);
-                }
-                content.scrollTop = finalScrollTop;
-                delete editor.animateTimeout;
-                delete editor.animateCallback;
-            }
-        };
-        animate();
-    }
-    else {
-        if (callback) {
-            callback(false);
-        }
-    }
-};
-
-/**
- * Create main frame
- * @private
- */
-jsoneditor.JSONEditor.prototype._createFrame = function () {
-    // create the frame
-    this.container.innerHTML = '';
-    this.frame = document.createElement('div');
-    this.frame.className = 'jsoneditor';
-    this.container.appendChild(this.frame);
-
-    // create one global event listener to handle all events from all nodes
-    var editor = this;
-    var onEvent = function (event) {
-        editor._onEvent(event);
-    };
-    this.frame.onclick = function (event) {
-        onEvent(event);
-
-        // prevent default submit action when JSONEditor is located inside a form
-        jsoneditor.util.preventDefault(event);
-    };
-    this.frame.oninput = onEvent;
-    this.frame.onchange = onEvent;
-    this.frame.onkeydown = onEvent;
-    this.frame.onkeyup = onEvent;
-    this.frame.oncut = onEvent;
-    this.frame.onpaste = onEvent;
-    this.frame.onmousedown = onEvent;
-    this.frame.onmouseup = onEvent;
-    this.frame.onmouseover = onEvent;
-    this.frame.onmouseout = onEvent;
-    // Note: focus and blur events do not propagate, therefore they defined
-    // using an eventListener with useCapture=true
-    // see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
-    jsoneditor.util.addEventListener(this.frame, 'focus', onEvent, true);
-    jsoneditor.util.addEventListener(this.frame, 'blur', onEvent, true);
-    this.frame.onfocusin = onEvent;  // for IE
-    this.frame.onfocusout = onEvent; // for IE
-
-    // create menu
-    this.menu = document.createElement('div');
-    this.menu.className = 'menu';
-    this.frame.appendChild(this.menu);
-
-    // create expand all button
-    var expandAll = document.createElement('button');
-    expandAll.className = 'expand-all';
-    expandAll.title = 'Expand all fields';
-    expandAll.onclick = function () {
-        editor.expandAll();
-    };
-    this.menu.appendChild(expandAll);
-
-    // create expand all button
-    var collapseAll = document.createElement('button');
-    collapseAll.title = 'Collapse all fields';
-    collapseAll.className = 'collapse-all';
-    collapseAll.onclick = function () {
-        editor.collapseAll();
-    };
-    this.menu.appendChild(collapseAll);
-
-    // create undo/redo buttons
-    if (this.history) {
-        // create separator
-        var separator = document.createElement('span');
-        separator.innerHTML = '&nbsp;';
-        this.menu.appendChild(separator);
-
-        // create undo button
-        var undo = document.createElement('button');
-        undo.className = 'undo';
-        undo.title = 'Undo last action (Ctrl+Z)';
-        undo.onclick = function () {
-            editor._onUndo();
-        };
-        this.menu.appendChild(undo);
-        this.dom.undo = undo;
-
-        // create redo button
-        var redo = document.createElement('button');
-        redo.className = 'redo';
-        redo.title = 'Redo (Ctrl+Shift+Z)';
-        redo.onclick = function () {
-            editor._onRedo();
-        };
-        this.menu.appendChild(redo);
-        this.dom.redo = redo;
-
-        // register handler for onchange of history
-        this.history.onChange = function () {
-            undo.disabled = !editor.history.canUndo();
-            redo.disabled = !editor.history.canRedo();
-        };
-        this.history.onChange();
-    }
-
-    // create search box
-    if (this.options.search) {
-        this.searchBox = new jsoneditor.SearchBox(this, this.menu);
-    }
-};
-
-/**
- * Perform an undo action
- * @private
- */
-jsoneditor.JSONEditor.prototype._onUndo = function () {
-    if (this.history) {
-        // undo last action
-        this.history.undo();
-
-        // trigger change callback
-        if (this.options.change) {
-            this.options.change();
-        }
-    }
-};
-
-/**
- * Perform a redo action
- * @private
- */
-jsoneditor.JSONEditor.prototype._onRedo = function () {
-    if (this.history) {
-        // redo last action
-        this.history.redo();
-
-        // trigger change callback
-        if (this.options.change) {
-            this.options.change();
-        }
-    }
-};
-
-/**
- * Event handler
- * @param event
- * @private
- */
-jsoneditor.JSONEditor.prototype._onEvent = function (event) {
-    event = event || window.event;
-    var target = event.target || event.srcElement;
-
-    if (event.type == 'keydown') {
-        this._onKeyDown(event);
-    }
-
-    if (event.type == 'focus') {
-        jsoneditor.JSONEditor.domFocus = target;
-    }
-
-    var node = jsoneditor.Node.getNodeFromTarget(target);
-    if (node) {
-        node.onEvent(event);
-    }
-};
-
-/**
- * Event handler for keydown. Handles shortcut keys
- * @param {Event} event
- * @private
- */
-jsoneditor.JSONEditor.prototype._onKeyDown = function (event) {
-    var keynum = event.which || event.keyCode;
-    var ctrlKey = event.ctrlKey;
-    var shiftKey = event.shiftKey;
-    var handled = false;
-
-    if (keynum == 9) { // Tab or Shift+Tab
-        // FIXME: selecting all text on tab key does not work on IE8 (-> put selectContentEditable() in keyup too?)
-        //jsoneditor.Node.select(jsoneditor.JSONEditor.domFocus);
-        setTimeout(function () {
-            // select all text when moving focus to an editable div
-            jsoneditor.util.selectContentEditable(jsoneditor.JSONEditor.domFocus);
-        }, 0);
-    }
-
-    if (this.searchBox) {
-        if (ctrlKey && keynum == 70) { // Ctrl+F
-            this.searchBox.dom.search.focus();
-            this.searchBox.dom.search.select();
-            handled = true;
-        }
-        else if (keynum == 114 || (ctrlKey && keynum == 71)) { // F3 or Ctrl+G
-            var focus = true;
-            if (!shiftKey) {
-                // select next search result (F3 or Ctrl+G)
-                this.searchBox.next(focus);
-            }
-            else {
-                // select previous search result (Shift+F3 or Ctrl+Shift+G)
-                this.searchBox.previous(focus);
-            }
-
-            handled = true;
-        }
-    }
-
-    if (this.history) {
-        if (ctrlKey && !shiftKey && keynum == 90) { // Ctrl+Z
-            // undo
-            this._onUndo();
-            handled = true;
-        }
-        else if (ctrlKey && shiftKey && keynum == 90) { // Ctrl+Shift+Z
-            // redo
-            this._onRedo();
-            handled = true;
-        }
-    }
-
-    if (handled) {
-        jsoneditor.util.preventDefault(event);
-        jsoneditor.util.stopPropagation(event);
-    }
-};
-
-/**
- * Create main table
- * @private
- */
-jsoneditor.JSONEditor.prototype._createTable = function () {
-    var contentOuter = document.createElement('div');
-    contentOuter.className = 'outer';
-    this.contentOuter = contentOuter;
-
-    this.content = document.createElement('div');
-    this.content.className = 'content';
-    contentOuter.appendChild(this.content);
-
-    this.table = document.createElement('table');
-    this.table.className = 'content';
-    this.content.appendChild(this.table);
-
-    // IE8 does not handle overflow='auto' correctly.
-    // Therefore, set overflow to 'scroll'
-    var ieVersion = jsoneditor.util.getInternetExplorerVersion();
-    if (ieVersion == 8) {
-        this.content.style.overflow = 'scroll';
-    }
-
-    // create colgroup where the first two columns don't have a fixed
-    // width, and the edit columns do have a fixed width
-    var col;
-    this.colgroupContent = document.createElement('colgroup');
-    col = document.createElement('col');
-    col.width = "24px";
-    this.colgroupContent.appendChild(col);
-    col = document.createElement('col');
-    col.width = "24px";
-    this.colgroupContent.appendChild(col);
-    col = document.createElement('col');
-    this.colgroupContent.appendChild(col);
-    this.table.appendChild(this.colgroupContent);
-
-    this.tbody = document.createElement('tbody');
-    this.table.appendChild(this.tbody);
-
-    this.frame.appendChild(contentOuter);
-};
diff --git a/jsoneditor/js/module.js b/jsoneditor/js/module.js
index 34a5a45..91340c9 100644
--- a/jsoneditor/js/module.js
+++ b/jsoneditor/js/module.js
@@ -27,7 +27,7 @@
  * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @date    2013-02-21
+ * @date    2013-04-29
  */
 
 (function () {
@@ -36,10 +36,13 @@
 /***code_placeholder***/
 
 // module exports
-var jsoneditorExports = {
-    'JSONEditor': jsoneditor.JSONEditor,
-    'JSONFormatter': jsoneditor.JSONFormatter,
-    'util': jsoneditor.util
+var jsoneditor = {
+    'JSONEditor': JSONEditor,
+    'JSONFormatter': function () {
+        throw new Error('JSONFormatter is deprecated. ' +
+            'Use JSONEditor with mode "text" or "code" instead');
+    },
+    'util': util
 };
 
 /**
@@ -65,7 +68,7 @@ var loadCss = function () {
  */
 if (typeof(module) != 'undefined' && typeof(exports) != 'undefined') {
     loadCss();
-    module.exports = exports = jsoneditorExports;
+    module.exports = exports = jsoneditor;
 }
 
 /**
@@ -74,12 +77,12 @@ if (typeof(module) != 'undefined' && typeof(exports) != 'undefined') {
 if (typeof(require) != 'undefined' && typeof(define) != 'undefined') {
     define(function () {
         loadCss();
-        return jsoneditorExports;
+        return jsoneditor;
     });
 }
 else {
-    // create attach the module to window, load as a regular javascript file
-    window['jsoneditor'] = jsoneditorExports;
+    // attach the module to the window, load as a regular javascript file
+    window['jsoneditor'] = jsoneditor;
 }
 
-})();
\ No newline at end of file
+})();
diff --git a/jsoneditor/js/node.js b/jsoneditor/js/node.js
index 2baecff..6981c69 100644
--- a/jsoneditor/js/node.js
+++ b/jsoneditor/js/node.js
@@ -1,29 +1,7 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * @constructor jsoneditor.Node
+ * @constructor Node
  * Create a new Node
- * @param {JSONEditor} editor
+ * @param {TreeEditor} editor
  * @param {Object} [params] Can contain parameters:
  *                          {string}  field
  *                          {boolean} fieldEditable
@@ -31,7 +9,8 @@ var jsoneditor = jsoneditor || {};
  *                          {String}  type  Can have values 'auto', 'array',
  *                                          'object', or 'string'.
  */
-jsoneditor.Node = function (editor, params) {
+function Node (editor, params) {
+    /** @type {TreeEditor} */
     this.editor = editor;
     this.dom = {};
     this.expanded = false;
@@ -48,9 +27,9 @@ jsoneditor.Node = function (editor, params) {
 
 /**
  * Set parent node
- * @param {jsoneditor.Node} parent
+ * @param {Node} parent
  */
-jsoneditor.Node.prototype.setParent = function(parent) {
+Node.prototype.setParent = function(parent) {
     this.parent = parent;
 };
 
@@ -59,7 +38,7 @@ jsoneditor.Node.prototype.setParent = function(parent) {
  * @param {String}  field
  * @param {boolean} [fieldEditable]
  */
-jsoneditor.Node.prototype.setField = function(field, fieldEditable) {
+Node.prototype.setField = function(field, fieldEditable) {
     this.field = field;
     this.fieldEditable = (fieldEditable == true);
 };
@@ -68,7 +47,7 @@ jsoneditor.Node.prototype.setField = function(field, fieldEditable) {
  * Get field
  * @return {String}
  */
-jsoneditor.Node.prototype.getField = function() {
+Node.prototype.getField = function() {
     if (this.field === undefined) {
         this._getDomField();
     }
@@ -82,7 +61,7 @@ jsoneditor.Node.prototype.getField = function() {
  * @param {String} [type]  Specify the type of the value. Can be 'auto',
  *                         'array', 'object', or 'string'
  */
-jsoneditor.Node.prototype.setValue = function(value, type) {
+Node.prototype.setValue = function(value, type) {
     var childValue, child;
 
     // first clear all current childs (if any)
@@ -116,7 +95,7 @@ jsoneditor.Node.prototype.setValue = function(value, type) {
             childValue = value[i];
             if (childValue !== undefined && !(childValue instanceof Function)) {
                 // ignore undefined and functions
-                child = new jsoneditor.Node(this.editor, {
+                child = new Node(this.editor, {
                     'value': childValue
                 });
                 this.appendChild(child);
@@ -132,7 +111,7 @@ jsoneditor.Node.prototype.setValue = function(value, type) {
                 childValue = value[childField];
                 if (childValue !== undefined && !(childValue instanceof Function)) {
                     // ignore undefined and functions
-                    child = new jsoneditor.Node(this.editor, {
+                    child = new Node(this.editor, {
                         'field': childField,
                         'value': childValue
                     });
@@ -163,7 +142,7 @@ jsoneditor.Node.prototype.setValue = function(value, type) {
  * Get value. Value is a JSON structure
  * @return {*} value
  */
-jsoneditor.Node.prototype.getValue = function() {
+Node.prototype.getValue = function() {
     //var childs, i, iMax;
 
     if (this.type == 'array') {
@@ -193,7 +172,7 @@ jsoneditor.Node.prototype.getValue = function() {
  * Get the nesting level of this node
  * @return {Number} level
  */
-jsoneditor.Node.prototype.getLevel = function() {
+Node.prototype.getLevel = function() {
     return (this.parent ? this.parent.getLevel() + 1 : 0);
 };
 
@@ -201,10 +180,10 @@ jsoneditor.Node.prototype.getLevel = function() {
  * Create a clone of a node
  * The complete state of a clone is copied, including whether it is expanded or
  * not. The DOM elements are not cloned.
- * @return {jsoneditor.Node} clone
+ * @return {Node} clone
  */
-jsoneditor.Node.prototype.clone = function() {
-    var clone = new jsoneditor.Node(this.editor);
+Node.prototype.clone = function() {
+    var clone = new Node(this.editor);
     clone.type = this.type;
     clone.field = this.field;
     clone.fieldInnerText = this.fieldInnerText;
@@ -236,7 +215,7 @@ jsoneditor.Node.prototype.clone = function() {
  * @param {boolean} [recurse] Optional recursion, true by default. When
  *                            true, all childs will be expanded recursively
  */
-jsoneditor.Node.prototype.expand = function(recurse) {
+Node.prototype.expand = function(recurse) {
     if (!this.childs) {
         return;
     }
@@ -261,7 +240,7 @@ jsoneditor.Node.prototype.expand = function(recurse) {
  * @param {boolean} [recurse] Optional recursion, true by default. When
  *                            true, all childs will be collapsed recursively
  */
-jsoneditor.Node.prototype.collapse = function(recurse) {
+Node.prototype.collapse = function(recurse) {
     if (!this.childs) {
         return;
     }
@@ -286,7 +265,7 @@ jsoneditor.Node.prototype.collapse = function(recurse) {
 /**
  * Recursively show all childs when they are expanded
  */
-jsoneditor.Node.prototype.showChilds = function() {
+Node.prototype.showChilds = function() {
     var childs = this.childs;
     if (!childs) {
         return;
@@ -319,7 +298,7 @@ jsoneditor.Node.prototype.showChilds = function() {
 /**
  * Hide the node with all its childs
  */
-jsoneditor.Node.prototype.hide = function() {
+Node.prototype.hide = function() {
     var tr = this.dom.tr;
     var table = tr ? tr.parentNode : undefined;
     if (table) {
@@ -332,7 +311,7 @@ jsoneditor.Node.prototype.hide = function() {
 /**
  * Recursively hide all childs
  */
-jsoneditor.Node.prototype.hideChilds = function() {
+Node.prototype.hideChilds = function() {
     var childs = this.childs;
     if (!childs) {
         return;
@@ -357,9 +336,9 @@ jsoneditor.Node.prototype.hideChilds = function() {
 /**
  * Add a new child to the node.
  * Only applicable when Node value is of type array or object
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  */
-jsoneditor.Node.prototype.appendChild = function(node) {
+Node.prototype.appendChild = function(node) {
     if (this._hasChilds()) {
         // adjust the link to the parent
         node.setParent(this);
@@ -390,10 +369,10 @@ jsoneditor.Node.prototype.appendChild = function(node) {
 /**
  * Move a node from its current parent to this node
  * Only applicable when Node value is of type array or object
- * @param {jsoneditor.Node} node
- * @param {jsoneditor.Node} beforeNode
+ * @param {Node} node
+ * @param {Node} beforeNode
  */
-jsoneditor.Node.prototype.moveBefore = function(node, beforeNode) {
+Node.prototype.moveBefore = function(node, beforeNode) {
     if (this._hasChilds()) {
         // create a temporary row, to prevent the scroll position from jumping
         // when removing the node
@@ -408,7 +387,7 @@ jsoneditor.Node.prototype.moveBefore = function(node, beforeNode) {
             node.parent.removeChild(node);
         }
 
-        if (beforeNode instanceof jsoneditor.AppendNode) {
+        if (beforeNode instanceof AppendNode) {
             this.appendChild(node);
         }
         else {
@@ -425,10 +404,10 @@ jsoneditor.Node.prototype.moveBefore = function(node, beforeNode) {
  * Move a node from its current parent to this node
  * Only applicable when Node value is of type array or object.
  * If index is out of range, the node will be appended to the end
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  * @param {Number} index
  */
-jsoneditor.Node.prototype.moveTo = function (node, index) {
+Node.prototype.moveTo = function (node, index) {
     if (node.parent == this) {
         // same parent
         var currentIndex = this.childs.indexOf(node);
@@ -445,10 +424,10 @@ jsoneditor.Node.prototype.moveTo = function (node, index) {
 /**
  * Insert a new child before a given node
  * Only applicable when Node value is of type array or object
- * @param {jsoneditor.Node} node
- * @param {jsoneditor.Node} beforeNode
+ * @param {Node} node
+ * @param {Node} beforeNode
  */
-jsoneditor.Node.prototype.insertBefore = function(node, beforeNode) {
+Node.prototype.insertBefore = function(node, beforeNode) {
     if (this._hasChilds()) {
         if (beforeNode == this.append) {
             // append to the child nodes
@@ -491,10 +470,10 @@ jsoneditor.Node.prototype.insertBefore = function(node, beforeNode) {
 /**
  * Insert a new child before a given node
  * Only applicable when Node value is of type array or object
- * @param {jsoneditor.Node} node
- * @param {jsoneditor.Node} afterNode
+ * @param {Node} node
+ * @param {Node} afterNode
  */
-jsoneditor.Node.prototype.insertAfter = function(node, afterNode) {
+Node.prototype.insertAfter = function(node, afterNode) {
     if (this._hasChilds()) {
         var index = this.childs.indexOf(afterNode);
         var beforeNode = this.childs[index + 1];
@@ -512,9 +491,9 @@ jsoneditor.Node.prototype.insertAfter = function(node, afterNode) {
  * The node will be expanded when the text is found one of its childs, else
  * it will be collapsed. Searches are case insensitive.
  * @param {String} text
- * @return {jsoneditor.Node[]} results  Array with nodes containing the search text
+ * @return {Node[]} results  Array with nodes containing the search text
  */
-jsoneditor.Node.prototype.search = function(text) {
+Node.prototype.search = function(text) {
     var results = [];
     var index;
     var search = text ? text.toLowerCase() : undefined;
@@ -589,7 +568,7 @@ jsoneditor.Node.prototype.search = function(text) {
  * The node will not get the focus
  * @param {function(boolean)} [callback]
  */
-jsoneditor.Node.prototype.scrollTo = function(callback) {
+Node.prototype.scrollTo = function(callback) {
     if (!this.dom.tr || !this.dom.tr.parentNode) {
         // if the node is not visible, expand its parents
         var parent = this.parent;
@@ -607,7 +586,7 @@ jsoneditor.Node.prototype.scrollTo = function(callback) {
 
 
 // stores the element name currently having the focus
-jsoneditor.Node.focusElement = undefined;
+Node.focusElement = undefined;
 
 /**
  * Set focus to this node
@@ -615,8 +594,8 @@ jsoneditor.Node.focusElement = undefined;
  *                                focus available values: 'drag', 'menu',
  *                                'expand', 'field', 'value' (default)
  */
-jsoneditor.Node.prototype.focus = function(elementName) {
-    jsoneditor.Node.focusElement = elementName;
+Node.prototype.focus = function(elementName) {
+    Node.focusElement = elementName;
 
     if (this.dom.tr && this.dom.tr.parentNode) {
         var dom = this.dom;
@@ -641,11 +620,11 @@ jsoneditor.Node.prototype.focus = function(elementName) {
                 }
                 else if (dom.field && this.fieldEditable) {
                     dom.field.focus();
-                    jsoneditor.util.selectContentEditable(dom.field);
+                    util.selectContentEditable(dom.field);
                 }
                 else if (dom.value && !this._hasChilds()) {
                     dom.value.focus();
-                    jsoneditor.util.selectContentEditable(dom.value);
+                    util.selectContentEditable(dom.value);
                 }
                 else {
                     dom.menu.focus();
@@ -655,11 +634,11 @@ jsoneditor.Node.prototype.focus = function(elementName) {
             case 'field':
                 if (dom.field && this.fieldEditable) {
                     dom.field.focus();
-                    jsoneditor.util.selectContentEditable(dom.field);
+                    util.selectContentEditable(dom.field);
                 }
                 else if (dom.value && !this._hasChilds()) {
                     dom.value.focus();
-                    jsoneditor.util.selectContentEditable(dom.value);
+                    util.selectContentEditable(dom.value);
                 }
                 else if (this._hasChilds()) {
                     dom.expand.focus();
@@ -673,11 +652,11 @@ jsoneditor.Node.prototype.focus = function(elementName) {
             default:
                 if (dom.value && !this._hasChilds()) {
                     dom.value.focus();
-                    jsoneditor.util.selectContentEditable(dom.value);
+                    util.selectContentEditable(dom.value);
                 }
                 else if (dom.field && this.fieldEditable) {
                     dom.field.focus();
-                    jsoneditor.util.selectContentEditable(dom.field);
+                    util.selectContentEditable(dom.field);
                 }
                 else if (this._hasChilds()) {
                     dom.expand.focus();
@@ -694,16 +673,16 @@ jsoneditor.Node.prototype.focus = function(elementName) {
  * Select all text in an editable div after a delay of 0 ms
  * @param {Element} editableDiv
  */
-jsoneditor.Node.select = function(editableDiv) {
+Node.select = function(editableDiv) {
     setTimeout(function () {
-        jsoneditor.util.selectContentEditable(editableDiv);
+        util.selectContentEditable(editableDiv);
     }, 0);
 };
 
 /**
  * Update the values from the DOM field and value of this node
  */
-jsoneditor.Node.prototype.blur = function() {
+Node.prototype.blur = function() {
     // retrieve the actual field and value from the DOM.
     this._getDomValue(false);
     this._getDomField(false);
@@ -712,11 +691,11 @@ jsoneditor.Node.prototype.blur = function() {
 /**
  * Duplicate given child node
  * new structure will be added right before the cloned node
- * @param {jsoneditor.Node} node           the childNode to be duplicated
- * @return {jsoneditor.Node} clone         the clone of the node
+ * @param {Node} node           the childNode to be duplicated
+ * @return {Node} clone         the clone of the node
  * @private
  */
-jsoneditor.Node.prototype._duplicate = function(node) {
+Node.prototype._duplicate = function(node) {
     var clone = node.clone();
 
     /* TODO: adjust the field name (to prevent equal field names)
@@ -732,10 +711,10 @@ jsoneditor.Node.prototype._duplicate = function(node) {
 /**
  * Check if given node is a child. The method will check recursively to find
  * this node.
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  * @return {boolean} containsNode
  */
-jsoneditor.Node.prototype.containsNode = function(node) {
+Node.prototype.containsNode = function(node) {
     if (this == node) {
         return true;
     }
@@ -755,13 +734,13 @@ jsoneditor.Node.prototype.containsNode = function(node) {
 
 /**
  * Move given node into this node
- * @param {jsoneditor.Node} node           the childNode to be moved
- * @param {jsoneditor.Node} beforeNode     node will be inserted before given
+ * @param {Node} node           the childNode to be moved
+ * @param {Node} beforeNode     node will be inserted before given
  *                                         node. If no beforeNode is given,
  *                                         the node is appended at the end
  * @private
  */
-jsoneditor.Node.prototype._move = function(node, beforeNode) {
+Node.prototype._move = function(node, beforeNode) {
     if (node == beforeNode) {
         // nothing to do...
         return;
@@ -798,11 +777,11 @@ jsoneditor.Node.prototype._move = function(node, beforeNode) {
 /**
  * Remove a child from the node.
  * Only applicable when Node value is of type array or object
- * @param {jsoneditor.Node} node   The child node to be removed;
- * @return {jsoneditor.Node | undefined} node  The removed node on success,
+ * @param {Node} node   The child node to be removed;
+ * @return {Node | undefined} node  The removed node on success,
  *                                             else undefined
  */
-jsoneditor.Node.prototype.removeChild = function(node) {
+Node.prototype.removeChild = function(node) {
     if (this.childs) {
         var index = this.childs.indexOf(node);
 
@@ -828,10 +807,10 @@ jsoneditor.Node.prototype.removeChild = function(node) {
  * Remove a child node node from this node
  * This method is equal to Node.removeChild, except that _remove firex an
  * onChange event.
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  * @private
  */
-jsoneditor.Node.prototype._remove = function (node) {
+Node.prototype._remove = function (node) {
     this.removeChild(node);
 };
 
@@ -839,7 +818,7 @@ jsoneditor.Node.prototype._remove = function (node) {
  * Change the type of the value of this Node
  * @param {String} newType
  */
-jsoneditor.Node.prototype.changeType = function (newType) {
+Node.prototype.changeType = function (newType) {
     var oldType = this.type;
 
     if (oldType == newType) {
@@ -942,9 +921,9 @@ jsoneditor.Node.prototype.changeType = function (newType) {
  *                            case of invalid data
  * @private
  */
-jsoneditor.Node.prototype._getDomValue = function(silent) {
+Node.prototype._getDomValue = function(silent) {
     if (this.dom.value && this.type != 'array' && this.type != 'object') {
-        this.valueInnerText = jsoneditor.util.getInnerText(this.dom.value);
+        this.valueInnerText = util.getInnerText(this.dom.value);
     }
 
     if (this.valueInnerText != undefined) {
@@ -987,7 +966,7 @@ jsoneditor.Node.prototype._getDomValue = function(silent) {
  * - background color in case it is empty
  * @private
  */
-jsoneditor.Node.prototype._updateDomValue = function () {
+Node.prototype._updateDomValue = function () {
     var domValue = this.dom.value;
     if (domValue) {
         // set text color depending on value type
@@ -1009,7 +988,7 @@ jsoneditor.Node.prototype._updateDomValue = function () {
             color = '';
         }
         else if (v === null) {
-            color = 'blue';
+            color = '#004ED0';  // blue
         }
         else {
             // invalid value
@@ -1020,28 +999,28 @@ jsoneditor.Node.prototype._updateDomValue = function () {
         // make backgound color lightgray when empty
         var isEmpty = (String(this.value) == '' && this.type != 'array' && this.type != 'object');
         if (isEmpty) {
-            jsoneditor.util.addClassName(domValue, 'empty');
+            util.addClassName(domValue, 'empty');
         }
         else {
-            jsoneditor.util.removeClassName(domValue, 'empty');
+            util.removeClassName(domValue, 'empty');
         }
 
         // highlight when there is a search result
         if (this.searchValueActive) {
-            jsoneditor.util.addClassName(domValue, 'highlight-active');
+            util.addClassName(domValue, 'highlight-active');
         }
         else {
-            jsoneditor.util.removeClassName(domValue, 'highlight-active');
+            util.removeClassName(domValue, 'highlight-active');
         }
         if (this.searchValue) {
-            jsoneditor.util.addClassName(domValue, 'highlight');
+            util.addClassName(domValue, 'highlight');
         }
         else {
-            jsoneditor.util.removeClassName(domValue, 'highlight');
+            util.removeClassName(domValue, 'highlight');
         }
 
         // strip formatting from the contents of the editable div
-        jsoneditor.util.stripFormatting(domValue);
+        util.stripFormatting(domValue);
     }
 };
 
@@ -1052,34 +1031,34 @@ jsoneditor.Node.prototype._updateDomValue = function () {
  * - background color in case it is empty
  * @private
  */
-jsoneditor.Node.prototype._updateDomField = function () {
+Node.prototype._updateDomField = function () {
     var domField = this.dom.field;
     if (domField) {
         // make backgound color lightgray when empty
         var isEmpty = (String(this.field) == '' && this.parent.type != 'array');
         if (isEmpty) {
-            jsoneditor.util.addClassName(domField, 'empty');
+            util.addClassName(domField, 'empty');
         }
         else {
-            jsoneditor.util.removeClassName(domField, 'empty');
+            util.removeClassName(domField, 'empty');
         }
 
         // highlight when there is a search result
         if (this.searchFieldActive) {
-            jsoneditor.util.addClassName(domField, 'highlight-active');
+            util.addClassName(domField, 'highlight-active');
         }
         else {
-            jsoneditor.util.removeClassName(domField, 'highlight-active');
+            util.removeClassName(domField, 'highlight-active');
         }
         if (this.searchField) {
-            jsoneditor.util.addClassName(domField, 'highlight');
+            util.addClassName(domField, 'highlight');
         }
         else {
-            jsoneditor.util.removeClassName(domField, 'highlight');
+            util.removeClassName(domField, 'highlight');
         }
 
         // strip formatting from the contents of the editable div
-        jsoneditor.util.stripFormatting(domField);
+        util.stripFormatting(domField);
     }
 };
 
@@ -1089,9 +1068,9 @@ jsoneditor.Node.prototype._updateDomField = function () {
  *                            case of invalid data
  * @private
  */
-jsoneditor.Node.prototype._getDomField = function(silent) {
+Node.prototype._getDomField = function(silent) {
     if (this.dom.field && this.fieldEditable) {
-        this.fieldInnerText = jsoneditor.util.getInnerText(this.dom.field);
+        this.fieldInnerText = util.getInnerText(this.dom.field);
     }
 
     if (this.fieldInnerText != undefined) {
@@ -1123,7 +1102,7 @@ jsoneditor.Node.prototype._getDomField = function(silent) {
 /**
  * Clear the dom of the node
  */
-jsoneditor.Node.prototype.clearDom = function() {
+Node.prototype.clearDom = function() {
     // TODO: hide the node first?
     //this.hide();
     // TOOD: recursively clear dom?
@@ -1136,7 +1115,7 @@ jsoneditor.Node.prototype.clearDom = function() {
  * The dom will be generated when not yet created
  * @return {Element} tr    HTML DOM TR Element
  */
-jsoneditor.Node.prototype.getDom = function() {
+Node.prototype.getDom = function() {
     var dom = this.dom;
     if (dom.tr) {
         return dom.tr;
@@ -1146,7 +1125,7 @@ jsoneditor.Node.prototype.getDom = function() {
     dom.tr = document.createElement('tr');
     dom.tr.node = this;
 
-    if (this.editor.mode.editor) {
+    if (this.editor.mode.edit) {
         // create draggable area
         var tdDrag = document.createElement('td');
         if (this.parent) {
@@ -1184,19 +1163,19 @@ jsoneditor.Node.prototype.getDom = function() {
  * @param {Event} event
  * @private
  */
-jsoneditor.Node.prototype._onDragStart = function (event) {
+Node.prototype._onDragStart = function (event) {
     event = event || window.event;
 
     var node = this;
     if (!this.mousemove) {
-        this.mousemove = jsoneditor.util.addEventListener(document, 'mousemove',
+        this.mousemove = util.addEventListener(document, 'mousemove',
             function (event) {
                 node._onDrag(event);
             });
     }
 
     if (!this.mouseup) {
-        this.mouseup = jsoneditor.util.addEventListener(document, 'mouseup',
+        this.mouseup = util.addEventListener(document, 'mouseup',
             function (event ) {
                 node._onDragEnd(event);
             });
@@ -1207,12 +1186,12 @@ jsoneditor.Node.prototype._onDragStart = function (event) {
         'oldCursor': document.body.style.cursor,
         'startParent': this.parent,
         'startIndex': this.parent.childs.indexOf(this),
-        'mouseX': jsoneditor.util.getMouseX(event),
+        'mouseX': util.getMouseX(event),
         'level': this.getLevel()
     };
     document.body.style.cursor = 'move';
 
-    jsoneditor.util.preventDefault(event);
+    util.preventDefault(event);
 };
 
 /**
@@ -1220,12 +1199,12 @@ jsoneditor.Node.prototype._onDragStart = function (event) {
  * @param {Event} event
  * @private
  */
-jsoneditor.Node.prototype._onDrag = function (event) {
+Node.prototype._onDrag = function (event) {
     // TODO: this method has grown to large. Split it in a number of methods
     event = event || window.event;
     // TODO: make a separate function to get the absolute mouseY and mouseX
-    var mouseY = jsoneditor.util.getMouseY(event);
-    var mouseX = jsoneditor.util.getMouseX(event);
+    var mouseY = util.getMouseY(event);
+    var mouseX = util.getMouseX(event);
 
     var trThis, trPrev, trNext, trFirst, trLast, trRoot;
     var nodePrev, nodeNext;
@@ -1236,15 +1215,15 @@ jsoneditor.Node.prototype._onDrag = function (event) {
 
     // move up/down
     trThis = this.dom.tr;
-    topThis = jsoneditor.util.getAbsoluteTop(trThis);
+    topThis = util.getAbsoluteTop(trThis);
     heightThis = trThis.offsetHeight;
     if (mouseY < topThis) {
         // move up
         trPrev = trThis;
         do {
             trPrev = trPrev.previousSibling;
-            nodePrev = jsoneditor.Node.getNodeFromTarget(trPrev);
-            topPrev = trPrev ? jsoneditor.util.getAbsoluteTop(trPrev) : 0;
+            nodePrev = Node.getNodeFromTarget(trPrev);
+            topPrev = trPrev ? util.getAbsoluteTop(trPrev) : 0;
         }
         while (trPrev && mouseY < topPrev);
 
@@ -1256,7 +1235,7 @@ jsoneditor.Node.prototype._onDrag = function (event) {
             // move to the first node
             trRoot = trThis.parentNode.firstChild;
             trPrev = trRoot ? trRoot.nextSibling : undefined;
-            nodePrev = jsoneditor.Node.getNodeFromTarget(trPrev);
+            nodePrev = Node.getNodeFromTarget(trPrev);
             if (nodePrev == this) {
                 nodePrev = undefined;
             }
@@ -1265,7 +1244,7 @@ jsoneditor.Node.prototype._onDrag = function (event) {
         if (nodePrev) {
             // check if mouseY is really inside the found node
             trPrev = nodePrev.dom.tr;
-            topPrev = trPrev ? jsoneditor.util.getAbsoluteTop(trPrev) : 0;
+            topPrev = trPrev ? util.getAbsoluteTop(trPrev) : 0;
             if (mouseY > topPrev + heightThis) {
                 nodePrev = undefined;
             }
@@ -1281,13 +1260,13 @@ jsoneditor.Node.prototype._onDrag = function (event) {
         trLast = (this.expanded && this.append) ? this.append.getDom() : this.dom.tr;
         trFirst = trLast ? trLast.nextSibling : undefined;
         if (trFirst) {
-            topFirst = jsoneditor.util.getAbsoluteTop(trFirst);
+            topFirst = util.getAbsoluteTop(trFirst);
             trNext = trFirst;
             do {
-                nodeNext = jsoneditor.Node.getNodeFromTarget(trNext);
+                nodeNext = Node.getNodeFromTarget(trNext);
                 if (trNext) {
                     bottomNext = trNext.nextSibling ?
-                        jsoneditor.util.getAbsoluteTop(trNext.nextSibling) : 0;
+                        util.getAbsoluteTop(trNext.nextSibling) : 0;
                     heightNext = trNext ? (bottomNext - topFirst) : 0;
 
                     if (nodeNext.parent.childs.length == 1 && nodeNext.parent.childs[0] == this) {
@@ -1312,11 +1291,11 @@ jsoneditor.Node.prototype._onDrag = function (event) {
                 // find the best fitting level (move upwards over the append nodes)
                 trPrev = nodeNext.dom.tr.previousSibling;
                 while (levelNext < level && trPrev) {
-                    nodePrev = jsoneditor.Node.getNodeFromTarget(trPrev);
+                    nodePrev = Node.getNodeFromTarget(trPrev);
                     if (nodePrev == this || nodePrev._isChildOf(this)) {
                         // neglect itself and its childs
                     }
-                    else if (nodePrev instanceof jsoneditor.AppendNode) {
+                    else if (nodePrev instanceof AppendNode) {
                         var childs = nodePrev.parent.childs;
                         if (childs.length > 1 ||
                             (childs.length == 1 && childs[0] != this)) {
@@ -1324,7 +1303,7 @@ jsoneditor.Node.prototype._onDrag = function (event) {
                             // consisting of not only this node (else the
                             // append node will change into a visible "empty"
                             // text when removing this node).
-                            nodeNext = jsoneditor.Node.getNodeFromTarget(trPrev);
+                            nodeNext = Node.getNodeFromTarget(trPrev);
                             levelNext = nodeNext.getLevel();
                         }
                         else {
@@ -1356,7 +1335,7 @@ jsoneditor.Node.prototype._onDrag = function (event) {
     // auto scroll when hovering around the top of the editor
     this.editor.startAutoScroll(mouseY);
 
-    jsoneditor.util.preventDefault(event);
+    util.preventDefault(event);
 };
 
 /**
@@ -1364,7 +1343,7 @@ jsoneditor.Node.prototype._onDrag = function (event) {
  * @param {Event} event
  * @private
  */
-jsoneditor.Node.prototype._onDragEnd = function (event) {
+Node.prototype._onDragEnd = function (event) {
     event = event || window.event;
 
     var params = {
@@ -1385,26 +1364,26 @@ jsoneditor.Node.prototype._onDragEnd = function (event) {
     delete this.drag;
 
     if (this.mousemove) {
-        jsoneditor.util.removeEventListener(document, 'mousemove', this.mousemove);
+        util.removeEventListener(document, 'mousemove', this.mousemove);
         delete this.mousemove;}
     if (this.mouseup) {
-        jsoneditor.util.removeEventListener(document, 'mouseup', this.mouseup);
+        util.removeEventListener(document, 'mouseup', this.mouseup);
         delete this.mouseup;
     }
 
     // Stop any running auto scroll
     this.editor.stopAutoScroll();
 
-    jsoneditor.util.preventDefault(event);
+    util.preventDefault(event);
 };
 
 /**
  * Test if this node is a child of an other node
- * @param {jsoneditor.Node} node
+ * @param {Node} node
  * @return {boolean} isChild
  * @private
  */
-jsoneditor.Node.prototype._isChildOf = function (node) {
+Node.prototype._isChildOf = function (node) {
     var n = this.parent;
     while (n) {
         if (n == node) {
@@ -1421,7 +1400,7 @@ jsoneditor.Node.prototype._isChildOf = function (node) {
  * @return {Element} domField
  * @private
  */
-jsoneditor.Node.prototype._createDomField = function () {
+Node.prototype._createDomField = function () {
     return document.createElement('div');
 };
 
@@ -1430,7 +1409,7 @@ jsoneditor.Node.prototype._createDomField = function () {
  * Only applied to the currently visible (expanded childs)
  * @param {boolean} highlight
  */
-jsoneditor.Node.prototype.setHighlight = function (highlight) {
+Node.prototype.setHighlight = function (highlight) {
     if (this.dom.tr) {
         this.dom.tr.className = (highlight ? 'highlight' : '');
 
@@ -1451,7 +1430,7 @@ jsoneditor.Node.prototype.setHighlight = function (highlight) {
  * or Array is allowed.
  * @param {String | Number | Boolean | null} value
  */
-jsoneditor.Node.prototype.updateValue = function (value) {
+Node.prototype.updateValue = function (value) {
     this.value = value;
     this.updateDom();
 };
@@ -1460,7 +1439,7 @@ jsoneditor.Node.prototype.updateValue = function (value) {
  * Update the field of the node.
  * @param {String} field
  */
-jsoneditor.Node.prototype.updateField = function (field) {
+Node.prototype.updateField = function (field) {
     this.field = field;
     this.updateDom();
 };
@@ -1475,7 +1454,7 @@ jsoneditor.Node.prototype.updateField = function (field) {
  *                          indexes of the node will be updated too. False by
  *                          default.
  */
-jsoneditor.Node.prototype.updateDom = function (options) {
+Node.prototype.updateDom = function (options) {
     // update level indentation
     var domTree = this.dom.tree;
     if (domTree) {
@@ -1487,7 +1466,7 @@ jsoneditor.Node.prototype.updateDom = function (options) {
     if (domField) {
         if (this.fieldEditable == true) {
             // parent is an object
-            domField.contentEditable = this.editor.mode.editor;
+            domField.contentEditable = this.editor.mode.edit;
             domField.spellcheck = false;
             domField.className = 'field';
         }
@@ -1561,7 +1540,7 @@ jsoneditor.Node.prototype.updateDom = function (options) {
  * Only applicable when structure is an array or object
  * @private
  */
-jsoneditor.Node.prototype._updateDomIndexes = function () {
+Node.prototype._updateDomIndexes = function () {
     var domValue = this.dom.value;
     var childs = this.childs;
     if (domValue && childs) {
@@ -1592,7 +1571,7 @@ jsoneditor.Node.prototype._updateDomIndexes = function () {
  * Create an editable value
  * @private
  */
-jsoneditor.Node.prototype._createDomValue = function () {
+Node.prototype._createDomValue = function () {
     var domValue;
 
     if (this.type == 'array') {
@@ -1607,14 +1586,14 @@ jsoneditor.Node.prototype._createDomValue = function () {
     }
     else if (this.type == 'string') {
         domValue = document.createElement('div');
-        domValue.contentEditable = !this.editor.mode.viewer;
+        domValue.contentEditable = !this.editor.mode.view;
         domValue.spellcheck = false;
         domValue.className = 'value';
         domValue.innerHTML = this._escapeHTML(this.value);
     }
     else {
         domValue = document.createElement('div');
-        domValue.contentEditable = !this.editor.mode.viewer;
+        domValue.contentEditable = !this.editor.mode.view;
         domValue.spellcheck = false;
         domValue.className = 'value';
         domValue.innerHTML = this._escapeHTML(this.value);
@@ -1631,7 +1610,7 @@ jsoneditor.Node.prototype._createDomValue = function () {
  * @return {Element} expand
  * @private
  */
-jsoneditor.Node.prototype._createDomExpandButton = function () {
+Node.prototype._createDomExpandButton = function () {
     // create expand button
     var expand = document.createElement('button');
     if (this._hasChilds()) {
@@ -1654,7 +1633,7 @@ jsoneditor.Node.prototype._createDomExpandButton = function () {
  * @return {Element} domTree
  * @private
  */
-jsoneditor.Node.prototype._createDomTree = function () {
+Node.prototype._createDomTree = function () {
     var dom = this.dom;
     var domTree = document.createElement('table');
     var tbody = document.createElement('tbody');
@@ -1704,7 +1683,7 @@ jsoneditor.Node.prototype._createDomTree = function () {
  * Handle an event. The event is catched centrally by the editor
  * @param {Event} event
  */
-jsoneditor.Node.prototype.onEvent = function (event) {
+Node.prototype.onEvent = function (event) {
     var type = event.type;
     var target = event.target || event.srcElement;
     var dom = this.dom;
@@ -1732,9 +1711,9 @@ jsoneditor.Node.prototype.onEvent = function (event) {
         var highlighter = node.editor.highlighter;
         highlighter.highlight(node);
         highlighter.lock();
-        jsoneditor.util.addClassName(dom.menu, 'selected');
+        util.addClassName(dom.menu, 'selected');
         this.showContextMenu(dom.menu, function () {
-            jsoneditor.util.removeClassName(dom.menu, 'selected');
+            util.removeClassName(dom.menu, 'selected');
             highlighter.unlock();
             highlighter.unhighlight();
         });
@@ -1754,7 +1733,7 @@ jsoneditor.Node.prototype.onEvent = function (event) {
     if (target == domValue) {
         switch (type) {
             case 'focus':
-                jsoneditor.JSONEditor.focusNode = this;
+                focusNode = this;
                 break;
 
             case 'blur':
@@ -1796,7 +1775,7 @@ jsoneditor.Node.prototype.onEvent = function (event) {
     if (target == domField) {
         switch (type) {
             case 'focus':
-                jsoneditor.JSONEditor.focusNode = this;
+                focusNode = this;
                 break;
 
             case 'blur':
@@ -1841,17 +1820,17 @@ jsoneditor.Node.prototype.onEvent = function (event) {
             case 'click':
                 var left = (event.offsetX != undefined) ?
                     (event.offsetX < (this.getLevel() + 1) * 24) :
-                    (jsoneditor.util.getMouseX(event) < jsoneditor.util.getAbsoluteLeft(dom.tdSeparator));// for FF
+                    (util.getMouseX(event) < util.getAbsoluteLeft(dom.tdSeparator));// for FF
                 if (left || expandable) {
                     // node is expandable when it is an object or array
                     if (domField) {
-                        jsoneditor.util.setEndOfContentEditable(domField);
+                        util.setEndOfContentEditable(domField);
                         domField.focus();
                     }
                 }
                 else {
                     if (domValue) {
-                        jsoneditor.util.setEndOfContentEditable(domValue);
+                        util.setEndOfContentEditable(domValue);
                         domValue.focus();
                     }
                 }
@@ -1863,7 +1842,7 @@ jsoneditor.Node.prototype.onEvent = function (event) {
         switch (type) {
             case 'click':
                 if (domField) {
-                    jsoneditor.util.setEndOfContentEditable(domField);
+                    util.setEndOfContentEditable(domField);
                     domField.focus();
                 }
                 break;
@@ -1879,7 +1858,7 @@ jsoneditor.Node.prototype.onEvent = function (event) {
  * Key down event handler
  * @param {Event} event
  */
-jsoneditor.Node.prototype.onKeyDown = function (event) {
+Node.prototype.onKeyDown = function (event) {
     var keynum = event.which || event.keyCode;
     var target = event.target || event.srcElement;
     var ctrlKey = event.ctrlKey;
@@ -1929,7 +1908,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             // find the last node
             var lastNode = this._lastNode();
             if (lastNode) {
-                lastNode.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                lastNode.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
@@ -1939,7 +1918,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             // find the first node
             var firstNode = this._firstNode();
             if (firstNode) {
-                firstNode.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                firstNode.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
@@ -1963,14 +1942,14 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
                 nextDom = dom.nextSibling;
             }
             if (nextDom) {
-                nextNode = jsoneditor.Node.getNodeFromTarget(nextDom);
+                nextNode = Node.getNodeFromTarget(nextDom);
                 nextDom2 = nextDom.nextSibling;
-                nextNode2 = jsoneditor.Node.getNodeFromTarget(nextDom2);
-                if (nextNode && nextNode instanceof jsoneditor.AppendNode &&
+                nextNode2 = Node.getNodeFromTarget(nextDom2);
+                if (nextNode && nextNode instanceof AppendNode &&
                         !(this.parent.childs.length == 1) &&
                         nextNode2 && nextNode2.parent) {
                     nextNode2.parent.moveBefore(this, nextNode2);
-                    this.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                    this.focus(Node.focusElement || this._getElementName(target));
                 }
             }
         }
@@ -1980,7 +1959,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             // find the previous node
             prevNode = this._previousNode();
             if (prevNode) {
-                prevNode.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                prevNode.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
@@ -1989,7 +1968,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             prevNode = this._previousNode();
             if (prevNode && prevNode.parent) {
                 prevNode.parent.moveBefore(this, prevNode);
-                this.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                this.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
@@ -2007,12 +1986,12 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             dom = this.getDom();
             var prevDom = dom.previousSibling;
             if (prevDom) {
-                prevNode = jsoneditor.Node.getNodeFromTarget(prevDom);
+                prevNode = Node.getNodeFromTarget(prevDom);
                 if (prevNode && prevNode.parent &&
-                        (prevNode instanceof jsoneditor.AppendNode)
+                        (prevNode instanceof AppendNode)
                         && !prevNode.isVisible()) {
                     prevNode.parent.moveBefore(this, prevNode);
-                    this.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                    this.focus(Node.focusElement || this._getElementName(target));
                 }
             }
         }
@@ -2022,7 +2001,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             // find the next node
             nextNode = this._nextNode();
             if (nextNode) {
-                nextNode.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                nextNode.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
@@ -2041,18 +2020,18 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
             else {
                 nextDom2 = nextDom ? nextDom.nextSibling : undefined;
             }
-            var nextNode2 = jsoneditor.Node.getNodeFromTarget(nextDom2);
+            var nextNode2 = Node.getNodeFromTarget(nextDom2);
             if (nextNode2 && nextNode2.parent) {
                 nextNode2.parent.moveBefore(this, nextNode2);
-                this.focus(jsoneditor.Node.focusElement || this._getElementName(target));
+                this.focus(Node.focusElement || this._getElementName(target));
             }
             handled = true;
         }
     }
 
     if (handled) {
-        jsoneditor.util.preventDefault(event);
-        jsoneditor.util.stopPropagation(event);
+        util.preventDefault(event);
+        util.stopPropagation(event);
     }
 };
 
@@ -2061,7 +2040,7 @@ jsoneditor.Node.prototype.onKeyDown = function (event) {
  * @param {boolean} recurse   If true, child nodes will be expanded too
  * @private
  */
-jsoneditor.Node.prototype._onExpand = function (recurse) {
+Node.prototype._onExpand = function (recurse) {
     if (recurse) {
         // Take the table offline
         var table = this.dom.tr.parentNode; // TODO: not nice to access the main table like this
@@ -2088,7 +2067,7 @@ jsoneditor.Node.prototype._onExpand = function (recurse) {
  * Remove this node
  * @private
  */
-jsoneditor.Node.prototype._onRemove = function() {
+Node.prototype._onRemove = function() {
     this.editor.highlighter.unhighlight();
     var childs = this.parent.childs;
     var index = childs.indexOf(this);
@@ -2123,7 +2102,7 @@ jsoneditor.Node.prototype._onRemove = function() {
  * Duplicate this node
  * @private
  */
-jsoneditor.Node.prototype._onDuplicate = function() {
+Node.prototype._onDuplicate = function() {
     var oldSelection = this.editor.getSelection();
     var clone = this.parent._duplicate(this);
     clone.focus();
@@ -2145,10 +2124,10 @@ jsoneditor.Node.prototype._onDuplicate = function() {
  * @param {String} [type]   Can be 'auto', 'array', 'object', or 'string'
  * @private
  */
-jsoneditor.Node.prototype._onInsertBefore = function (field, value, type) {
+Node.prototype._onInsertBefore = function (field, value, type) {
     var oldSelection = this.editor.getSelection();
 
-    var newNode = new jsoneditor.Node(this.editor, {
+    var newNode = new Node(this.editor, {
         'field': (field != undefined) ? field : '',
         'value': (value != undefined) ? value : '',
         'type': type
@@ -2175,10 +2154,10 @@ jsoneditor.Node.prototype._onInsertBefore = function (field, value, type) {
  * @param {String} [type]   Can be 'auto', 'array', 'object', or 'string'
  * @private
  */
-jsoneditor.Node.prototype._onInsertAfter = function (field, value, type) {
+Node.prototype._onInsertAfter = function (field, value, type) {
     var oldSelection = this.editor.getSelection();
 
-    var newNode = new jsoneditor.Node(this.editor, {
+    var newNode = new Node(this.editor, {
         'field': (field != undefined) ? field : '',
         'value': (value != undefined) ? value : '',
         'type': type
@@ -2205,10 +2184,10 @@ jsoneditor.Node.prototype._onInsertAfter = function (field, value, type) {
  * @param {String} [type]   Can be 'auto', 'array', 'object', or 'string'
  * @private
  */
-jsoneditor.Node.prototype._onAppend = function (field, value, type) {
+Node.prototype._onAppend = function (field, value, type) {
     var oldSelection = this.editor.getSelection();
 
-    var newNode = new jsoneditor.Node(this.editor, {
+    var newNode = new Node(this.editor, {
         'field': (field != undefined) ? field : '',
         'value': (value != undefined) ? value : '',
         'type': type
@@ -2232,7 +2211,7 @@ jsoneditor.Node.prototype._onAppend = function (field, value, type) {
  * @param {String} newType
  * @private
  */
-jsoneditor.Node.prototype._onChangeType = function (newType) {
+Node.prototype._onChangeType = function (newType) {
     var oldType = this.type;
     if (newType != oldType) {
         var oldSelection = this.editor.getSelection();
@@ -2255,7 +2234,7 @@ jsoneditor.Node.prototype._onChangeType = function (newType) {
  * @param {String} direction   Sorting direction. Available values: "asc", "desc"
  * @private
  */
-jsoneditor.Node.prototype._onSort = function (direction) {
+Node.prototype._onSort = function (direction) {
     if (this._hasChilds()) {
         var order = (direction == 'desc') ? -1 : 1;
         var prop = (this.type == 'array') ? 'value': 'field';
@@ -2291,9 +2270,9 @@ jsoneditor.Node.prototype._onSort = function (direction) {
  * Create a table row with an append button.
  * @return {HTMLElement | undefined} buttonAppend or undefined when inapplicable
  */
-jsoneditor.Node.prototype.getAppend = function () {
+Node.prototype.getAppend = function () {
     if (!this.append) {
-        this.append = new jsoneditor.AppendNode(this.editor);
+        this.append = new AppendNode(this.editor);
         this.append.setParent(this);
     }
     return this.append.getDom();
@@ -2302,10 +2281,10 @@ jsoneditor.Node.prototype.getAppend = function () {
 /**
  * Find the node from an event target
  * @param {Node} target
- * @return {jsoneditor.Node | undefined} node  or undefined when not found
+ * @return {Node | undefined} node  or undefined when not found
  * @static
  */
-jsoneditor.Node.getNodeFromTarget = function (target) {
+Node.getNodeFromTarget = function (target) {
     while (target) {
         if (target.node) {
             return target.node;
@@ -2318,10 +2297,10 @@ jsoneditor.Node.getNodeFromTarget = function (target) {
 
 /**
  * Get the previously rendered node
- * @return {jsoneditor.Node | null} previousNode
+ * @return {Node | null} previousNode
  * @private
  */
-jsoneditor.Node.prototype._previousNode = function () {
+Node.prototype._previousNode = function () {
     var prevNode = null;
     var dom = this.getDom();
     if (dom && dom.parentNode) {
@@ -2329,19 +2308,19 @@ jsoneditor.Node.prototype._previousNode = function () {
         var prevDom = dom;
         do {
             prevDom = prevDom.previousSibling;
-            prevNode = jsoneditor.Node.getNodeFromTarget(prevDom);
+            prevNode = Node.getNodeFromTarget(prevDom);
         }
-        while (prevDom && (prevNode instanceof jsoneditor.AppendNode && !prevNode.isVisible()));
+        while (prevDom && (prevNode instanceof AppendNode && !prevNode.isVisible()));
     }
     return prevNode;
 };
 
 /**
  * Get the next rendered node
- * @return {jsoneditor.Node | null} nextNode
+ * @return {Node | null} nextNode
  * @private
  */
-jsoneditor.Node.prototype._nextNode = function () {
+Node.prototype._nextNode = function () {
     var nextNode = null;
     var dom = this.getDom();
     if (dom && dom.parentNode) {
@@ -2349,9 +2328,9 @@ jsoneditor.Node.prototype._nextNode = function () {
         var nextDom = dom;
         do {
             nextDom = nextDom.nextSibling;
-            nextNode = jsoneditor.Node.getNodeFromTarget(nextDom);
+            nextNode = Node.getNodeFromTarget(nextDom);
         }
-        while (nextDom && (nextNode instanceof jsoneditor.AppendNode && !nextNode.isVisible()));
+        while (nextDom && (nextNode instanceof AppendNode && !nextNode.isVisible()));
     }
 
     return nextNode;
@@ -2359,15 +2338,15 @@ jsoneditor.Node.prototype._nextNode = function () {
 
 /**
  * Get the first rendered node
- * @return {jsoneditor.Node | null} firstNode
+ * @return {Node | null} firstNode
  * @private
  */
-jsoneditor.Node.prototype._firstNode = function () {
+Node.prototype._firstNode = function () {
     var firstNode = null;
     var dom = this.getDom();
     if (dom && dom.parentNode) {
         var firstDom = dom.parentNode.firstChild;
-        firstNode = jsoneditor.Node.getNodeFromTarget(firstDom);
+        firstNode = Node.getNodeFromTarget(firstDom);
     }
 
     return firstNode;
@@ -2375,18 +2354,18 @@ jsoneditor.Node.prototype._firstNode = function () {
 
 /**
  * Get the last rendered node
- * @return {jsoneditor.Node | null} lastNode
+ * @return {Node | null} lastNode
  * @private
  */
-jsoneditor.Node.prototype._lastNode = function () {
+Node.prototype._lastNode = function () {
     var lastNode = null;
     var dom = this.getDom();
     if (dom && dom.parentNode) {
         var lastDom = dom.parentNode.lastChild;
-        lastNode =  jsoneditor.Node.getNodeFromTarget(lastDom);
-        while (lastDom && (lastNode instanceof jsoneditor.AppendNode && !lastNode.isVisible())) {
+        lastNode =  Node.getNodeFromTarget(lastDom);
+        while (lastDom && (lastNode instanceof AppendNode && !lastNode.isVisible())) {
             lastDom = lastDom.previousSibling;
-            lastNode =  jsoneditor.Node.getNodeFromTarget(lastDom);
+            lastNode =  Node.getNodeFromTarget(lastDom);
         }
     }
     return lastNode;
@@ -2398,7 +2377,7 @@ jsoneditor.Node.prototype._lastNode = function () {
  * @return {Element | null} nextElem
  * @private
  */
-jsoneditor.Node.prototype._previousElement = function (elem) {
+Node.prototype._previousElement = function (elem) {
     var dom = this.dom;
     // noinspection FallthroughInSwitchStatementJS
     switch (elem) {
@@ -2430,7 +2409,7 @@ jsoneditor.Node.prototype._previousElement = function (elem) {
  * @return {Element | null} nextElem
  * @private
  */
-jsoneditor.Node.prototype._nextElement = function (elem) {
+Node.prototype._nextElement = function (elem) {
     var dom = this.dom;
     // noinspection FallthroughInSwitchStatementJS
     switch (elem) {
@@ -2463,7 +2442,7 @@ jsoneditor.Node.prototype._nextElement = function (elem) {
  *                                      'menu', 'expand', 'field', 'value'
  * @private
  */
-jsoneditor.Node.prototype._getElementName = function (element) {
+Node.prototype._getElementName = function (element) {
     var dom = this.dom;
     for (var name in dom) {
         if (dom.hasOwnProperty(name)) {
@@ -2481,12 +2460,12 @@ jsoneditor.Node.prototype._getElementName = function (element) {
  * @return {boolean} hasChilds
  * @private
  */
-jsoneditor.Node.prototype._hasChilds = function () {
+Node.prototype._hasChilds = function () {
     return this.type == 'array' || this.type == 'object';
 };
 
 // titles with explanation for the different types
-jsoneditor.Node.TYPE_TITLES = {
+Node.TYPE_TITLES = {
     'auto': 'Field type "auto". ' +
         'The field type is automatically determined from the value ' +
         'and can be a string, number, boolean, or null.',
@@ -2505,9 +2484,9 @@ jsoneditor.Node.TYPE_TITLES = {
  * @param {function} [onClose]   Callback method called when the context menu
  *                               is being closed.
  */
-jsoneditor.Node.prototype.showContextMenu = function (anchor, onClose) {
+Node.prototype.showContextMenu = function (anchor, onClose) {
     var node = this;
-    var titles = jsoneditor.Node.TYPE_TITLES;
+    var titles = Node.TYPE_TITLES;
     var items = [];
 
     items.push({
@@ -2705,7 +2684,7 @@ jsoneditor.Node.prototype.showContextMenu = function (anchor, onClose) {
         });
     }
 
-    var menu = new jsoneditor.ContextMenu(items, {close: onClose});
+    var menu = new ContextMenu(items, {close: onClose});
     menu.show(anchor);
 };
 
@@ -2715,7 +2694,7 @@ jsoneditor.Node.prototype.showContextMenu = function (anchor, onClose) {
  * @return {String} type   Can be 'object', 'array', 'string', 'auto'
  * @private
  */
-jsoneditor.Node.prototype._getType = function(value) {
+Node.prototype._getType = function(value) {
     if (value instanceof Array) {
         return 'array';
     }
@@ -2736,7 +2715,7 @@ jsoneditor.Node.prototype._getType = function(value) {
  * @return {*} castedStr
  * @private
  */
-jsoneditor.Node.prototype._stringCast = function(str) {
+Node.prototype._stringCast = function(str) {
     var lower = str.toLowerCase(),
         num = Number(str),          // will nicely fail with '123ab'
         numFloat = parseFloat(str); // will nicely fail with '  '
@@ -2767,7 +2746,7 @@ jsoneditor.Node.prototype._stringCast = function(str) {
  * @return {String} escapedText
  * @private
  */
-jsoneditor.Node.prototype._escapeHTML = function (text) {
+Node.prototype._escapeHTML = function (text) {
     var htmlEscaped = String(text)
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
@@ -2785,9 +2764,9 @@ jsoneditor.Node.prototype._escapeHTML = function (text) {
  * @return {String} text
  * @private
  */
-jsoneditor.Node.prototype._unescapeHTML = function (escapedText) {
+Node.prototype._unescapeHTML = function (escapedText) {
     var json = '"' + this._escapeJSON(escapedText) + '"';
-    var htmlEscaped = jsoneditor.util.parse(json);
+    var htmlEscaped = util.parse(json);
     return htmlEscaped
         .replace(/&lt;/g, '<')
         .replace(/&gt;/g, '>')
@@ -2803,7 +2782,7 @@ jsoneditor.Node.prototype._unescapeHTML = function (escapedText) {
  * @return {String} escapedText
  * @private
  */
-jsoneditor.Node.prototype._escapeJSON = function (text) {
+Node.prototype._escapeJSON = function (text) {
     // TODO: replace with some smart regex (only when a new solution is faster!)
     var escaped = '';
     var i = 0, iMax = text.length;
diff --git a/jsoneditor/js/searchbox.js b/jsoneditor/js/searchbox.js
index 294dd87..12dc7cf 100644
--- a/jsoneditor/js/searchbox.js
+++ b/jsoneditor/js/searchbox.js
@@ -1,33 +1,11 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * @constructor jsoneditor.SearchBox
+ * @constructor SearchBox
  * Create a search box in given HTML container
- * @param {jsoneditor.JSONEditor} editor    The JSON Editor to attach to
+ * @param {JSONEditor} editor    The JSON Editor to attach to
  * @param {Element} container               HTML container element of where to
  *                                          create the search box
  */
-jsoneditor.SearchBox = function(editor, container) {
+function SearchBox (editor, container) {
     var searchBox = this;
 
     this.editor = editor;
@@ -119,15 +97,14 @@ jsoneditor.SearchBox = function(editor, container) {
     td = document.createElement('td');
     td.appendChild(searchPrevious);
     tr.appendChild(td);
-
-};
+}
 
 /**
  * Go to the next search result
  * @param {boolean} [focus]   If true, focus will be set to the next result
  *                            focus is false by default.
  */
-jsoneditor.SearchBox.prototype.next = function(focus) {
+SearchBox.prototype.next = function(focus) {
     if (this.results != undefined) {
         var index = (this.resultIndex != undefined) ? this.resultIndex + 1 : 0;
         if (index > this.results.length - 1) {
@@ -142,7 +119,7 @@ jsoneditor.SearchBox.prototype.next = function(focus) {
  * @param {boolean} [focus]   If true, focus will be set to the next result
  *                            focus is false by default.
  */
-jsoneditor.SearchBox.prototype.previous = function(focus) {
+SearchBox.prototype.previous = function(focus) {
     if (this.results != undefined) {
         var max = this.results.length - 1;
         var index = (this.resultIndex != undefined) ? this.resultIndex - 1 : max;
@@ -160,7 +137,7 @@ jsoneditor.SearchBox.prototype.previous = function(focus) {
  *                            focus is false by default.
  * @private
  */
-jsoneditor.SearchBox.prototype._setActiveResult = function(index, focus) {
+SearchBox.prototype._setActiveResult = function(index, focus) {
     // de-activate current active result
     if (this.activeResult) {
         var prevNode = this.activeResult.node;
@@ -207,7 +184,7 @@ jsoneditor.SearchBox.prototype._setActiveResult = function(index, focus) {
  * Cancel any running onDelayedSearch.
  * @private
  */
-jsoneditor.SearchBox.prototype._clearDelay = function() {
+SearchBox.prototype._clearDelay = function() {
     if (this.timeout != undefined) {
         clearTimeout(this.timeout);
         delete this.timeout;
@@ -220,7 +197,7 @@ jsoneditor.SearchBox.prototype._clearDelay = function() {
  * @param {Event} event
  * @private
  */
-jsoneditor.SearchBox.prototype._onDelayedSearch = function (event) {
+SearchBox.prototype._onDelayedSearch = function (event) {
     // execute the search after a short delay (reduces the number of
     // search actions while typing in the search text box)
     this._clearDelay();
@@ -239,7 +216,7 @@ jsoneditor.SearchBox.prototype._onDelayedSearch = function (event) {
  *                                 Default is false.
  * @private
  */
-jsoneditor.SearchBox.prototype._onSearch = function (event, forceSearch) {
+SearchBox.prototype._onSearch = function (event, forceSearch) {
     this._clearDelay();
 
     var value = this.dom.search.value;
@@ -270,14 +247,14 @@ jsoneditor.SearchBox.prototype._onSearch = function (event, forceSearch) {
  * @param {Event} event
  * @private
  */
-jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
+SearchBox.prototype._onKeyDown = function (event) {
     event = event || window.event;
     var keynum = event.which || event.keyCode;
     if (keynum == 27) { // ESC
         this.dom.search.value = '';  // clear search
         this._onSearch(event);
-        jsoneditor.util.preventDefault(event);
-        jsoneditor.util.stopPropagation(event);
+        util.preventDefault(event);
+        util.stopPropagation(event);
     }
     else if (keynum == 13) { // Enter
         if (event.ctrlKey) {
@@ -292,8 +269,8 @@ jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
             // move to the next search result
             this.next();
         }
-        jsoneditor.util.preventDefault(event);
-        jsoneditor.util.stopPropagation(event);
+        util.preventDefault(event);
+        util.stopPropagation(event);
     }
 };
 
@@ -302,7 +279,7 @@ jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
  * @param {Event} event
  * @private
  */
-jsoneditor.SearchBox.prototype._onKeyUp = function (event) {
+SearchBox.prototype._onKeyUp = function (event) {
     event = event || window.event;
     var keynum = event.which || event.keyCode;
     if (keynum != 27 && keynum != 13) { // !show and !Enter
diff --git a/jsoneditor/js/jsonformatter.js b/jsoneditor/js/texteditor.js
similarity index 75%
rename from jsoneditor/js/jsonformatter.js
rename to jsoneditor/js/texteditor.js
index 7415868..299ff00 100644
--- a/jsoneditor/js/jsonformatter.js
+++ b/jsoneditor/js/texteditor.js
@@ -1,28 +1,6 @@
 /**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
-// create namespace
-var jsoneditor = jsoneditor || {};
-
-/**
- * Create a JSONFormatter and attach it to given container
- * @constructor jsoneditor.JSONFormatter
+ * Create a TextEditor and attach it to given container
+ * @constructor TextEditor
  * @param {Element} container
  * @param {Object} [options]         Object with options. available options:
  *                                   {String} mode         Available values:
@@ -34,11 +12,23 @@ var jsoneditor = jsoneditor || {};
  *                                                         triggered on change
  * @param {JSON | String} [json]     initial contents of the formatter
  */
-jsoneditor.JSONFormatter = function (container, options, json) {
-    if (!(this instanceof jsoneditor.JSONFormatter)) {
-        throw new Error('JSONFormatter constructor called without "new".');
+function TextEditor(container, options, json) {
+    if (!(this instanceof TextEditor)) {
+        throw new Error('TextEditor constructor called without "new".');
     }
 
+    this._create(container, options, json);
+}
+
+/**
+ * Create a TextEditor and attach it to given container
+ * @constructor TextEditor
+ * @param {Element} container
+ * @param {Object} [options]         See description in constructor
+ * @param {JSON | String} [json]     initial contents of the formatter
+ * @private
+ */
+TextEditor.prototype._create = function (container, options, json) {
     // check availability of JSON parser (not available in IE7 and older)
     if (typeof(JSON) == 'undefined') {
         throw new Error('Your browser does not support JSON. \n\n' +
@@ -59,7 +49,7 @@ jsoneditor.JSONFormatter = function (container, options, json) {
             console.log('WARNING: Cannot load code editor, Ace library not loaded. ' +
                 'Falling back to plain text editor');
         }
-        if (jsoneditor.util.getInternetExplorerVersion() == 8) {
+        if (util.getInternetExplorerVersion() == 8) {
             this.mode = 'text';
             console.log('WARNING: Cannot load code editor, Ace is not supported on IE8. ' +
                 'Falling back to plain text editor');
@@ -78,8 +68,8 @@ jsoneditor.JSONFormatter = function (container, options, json) {
     this.frame = document.createElement('div');
     this.frame.className = 'jsoneditor';
     this.frame.onclick = function (event) {
-        // prevent default submit action when JSONFormatter is located inside a form
-        jsoneditor.util.preventDefault(event);
+        // prevent default submit action when TextEditor is located inside a form
+        util.preventDefault(event);
     };
 
     // create menu
@@ -183,21 +173,31 @@ jsoneditor.JSONFormatter = function (container, options, json) {
     }
 };
 
+/**
+ * Detach the editor from the DOM
+ * @private
+ */
+TextEditor.prototype._delete = function () {
+    if (this.frame && this.container && this.frame.parentNode == this.container) {
+        this.container.removeChild(this.frame);
+    }
+};
+
 /**
  * This method is executed on error.
- * It can be overwritten for each instance of the JSONFormatter
+ * It can be overwritten for each instance of the TextEditor
  * @param {String} err
  */
-jsoneditor.JSONFormatter.prototype.onError = function(err) {
+TextEditor.prototype.onError = function(err) {
     // action should be implemented for the instance
 };
 
 /**
  * Compact the code in the formatter
  */
-jsoneditor.JSONFormatter.prototype.compact = function () {
+TextEditor.prototype.compact = function () {
     try {
-        var json = jsoneditor.util.parse(this.getText());
+        var json = util.parse(this.getText());
         this.setText(JSON.stringify(json));
     }
     catch (err) {
@@ -208,9 +208,9 @@ jsoneditor.JSONFormatter.prototype.compact = function () {
 /**
  * Format the code in the formatter
  */
-jsoneditor.JSONFormatter.prototype.format = function () {
+TextEditor.prototype.format = function () {
     try {
-        var json = jsoneditor.util.parse(this.getText());
+        var json = util.parse(this.getText());
         this.setText(JSON.stringify(json, null, this.indentation));
     }
     catch (err) {
@@ -221,7 +221,7 @@ jsoneditor.JSONFormatter.prototype.format = function () {
 /**
  * Set focus to the formatter
  */
-jsoneditor.JSONFormatter.prototype.focus = function () {
+TextEditor.prototype.focus = function () {
     if (this.textarea) {
         this.textarea.focus();
     }
@@ -233,7 +233,7 @@ jsoneditor.JSONFormatter.prototype.focus = function () {
 /**
  * Resize the formatter
  */
-jsoneditor.JSONFormatter.prototype.resize = function () {
+TextEditor.prototype.resize = function () {
     if (this.editor) {
         var force = false;
         this.editor.resize(force);
@@ -244,7 +244,7 @@ jsoneditor.JSONFormatter.prototype.resize = function () {
  * Set json data in the formatter
  * @param {Object} json
  */
-jsoneditor.JSONFormatter.prototype.set = function(json) {
+TextEditor.prototype.set = function(json) {
     this.setText(JSON.stringify(json, null, this.indentation));
 };
 
@@ -252,15 +252,15 @@ jsoneditor.JSONFormatter.prototype.set = function(json) {
  * Get json data from the formatter
  * @return {Object} json
  */
-jsoneditor.JSONFormatter.prototype.get = function() {
-    return jsoneditor.util.parse(this.getText());
+TextEditor.prototype.get = function() {
+    return util.parse(this.getText());
 };
 
 /**
- * Get the text contents of the JSONFormatter
- * @return {String} text
+ * Get the text contents of the TextEditor
+ * @return {String} jsonText
  */
-jsoneditor.JSONFormatter.prototype.getText = function() {
+TextEditor.prototype.getText = function() {
     if (this.textarea) {
         return this.textarea.value;
     }
@@ -271,14 +271,26 @@ jsoneditor.JSONFormatter.prototype.getText = function() {
 };
 
 /**
- * Set the text contents of the JSONFormatter
- * @param {String} text
+ * Set the text contents of the TextEditor
+ * @param {String} jsonText
  */
-jsoneditor.JSONFormatter.prototype.setText = function(text) {
+TextEditor.prototype.setText = function(jsonText) {
     if (this.textarea) {
-        this.textarea.value = text;
+        this.textarea.value = jsonText;
     }
     if (this.editor) {
-        return this.editor.setValue(text, -1);
+        this.editor.setValue(jsonText, -1);
     }
 };
+
+// register modes at the JSONEditor
+JSONEditor.modes.text = {
+    editor: TextEditor,
+    data: 'text',
+    load: TextEditor.prototype.format
+};
+JSONEditor.modes.code = {
+    editor: TextEditor,
+    data: 'text',
+    load: TextEditor.prototype.format
+};
diff --git a/jsoneditor/js/treeeditor.js b/jsoneditor/js/treeeditor.js
new file mode 100644
index 0000000..e1f4dfe
--- /dev/null
+++ b/jsoneditor/js/treeeditor.js
@@ -0,0 +1,761 @@
+/**
+ * @constructor TreeEditor
+ * @param {Element} container    Container element
+ * @param {Object}  [options]    Object with options. available options:
+ *                               {String} mode      Editor mode. Available values:
+ *                                                  'tree' (default), 'view',
+ *                                                  and 'form'.
+ *                               {Boolean} search   Enable search box.
+ *                                                  True by default
+ *                               {Boolean} history  Enable history (undo/redo).
+ *                                                  True by default
+ *                               {function} change  Callback method, triggered
+ *                                                  on change of contents
+ *                               {String} name      Field name for the root node.
+ * @param {Object | undefined} json JSON object
+ */
+function TreeEditor(container, options, json) {
+    if (!(this instanceof TreeEditor)) {
+        throw new Error('TreeEditor constructor called without "new".');
+    }
+
+    this._create(container, options, json);
+}
+
+/**
+ * Create the TreeEditor
+ * @param {Element} container    Container element
+ * @param {Object}  [options]    See description in constructor
+ * @param {Object | undefined} json JSON object
+ * @private
+ */
+TreeEditor.prototype._create = function (container, options, json) {
+    // check availability of JSON parser (not available in IE7 and older)
+    if (typeof(JSON) == 'undefined') {
+        throw new Error ('Your browser does not support JSON. \n\n' +
+            'Please install the newest version of your browser.\n' +
+            '(all modern browsers support JSON).');
+    }
+
+    if (!container) {
+        throw new Error('No container element provided.');
+    }
+    this.container = container;
+    this.dom = {};
+    this.highlighter = new Highlighter();
+    this.selection = undefined; // will hold the last input selection
+
+    this._setOptions(options);
+
+    if (this.options.history && !this.mode.view) {
+        this.history = new History(this);
+    }
+
+    this._createFrame();
+    this._createTable();
+
+    this.set(json || {});
+};
+
+/**
+ * Detach the editor from the DOM
+ * @private
+ */
+TreeEditor.prototype._delete = function () {
+    if (this.frame && this.container && this.frame.parentNode == this.container) {
+        this.container.removeChild(this.frame);
+    }
+};
+
+/**
+ * Initialize and set default options
+ * @param {Object}  [options]    See description in constructor
+ * @private
+ */
+TreeEditor.prototype._setOptions = function (options) {
+    this.options = {
+        search: true,
+        history: true,
+        mode: 'tree',
+        name: undefined   // field name of root node
+    };
+
+    // copy all options
+    if (options) {
+        for (var prop in options) {
+            if (options.hasOwnProperty(prop)) {
+                this.options[prop] = options[prop];
+            }
+        }
+
+        // check for deprecated options
+        if (options['enableSearch']) {
+            // deprecated since version 1.6.0, 2012-11-03
+            this.options.search = options['enableSearch'];
+            console.log('WARNING: Option "enableSearch" is deprecated. Use "search" instead.');
+        }
+        if (options['enableHistory']) {
+            // deprecated since version 1.6.0, 2012-11-03
+            this.options.history = options['enableHistory'];
+            console.log('WARNING: Option "enableHistory" is deprecated. Use "history" instead.');
+        }
+        if (options['mode'] == 'editor') {
+            // deprecated since version 2.2.0, 2013-04-30
+            this.options.mode = 'tree';
+            console.log('WARNING: Mode "editor" is deprecated. Use "tree" instead.');
+        }
+        if (options['mode'] == 'viewer') {
+            // deprecated since version 2.2.0, 2013-04-30
+            this.options.mode = 'view';
+            console.log('WARNING: Mode "viewer" is deprecated. Use "view" instead.');
+        }
+    }
+
+    // interpret the mode options
+    this.mode = {
+        edit: (this.options.mode != 'view' && this.options.mode != 'form'),
+        view: (this.options.mode == 'view'),
+        form: (this.options.mode == 'form')
+    };
+};
+
+// node currently being edited
+TreeEditor.focusNode = undefined;
+
+/**
+ * Set JSON object in editor
+ * @param {Object | undefined} json      JSON data
+ * @param {String}             [name]    Optional field name for the root node.
+ *                                       Can also be set using setName(name).
+ */
+TreeEditor.prototype.set = function (json, name) {
+    // adjust field name for root node
+    if (name) {
+        this.options.name = name;
+    }
+
+    // verify if json is valid JSON, ignore when a function
+    if (json instanceof Function || (json === undefined)) {
+        this.clear();
+    }
+    else {
+        this.content.removeChild(this.table);  // Take the table offline
+
+        // replace the root node
+        var params = {
+            'field': this.options.name,
+            'value': json
+        };
+        var node = new Node(this, params);
+        this._setRoot(node);
+
+        // expand
+        var recurse = false;
+        this.node.expand(recurse);
+
+        this.content.appendChild(this.table);  // Put the table online again
+    }
+
+    // TODO: maintain history, store last state and previous document
+    if (this.history) {
+        this.history.clear();
+    }
+};
+
+/**
+ * Get JSON object from editor
+ * @return {Object | undefined} json
+ */
+TreeEditor.prototype.get = function () {
+    // remove focus from currently edited node
+    if (TreeEditor.focusNode) {
+        TreeEditor.focusNode.blur();
+    }
+
+    if (this.node) {
+        return this.node.getValue();
+    }
+    else {
+        return undefined;
+    }
+};
+
+/**
+ * Get the text contents of the TreeEditor
+ * @return {String} jsonText
+ */
+TreeEditor.prototype.getText = function() {
+    return JSON.stringify(this.get());
+};
+
+/**
+ * Set the text contents of the TreeEditor
+ * @param {String} jsonText
+ */
+TreeEditor.prototype.setText = function(jsonText) {
+    this.set(util.parse(jsonText));
+};
+
+/**
+ * Set a field name for the root node.
+ * @param {String | undefined} name
+ */
+TreeEditor.prototype.setName = function (name) {
+    this.options.name = name;
+    if (this.node) {
+        this.node.updateField(this.options.name);
+    }
+};
+
+/**
+ * Get the field name for the root node.
+ * @return {String | undefined} name
+ */
+TreeEditor.prototype.getName = function () {
+    return this.options.name;
+};
+
+/**
+ * Remove the root node from the editor
+ */
+TreeEditor.prototype.clear = function () {
+    if (this.node) {
+        this.node.collapse();
+        this.tbody.removeChild(this.node.getDom());
+        delete this.node;
+    }
+};
+
+/**
+ * Set the root node for the json editor
+ * @param {Node} node
+ * @private
+ */
+TreeEditor.prototype._setRoot = function (node) {
+    this.clear();
+
+    this.node = node;
+
+    // append to the dom
+    this.tbody.appendChild(node.getDom());
+};
+
+/**
+ * Search text in all nodes
+ * The nodes will be expanded when the text is found one of its childs,
+ * else it will be collapsed. Searches are case insensitive.
+ * @param {String} text
+ * @return {Object[]} results  Array with nodes containing the search results
+ *                             The result objects contains fields:
+ *                             - {Node} node,
+ *                             - {String} elem  the dom element name where
+ *                                              the result is found ('field' or
+ *                                              'value')
+ */
+TreeEditor.prototype.search = function (text) {
+    var results;
+    if (this.node) {
+        this.content.removeChild(this.table);  // Take the table offline
+        results = this.node.search(text);
+        this.content.appendChild(this.table);  // Put the table online again
+    }
+    else {
+        results = [];
+    }
+
+    return results;
+};
+
+/**
+ * Expand all nodes
+ */
+TreeEditor.prototype.expandAll = function () {
+    if (this.node) {
+        this.content.removeChild(this.table);  // Take the table offline
+        this.node.expand();
+        this.content.appendChild(this.table);  // Put the table online again
+    }
+};
+
+/**
+ * Collapse all nodes
+ */
+TreeEditor.prototype.collapseAll = function () {
+    if (this.node) {
+        this.content.removeChild(this.table);  // Take the table offline
+        this.node.collapse();
+        this.content.appendChild(this.table);  // Put the table online again
+    }
+};
+
+/**
+ * The method onChange is called whenever a field or value is changed, created,
+ * deleted, duplicated, etc.
+ * @param {String} action  Change action. Available values: "editField",
+ *                         "editValue", "changeType", "appendNode",
+ *                         "removeNode", "duplicateNode", "moveNode", "expand",
+ *                         "collapse".
+ * @param {Object} params  Object containing parameters describing the change.
+ *                         The parameters in params depend on the action (for
+ *                         example for "editValue" the Node, old value, and new
+ *                         value are provided). params contains all information
+ *                         needed to undo or redo the action.
+ * @private
+ */
+TreeEditor.prototype._onAction = function (action, params) {
+    // add an action to the history
+    if (this.history) {
+        this.history.add(action, params);
+    }
+
+    // trigger the onChange callback
+    if (this.options.change) {
+        try {
+            this.options.change();
+        }
+        catch (err) {
+            console.log('Error in change callback: ', err);
+        }
+    }
+};
+
+/**
+ * Start autoscrolling when given mouse position is above the top of the
+ * editor contents, or below the bottom.
+ * @param {Number} mouseY  Absolute mouse position in pixels
+ */
+TreeEditor.prototype.startAutoScroll = function (mouseY) {
+    var me = this;
+    var content = this.content;
+    var top = util.getAbsoluteTop(content);
+    var height = content.clientHeight;
+    var bottom = top + height;
+    var margin = 24;
+    var interval = 50; // ms
+
+    if ((mouseY < top + margin) && content.scrollTop > 0) {
+        this.autoScrollStep = ((top + margin) - mouseY) / 3;
+    }
+    else if (mouseY > bottom - margin &&
+            height + content.scrollTop < content.scrollHeight) {
+        this.autoScrollStep = ((bottom - margin) - mouseY) / 3;
+    }
+    else {
+        this.autoScrollStep = undefined;
+    }
+
+    if (this.autoScrollStep) {
+        if (!this.autoScrollTimer) {
+            this.autoScrollTimer = setInterval(function () {
+                if (me.autoScrollStep) {
+                    content.scrollTop -= me.autoScrollStep;
+                }
+                else {
+                    me.stopAutoScroll();
+                }
+            }, interval);
+        }
+    }
+    else {
+        this.stopAutoScroll();
+    }
+};
+
+/**
+ * Stop auto scrolling. Only applicable when scrolling
+ */
+TreeEditor.prototype.stopAutoScroll = function () {
+    if (this.autoScrollTimer) {
+        clearTimeout(this.autoScrollTimer);
+        delete this.autoScrollTimer;
+    }
+    if (this.autoScrollStep) {
+        delete this.autoScrollStep;
+    }
+};
+
+
+/**
+ * Set the focus to an element in the TreeEditor, set text selection, and
+ * set scroll position.
+ * @param {Object} selection  An object containing fields:
+ *                            {Element | undefined} dom     The dom element
+ *                                                          which has focus
+ *                            {Range | TextRange} range     A text selection
+ *                            {Number} scrollTop            Scroll position
+ */
+TreeEditor.prototype.setSelection = function (selection) {
+    if (!selection) {
+        return;
+    }
+
+    if ('scrollTop' in selection && this.content) {
+        // TODO: animated scroll
+        this.content.scrollTop = selection.scrollTop;
+    }
+    if (selection.range) {
+        util.setSelectionOffset(selection.range);
+    }
+    if (selection.dom) {
+        selection.dom.focus();
+    }
+};
+
+/**
+ * Get the current focus
+ * @return {Object} selection An object containing fields:
+ *                            {Element | undefined} dom     The dom element
+ *                                                          which has focus
+ *                            {Range | TextRange} range     A text selection
+ *                            {Number} scrollTop            Scroll position
+ */
+TreeEditor.prototype.getSelection = function () {
+    return {
+        dom: TreeEditor.domFocus,
+        scrollTop: this.content ? this.content.scrollTop : 0,
+        range: util.getSelectionOffset()
+    };
+};
+
+/**
+ * Adjust the scroll position such that given top position is shown at 1/4
+ * of the window height.
+ * @param {Number} top
+ * @param {function(boolean)} [callback]   Callback, executed when animation is
+ *                                         finished. The callback returns true
+ *                                         when animation is finished, or false
+ *                                         when not.
+ */
+TreeEditor.prototype.scrollTo = function (top, callback) {
+    var content = this.content;
+    if (content) {
+        var editor = this;
+        // cancel any running animation
+        if (editor.animateTimeout) {
+            clearTimeout(editor.animateTimeout);
+            delete editor.animateTimeout;
+        }
+        if (editor.animateCallback) {
+            editor.animateCallback(false);
+            delete editor.animateCallback;
+        }
+
+        // calculate final scroll position
+        var height = content.clientHeight;
+        var bottom = content.scrollHeight - height;
+        var finalScrollTop = Math.min(Math.max(top - height / 4, 0), bottom);
+
+        // animate towards the new scroll position
+        var animate = function () {
+            var scrollTop = content.scrollTop;
+            var diff = (finalScrollTop - scrollTop);
+            if (Math.abs(diff) > 3) {
+                content.scrollTop += diff / 3;
+                editor.animateCallback = callback;
+                editor.animateTimeout = setTimeout(animate, 50);
+            }
+            else {
+                // finished
+                if (callback) {
+                    callback(true);
+                }
+                content.scrollTop = finalScrollTop;
+                delete editor.animateTimeout;
+                delete editor.animateCallback;
+            }
+        };
+        animate();
+    }
+    else {
+        if (callback) {
+            callback(false);
+        }
+    }
+};
+
+/**
+ * Create main frame
+ * @private
+ */
+TreeEditor.prototype._createFrame = function () {
+    // create the frame
+    this.frame = document.createElement('div');
+    this.frame.className = 'jsoneditor';
+    this.container.appendChild(this.frame);
+
+    // create one global event listener to handle all events from all nodes
+    var editor = this;
+    var onEvent = function (event) {
+        editor._onEvent(event);
+    };
+    this.frame.onclick = function (event) {
+        onEvent(event);
+
+        // prevent default submit action when TreeEditor is located inside a form
+        util.preventDefault(event);
+    };
+    this.frame.oninput = onEvent;
+    this.frame.onchange = onEvent;
+    this.frame.onkeydown = onEvent;
+    this.frame.onkeyup = onEvent;
+    this.frame.oncut = onEvent;
+    this.frame.onpaste = onEvent;
+    this.frame.onmousedown = onEvent;
+    this.frame.onmouseup = onEvent;
+    this.frame.onmouseover = onEvent;
+    this.frame.onmouseout = onEvent;
+    // Note: focus and blur events do not propagate, therefore they defined
+    // using an eventListener with useCapture=true
+    // see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
+    util.addEventListener(this.frame, 'focus', onEvent, true);
+    util.addEventListener(this.frame, 'blur', onEvent, true);
+    this.frame.onfocusin = onEvent;  // for IE
+    this.frame.onfocusout = onEvent; // for IE
+
+    // create menu
+    this.menu = document.createElement('div');
+    this.menu.className = 'menu';
+    this.frame.appendChild(this.menu);
+
+    // create expand all button
+    var expandAll = document.createElement('button');
+    expandAll.className = 'expand-all';
+    expandAll.title = 'Expand all fields';
+    expandAll.onclick = function () {
+        editor.expandAll();
+    };
+    this.menu.appendChild(expandAll);
+
+    // create expand all button
+    var collapseAll = document.createElement('button');
+    collapseAll.title = 'Collapse all fields';
+    collapseAll.className = 'collapse-all';
+    collapseAll.onclick = function () {
+        editor.collapseAll();
+    };
+    this.menu.appendChild(collapseAll);
+
+    // create undo/redo buttons
+    if (this.history) {
+        // create separator
+        var separator = document.createElement('span');
+        separator.innerHTML = '&nbsp;';
+        this.menu.appendChild(separator);
+
+        // create undo button
+        var undo = document.createElement('button');
+        undo.className = 'undo';
+        undo.title = 'Undo last action (Ctrl+Z)';
+        undo.onclick = function () {
+            editor._onUndo();
+        };
+        this.menu.appendChild(undo);
+        this.dom.undo = undo;
+
+        // create redo button
+        var redo = document.createElement('button');
+        redo.className = 'redo';
+        redo.title = 'Redo (Ctrl+Shift+Z)';
+        redo.onclick = function () {
+            editor._onRedo();
+        };
+        this.menu.appendChild(redo);
+        this.dom.redo = redo;
+
+        // register handler for onchange of history
+        this.history.onChange = function () {
+            undo.disabled = !editor.history.canUndo();
+            redo.disabled = !editor.history.canRedo();
+        };
+        this.history.onChange();
+    }
+
+    // create search box
+    if (this.options.search) {
+        this.searchBox = new SearchBox(this, this.menu);
+    }
+};
+
+/**
+ * Perform an undo action
+ * @private
+ */
+TreeEditor.prototype._onUndo = function () {
+    if (this.history) {
+        // undo last action
+        this.history.undo();
+
+        // trigger change callback
+        if (this.options.change) {
+            this.options.change();
+        }
+    }
+};
+
+/**
+ * Perform a redo action
+ * @private
+ */
+TreeEditor.prototype._onRedo = function () {
+    if (this.history) {
+        // redo last action
+        this.history.redo();
+
+        // trigger change callback
+        if (this.options.change) {
+            this.options.change();
+        }
+    }
+};
+
+/**
+ * Event handler
+ * @param event
+ * @private
+ */
+TreeEditor.prototype._onEvent = function (event) {
+    event = event || window.event;
+    var target = event.target || event.srcElement;
+
+    if (event.type == 'keydown') {
+        this._onKeyDown(event);
+    }
+
+    if (event.type == 'focus') {
+        TreeEditor.domFocus = target;
+    }
+
+    var node = Node.getNodeFromTarget(target);
+    if (node) {
+        node.onEvent(event);
+    }
+};
+
+/**
+ * Event handler for keydown. Handles shortcut keys
+ * @param {Event} event
+ * @private
+ */
+TreeEditor.prototype._onKeyDown = function (event) {
+    var keynum = event.which || event.keyCode;
+    var ctrlKey = event.ctrlKey;
+    var shiftKey = event.shiftKey;
+    var handled = false;
+
+    if (keynum == 9) { // Tab or Shift+Tab
+        // FIXME: selecting all text on tab key does not work on IE8 (-> put selectContentEditable() in keyup too?)
+        //Node.select(TreeEditor.domFocus);
+        setTimeout(function () {
+            // select all text when moving focus to an editable div
+            util.selectContentEditable(TreeEditor.domFocus);
+        }, 0);
+    }
+
+    if (this.searchBox) {
+        if (ctrlKey && keynum == 70) { // Ctrl+F
+            this.searchBox.dom.search.focus();
+            this.searchBox.dom.search.select();
+            handled = true;
+        }
+        else if (keynum == 114 || (ctrlKey && keynum == 71)) { // F3 or Ctrl+G
+            var focus = true;
+            if (!shiftKey) {
+                // select next search result (F3 or Ctrl+G)
+                this.searchBox.next(focus);
+            }
+            else {
+                // select previous search result (Shift+F3 or Ctrl+Shift+G)
+                this.searchBox.previous(focus);
+            }
+
+            handled = true;
+        }
+    }
+
+    if (this.history) {
+        if (ctrlKey && !shiftKey && keynum == 90) { // Ctrl+Z
+            // undo
+            this._onUndo();
+            handled = true;
+        }
+        else if (ctrlKey && shiftKey && keynum == 90) { // Ctrl+Shift+Z
+            // redo
+            this._onRedo();
+            handled = true;
+        }
+    }
+
+    if (handled) {
+        util.preventDefault(event);
+        util.stopPropagation(event);
+    }
+};
+
+/**
+ * Create main table
+ * @private
+ */
+TreeEditor.prototype._createTable = function () {
+    var contentOuter = document.createElement('div');
+    contentOuter.className = 'outer';
+    this.contentOuter = contentOuter;
+
+    this.content = document.createElement('div');
+    this.content.className = 'content';
+    contentOuter.appendChild(this.content);
+
+    this.table = document.createElement('table');
+    this.table.className = 'content';
+    this.content.appendChild(this.table);
+
+    // IE8 does not handle overflow='auto' correctly.
+    // Therefore, set overflow to 'scroll'
+    var ieVersion = util.getInternetExplorerVersion();
+    if (ieVersion == 8) {
+        this.content.style.overflow = 'scroll';
+    }
+
+    // create colgroup where the first two columns don't have a fixed
+    // width, and the edit columns do have a fixed width
+    var col;
+    this.colgroupContent = document.createElement('colgroup');
+    if (this.mode.edit) {
+        col = document.createElement('col');
+        col.width = "24px";
+        this.colgroupContent.appendChild(col);
+    }
+    col = document.createElement('col');
+    col.width = "24px";
+    this.colgroupContent.appendChild(col);
+    col = document.createElement('col');
+    this.colgroupContent.appendChild(col);
+    this.table.appendChild(this.colgroupContent);
+
+    this.tbody = document.createElement('tbody');
+    this.table.appendChild(this.tbody);
+
+    this.frame.appendChild(contentOuter);
+};
+
+// register modes at the JSONEditor
+JSONEditor.modes.tree = {
+    editor: TreeEditor,
+    data: 'json'
+};
+JSONEditor.modes.view = {
+    editor: TreeEditor,
+    data: 'json'
+};
+JSONEditor.modes.form = {
+    editor: TreeEditor,
+    data: 'json'
+};
+// Deprecated modes (deprecated since version 2.2.0)
+JSONEditor.modes.editor = {
+    editor: TreeEditor,
+    data: 'json'
+};
+JSONEditor.modes.viewer = {
+    editor: TreeEditor,
+    data: 'json'
+};
diff --git a/jsoneditor/js/util.js b/jsoneditor/js/util.js
index a9ae2a5..737f000 100644
--- a/jsoneditor/js/util.js
+++ b/jsoneditor/js/util.js
@@ -1,25 +1,5 @@
-/**
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
- *
- * @author  Jos de Jong, <wjosdejong@gmail.com>
- */
-
 // create namespace
-var jsoneditor = jsoneditor || {};
-jsoneditor.util = {};
+util = {};
 
 // Internet Explorer 8 and older does not support Array.indexOf,
 // so we define it here in that case
@@ -58,13 +38,13 @@ if (typeof console === 'undefined') {
  * On exception, the jsonString is validated and a detailed error is thrown.
  * @param {String} jsonString
  */
-jsoneditor.util.parse = function (jsonString) {
+util.parse = function (jsonString) {
     try {
         return JSON.parse(jsonString);
     }
     catch (err) {
         // get a detailed error message using validate
-        var message = jsoneditor.util.validate(jsonString) || err;
+        var message = util.validate(jsonString) || err;
         throw new Error(message);
     }
 };
@@ -79,7 +59,7 @@ jsoneditor.util.parse = function (jsonString) {
  *                              the data is invalid. This message is HTML
  *                              formatted.
  */
-jsoneditor.util.validate = function (jsonString) {
+util.validate = function (jsonString) {
     var message = undefined;
 
     try {
@@ -103,13 +83,42 @@ jsoneditor.util.validate = function (jsonString) {
     return message;
 };
 
+/**
+ * Extend object a with the properties of object b
+ * @param {Object} a
+ * @param {Object} b
+ * @return {Object} a
+ */
+util.extend = function (a, b) {
+    for (var prop in b) {
+        if (b.hasOwnProperty(prop)) {
+            a[prop] = b[prop];
+        }
+    }
+    return a;
+};
+
+/**
+ * Remove all properties from object a
+ * @param {Object} a
+ * @return {Object} a
+ */
+util.clear = function (a) {
+    for (var prop in a) {
+        if (a.hasOwnProperty(prop)) {
+            delete a[prop];
+        }
+    }
+    return a;
+};
+
 /**
  * Retrieve the absolute left value of a DOM element
  * @param {Element} elem    A dom element, for example a div
  * @return {Number} left    The absolute left position of this element
  *                          in the browser page.
  */
-jsoneditor.util.getAbsoluteLeft = function (elem) {
+util.getAbsoluteLeft = function (elem) {
     var left = elem.offsetLeft;
     var body = document.body;
     var e = elem.offsetParent;
@@ -127,7 +136,7 @@ jsoneditor.util.getAbsoluteLeft = function (elem) {
  * @return {Number} top    The absolute top position of this element
  *                          in the browser page.
  */
-jsoneditor.util.getAbsoluteTop = function (elem) {
+util.getAbsoluteTop = function (elem) {
     var top = elem.offsetTop;
     var body = document.body;
     var e = elem.offsetParent;
@@ -144,7 +153,7 @@ jsoneditor.util.getAbsoluteTop = function (elem) {
  * @param {Event} event
  * @return {Number} mouseY
  */
-jsoneditor.util.getMouseY = function (event) {
+util.getMouseY = function (event) {
     var mouseY;
     if ('pageY' in event) {
         mouseY = event.pageY;
@@ -162,7 +171,7 @@ jsoneditor.util.getMouseY = function (event) {
  * @param {Event} event
  * @return {Number} mouseX
  */
-jsoneditor.util.getMouseX = function (event) {
+util.getMouseX = function (event) {
     var mouseX;
     if ('pageX' in event) {
         mouseX = event.pageX;
@@ -179,7 +188,7 @@ jsoneditor.util.getMouseX = function (event) {
  * Get the window height
  * @return {Number} windowHeight
  */
-jsoneditor.util.getWindowHeight = function () {
+util.getWindowHeight = function () {
     if ('innerHeight' in window) {
         return window.innerHeight;
     }
@@ -195,7 +204,7 @@ jsoneditor.util.getWindowHeight = function () {
  * @param {Element} elem
  * @param {String} className
  */
-jsoneditor.util.addClassName = function(elem, className) {
+util.addClassName = function(elem, className) {
     var classes = elem.className.split(' ');
     if (classes.indexOf(className) == -1) {
         classes.push(className); // add the class to the array
@@ -208,7 +217,7 @@ jsoneditor.util.addClassName = function(elem, className) {
  * @param {Element} elem
  * @param {String} className
  */
-jsoneditor.util.removeClassName = function(elem, className) {
+util.removeClassName = function(elem, className) {
     var classes = elem.className.split(' ');
     var index = classes.indexOf(className);
     if (index != -1) {
@@ -222,7 +231,7 @@ jsoneditor.util.removeClassName = function(elem, className) {
  * the formatting from the div itself is not stripped, only from its childs.
  * @param {Element} divElement
  */
-jsoneditor.util.stripFormatting = function (divElement) {
+util.stripFormatting = function (divElement) {
     var childs = divElement.childNodes;
     for (var i = 0, iMax = childs.length; i < iMax; i++) {
         var child = childs[i];
@@ -245,7 +254,7 @@ jsoneditor.util.stripFormatting = function (divElement) {
         }
 
         // recursively strip childs
-        jsoneditor.util.stripFormatting(child);
+        util.stripFormatting(child);
     }
 };
 
@@ -256,7 +265,7 @@ jsoneditor.util.stripFormatting = function (divElement) {
  * http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
  * @param {Element} contentEditableElement   A content editable div
  */
-jsoneditor.util.setEndOfContentEditable = function (contentEditableElement) {
+util.setEndOfContentEditable = function (contentEditableElement) {
     var range, selection;
     if(document.createRange) {//Firefox, Chrome, Opera, Safari, IE 9+
         range = document.createRange();//Create a range (a range is a like the selection but invisible)
@@ -279,7 +288,7 @@ jsoneditor.util.setEndOfContentEditable = function (contentEditableElement) {
  * http://stackoverflow.com/a/3806004/1262753
  * @param {Element} contentEditableElement   A content editable div
  */
-jsoneditor.util.selectContentEditable = function (contentEditableElement) {
+util.selectContentEditable = function (contentEditableElement) {
     if (!contentEditableElement || contentEditableElement.nodeName != 'DIV') {
         return;
     }
@@ -303,7 +312,7 @@ jsoneditor.util.selectContentEditable = function (contentEditableElement) {
  * http://stackoverflow.com/questions/4687808/contenteditable-selected-text-save-and-restore
  * @return {Range | TextRange | null} range
  */
-jsoneditor.util.getSelection = function () {
+util.getSelection = function () {
     if (window.getSelection) {
         var sel = window.getSelection();
         if (sel.getRangeAt && sel.rangeCount) {
@@ -320,7 +329,7 @@ jsoneditor.util.getSelection = function () {
  * http://stackoverflow.com/questions/4687808/contenteditable-selected-text-save-and-restore
  * @param {Range | TextRange | null} range
  */
-jsoneditor.util.setSelection = function (range) {
+util.setSelection = function (range) {
     if (range) {
         if (window.getSelection) {
             var sel = window.getSelection();
@@ -341,8 +350,8 @@ jsoneditor.util.setSelection = function (range) {
  *                                                   selected text element
  *                          Returns null if no text selection is found
  */
-jsoneditor.util.getSelectionOffset = function () {
-    var range = jsoneditor.util.getSelection();
+util.getSelectionOffset = function () {
+    var range = util.getSelection();
 
     if (range && 'startOffset' in range && 'endOffset' in range &&
             range.startContainer && (range.startContainer == range.endContainer)) {
@@ -366,7 +375,7 @@ jsoneditor.util.getSelectionOffset = function () {
  *                              {Number} startOffset
  *                              {Number} endOffset
  */
-jsoneditor.util.setSelectionOffset = function (params) {
+util.setSelectionOffset = function (params) {
     if (document.createRange && window.getSelection) {
         var selection = window.getSelection();
         if(selection) {
@@ -376,7 +385,7 @@ jsoneditor.util.setSelectionOffset = function (params) {
             range.setStart(params.container.firstChild, params.startOffset);
             range.setEnd(params.container.firstChild, params.endOffset);
 
-            jsoneditor.util.setSelection(range);
+            util.setSelection(range);
         }
     }
     else {
@@ -390,7 +399,7 @@ jsoneditor.util.setSelectionOffset = function (params) {
  * @param {Object} [buffer]
  * @return {String} innerText
  */
-jsoneditor.util.getInnerText = function (element, buffer) {
+util.getInnerText = function (element, buffer) {
     var first = (buffer == undefined);
     if (first) {
         buffer = {
@@ -426,7 +435,7 @@ jsoneditor.util.getInnerText = function (element, buffer) {
                     innerText += '\n';
                     buffer.flush();
                 }
-                innerText += jsoneditor.util.getInnerText(child, buffer);
+                innerText += util.getInnerText(child, buffer);
                 buffer.set('\n');
             }
             else if (child.nodeName == 'BR') {
@@ -434,14 +443,14 @@ jsoneditor.util.getInnerText = function (element, buffer) {
                 buffer.set('\n');
             }
             else {
-                innerText += jsoneditor.util.getInnerText(child, buffer);
+                innerText += util.getInnerText(child, buffer);
             }
         }
 
         return innerText;
     }
     else {
-        if (element.nodeName == 'P' && jsoneditor.util.getInternetExplorerVersion() != -1) {
+        if (element.nodeName == 'P' && util.getInternetExplorerVersion() != -1) {
             // On Internet Explorer, a <p> with hasChildNodes()==false is
             // rendered with a new line. Note that a <p> with
             // hasChildNodes()==true is rendered without a new line
@@ -461,7 +470,7 @@ jsoneditor.util.getInnerText = function (element, buffer) {
  * Source: http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx
  * @return {Number} Internet Explorer version, or -1 in case of an other browser
  */
-jsoneditor.util.getInternetExplorerVersion = function() {
+util.getInternetExplorerVersion = function() {
     if (_ieVersion == -1) {
         var rv = -1; // Return value assumes failure.
         if (navigator.appName == 'Microsoft Internet Explorer')
@@ -495,7 +504,7 @@ var _ieVersion = -1;
  * @param {boolean}     [useCapture] false by default
  * @return {function}   the created event listener
  */
-jsoneditor.util.addEventListener = function (element, action, listener, useCapture) {
+util.addEventListener = function (element, action, listener, useCapture) {
     if (element.addEventListener) {
         if (useCapture === undefined)
             useCapture = false;
@@ -523,7 +532,7 @@ jsoneditor.util.addEventListener = function (element, action, listener, useCaptu
  * @param {function} listener  The listener function
  * @param {boolean}  [useCapture]   false by default
  */
-jsoneditor.util.removeEventListener = function(element, action, listener, useCapture) {
+util.removeEventListener = function(element, action, listener, useCapture) {
     if (element.removeEventListener) {
         // non-IE browsers
         if (useCapture === undefined)
@@ -545,7 +554,7 @@ jsoneditor.util.removeEventListener = function(element, action, listener, useCap
  * Stop event propagation
  * @param {Event} event
  */
-jsoneditor.util.stopPropagation = function (event) {
+util.stopPropagation = function (event) {
     if (!event) {
         event = window.event;
     }
@@ -563,7 +572,7 @@ jsoneditor.util.stopPropagation = function (event) {
  * Cancels the event if it is cancelable, without stopping further propagation of the event.
  * @param {Event} event
  */
-jsoneditor.util.preventDefault = function (event) {
+util.preventDefault = function (event) {
     if (!event) {
         event = window.event;
     }