diff --git a/.jshintignore b/.jshintignore
index aab1b485b..7b013e0da 100644
--- a/.jshintignore
+++ b/.jshintignore
@@ -11,6 +11,7 @@ www/common/hyperscript.js
 www/common/tippy.min.js
 
 www/pad/wysiwygarea-plugin.js
-www/pad2/wysiwygarea-plugin.js
+www/pad/mediatag-plugin.js
+www/pad/mediatag-plugin-dialog.js
 
 www/common/media-tag-nacl.min.js
diff --git a/bower.json b/bower.json
index 24461eae7..af5560bf6 100644
--- a/bower.json
+++ b/bower.json
@@ -21,7 +21,7 @@
     "jquery": "~2.1.3",
     "tweetnacl": "0.12.2",
     "components-font-awesome": "^4.6.3",
-    "ckeditor": "~4.7",
+    "ckeditor": "4.7.3",
     "codemirror": "^5.19.0",
     "requirejs": "2.3.5",
     "marked": "0.3.5",
diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js
index aa551953e..3dc280116 100644
--- a/customize.dist/ckeditor-config.js
+++ b/customize.dist/ckeditor-config.js
@@ -10,7 +10,7 @@ CKEDITOR.editorConfig = function( config ) {
     // document itself and causes problems when it's sent across the wire and reflected back
     config.removePlugins= 'resize,elementspath';
     config.resize_enabled= false; //bottom-bar
-    config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify';
+    config.extraPlugins= 'autolink,colorbutton,colordialog,font,indentblock,justify,mediatag';
     config.toolbarGroups= [
         // {"name":"clipboard","groups":["clipboard","undo"]},
         //{"name":"editing","groups":["find","selection"]},
diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 2f31a516e..916afe135 100644
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -15,6 +15,7 @@ var map = {
 var getStoredLanguage = function () { return localStorage.getItem(LS_LANG); };
 var getBrowserLanguage = function () { return navigator.language || navigator.userLanguage; };
 var getLanguage = function () {
+    if (window.cryptpadLanguage) { return window.cryptpadLanguage; }
     if (getStoredLanguage()) { return getStoredLanguage(); }
     var l = getBrowserLanguage() || '';
     if (Object.keys(map).indexOf(l) !== -1) {
diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 6cebaec88..55945ccd2 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -570,69 +570,69 @@ define([
     };
 
     var appToolbar = function () {
-        return h('div#toolbar.toolbar-container');
+        return h('div#toolbar.cryptpad-toolbar');
+    };
+    var appToolbar3 = function () {
+        return h('div#cp-toolbar.cp-toolbar-container');
     };
 
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
-            appToolbar(),
-            h('div#canvas-area', h('canvas#canvas', {
+            appToolbar3(),
+            h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
                 width: 600,
                 height: 600
             })),
-            h('div#controls', {
+            h('div#cp-app-whiteboard-controls', {
                 style: {
                     display: 'block',
                 }
             }, [
-                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
-                h('button#delete.btn.btn-secondary', {
+                h('button#cp-app-whiteboard-clear.btn.btn-danger', Msg.canvas_clear), ' ',
+                h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Msg.canvas_disable),
+                h('button#cp-app-whiteboard-delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
                 }, Msg.canvas_delete),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'width'
+                        'for': 'cp-app-whiteboard-width'
                     }, Msg.canvas_width),
-                    h('input#width', {
+                    h('input#cp-app-whiteboard-width', {
                         type: 'range',
-                        value: "5",
                         min: "1",
                         max: "100"
                     }),
-                    h('span#width-val', '5px')
+                    h('span#cp-app-whiteboard-width-val', '5px')
                 ]),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'opacity',
+                        'for': 'cp-app-whiteboard-opacity',
                     }, Msg.canvas_opacity),
-                    h('input#opacity', {
+                    h('input#cp-app-whiteboard-opacity', {
                         type: 'range',
-                        value: "1",
                         min: "0.1",
                         max: "1",
                         step: "0.1"
                     }),
-                    h('span#opacity-val', '100%')
+                    h('span#cp-app-whiteboard-opacity-val', '100%')
                 ]),
-                h('span.selected', [
+                h('span.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
                     h('img', {
                         title: Msg.canvas_currentBrush
                     })
                 ])
             ]),
-            setHTML(h('div#colors'), ' '),
-            loadingScreen(),
-            h('div#cursors', {
+            setHTML(h('div#cp-app-whiteboard-colors'), ' '),
+            h('div#cp-app-whiteboard-cursors', {
                 style: {
                     display: 'none',
                     background: 'white',
                     'text-align': 'center',
                 }
             }),
-            h('div#pickers'),
+            h('div#cp-app-whiteboard-pickers'),
         ];
     };
 
@@ -683,8 +683,7 @@ define([
                         ])
                     ])
                 ])
-            ]),
-            loadingScreen()
+            ])
         ];
     };
 
diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less
index 68cca3cb4..a75fa4e30 100644
--- a/customize.dist/src/less/mixins.less
+++ b/customize.dist/src/less/mixins.less
@@ -1,4 +1,5 @@
 @import "/customize/src/less/variables.less";
+@import (once) "/customize/src/less2/include/tools.less";
 
 .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
     @font-face {
@@ -39,26 +40,6 @@
     background: linear-gradient(@start, @end); /* Standard syntax */
 }
 
-.placeholderColor (@color) {
-    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-        color: @color;;
-    }
-    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-        color: @color;
-        opacity: 1;
-    }
-    &::-moz-placeholder { /* Mozilla Firefox 19+ */
-        color: @color;
-        opacity: 1;
-    }
-    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-        color: @color;
-    }
-    &::-ms-input-placeholder { /* Microsoft Edge */
-        color: @color;
-    }
-}
-
 .avatar (@width) {
     &.avatar {
     overflow: hidden;
@@ -83,7 +64,7 @@
         box-sizing: content-box;
     }
     .default {
-        .unselectable();
+        .tools_unselectable();
         background: white;
         color: black;
         font-size: @width/1.2;
@@ -122,7 +103,7 @@
 }
 
 .leftsideCategory {
-    .unselectable();
+    .tools_unselectable();
     padding: 5px 20px;
     margin: 15px 0;
     cursor: pointer;
diff --git a/customize.dist/src/less/sidebar-layout.less b/customize.dist/src/less/sidebar-layout.less
index d16d9c019..47e4e86f9 100644
--- a/customize.dist/src/less/sidebar-layout.less
+++ b/customize.dist/src/less/sidebar-layout.less
@@ -1,10 +1,11 @@
 @import '/customize/src/less/variables.less';
 @import '/customize/src/less/mixins.less';
+@import (once) "/customize/src/less2/include/colortheme.less";
 
-@leftside-bg: #eee;
-@leftside-color: #000;
-@rightside-color: #000;
-@description-color: #777;
+@leftside-bg: @colortheme_sidebar-left-bg;
+@leftside-color: @colortheme_sidebar-left-fg;
+@rightside-color: @colortheme_sidebar-right-fg;
+@description-color: @colortheme_sidebar-description;
 
 @button-width: 400px;
 
diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less
index 0ca0d0fa1..b935db786 100644
--- a/customize.dist/src/less2/include/avatar.less
+++ b/customize.dist/src/less2/include/avatar.less
@@ -1,3 +1,5 @@
+@import (once) "./tools.less";
+
 .avatar_main (@width) {
     &.cp-avatar {
     overflow: hidden;
@@ -16,7 +18,7 @@
         box-sizing: content-box;
     }
     .cp-avatar-default {
-        .unselectable();
+        .tools_unselectable();
         background: white;
         color: black;
         font-size: @width/1.2;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 53d97649a..e5e57cc74 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -75,6 +75,16 @@
 @colortheme_todo-bg: #7bccd1;
 @colortheme_todo-color: #000;
 
+// Sidebar layout
+@colortheme_sidebar-active: #fff;
+@colortheme_sidebar-left-bg: #eee;
+@colortheme_sidebar-left-fg: #000;
+@colortheme_sidebar-left-branch: #888;
+@colortheme_sidebar-right-bg: #fff;
+@colortheme_sidebar-right-fg: #000;
+@colortheme_sidebar-description: #777;
+
+
 @cryptpad_color_blue: #4591C4; 
 @cryptpad_color_grey: #999999;
 @cryptpad_header_col: #1E1F1F;
diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less
index b6a7bcbeb..6593b926e 100644
--- a/customize.dist/src/less2/include/dropdown.less
+++ b/customize.dist/src/less2/include/dropdown.less
@@ -1,4 +1,5 @@
 @import (once) "./colortheme.less";
+@import (once) "./tools.less";
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown_main () {
@@ -17,7 +18,7 @@
                 margin-left: 5px;
             }
             * {
-                .unselectable();
+                .tools_unselectable();
                 cursor: default;
             }
         }
diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less
index bd90ab5d3..a07d365bd 100644
--- a/customize.dist/src/less2/include/fileupload.less
+++ b/customize.dist/src/less2/include/fileupload.less
@@ -28,6 +28,11 @@
             td {
                 padding: @upload_pad_h @upload_pad_v;
             }
+            .cp-fileupload-table-link {
+                .fa {
+                    margin-right: 5px;
+                }
+            }
             .cp-fileupload-table-progress {
                 width: 200px;
                 position: relative;
diff --git a/customize.dist/src/less2/include/font.less b/customize.dist/src/less2/include/font.less
index b1fdd0b19..33eb3dd3d 100644
--- a/customize.dist/src/less2/include/font.less
+++ b/customize.dist/src/less2/include/font.less
@@ -1,7 +1,7 @@
 .font_neuropolitical () {
     @font-face {
         font-family: Neuropolitical;
-        src: url(./customize/fonts/neuropolitical.ttf)
+        src: url(/customize/fonts/neuropolitical.ttf)
     }
 }
 .font_open-sans () {
diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less
new file mode 100644
index 000000000..3211fb3a9
--- /dev/null
+++ b/customize.dist/src/less2/include/leftside-menu.less
@@ -0,0 +1,23 @@
+@import (once) "./unselectable.less";
+@import (once) "./variables.less";
+@import (once) "./colortheme.less";
+
+.leftside-menu_main() {
+}
+.leftside-menu-category_main() {
+    .unselectable_make();
+    padding: 5px 20px;
+    margin: 15px 0;
+    cursor: pointer;
+    height: @variables_bar-height;
+    line-height: @variables_bar-height - 10px;
+    .fa {
+        width: 25px;
+    }
+    &:hover {
+        background: rgba(0,0,0,0.05);
+    }
+    &.cp-leftside-active {
+        background: @colortheme_sidebar-active;
+    }
+}
diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less
new file mode 100644
index 000000000..efca7811d
--- /dev/null
+++ b/customize.dist/src/less2/include/limit-bar.less
@@ -0,0 +1,58 @@
+@import (once) "./colortheme.less";
+
+.limit-bar_main () {
+    .cp-limit-container {
+        @colortheme_green: #5cb85c;
+        display: inline-flex;
+        flex-flow: column-reverse;
+        width: 100%;
+        margin-top: 20px;
+        .cp-limit-bar {
+            display: inline-block;
+            max-width: 100%;
+            margin: 3px;
+            box-sizing: border-box;
+            border: 1px solid #999;
+            background: white;
+            position: relative;
+            text-align: center;
+            vertical-align: middle;
+            width: ~"calc(100% - 6px)";
+            height: 25px;
+            line-height: 25px;
+            overflow: hidden;
+            .cp-limit-usage {
+                height: 100%;
+                display: inline-block;
+                background: blue;
+                position: absolute;
+                left: 0;
+                z-index:1; // .usage
+                &.cp-limit-usage-normal {
+                    background: @colortheme_green;
+                }
+                &.cp-limit-usage-warning {
+                    background: orange;
+                }
+                &.cp-limit-usage-above {
+                    background: red;
+                }
+            }
+            .cp-limit-usage-text {
+                position: relative;
+                color: black;
+                text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
+                z-index: 2; // .usageText
+                font-size: @colortheme_app-font-size;
+                font-weight: bold;
+            }
+        }
+        .cp-limit-upgrade {
+            padding: 0;
+            line-height: 25px;
+            height: 25px;
+            margin: 0 3px;
+            border-radius: 0;
+        }
+    }
+}
diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less
index 2479e3330..5dcea83ec 100644
--- a/customize.dist/src/less2/include/tokenfield.less
+++ b/customize.dist/src/less2/include/tokenfield.less
@@ -1,23 +1,17 @@
+@import (once) "./tools.less";
+
 .tokenfield_main () {
     .tokenfield {
-        .unselectable () {
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        .unselectable();
+        .tools_unselectable();
         height: auto;
         min-height: 34px;
         padding-bottom: 0px;
-        &.focus {
-            border-color: #66afe9;
-            outline: 0;
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
-        }
+        background-color: unset;
+        border: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 0 10px;
         .token {
             box-sizing: border-box;
             border-radius: 3px;
@@ -25,8 +19,9 @@
             border: 1px solid #d9d9d9;
             background-color: #ededed;
             white-space: nowrap;
-            margin: -1px 5px 5px 0;
-            vertical-align: center;
+            margin: 10px 5px;
+            height: 24px;
+            vertical-align: middle;
             cursor: default;
 
             color: #222;
@@ -50,17 +45,17 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 padding-left: 4px;
-                vertical-align: center;
+                vertical-align: middle;
             }
             .close {
                 font-family: Arial;
                 display: inline-block;
-                line-height: 100%;
+                line-height: 24px;
                 font-size: 1.1em;
                 margin-left: 5px;
                 float: none;
                 height: 100%;
-                vertical-align: center;
+                vertical-align: middle;
                 padding-right: 4px;
             }
             &.active {
@@ -73,11 +68,10 @@
         }
         .token-input {
             background: none;
-            width: 0%; //60px;
-            min-width: 60px;
+            flex: 1;
             border: 0;
             padding: 0;
-            margin-bottom: 6px;
+            margin: 0 !important; // Override alertify
             box-shadow: none;
             max-width: 100%;
             &:focus {
@@ -86,9 +80,5 @@
                 box-shadow: none;
             }
         }
-        &.disabled {
-            cursor: not-allowed;
-            background-color: #eeeeee;
-        }
     }
 }
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 1a099bb76..0388f6401 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -1,7 +1,7 @@
 @import (once) "./colortheme.less";
 
 .history_main () {
-    body .cp-toolbar-history {
+    .cp-toolbar-history {
         display: none;
         text-align: center;
         * {
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 366d24be4..2d49da6b2 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -5,6 +5,7 @@
 @import (once) "./avatar.less";
 @import (once) "./toolbar-history.less";
 @import (once) "./icon-colors.less";
+@import (once) "./tools.less";
 
 
 .toolbar_main () {
@@ -13,15 +14,6 @@
     @toolbar_top-height: 64px;
     @toolbar_button-font: @colortheme_app-font;
 
-    .unselectable () {
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
     .dropdown_main();
     .ckeditor_fix();
     .history_main();
@@ -270,7 +262,7 @@
             font-family: FontAwesome;
         }
 
-        .unselectable();
+        .tools_unselectable();
 
         font: @toolbar_button-font;
         width: 100%;
@@ -289,7 +281,7 @@
 
         button {
             transition: all 0.15s;
-            .unselectable();
+            .tools_unselectable();
             &.cp-toolbar-hidden {
                 display: none;
             }
@@ -658,6 +650,14 @@
                     }
                 }
             }
+            p.cp-toolbar-account {
+                &> span {
+                    font-weight: bold;
+                    span {
+                        font-weight: normal;
+                    }
+                }
+            }
             .cp-toolbar-backup {
                 margin: 0;
                 border-radius: 0;
diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less
new file mode 100644
index 000000000..9fd2df5bc
--- /dev/null
+++ b/customize.dist/src/less2/include/tools.less
@@ -0,0 +1,27 @@
+.tools_placeholder-color (@color) {
+    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+        color: @color;;
+    }
+    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: @color;
+        opacity: 1;
+    }
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: @color;
+        opacity: 1;
+    }
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: @color;
+    }
+    &::-ms-input-placeholder { /* Microsoft Edge */
+        color: @color;
+    }
+}
+
+.tools_unselectable () {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
diff --git a/customize.dist/src/less2/include/unselectable.less b/customize.dist/src/less2/include/unselectable.less
new file mode 100644
index 000000000..30223128b
--- /dev/null
+++ b/customize.dist/src/less2/include/unselectable.less
@@ -0,0 +1,13 @@
+.unselectable_make() {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.unselectable_main() {
+    .cp-unselectable {
+        .unselectable_make();
+    }
+}
diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less
new file mode 100644
index 000000000..3aee02492
--- /dev/null
+++ b/customize.dist/src/less2/include/variables.less
@@ -0,0 +1,3 @@
+// Elements size
+@variables_bar-height: 32px;
+
diff --git a/customize.dist/src/less2/loading.less b/customize.dist/src/less2/loading.less
index 6a14fe29b..504e1e393 100644
--- a/customize.dist/src/less2/loading.less
+++ b/customize.dist/src/less2/loading.less
@@ -40,7 +40,7 @@ The CSS inside of loading.js is precompiled in order to save 200ish milliseconds
 }
 #cp-loading-tip {
     position: fixed;
-    z-index: 100000; // loading tip
+    z-index: 10000000; // loading tip
     top: 80%;
     left: 0;
     right: 0;
diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less
index d2020c97b..8f53ecab5 100644
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@@ -22,10 +22,13 @@ html.cp-app-print {
     .app-print_main();
 }
 
+body.cp-app-drive { @import "../../../drive/app-drive.less"; }
 body.cp-app-pad { @import "../../../pad/app-pad.less"; }
 body.cp-app-code { @import "../../../code/app-code.less"; }
 body.cp-app-slide { @import "../../../slide/app-slide.less"; }
 body.cp-app-file { @import "../../../file/app-file.less"; }
 body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
 body.cp-app-contacts {   @import "../../../contacts/app-contacts.less";    }
+//body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index db0ebbf9f..118eb6f7b 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -157,6 +157,10 @@ define(function () {
     out.filePicker_filter = "Filtrez les fichiers par leur nom";
     out.or = 'ou';
 
+    out.tags_title = "Mots-clés du pad";
+    out.tags_add = "Modifier les mots-clés du pad";
+    out.tags_duplicate = "Mot-clé déjà présent : {0}";
+
     out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
@@ -204,8 +208,11 @@ define(function () {
     out.history_restoreDone = "Document restauré";
     out.history_version = "Version :";
 
-    // Ckeditor links
+    // Ckeditor
     out.openLinkInNewTab = "Ouvrir le lien dans un nouvel onglet";
+    out.pad_mediatagTitle = "Options du Media-Tag";
+    out.pad_mediatagWidth = "Largeur (px)";
+    out.pad_mediatagHeight = "Hauteur (px)";
 
     // Polls
 
@@ -363,6 +370,8 @@ define(function () {
     out.fm_error_cantPin = "Erreur interne du serveur. Veuillez recharger la page et essayer de nouveau.";
     out.fm_viewListButton = "Liste";
     out.fm_viewGridButton = "Grille";
+    out.fm_renamedPad = "Vous avez renommé ce pad dans votre Drive. Son titre est:<br><b>{0}</b>";
+    out.fm_prop_tagsList = "Mots-clés";
     // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 6a6becf5b..fc7c204d9 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -159,6 +159,10 @@ define(function () {
     out.filePicker_filter = "Filter files by name";
     out.or = 'or';
 
+    out.tags_title = "Tags";
+    out.tags_add = "Update this pad's tags";
+    out.tags_duplicate = "Duplicate tag: {0}";
+
     out.slideOptionsText = "Options";
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
@@ -206,8 +210,11 @@ define(function () {
     out.history_restoreDone = "Document restored";
     out.history_version = "Version:";
 
-    // Ckeditor links
+    // Ckeditor
     out.openLinkInNewTab = "Open Link in New Tab";
+    out.pad_mediatagTitle = "Media-Tag settings";
+    out.pad_mediatagWidth = "Width (px)";
+    out.pad_mediatagHeight = "Height (px)";
 
     // Polls
 
@@ -364,6 +371,8 @@ define(function () {
     out.fm_error_cantPin = "Internal server error. Please reload the page and try again.";
     out.fm_viewListButton = "List view";
     out.fm_viewGridButton = "Grid view";
+    out.fm_renamedPad = "You've set a custom name for this pad. Its shared title is:<br><b>{0}</b>";
+    out.fm_prop_tagsList = "Tags";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";
diff --git a/www/code/app-code.less b/www/code/app-code.less
index 8772a2653..d625da0da 100644
--- a/www/code/app-code.less
+++ b/www/code/app-code.less
@@ -3,10 +3,12 @@
 @import (once) "../../customize/src/less2/include/markdown.less";
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
 
 .toolbar_main();
 .fileupload_main();
 .alertify_main();
+.tokenfield_main();
 
 // body
 &.cp-app-code {
diff --git a/www/code/inner.html b/www/code/inner.html
index 485e06455..5d914b6c8 100644
--- a/www/code/inner.html
+++ b/www/code/inner.html
@@ -2,7 +2,7 @@
 <html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/code/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/code/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style>
         .loading-hidden { display: none; }
         #editor1 { display: none; }
diff --git a/www/code/inner.js b/www/code/inner.js
index 382b90fe4..c4917e6fc 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -230,7 +230,7 @@ define([
                     if (data !== false) {
                         $previewContainer.show();
                         APP.$previewButton.addClass('active');
-                        $codeMirror.removeClass('fullPage');
+                        $codeMirror.removeClass('cp-app-code-fullpage');
                     }
                 });
                 return;
@@ -238,7 +238,7 @@ define([
             APP.$previewButton.hide();
             $previewContainer.hide();
             APP.$previewButton.removeClass('active');
-            $codeMirror.addClass('fullPage');
+            $codeMirror.addClass('cp-app-code-fullpage');
         };
 
         config.onInit = function (info) {
@@ -374,11 +374,13 @@ define([
                     };
                     common.openFilePicker(pickerCfg);
                 }).appendTo($rightside);
+
+                var $tags = common.createButton('hashtag', true);
+                $rightside.append($tags);
             }
         };
 
         config.onReady = function (info) {
-            console.log('onready');
             if (APP.realtime !== info.realtime) {
                 var realtime = APP.realtime = info.realtime;
                 APP.patchText = TextPatcher.create({
@@ -400,7 +402,8 @@ define([
                     metadataMgr.updateMetadata(hjson.metadata);
                 }
                 if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
-                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'code')) {
+                    (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
+                     hjson.metadata.type !== 'code')) {
                     var errorText = Messages.typeError;
                     Cryptpad.errorLoadingScreen(errorText);
                     throw new Error(errorText);
@@ -437,35 +440,35 @@ define([
             });
 
 
-/*
+
             // add the splitter
-            if (!$iframe.has('.cp-splitter').length) {
-                var $preview = $iframe.find('#previewContainer');
+            if (!$('.cp-splitter').length) {
                 var splitter = $('<div>', {
                     'class': 'cp-splitter'
-                }).appendTo($preview);
+                }).appendTo($previewContainer);
 
                 $preview.on('scroll', function() {
                     splitter.css('top', $preview.scrollTop() + 'px');
                 });
 
-                var $target = $iframe.find('.CodeMirror');
+                var $target = $('.CodeMirror');
 
                 splitter.on('mousedown', function (e) {
                     e.preventDefault();
                     var x = e.pageX;
                     var w = $target.width();
 
-                    $iframe.on('mouseup mousemove', function handler(evt) {
+                    $(window).on('mouseup mousemove', function handler(evt) {
                         if (evt.type === 'mouseup') {
-                            $iframe.off('mouseup mousemove', handler);
+                            $(window).off('mouseup mousemove', handler);
                             return;
                         }
                         $target.css('width', (w - x + evt.pageX) + 'px');
+                        editor.refresh();
                     });
                 });
             }
-*/
+
 
             Cryptpad.removeLoadingScreen();
             setEditable(!readOnly);
@@ -533,7 +536,7 @@ define([
                     APP.patchText(shjson2);
                 }
             }
-            if (oldDoc !== remoteDoc) { Cryptpad.notify(); }
+            if (oldDoc !== remoteDoc) { common.notify(); }
         };
 
         config.onAbort = function () {
@@ -604,7 +607,7 @@ define([
             SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
         }).nThen(function (/*waitFor*/) {
             CodeMirror = common.initCodeMirrorApp(null, CM);
-            $('.CodeMirror').addClass('fullPage');
+            $('.CodeMirror').addClass('cp-app-code-fullpage');
             editor = CodeMirror.editor;
             Cryptpad.onError(function (info) {
                 if (info && info.type === "store") {
diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js
index d09413aa7..3275c88b5 100644
--- a/www/common/LessLoader.js
+++ b/www/common/LessLoader.js
@@ -9,18 +9,20 @@ define([
     var module = { exports: {} };
     var key = Config.requireConf.urlArgs;
     var localStorage = {};
-    try {
-        localStorage = window.localStorage || {};
-        if (localStorage['LESS_CACHE'] !== key) {
-            Object.keys(localStorage).forEach(function (k) {
-                if (k.indexOf('LESS_CACHE|') !== 0) { return; }
-                delete localStorage[k];
-            });
-            localStorage['LESS_CACHE'] = key;
+    if (!window.cryptpadCache) {
+        try {
+            localStorage = window.localStorage || {};
+            if (localStorage['LESS_CACHE'] !== key) {
+                Object.keys(localStorage).forEach(function (k) {
+                    if (k.indexOf('LESS_CACHE|') !== 0) { return; }
+                    delete localStorage[k];
+                });
+                localStorage['LESS_CACHE'] = key;
+            }
+        } catch (e) {
+            console.error(e);
+            localStorage = {};
         }
-    } catch (e) {
-        console.error(e);
-        localStorage = {};
     }
 
     var cacheGet = function (k, cb) {
@@ -118,7 +120,7 @@ define([
             }
             console.log('CACHE MISS ' + url);
             ((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) {
-                if (err) { console.log(err); }
+                if (err) { console.error(err); }
                 var output = fixAllURLs(css, url);
                 cachePut(url, output);
                 inject(output, url);
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index ee11ddbdb..f85aec474 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -131,13 +131,19 @@ define([
         var $t = t.tokenfield = $(t.element).tokenfield();
         t.getTokens = function () {
             return $t.tokenfield('getTokens').map(function (token) {
-                return token.value;
+                return token.value.toLowerCase();
             });
         };
 
+        var $root = $t.parent();
+        $t.on('tokenfield:removetoken', function () {
+            $root.find('.token-input').focus();
+        });
+
         t.preventDuplicates = function (cb) {
             $t.on('tokenfield:createtoken', function (ev) {
                 var val;
+                ev.attrs.value = ev.attrs.value.toLowerCase();
                 if (t.getTokens().some(function (t) {
                     if (t === ev.attrs.value) { return ((val = t)); }
                 })) {
@@ -152,8 +158,8 @@ define([
             $t.tokenfield('setTokens',
                 tokens.map(function (token) {
                     return {
-                        value: token,
-                        label: token,
+                        value: token.toLowerCase(),
+                        label: token.toLowerCase(),
                     };
                 }));
         };
@@ -171,35 +177,38 @@ define([
         var input = dialog.textInput();
 
         var tagger = dialog.frame([
-            dialog.message('make some tags'), // TODO translate
+            dialog.message(Messages.tags_add),
             input,
             dialog.nav(),
         ]);
 
         var field = UI.tokenField(input).preventDuplicates(function (val) {
-            UI.warn('Duplicate tag: ' + val); // TODO translate
+            UI.warn(Messages._getKey('tags_duplicate', [val]));
         });
 
-        var close = Util.once(function () {
-            var $t = $(tagger).fadeOut(150, function () { $t.remove(); });
+        var listener;
+        var close = Util.once(function (result, ev) {
+            var $frame = $(tagger).fadeOut(150, function () {
+                stopListening(listener);
+                $frame.remove();
+                cb(result, ev);
+            });
         });
 
-        var listener = listenForKeys(function () {}, function () {
-            close();
-            stopListening(listener);
-        });
-
-        var CB = Util.once(cb);
-        findOKButton(tagger).click(function () {
+        var $ok = findOKButton(tagger).click(function () {
             var tokens = field.getTokens();
-            close();
-            CB(tokens);
+            close(tokens);
         });
-        findCancelButton(tagger).click(function () {
-            close();
-            CB(null);
+        var $cancel = findCancelButton(tagger).click(function () {
+            close(null);
+        });
+        listenForKeys(function () {
+            $ok.click();
+        }, function () {
+            $cancel.click();
         });
 
+        document.body.appendChild(tagger);
         // :(
         setTimeout(function () {
             field.setTokens(tags);
@@ -244,7 +253,7 @@ define([
             stopListening(listener);
             cb();
         });
-        listener = listenForKeys(close, close);
+        listener = listenForKeys(close, close, ok);
         var $ok = $(ok).click(close);
 
         document.body.appendChild(frame);
@@ -293,7 +302,7 @@ define([
             $ok.click();
         }, function () { // no
             $cancel.click();
-        });
+        }, input);
 
         document.body.appendChild(frame);
         setTimeout(function () {
@@ -341,7 +350,7 @@ define([
             $ok.click();
         }, function () {
             $cancel.click();
-        });
+        }, ok);
 
         document.body.appendChild(frame);
         setTimeout(function () {
diff --git a/www/common/common-util.js b/www/common/common-util.js
index f6ec8d4df..c6cbe4055 100644
--- a/www/common/common-util.js
+++ b/www/common/common-util.js
@@ -16,9 +16,10 @@ define([], function () {
                 handlers.splice(handlers.indexOf(cb), 1);
             },
             fire: function () {
-                if (fired) { return; }
+                if (once && fired) { return; }
                 fired = true;
-                handlers.forEach(function (h) { h(); });
+                var args = Array.prototype.slice.call(arguments);
+                handlers.forEach(function (h) { h.apply(null, args); });
             }
         };
     };
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 84f7c47a6..863d97d07 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -184,6 +184,9 @@ define([
         }
         return;
     };
+    common.getLanguage = function () {
+        return Messages._languageUsed;
+    };
     common.getUserlist = function () {
         if (store) {
             if (store.getProxy() && store.getProxy().info) {
@@ -533,6 +536,17 @@ define([
         cb(void 0, entry);
     };
 
+    common.resetTags = function (href, tags, cb) {
+        cb = cb || $.noop;
+        if (!Array.isArray(tags)) { return void cb('INVALID_TAGS'); }
+        getFileEntry(href, function (e, entry) {
+            if (e) { return void cb(e); }
+            if (!entry) { cb('NO_ENTRY'); }
+            entry.tags = tags.slice();
+            cb();
+        });
+    };
+
     common.tagPad = function (href, tag, cb) {
         if (typeof(cb) !== 'function') {
             return void console.error('EXPECTED_CALLBACK');
@@ -2222,6 +2236,46 @@ define([
                 }
                 $iframe.load(w2); //cb);
             }
+        }).nThen(function (waitFor) {
+            if (sessionStorage.createReadme) {
+                var w = waitFor();
+                require(['/common/cryptget.js'], function (Crypt) {
+                    var hash = common.createRandomHash();
+                    Crypt.put(hash, Messages.driveReadme, function (e) {
+                        if (e) {
+                            console.error("Error while creating the default pad:", e);
+                            return void w();
+                        }
+                        var href = '/pad/#' + hash;
+                        var data = {
+                            href: href,
+                            title: Messages.driveReadmeTitle,
+                            atime: new Date().toISOString(),
+                            ctime: new Date().toISOString()
+                        };
+                        common.getFO().pushData(data, function (e, id) {
+                            if (e) {
+                                console.error("Error while creating the default pad:", e);
+                                return void w();
+                            }
+                            common.getFO().add(id);
+                            w();
+                        });
+                    });
+                    delete sessionStorage.createReadme;
+                });
+            }
+        }).nThen(function (waitFor) {
+            if (sessionStorage.migrateAnonDrive) {
+                var w = waitFor();
+                require(['/common/mergeDrive.js'], function (Merge) {
+                    var hash = localStorage.FS_hash;
+                    Merge.anonDriveIntoUser(getStore().getProxy(), hash, function () {
+                        delete sessionStorage.migrateAnonDrive;
+                        w();
+                    });
+                });
+            }
         }).nThen(function () {
             updateLocalVersion();
             common.addTooltips();
diff --git a/www/common/fsStore.js b/www/common/fsStore.js
index 5a8e0becb..f24409d8b 100644
--- a/www/common/fsStore.js
+++ b/www/common/fsStore.js
@@ -4,7 +4,7 @@ define([
     '/bower_components/chainpad-crypto/crypto.js?v=0.1.5',
     '/bower_components/textpatcher/TextPatcher.amd.js',
     '/common/userObject.js',
-    '/common/migrate-user-object.js'
+    '/common/migrate-user-object.js',
 ], function ($, Listmap, Crypto, TextPatcher, FO, Migrate) {
     /*
         This module uses localStorage, which is synchronous, but exposes an
@@ -196,11 +196,11 @@ define([
 
             Migrate(proxy, Cryptpad);
 
-            //storeObj = proxy;
             store = initStore(fo, proxy, exp);
             if (typeof(f) === 'function') {
                 f(void 0, store);
             }
+            //storeObj = proxy;
 
             var requestLogin = function () {
                 // log out so that you don't go into an endless loop...
diff --git a/www/common/hyperscript.js b/www/common/hyperscript.js
index 3be018194..0dbb0f80b 100644
--- a/www/common/hyperscript.js
+++ b/www/common/hyperscript.js
@@ -99,7 +99,7 @@ function context () {
           } else if (k.substr(0, 5) === "data-") {
             e.setAttribute(k, l[k])
           } else {
-            e[k] = l[k]
+            e.setAttribute(k, l[k]);
           }
         }
       } else if ('function' === typeof l) {
diff --git a/www/common/loading.js b/www/common/loading.js
index 66e67bd58..a613554d2 100644
--- a/www/common/loading.js
+++ b/www/common/loading.js
@@ -36,7 +36,7 @@ define([], function () {
 }
 #cp-loading-tip {
   position: fixed;
-  z-index: 100000;
+  z-index: 10000000;
   top: 80%;
   left: 0;
   right: 0;
diff --git a/www/common/mergeDrive.js b/www/common/mergeDrive.js
index ce3e0b157..1a5fb5f29 100644
--- a/www/common/mergeDrive.js
+++ b/www/common/mergeDrive.js
@@ -83,9 +83,9 @@ define([
         });
     };
 
-    exp.anonDriveIntoUser = function (proxy, cb) {
+    exp.anonDriveIntoUser = function (proxyData, fsHash, cb) {
         // Make sure we have an FS_hash and we don't use it, otherwise just stop the migration and cb
-        if (!localStorage.FS_hash || !Cryptpad.isLoggedIn()) {
+        if (!fsHash || !Cryptpad.isLoggedIn()) {
             if (typeof(cb) === "function") { return void cb(); }
         }
         // Get the content of FS_hash and then merge the objects, remove the migration key and cb
@@ -102,21 +102,23 @@ define([
                 return;
             }
             if (parsed) {
+                var proxy = proxyData.proxy;
                 var oldFo = FO.init(parsed.drive, {
                     Cryptpad: Cryptpad
                 });
                 var onMigrated = function () {
                     oldFo.fixFiles();
-                    var newData = Cryptpad.getStore().getProxy();
-                    var newFo = newData.fo;
+                    var newFo = proxyData.fo;
                     var oldRecentPads = parsed.drive[newFo.FILES_DATA];
                     var newRecentPads = proxy.drive[newFo.FILES_DATA];
-                    var newFiles = newFo.getFiles([newFo.FILES_DATA]);
                     var oldFiles = oldFo.getFiles([newFo.FILES_DATA]);
+                    var newHrefs = Object.keys(newRecentPads).map(function (id) {
+                        return newRecentPads[id].href;
+                    });
                     oldFiles.forEach(function (id) {
                         var href = oldRecentPads[id].href;
                         // Do not migrate a pad if we already have it, it would create a duplicate in the drive
-                        if (newFiles.indexOf(id) !== -1) { return; }
+                        if (newHrefs.indexOf(href) !== -1) { return; }
                         // If we have a stronger version, do not add the current href
                         if (Cryptpad.findStronger(href, newRecentPads)) { return; }
                         // If we have a weaker version, replace the href by the new one
@@ -150,7 +152,7 @@ define([
                     if (!proxy.FS_hashes || !Array.isArray(proxy.FS_hashes)) {
                         proxy.FS_hashes = [];
                     }
-                    proxy.FS_hashes.push(localStorage.FS_hash);
+                    proxy.FS_hashes.push(fsHash);
                     if (typeof(cb) === "function") { cb(); }
                 };
                 oldFo.migrate(onMigrated);
@@ -158,7 +160,7 @@ define([
             }
             if (typeof(cb) === "function") { cb(); }
         };
-        Crypt.get(localStorage.FS_hash, todo);
+        Crypt.get(fsHash, todo);
     };
 
     return exp;
diff --git a/www/common/metadata-manager.js b/www/common/metadata-manager.js
index 5299634fb..1c8994d00 100644
--- a/www/common/metadata-manager.js
+++ b/www/common/metadata-manager.js
@@ -73,7 +73,6 @@ define(['json.sortify'], function (Sortify) {
             });
         };
 
-        console.log('here register');
         sframeChan.on('EV_METADATA_UPDATE', function (ev) {
             meta = ev;
             if (ev.priv) {
diff --git a/www/common/migrate-user-object.js b/www/common/migrate-user-object.js
index fd469b07c..c9c3bbd01 100644
--- a/www/common/migrate-user-object.js
+++ b/www/common/migrate-user-object.js
@@ -7,41 +7,13 @@ define([], function () {
     return function (userObject, Cryptpad) {
         var version = userObject.version || 0;
 
+        // DEPRECATED
         // Migration 1: pad attributes moved to filesData
         var migratePadAttributesToData = function () {
-            var files = userObject && userObject.drive;
-            if (!files) { return; }
-
-            var migratePadAttributes = function (el, id, parsed) {
-                // Migrate old pad attributes
-                ['userid', 'previewMode'].forEach(function (attr) {
-                    var key = parsed.hash + '.' + attr;
-                    var key2 = parsed.hash.slice(0,-1) + '.' + attr;// old pads not ending with /
-                    if (typeof(files[key]) !== "undefined" || typeof(files[key2]) !== "undefined") {
-                        console.log("Migrating pad attribute", attr, "for pad", id);
-                        el[attr] = files[key] || files[key2];
-                        delete files[key];
-                        delete files[key2];
-                    }
-                });
-            };
-            var filesData = files.filesData;
-            if (!filesData) { return; }
-
-            var el, parsed;
-            for (var id in filesData) {
-                id = Number(id);
-                el = filesData[id];
-                parsed = el.href && Cryptpad.parsePadUrl(el.href);
-                if (!parsed) { continue; }
-                migratePadAttributes(el, id, parsed);
-            }
-            // Migration done
+            return true;
         };
         if (version < 1) {
             migratePadAttributesToData();
-            Cryptpad.feedback('Migrate-1', true);
-            userObject.version = version = 1;
         }
 
         // Migration 2: global attributes from root to 'settings' subobjects
@@ -77,5 +49,19 @@ define([], function () {
             Cryptpad.feedback('Migrate-2', true);
             userObject.version = version = 2;
         }
+
+
+
+        // Migration 3: language from localStorage to settings
+        var migrateLanguage = function () {
+            if (!localStorage.CRYPTPAD_LANG) { return; }
+            var l = localStorage.CRYPTPAD_LANG;
+            userObject.settings.language = l;
+        };
+        if (version < 3) {
+            migrateLanguage();
+            Cryptpad.feedback('Migrate-3', true);
+            userObject.version = version = 3;
+        }
     };
 });
diff --git a/www/common/sframe-boot.js b/www/common/sframe-boot.js
index 0f541f7ee..43b424624 100644
--- a/www/common/sframe-boot.js
+++ b/www/common/sframe-boot.js
@@ -42,6 +42,26 @@ var afterLoaded = function (req) {
             updated: updated,
             cache: data.cache
         };
+        data.localStore = data.localStore || {};
+        var lsUpdated = {};
+        window.cryptpadStore = {
+            get: function (k, cb) {
+                setTimeout(function () { cb(data.localStore[k]); });
+            },
+            getAll: function (cb) {
+                setTimeout(function () {
+                    cb(JSON.parse(JSON.stringify(data.localStore)));
+                });
+            },
+            put: function (k, v, cb) {
+                cb = cb || function () { };
+                lsUpdated[k] = v;
+                setTimeout(function () { data.localStore[k] = v; cb(); });
+            },
+            updated: lsUpdated,
+            store: data.localStore
+        };
+        window.cryptpadLanguage = data.language;
         require(['/common/sframe-boot2.js'], function () { });
     };
     window.addEventListener('message', onReply);
diff --git a/www/common/sframe-chainpad-listmap.js b/www/common/sframe-chainpad-listmap.js
new file mode 100644
index 000000000..22b7e6216
--- /dev/null
+++ b/www/common/sframe-chainpad-listmap.js
@@ -0,0 +1,748 @@
+require.config({ paths: { 'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify' } });
+define([
+    '/bower_components/chainpad-netflux/chainpad-netflux.js',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    'json.sortify',
+    '/bower_components/textpatcher/TextPatcher.js',
+], function (Realtime, JsonOT, Sortify, TextPatcher) {
+    var api = {};
+    // "Proxy" is undefined in Safari : we need to use an normal object and check if there are local
+    // changes regurlarly.
+    var isFakeProxy = typeof window.Proxy === "undefined";
+
+    var DeepProxy = api.DeepProxy = (function () {
+        var deepProxy = {};
+
+        var isArray = deepProxy.isArray = Array.isArray || function (obj) {
+            return Object.toString(obj) === '[object Array]';
+        };
+
+        /*  Arrays and nulls both register as 'object' when using native typeof
+            we need to distinguish them as their own types, so use this instead. */
+        var type = deepProxy.type = function (dat) {
+            return dat === null?  'null': isArray(dat)?'array': typeof(dat);
+        };
+
+        /*  Check if an (sub-)element in an object or an array and should be a proxy.
+            If the browser doesn't support Proxy, return false */
+        var isProxyable = deepProxy.isProxyable = function (obj, forceCheck) {
+            if (typeof forceCheck === "undefined" && isFakeProxy) { return false; }
+            return ['object', 'array'].indexOf(type(obj)) !== -1;
+        };
+
+        /*  Any time you set a value, check its type.
+            If that type is proxyable, make a new proxy. */
+        var setter = deepProxy.set = function (cb) {
+            return function (obj, prop, value) {
+                if (prop === 'on') {
+                    throw new Error("'on' is a reserved attribute name for realtime lists and maps");
+                }
+                if (isProxyable(value)) {
+                    obj[prop] = deepProxy.create(value, cb);
+                } else {
+                    obj[prop] = value;
+                }
+
+                cb();
+                return obj[prop] || true; // always return truthey or you have problems
+            };
+        };
+
+        var pathMatches = deepProxy.pathMatches = function (path, pattern) {
+            return !pattern.some(function (x, i) {
+                return x !== path[i];
+            });
+        };
+
+        var lengthDescending = function (a, b) { return b.pattern.length - a.pattern.length; };
+
+        /*  TODO implement 'off' as well.
+            change 'setter' to warn users when they attempt to set 'off'
+        */
+        var on = function(events) {
+            return function (evt, pattern, f) {
+                switch (evt) {
+                    case 'change':
+                        // pattern needs to be an array
+                        pattern = type(pattern) === 'array'? pattern: [pattern];
+
+                        events.change.push({
+                            cb: function (oldval, newval, path, root) {
+                                if (pathMatches(path, pattern)) {
+                                    return f(oldval, newval, path, root);
+                                }
+                            },
+                            pattern: pattern,
+                        });
+                        // sort into descending order so we evaluate in order of specificity
+                        events.change.sort(lengthDescending);
+
+                        break;
+                    case 'remove':
+                        pattern = type(pattern) === 'array'? pattern: [pattern];
+
+                        events.remove.push({
+                            cb: function (oldval, path, root) {
+                                if (pathMatches(path, pattern)) { return f(oldval, path, root); }
+                            },
+                            pattern: pattern,
+                        });
+
+                        events.remove.sort(lengthDescending);
+
+                        break;
+                    case 'ready':
+                        events.ready.push({
+                            // on('ready' has a different signature than 
+                            // change and delete, so use 'pattern', not 'f'
+
+                            cb: function (info) {
+                                pattern(info);
+                            }
+                        });
+                        break;
+                    case 'disconnect':
+                        events.disconnect.push({
+                            cb: function (info) {
+                                // as above
+                                pattern(info);
+                            }
+                        });
+                        break;
+                    case 'reconnect':
+                        events.reconnect.push({
+                            cb: function (info) {
+                                // as above
+                                pattern(info);
+                            }
+                        });
+                        break;
+                    case 'create':
+                        events.create.push({
+                            cb: function (info) {
+                                pattern(info);
+                            }
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                return this;
+            };
+        };
+
+        var getter = deepProxy.get = function (/* cb */) {
+            var events = {
+                disconnect: [],
+                reconnect: [],
+                change: [],
+                ready: [],
+                remove: [],
+                create: [],
+            };
+
+            return function (obj, prop) {
+                if (prop === 'on') {
+                    return on(events);
+                } else if (prop === '_isProxy') {
+                    return true;
+                } else if (prop === '_events') {
+                    return events;
+                }
+                return obj[prop];
+            };
+        };
+
+        var deleter = deepProxy.delete = function (cb) {
+            return function (obj, prop) {
+                if (typeof(obj[prop]) === 'undefined') { return true; }
+                delete obj[prop];
+                cb();
+                return true;
+            };
+        };
+
+        var handlers = deepProxy.handlers = function (cb, isRoot) {
+            if (!isRoot) {
+                return {
+                    set: setter(cb),
+                    get: function (obj, prop) {
+                        if (prop === '_isProxy') {
+                            return true;
+                        }
+                        return obj[prop];
+                    },
+                    deleteProperty: deleter(cb),
+                };
+            }
+            return {
+                set: setter(cb),
+                get: getter(cb),
+                deleteProperty: deleter(cb),
+            };
+        };
+
+        var remoteChangeFlag = deepProxy.remoteChangeFlag = false;
+
+        var stringifyFakeProxy = deepProxy.stringifyFakeProxy = function (proxy) {
+            var copy = JSON.parse(Sortify(proxy));
+            delete copy._events;
+            delete copy._isProxy;
+            return Sortify(copy);
+        };
+
+        deepProxy.checkLocalChange = function (obj, cb) {
+            if (!isFakeProxy) { return; }
+            var oldObj = stringifyFakeProxy(obj);
+            window.setInterval(function() {
+                var newObj = stringifyFakeProxy(obj);
+                if (newObj !== oldObj) {
+                    oldObj = newObj;
+                    if (remoteChangeFlag) {
+                        remoteChangeFlag = false;
+                    } else {
+                        cb();
+                    }
+                }
+            },300);
+        };
+
+        var create = deepProxy.create = function (obj, opt, isRoot) {
+            /*  recursively create proxies in case users do:
+                `x.a = {b: {c: 5}};
+
+                otherwise the inner object is not a proxy, which leads to incorrect
+                behaviour on the client that initiated the object (but not for
+                clients that receive the objects) */
+
+            // if the user supplied a callback, use it to create handlers
+            // this saves a bit of work in recursion
+            var methods = type(opt) === 'function'? handlers(opt, isRoot) : opt;
+            switch (type(obj)) {
+                case 'object':
+                    var keys = Object.keys(obj);
+                    keys.forEach(function (k) {
+                        if (isProxyable(obj[k]) && !obj[k]._isProxy) {
+                            obj[k] = create(obj[k], opt);
+                        }
+                    });
+                    break;
+                case 'array':
+                    obj.forEach(function (o, i) {
+                        if (isProxyable(o) && !o._isProxy) {
+                            obj[i] = create(obj[i], opt);
+                        }
+                    });
+                    break;
+                default:
+                    // if it's not an array or object, you don't need to proxy it
+                    throw new Error('attempted to make a proxy of an unproxyable object');
+            }
+            if (!isFakeProxy) {
+                if (obj._isProxy) {
+                    return obj;
+                }
+                return new window.Proxy(obj, methods);
+            }
+
+            var proxy = JSON.parse(JSON.stringify(obj));
+
+            if (isRoot) {
+                var events = {
+                    disconnect: [],
+                    reconnect: [],
+                    change: [],
+                    ready: [],
+                    remove: [],
+                    create: [],
+                };
+                proxy.on = on(events);
+                proxy._events = events;
+            }
+            return proxy;
+        };
+
+        // onChange(path, key, root, oldval, newval)
+        var onChange = function (path, key, root, oldval, newval) {
+            var P = path.slice(0);
+            P.push(key);
+
+            /*  returning false in your callback terminates 'bubbling up'
+                we can accomplish this with Array.some because we've presorted
+                listeners by the specificity of their path
+            */
+            root._events.change.some(function (handler) {
+                return handler.cb(oldval, newval, P, root) === false;
+            });
+        };
+
+        var find = deepProxy.find = function (map, path) {
+            /* safely search for nested values in an object via a path */
+            return (map && path.reduce(function (p, n) {
+                return typeof p[n] !== 'undefined' && p[n];
+            }, map)) || undefined;
+        };
+
+        var onRemove = function (path, key, root, old, top) {
+            var newpath = path.concat(key);
+            var X = find(root, newpath);
+
+            var t_X = type(X);
+
+            /*  TODO 'find' is correct but unnecessarily expensive.
+                optimize it. */
+
+            switch (t_X) {
+                case 'array':
+
+                    if (top) {
+                        // the top of an onremove should emit an onchange instead
+                        onChange(path, key, root, old, undefined);// no newval since it's a deletion
+                    } else {
+                        root._events.remove.forEach(function (handler) {
+                            return handler.cb(X, newpath, root);
+                        });
+                    }
+                    // remove all of the array's children
+                    X.forEach(function (x, i) {
+                        onRemove(newpath, i, root);
+                    });
+
+                    break;
+                case 'object':
+                    if (top) {
+                        onChange(path, key, root, old, undefined);// no newval since it's a deletion
+                    } else {
+                        root._events.remove.forEach(function (handler) {
+                            return handler.cb(X, newpath, root, old, false);
+                        });
+                    }
+                    // remove all of the object's children
+                    Object.keys(X).forEach(function (key) {
+                        onRemove(newpath, key, root, X[key], false);
+                    });
+
+                    break;
+                default:
+                    root._events.remove.forEach(function (handler) {
+                        return handler.cb(X, newpath, root);
+                    });
+                    break;
+            }
+        };
+
+        /*  compare a new object 'B' against an existing proxy object 'A'
+            provide a unary function 'f' for the purpose of constructing new
+            deep proxies from regular objects and arrays.
+
+            Supply the path as you recurse, for the purpose of emitting events
+            attached to particular paths within the complete structure.
+
+            Operates entirely via side effects on 'A'
+        */
+        var objects = deepProxy.objects = function (A, B, f, path, root) {
+            var Akeys = Object.keys(A);
+            var Bkeys = Object.keys(B);
+
+            /*  iterating over the keys in B will tell you if a new key exists
+                it will not tell you if a key has been removed.
+                to accomplish that you will need to iterate over A's keys
+            */
+
+            /*  TODO return a truthy or falsey value (in 'objects' and 'arrays')
+                so that we have some measure of whether an object or array changed
+                (from the higher level in the tree, rather than doing everything
+                at the leaf level).
+
+                bonus points if you can defer events until the complete diff has
+                finished (collect them into an array or something, and simplify
+                the event if possible)
+            */
+
+            Bkeys.forEach(function (b) {
+                var t_b = type(B[b]);
+                var old = A[b];
+
+                if (Akeys.indexOf(b) === -1) {
+                    // there was an insertion
+
+                    // mind the fallthrough behaviour
+                    switch (t_b) {
+                        case 'undefined':
+                            // umm. this should never happen?
+                            throw new Error("undefined type has key. this shouldn't happen?");
+                        case 'array':
+                        case 'object':
+                            A[b] = f(B[b]);
+                            break;
+                        default:
+                            A[b] = B[b];
+                    }
+
+                    // insertions are a change
+
+                    // onChange(path, key, root, oldval, newval)
+                    onChange(path, b, root, old, B[b]);
+                    return;
+                }
+
+                // else the key already existed
+                var t_a = type(A[b]);
+                if (t_a !== t_b) {
+                    // its type changed!
+                    console.log("type changed from [%s] to [%s]", t_a, t_b);
+                    switch (t_b) {
+                        case 'undefined':
+                            throw new Error("first pass should never reveal undefined keys");
+                        case 'array':
+                            A[b] = f(B[b]);
+                            // make a new proxy
+                            break;
+                        case 'object':
+                            A[b] = f(B[b]);
+                            // make a new proxy
+                            break;
+                        default:
+                            // all other datatypes just require assignment.
+                            A[b] = B[b];
+                            break;
+                    }
+
+                    // type changes always mean a change happened
+                    onChange(path, b, root, old, B[b]);
+                    return;
+                }
+
+                // values might have changed, if not types
+                if (['array', 'object'].indexOf(t_a) === -1) {
+                    // it's not an array or object, so we can do deep equality
+                    if (A[b] !== B[b]) {
+                        // not equal, so assign
+                        A[b] = B[b];
+
+                        onChange(path, b, root, old, B[b]);
+                    }
+                    return;
+                }
+
+                // else it's an array or object
+                var nextPath = path.slice(0).concat(b);
+                if (t_a === 'object') {
+                    // it's an object
+                    objects.call(root, A[b], B[b], f, nextPath, root);
+                } else {
+                    // it's an array
+                    deepProxy.arrays.call(root, A[b], B[b], f, nextPath, root);
+                }
+            });
+            Akeys.forEach(function (a) {
+                var old = A[a];
+
+                if (a === "on" || a === "_events") { return; }
+
+                // the key was deleted
+                if (Bkeys.indexOf(a) === -1 || type(B[a]) === 'undefined') {
+                    onRemove(path, a, root, old, true);
+                    delete A[a];
+                }
+            });
+
+            return;
+        };
+
+        var arrays = deepProxy.arrays = function (A, B, f, path, root) {
+            var l_A = A.length;
+            var l_B = B.length;
+
+            if (l_A !== l_B) {
+                // B is longer than Aj
+                // there has been an insertion
+
+                // OR
+
+                // A is longer than B
+                // there has been a deletion
+
+                B.forEach(function (b, i) {
+                    var t_a = type(A[i]);
+                    var t_b = type(b);
+
+                    var old = A[i];
+
+                    if (t_a !== t_b) {
+                        // type changes are always destructive
+                        // that's good news because destructive is easy
+                        switch (t_b) {
+                            case 'undefined':
+                                throw new Error('this should never happen');
+                            case 'object':
+                                A[i] = f(b);
+                                break;
+                            case 'array':
+                                A[i] = f(b);
+                                break;
+                            default:
+                                A[i] = b;
+                                break;
+                        }
+
+                        // path, key, root object, oldvalue, newvalue
+                        onChange(path, i, root, old, b);
+                    } else {
+                        // same type
+                        var nextPath = path.slice(0).concat(i);
+
+                        switch (t_b) {
+                            case 'object':
+                                objects.call(root, A[i], b, f, nextPath, root);
+                                break;
+                            case 'array':
+                                if (arrays.call(root, A[i], b, f, nextPath, root)) {
+                                    onChange(path, i, root, old, b);
+                                }
+                                break;
+                            default:
+                                if (b !== A[i]) {
+                                    A[i] = b;
+                                    onChange(path, i, root, old, b);
+                                }
+                                break;
+                        }
+                    }
+                });
+
+                if (l_A > l_B) {
+                    // A was longer than B, so there have been deletions
+                    var i = l_B;
+                    //var t_a;
+                    var old;
+
+                    for (; i <= l_B; i++) {
+                        // recursively delete
+                        old = A[i];
+
+                        onRemove(path, i, root, old, true);
+                    }
+                    // cool
+                }
+
+                A.length = l_B;
+                return;
+            }
+
+            // else they are the same length, iterate over their values
+            A.forEach(function (a, i) {
+                var t_a = type(a);
+                var t_b = type(B[i]);
+
+                var old = a;
+
+                // they have different types
+                if (t_a !== t_b) {
+                    switch (t_b) {
+                        case 'undefined':
+                            onRemove(path, i, root, old, true);
+                            break;
+
+                    // watch out for fallthrough behaviour
+                        // if it's an object or array, create a proxy
+                        case 'object':
+                        case 'array':
+                            A[i] = f(B[i]);
+                            break;
+                        default:
+                            A[i] = B[i];
+                            break;
+                    }
+
+                    onChange(path, i, root, old, B[i]);
+                    return;
+                }
+
+                // they are the same type, clone the paths array and push to it
+                var nextPath = path.slice(0).concat(i);
+
+                // same type
+                switch (t_b) {
+                    case 'undefined':
+                        throw new Error('existing key had type `undefined`. this should never happen');
+                    case 'object':
+                        if (objects.call(root, A[i], B[i], f, nextPath, root)) {
+                            onChange(path, i, root, old, B[i]);
+                        }
+                        break;
+                    case 'array':
+                        if (arrays.call(root, A[i], B[i], f, nextPath, root)) {
+                            onChange(path, i, root, old, B[i]);
+                        }
+                        break;
+                    default:
+                        if (A[i] !== B[i]) {
+                            A[i] = B[i];
+                            onChange(path, i, root, old, B[i]);
+                        }
+                        break;
+                }
+            });
+            return;
+        };
+
+        deepProxy.update = function (A, B, cb) {
+            var t_A = type(A);
+            var t_B = type(B);
+
+            if (t_A !== t_B) {
+                throw new Error("Proxy updates can't result in type changes");
+            }
+
+            switch (t_B) {
+                /* use .call so you can supply a different `this` value */
+                case 'array':
+                    arrays.call(A, A, B, function (obj) {
+                        return create(obj, cb);
+                    }, [], A);
+                    break;
+                case 'object':
+                //   arrays.call(this, A   , B   , f, path    , root)
+                    objects.call(A, A, B, function (obj) {
+                        return create(obj, cb);
+                    }, [], A);
+                    break;
+                default:
+                    throw new Error("unsupported realtime datatype:" + t_B);
+            }
+        };
+
+        return deepProxy;
+    }());
+
+    api.create = function (cfg) {
+        /* validate your inputs before proceeding */
+
+        if (!DeepProxy.isProxyable(cfg.data, true)) {
+            throw new Error('unsupported datatype: '+ DeepProxy.type(cfg.data));
+        }
+
+        var realtimeOptions = {
+            userName: cfg.userName,
+            initialState: Sortify(cfg.data),
+            readOnly: cfg.readOnly,
+            transformFunction: JsonOT.transform || JsonOT.validate,
+            logLevel: typeof(cfg.logLevel) === 'undefined'? 0: cfg.logLevel,
+            validateContent: function (content) {
+                try {
+                    JSON.parse(content);
+                    return true;
+                } catch (e) {
+                    console.error("Failed to parse, rejecting patch");
+                    return false;
+                }
+            },
+        };
+
+        var initializing = true;
+
+        var setterCb = function () {
+            if (!DeepProxy.remoteChangeFlag) { realtimeOptions.onLocal(); }
+        };
+
+        var rt = {};
+        var realtime;
+
+        var proxy;
+        var patchText;
+
+        realtimeOptions.onRemote = function () {
+            if (initializing) { return; }
+            // TODO maybe implement history support here
+
+            var userDoc = realtime.getUserDoc();
+            var parsed = JSON.parse(userDoc);
+
+            DeepProxy.remoteChangeFlag = true;
+            DeepProxy.update(proxy, parsed, setterCb);
+            DeepProxy.remoteChangeFlag = false;
+        };
+
+        var onLocal = realtimeOptions.onLocal = function () {
+            if (initializing) { return; }
+            var strung = isFakeProxy? DeepProxy.stringifyFakeProxy(proxy): Sortify(proxy);
+            patchText(strung);
+
+            // try harder
+            if (realtime.getUserDoc() !== strung) { patchText(strung); }
+
+            // onLocal
+            if (cfg.onLocal) { cfg.onLocal(); }
+        };
+
+        proxy = DeepProxy.create(cfg.data, setterCb, true);
+        console.log(proxy);
+
+        realtimeOptions.onInit = function (info) {
+            proxy._events.create.forEach(function (handler) {
+                handler.cb(info);
+            });
+        };
+
+        realtimeOptions.onReady = function (info) {
+            // create your patcher
+            if (realtime !== info.realtime) {
+                realtime = rt.realtime = info.realtime;
+                patchText = TextPatcher.create({
+                    realtime: realtime,
+                    logging: cfg.logging || false,
+                });
+            } else {
+                console.error(realtime);
+            }
+
+            var userDoc = realtime.getUserDoc();
+            var parsed = JSON.parse(userDoc);
+
+            DeepProxy.update(proxy, parsed, setterCb);
+
+            proxy._events.ready.forEach(function (handler) {
+                handler.cb(info);
+            });
+
+            DeepProxy.checkLocalChange(proxy, onLocal);
+
+            initializing = false;
+        };
+
+        realtimeOptions.onAbort = function (info) {
+            proxy._events.disconnect.forEach(function (handler) {
+                handler.cb(info);
+            });
+        };
+
+        realtimeOptions.onConnectionChange = function (info) {
+            if (info.state) { // reconnect
+                initializing = true;
+                proxy._events.reconnect.forEach(function (handler) {
+                    handler.cb(info);
+                });
+                return;
+            }
+            // disconnected
+            proxy._events.disconnect.forEach(function (handler) {
+                handler.cb(info);
+            });
+        };
+
+        realtimeOptions.onError = function (info) {
+            proxy._events.disconnect.forEach(function (handler) {
+                handler.cb(info);
+            });
+        };
+
+        realtime = rt.cpCnInner = cfg.common.startRealtime(realtimeOptions);
+        rt.proxy = proxy;
+        rt.realtime = realtime;
+
+        return rt;
+    };
+
+    return api;
+});
diff --git a/www/common/sframe-chainpad-netflux-inner.js b/www/common/sframe-chainpad-netflux-inner.js
index 787da1ca3..7e0eb2a57 100644
--- a/www/common/sframe-chainpad-netflux-inner.js
+++ b/www/common/sframe-chainpad-netflux-inner.js
@@ -46,7 +46,21 @@ define([
         var metadataMgr = config.metadataMgr;
         config = undefined;
 
-        var chainpad;
+        var chainpad = ChainPad.create({
+            userName: userName,
+            initialState: initialState,
+            transformFunction: transformFunction,
+            validateContent: validateContent,
+            avgSyncMilliseconds: avgSyncMilliseconds,
+            logLevel: logLevel
+        });
+        chainpad.onMessage(function(message, cb) {
+            sframeChan.query('Q_RT_MESSAGE', message, cb);
+        });
+        chainpad.onPatch(function () {
+            onRemote({ realtime: chainpad });
+        });
+
         var myID;
         var isReady = false;
         var evConnected = Util.mkEvent(true);
@@ -67,33 +81,20 @@ define([
 
         sframeChan.on('EV_RT_DISCONNECT', function () {
             isReady = false;
-            if (chainpad) { chainpad.abort(); }
+            chainpad.abort();
             onConnectionChange({ state: false });
         });
         sframeChan.on('EV_RT_CONNECT', function (content) {
             //content.members.forEach(userList.onJoin);
-            myID = content.myID;
             isReady = false;
-            if (chainpad) {
+            if (myID) {
                 // it's a reconnect
-                if (chainpad) { chainpad.start(); }
+                myID = content.myID;
+                chainpad.start();
                 onConnectionChange({ state: true, myId: myID });
                 return;
             }
-            chainpad = ChainPad.create({
-                userName: userName,
-                initialState: initialState,
-                transformFunction: transformFunction,
-                validateContent: validateContent,
-                avgSyncMilliseconds: avgSyncMilliseconds,
-                logLevel: logLevel
-            });
-            chainpad.onMessage(function(message, cb) {
-                sframeChan.query('Q_RT_MESSAGE', message, cb);
-            });
-            chainpad.onPatch(function () {
-                onRemote({ realtime: chainpad });
-            });
+            myID = content.myID;
             onInit({
                 myID: myID,
                 realtime: chainpad,
@@ -130,7 +131,8 @@ define([
             getMyID: function () { return myID; },
             metadataMgr: metadataMgr,
             whenRealtimeSyncs: whenRealtimeSyncs,
-            onInfiniteSpinner: evInfiniteSpinner.reg
+            onInfiniteSpinner: evInfiniteSpinner.reg,
+            chainpad: chainpad,
         });
     };
     return Object.freeze(module.exports);
diff --git a/www/common/sframe-chainpad-netflux-outer.js b/www/common/sframe-chainpad-netflux-outer.js
index 54688c2e3..b62a25a05 100644
--- a/www/common/sframe-chainpad-netflux-outer.js
+++ b/www/common/sframe-chainpad-netflux-outer.js
@@ -154,7 +154,9 @@ define([], function () {
                         // Do not remove wcObject, it allows us to use a new 'wc' without changing the handler if we
                         // want to keep the same chainpad (realtime) object
                         try {
+                            if (window.Cryptpad_SUPPRESS_MSG) { return; }
                             wcObject.wc.bcast(message).then(function() {
+                                if (window.Cryptpad_SUPPRESS_ACK) { return; }
                                 cb();
                             }, function(err) {
                                 // The message has not been sent, display the error.
diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js
index e90d75a4c..10bb8fbac 100644
--- a/www/common/sframe-common-file.js
+++ b/www/common/sframe-common-file.js
@@ -51,9 +51,7 @@ define([
         $('<td>').text(Messages.cancel).appendTo($thead);
 
         var createTableContainer = function ($body) {
-            console.log($body);
             File.$container = $('<div>', { id: 'cp-fileupload' }).append($table).appendTo($body);
-            console.log('done');
             return File.$container;
         };
 
@@ -114,10 +112,13 @@ define([
             };
 
             onComplete = function (href) {
+                var mdMgr = common.getMetadataMgr();
+                var origin = mdMgr.getPrivateData().origin;
+                $link.prepend($('<span>', {'class': 'fa fa-external-link'}));
                 $link.attr('href', href)
                     .click(function (e) {
                         e.preventDefault();
-                        window.open($link.attr('href'), '_blank');
+                        window.open(origin + $link.attr('href'), '_blank');
                     });
                 var title = metadata.name;
                 Cryptpad.log(Messages._getKey('upload_success', [title]));
@@ -290,10 +291,22 @@ define([
                 onFileDrop(dropped, e);
             });
         };
+        var createCkeditorDropHandler = function () {
+            var editor = config.ckeditor;
+            editor.document.on('drop', function (ev) {
+                var dropped = ev.data.$.dataTransfer.files;
+                onFileDrop(dropped, ev);
+                ev.data.preventDefault(true);
+            });
+        };
 
         var createUploader = function ($area, $hover, $body) {
             if (!config.noHandlers) {
-                createAreaHandlers($area, null);
+                if (config.ckeditor) {
+                    createCkeditorDropHandler();
+                } else {
+                    createAreaHandlers($area, null);
+                }
             }
             createTableContainer($body);
         };
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 3b95674bc..9167afc5f 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -21,6 +21,15 @@ define([
         var createRealtime = function () {
             return ChainPad.create({
                 userName: 'history',
+                validateContent: function (content) {
+                    try {
+                        JSON.parse(content);
+                        return true;
+                    } catch (e) {
+                        console.log('Failed to parse, rejecting patch');
+                        return false;
+                    }
+                },
                 initialState: '',
                 transformFunction: JsonOT.validate,
                 logLevel: 0,
@@ -69,9 +78,9 @@ define([
             config.onLocal();
             config.onRemote();
         };
-        var onReady = function () {
-            config.setHistory(true);
-        };
+
+        config.setHistory(true);
+        var onReady = function () { };
 
         var Messages = common.Messages;
         var Cryptpad = common.getCryptpadCommon();
diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js
index 0a7306cdf..87f507b57 100644
--- a/www/common/sframe-common-interface.js
+++ b/www/common/sframe-common-interface.js
@@ -1,12 +1,14 @@
 define([
     'jquery',
+    '/api/config',
     '/common/cryptpad-common.js',
+    '/common/common-util.js',
     '/common/media-tag.js',
     '/common/tippy.min.js',
     '/customize/application_config.js',
 
     'css!/common/tippy.css',
-], function ($, Cryptpad, MediaTag, Tippy, AppConfig) {
+], function ($, Config, Cryptpad, Util, MediaTag, Tippy, AppConfig) {
     var UI = {};
     var Messages = Cryptpad.Messages;
 
@@ -182,11 +184,35 @@ define([
                 break;
             case 'more':
                 button = $('<button>', {
-                    title: Messages.moreActions || 'TODO',
+                    title: Messages.moreActions,
                     'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
                     style: 'font:'+size+' FontAwesome'
                 });
                 break;
+            case 'savetodrive':
+                button = $('<button>', {
+                    'class': 'fa fa-cloud-upload',
+                    title: Messages.canvas_saveToDrive,
+                })
+                .click(common.prepareFeedback(type));
+                break;
+            case 'hashtag':
+                button = $('<button>', {
+                    'class': 'fa fa-hashtag',
+                    title: Messages.tags_title,
+                })
+                .click(common.prepareFeedback(type))
+                .click(function () {
+                    sframeChan.query('Q_TAGS_GET', null, function (err, res) {
+                        if (err || res.error) { return void console.error(err || res.error); }
+                        Cryptpad.dialog.tagPrompt(res.data, function (tags) {
+                            if (!Array.isArray(tags)) { return; }
+                            console.error(tags);
+                            sframeChan.event('EV_TAGS_SET', tags);
+                        });
+                    });
+                });
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
@@ -267,6 +293,103 @@ define([
         }
     };
 
+    /*  Create a usage bar which keeps track of how much storage space is used
+        by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
+        so we throttle its usage. Clients will not update more than once per
+        LIMIT_REFRESH_RATE. It will be update at least once every three such intervals
+        If changes are made to your drive in the interim, they will trigger an
+        update.
+    */
+    var LIMIT_REFRESH_RATE = 30000; // milliseconds
+    UI.createUsageBar = function (common, cb) {
+        if (!common.isLoggedIn()) { return cb("NOT_LOGGED_IN"); }
+        // getPinnedUsage updates common.account.usage, and other values
+        // so we can just use those and only check for errors
+        var $container = $('<span>', {'class':'cp-limit-container'});
+        var todo;
+        var updateUsage = Cryptpad.notAgainForAnother(function () {
+            common.getPinUsage(todo);
+        }, LIMIT_REFRESH_RATE);
+
+        todo = function (err, data) {
+            if (err) { return void console.error(err); }
+
+            var usage = data.usage;
+            var limit = data.limit;
+            var plan = data.plan;
+            $container.html('');
+            var unit = Util.magnitudeOfBytes(limit);
+
+            usage = unit === 'GB'? Util.bytesToGigabytes(usage):
+                Util.bytesToMegabytes(usage);
+            limit = unit === 'GB'? Util.bytesToGigabytes(limit):
+                Util.bytesToMegabytes(limit);
+
+            var $limit = $('<span>', {'class': 'cp-limit-bar'}).appendTo($container);
+            var quota = usage/limit;
+            var $usage = $('<span>', {'class': 'cp-limit-usage'}).css('width', quota*100+'%');
+
+            var makeDonateButton = function () {
+                $('<a>', {
+                    'class': 'cp-limit-upgrade btn btn-success',
+                    href: Cryptpad.donateURL,
+                    rel: "noreferrer noopener",
+                    target: "_blank",
+                }).text(Messages.supportCryptpad).appendTo($container);
+            };
+
+            var makeUpgradeButton = function () {
+                $('<a>', {
+                    'class': 'cp-limit-upgrade btn btn-success',
+                    href: Cryptpad.upgradeURL,
+                    rel: "noreferrer noopener",
+                    target: "_blank",
+                }).text(Messages.upgradeAccount).appendTo($container);
+            };
+
+            if (!Config.removeDonateButton) {
+                if (!common.isLoggedIn() || !Config.allowSubscriptions) {
+                    // user is not logged in, or subscriptions are disallowed
+                    makeDonateButton();
+                } else if (!plan) {
+                    // user is logged in and subscriptions are allowed
+                    // and they don't have one. show upgrades
+                    makeUpgradeButton();
+                } else {
+                    // they have a plan. show nothing
+                }
+            }
+
+            var prettyUsage;
+            var prettyLimit;
+
+            if (unit === 'GB') {
+                prettyUsage = Messages._getKey('formattedGB', [usage]);
+                prettyLimit = Messages._getKey('formattedGB', [limit]);
+            } else {
+                prettyUsage = Messages._getKey('formattedMB', [usage]);
+                prettyLimit = Messages._getKey('formattedMB', [limit]);
+            }
+
+            if (quota < 0.8) { $usage.addClass('cp-limit-usage-normal'); }
+            else if (quota < 1) { $usage.addClass('cp-limit-usage-warning'); }
+            else { $usage.addClass('cp-limit-usage-above'); }
+            var $text = $('<span>', {'class': 'cp-limit-usage-text'});
+            $text.text(usage + ' / ' + prettyLimit);
+            $limit.append($usage).append($text);
+        };
+
+        setInterval(function () {
+            updateUsage();
+        }, LIMIT_REFRESH_RATE * 3);
+
+        updateUsage();
+        /*getProxy().on('change', ['drive'], function () {
+            updateUsage();
+        }); TODO*/
+        cb(null, $container);
+    };
+
     UI.createUserAdminMenu = function (Common, config) {
         var metadataMgr = Common.getMetadataMgr();
 
@@ -294,7 +417,7 @@ define([
             $userAdminContent.append($userName);
             options.push({
                 tag: 'p',
-                attributes: {'class': 'accountData'},
+                attributes: {'class': 'cp-toolbar-account'},
                 content: $userAdminContent.html()
             });
         }
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index f524b9bdf..52f82294c 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -47,14 +47,21 @@ define([
                     localStorage.CRYPTPAD_URLARGS = ApiConfig.requireConf.urlArgs;
                 }
                 var cache = {};
+                var localStore = {};
                 Object.keys(localStorage).forEach(function (k) {
-                    if (k.indexOf('CRYPTPAD_CACHE|') !== 0) { return; }
-                    cache[k.slice(('CRYPTPAD_CACHE|').length)] = localStorage[k];
+                    if (k.indexOf('CRYPTPAD_CACHE|') === 0) {
+                        cache[k.slice(('CRYPTPAD_CACHE|').length)] = localStorage[k];
+                        return;
+                    }
+                    if (k.indexOf('CRYPTPAD_STORE|') === 0) {
+                        localStore[k.slice(('CRYPTPAD_STORE|').length)] = localStorage[k];
+                        return;
+                    }
                 });
 
                 SFrameChannel.create($('#sbox-iframe')[0].contentWindow, waitFor(function (sfc) {
                     sframeChan = sfc;
-                }), false, { cache: cache });
+                }), false, { cache: cache, localStore: localStore, language: Cryptpad.getLanguage() });
                 Cryptpad.ready(waitFor());
             }));
         }).nThen(function (waitFor) {
@@ -64,8 +71,17 @@ define([
                     localStorage['CRYPTPAD_CACHE|' + k] = x[k];
                 });
             });
+            sframeChan.on('EV_LOCALSTORE_PUT', function (x) {
+                Object.keys(x).forEach(function (k) {
+                    if (typeof(x[k]) === "undefined") {
+                        delete localStorage['CRYPTPAD_STORE|' + k];
+                        return;
+                    }
+                    localStorage['CRYPTPAD_STORE|' + k] = x[k];
+                });
+            });
 
-            secret = Cryptpad.getSecrets();
+            secret = cfg.getSecrets ? cfg.getSecrets(Cryptpad) : Cryptpad.getSecrets();
             if (!secret.channel) {
                 // New pad: create a new random channel id
                 secret.channel = Cryptpad.createChannelId();
@@ -231,23 +247,22 @@ define([
                         return null;
                     }
                 };
+                var msgs = [];
                 var onMsg = function (msg) {
                     var parsed = parse(msg);
                     if (parsed[0] === 'FULL_HISTORY_END') {
-                        console.log('END');
-                        cb();
+                        cb(msgs);
                         return;
                     }
                     if (parsed[0] !== 'FULL_HISTORY') { return; }
                     if (parsed[1] && parsed[1].validateKey) { // First message
-                        secret.keys.validateKey = parsed[1].validateKey;
                         return;
                     }
                     msg = parsed[1][4];
                     if (msg) {
                         msg = msg.replace(/^cp\|/, '');
                         var decryptedMsg = crypto.decrypt(msg, secret.keys.validateKey);
-                        sframeChan.event('EV_RT_HIST_MESSAGE', decryptedMsg);
+                        msgs.push(decryptedMsg);
                     }
                 };
                 network.on('message', onMsg);
@@ -282,6 +297,12 @@ define([
                 });
             });
 
+            sframeChan.on('Q_SESSIONSTORAGE_PUT', function (data, cb) {
+                sessionStorage[data.key] = data.value;
+                cb();
+            });
+
+
             // Present mode URL
             sframeChan.on('Q_PRESENT_URL_GET_VALUE', function (data, cb) {
                 var parsed = Cryptpad.parsePadUrl(window.location.href);
@@ -373,6 +394,35 @@ define([
                 }
             });
 
+            sframeChan.on('EV_OPEN_URL', function (url) {
+                if (url) {
+                    window.open(url);
+                }
+            });
+
+            sframeChan.on('Q_TAGS_GET', function (data, cb) {
+                Cryptpad.getPadTags(null, function (err, data) {
+                    cb({
+                        error: err,
+                        data: data
+                    });
+                });
+            });
+
+            sframeChan.on('EV_TAGS_SET', function (data) {
+                console.log(data);
+                Cryptpad.resetTags(null, data);
+            });
+
+            sframeChan.on('Q_PIN_GET_USAGE', function (data, cb) {
+                Cryptpad.isOverPinLimit(function (err, overLimit, data) {
+                    cb({
+                        error: err,
+                        data: data
+                    });
+                });
+            });
+
             if (cfg.addRpc) {
                 cfg.addRpc(sframeChan, Cryptpad);
             }
@@ -487,7 +537,7 @@ define([
             CpNfOuter.start({
                 sframeChan: sframeChan,
                 channel: secret.channel,
-                network: Cryptpad.getNetwork(),
+                network: cfg.newNetwork || Cryptpad.getNetwork(),
                 validateKey: secret.keys.validateKey || undefined,
                 readOnly: readOnly,
                 crypto: Crypto.createEncryptor(secret.keys),
@@ -499,7 +549,7 @@ define([
                         });
                         return;
                     }
-                    if (readOnly) { return; }
+                    if (readOnly || cfg.noHash) { return; }
                     Cryptpad.replaceHash(Cryptpad.getEditHashFromKeys(wc.id, secret.keys));
                 }
             });
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 3df0e910e..3ca91d7c0 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -77,6 +77,7 @@ define([
     funcs.openTemplatePicker = callWithCommon(UI.openTemplatePicker);
     funcs.displayAvatar = callWithCommon(UI.displayAvatar);
     funcs.createButton = callWithCommon(UI.createButton);
+    funcs.createUsageBar = callWithCommon(UI.createUsageBar);
 
     // History
     funcs.getHistory = callWithCommon(History.create);
@@ -156,6 +157,12 @@ define([
             if (cb) { cb(data); }
         });
     };
+    funcs.getPinUsage = function (cb) {
+        cb = cb || $.noop;
+        ctx.sframeChan.query('Q_PIN_GET_USAGE', null, function (err, data) {
+            cb(err || data.error, data.data);
+        });
+    };
 
     funcs.isOverPinLimit = function (cb) {
         ctx.sframeChan.query('Q_GET_PIN_LIMIT_STATUS', null, function (err, data) {
@@ -164,10 +171,14 @@ define([
     };
 
     funcs.getFullHistory = function (realtime, cb) {
-        ctx.sframeChan.on('EV_RT_HIST_MESSAGE', function (content) {
-            realtime.message(content);
+        ctx.sframeChan.query('Q_GET_FULL_HISTORY', null, function (err, messages) {
+            if (err) { return void console.error(err); }
+            if (!Array.isArray(messages)) { return; }
+            messages.forEach(function (m) {
+                realtime.message(m);
+            });
+            cb();
         });
-        ctx.sframeChan.query('Q_GET_FULL_HISTORY', null, cb);
     };
 
     funcs.getPadAttribute = function (key, cb) {
@@ -199,6 +210,15 @@ define([
         }, cb);
     };
 
+    funcs.sessionStorage = {
+        put: function (key, value, cb) {
+            ctx.sframeChan.query('Q_SESSIONSTORAGE_PUT', {
+                key: key,
+                value: value
+            }, cb);
+        }
+    };
+
     funcs.isStrongestStored = function () {
         var data = ctx.metadataMgr.getPrivateData();
         if (data.availableHashes.fileHash) { return true; }
@@ -210,6 +230,9 @@ define([
         ctx.sframeChan.query('Q_SETTINGS_SET_DISPLAY_NAME', name, cb);
     };
 
+    funcs.mergeAnonDrive = function (cb) {
+        ctx.sframeChan.query('Q_MERGE_ANON_DRIVE', null, cb);
+    };
     // Friends
     var pendingFriends = [];
     funcs.getPendingFriends = function () {
@@ -260,6 +283,7 @@ define([
     }; */
 
     funcs.gotoURL = function (url) { ctx.sframeChan.event('EV_GOTO_URL', url); };
+    funcs.openURL = function (url) { ctx.sframeChan.event('EV_OPEN_URL', url); };
 
     funcs.whenRealtimeSyncs = evRealtimeSynced.reg;
 
@@ -283,6 +307,18 @@ define([
                     ctx.sframeChan.event('EV_CACHE_PUT', x);
                 };
             });
+            ctx.sframeChan.whenReg('EV_LOCALSTORE_PUT', function () {
+                if (Object.keys(window.cryptpadStore.updated).length) {
+                    ctx.sframeChan.event('EV_LOCALSTORE_PUT', window.cryptpadStore.updated);
+                }
+                window.cryptpadStore._put = window.cryptpadStore.put;
+                window.cryptpadStore.put = function (k, v, cb) {
+                    window.cryptpadStore._put(k, v, cb);
+                    var x = {};
+                    x[k] = v;
+                    ctx.sframeChan.event('EV_LOCALSTORE_PUT', x);
+                };
+            });
 
             UI.addTooltips();
 
diff --git a/www/common/sframe-protocol.js b/www/common/sframe-protocol.js
index c21bb5bce..34655fcd6 100644
--- a/www/common/sframe-protocol.js
+++ b/www/common/sframe-protocol.js
@@ -67,6 +67,9 @@ define({
     // Use anonymous rpc from inside the iframe (for avatars & pin usage).
     'Q_ANON_RPC_MESSAGE': true,
 
+    // Get the user's pin limit, usage and plan
+    'Q_PIN_GET_USAGE': true,
+
     // Check the pin limit to determine if we can store the pad in the drive or if we should.
     // display a warning
     'Q_GET_PIN_LIMIT_STATUS': true,
@@ -123,12 +126,16 @@ define({
 
     // Make the browser window navigate to a given URL, if no URL is passed then it will reload.
     'EV_GOTO_URL': true,
+    // Make the parent window open a given URL in a new tab. It allows us to keep sessionStorage
+    // form the parent window.
+    'EV_OPEN_URL': true,
 
     // Present mode URL
     'Q_PRESENT_URL_GET_VALUE': true,
     'EV_PRESENT_URL_SET_VALUE': true,
 
     // Put one or more entries to the cache which will go in localStorage.
+    // Cache is wiped after each new release
     'EV_CACHE_PUT': true,
 
     // Contacts
@@ -147,4 +154,17 @@ define({
     'Q_CONTACTS_SEND_MESSAGE': true,
     'Q_CONTACTS_SET_CHANNEL_HEAD': true,
 
+    // Put one or more entries to the localStore which will go in localStorage.
+    'EV_LOCALSTORE_PUT': true,
+    // Put one entry in the parent sessionStorage
+    'Q_SESSIONSTORAGE_PUT': true,
+
+    // Set and get the tags using the tag prompt button
+    'Q_TAGS_GET': true,
+    'EV_TAGS_SET': true,
+
+    // Merge the anonymous drive (FS_hash) into the current logged in user's drive, to keep the pads
+    // in the drive at registration.
+    'Q_MERGE_ANON_DRIVE': true,
+
 });
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index 335888256..3218f40f4 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -688,7 +688,7 @@ define([
     };
 
     var typing = -1;
-    var kickSpinner = function (toolbar, config, local) {
+    var kickSpinner = function (toolbar, config/*, local*/) {
         if (!toolbar.spinner) { return; }
         var $spin = toolbar.spinner;
 
@@ -708,7 +708,7 @@ define([
                 window.clearInterval($spin.interval);
                 typing = -1;
                 $spin.text(Messages.saved);
-            }, local ? 0 : SPINNER_DISAPPEAR_TIME);
+            }, /*local ? 0 :*/ SPINNER_DISAPPEAR_TIME);
         };
         config.sfCommon.whenRealtimeSyncs(onSynced);
     };
diff --git a/www/common/userObject.js b/www/common/userObject.js
index 79d5dc3f0..8a3662a7b 100644
--- a/www/common/userObject.js
+++ b/www/common/userObject.js
@@ -18,6 +18,7 @@ define([
         var exp = {};
         var Cryptpad = config.Cryptpad;
         var Messages = Cryptpad.Messages;
+        var loggedIn = config.loggedIn || Cryptpad.isLoggedIn();
 
         var FILES_DATA = module.FILES_DATA = exp.FILES_DATA = Cryptpad.storageKey;
         var OLD_FILES_DATA = module.OLD_FILES_DATA = exp.OLD_FILES_DATA = Cryptpad.oldStorageKey;
@@ -415,6 +416,7 @@ define([
             var containsSearchedTag = function (T) {
                 if (!tags) { return false; }
                 if (!T.length) { return false; }
+                T = T.map(function (t) { return t.toLowerCase(); });
                 return tags.some(function (tag) {
                     return T.some(function (t) {
                         return t.indexOf(tag) !== -1;
@@ -424,6 +426,7 @@ define([
 
             getFiles([FILES_DATA]).forEach(function (id) {
                 var data = allFilesList[id];
+                if (!data) { return; }
                 if (Array.isArray(data.tags) && containsSearchedTag(data.tags)) {
                     res.push(id);
                 } else
@@ -446,6 +449,7 @@ define([
             res.forEach(function (l) {
                 //var paths = findFile(l);
                 ret.push({
+                    id: l,
                     paths: findFile(l),
                     data: exp.getFileData(l)
                 });
@@ -454,7 +458,7 @@ define([
         };
         exp.getRecentPads = function () {
             var allFiles = files[FILES_DATA];
-            var sorted = Object.keys(allFiles)
+            var sorted = Object.keys(allFiles).filter(function (a) { return allFiles[a]; })
                 .sort(function (a,b) {
                     return allFiles[a].atime < allFiles[b].atime;
                 })
@@ -479,13 +483,14 @@ define([
 
         // FILES DATA
         exp.pushData = function (data, cb) {
+            // TODO: can only be called from outside atm
             if (typeof cb !== "function") { cb = function () {}; }
             var todo = function () {
                 var id = Cryptpad.createRandomInteger();
                 files[FILES_DATA][id] = data;
                 cb(null, id);
             };
-            if (!Cryptpad.isLoggedIn() || !AppConfig.enablePinning || config.testMode) {
+            if (!loggedIn || !AppConfig.enablePinning || config.testMode) {
                 return void todo();
             }
             Cryptpad.pinPads([Cryptpad.hrefToHexChannelId(data.href)], function (e) {
@@ -583,7 +588,7 @@ define([
 
         // ADD
         var add = exp.add = function (id, path) {
-            if (!Cryptpad.isLoggedIn() && !config.testMode) { return; }
+            if (!loggedIn && !config.testMode) { return; }
             var data = files[FILES_DATA][id];
             if (!data || typeof(data) !== "object") { return; }
             var newPath = path, parentEl;
@@ -622,7 +627,7 @@ define([
         exp.forget = function (href) {
             var id = getIdFromHref(href);
             if (!id) { return; }
-            if (!Cryptpad.isLoggedIn() && !config.testMode) {
+            if (!loggedIn && !config.testMode) {
                 // delete permanently
                 exp.removePadAttribute(href);
                 spliceFileData(id);
@@ -651,7 +656,7 @@ define([
         };
         var checkDeletedFiles = function () {
             // Nothing in OLD_FILES_DATA for workgroups
-            if (workgroup || (!Cryptpad.isLoggedIn() && !config.testMode)) { return; }
+            if (workgroup || (!loggedIn && !config.testMode)) { return; }
 
             var filesList = getFiles([ROOT, 'hrefArray', TRASH]);
             getFiles([FILES_DATA]).forEach(function (id) {
@@ -678,7 +683,7 @@ define([
             var trashPaths = paths.filter(function(x) { return isPathIn(x, [TRASH]); });
             var allFilesPaths = paths.filter(function(x) { return isPathIn(x, [FILES_DATA]); });
 
-            if (!Cryptpad.isLoggedIn() && !config.testMode) {
+            if (!loggedIn && !config.testMode) {
                 allFilesPaths.forEach(function (path) {
                     var el = find(path);
                     if (!el) { return; }
@@ -853,6 +858,7 @@ define([
                 }
                 try {
                     debug("Migrating file system...");
+                    // TODO
                     Cryptpad.feedback('Migrate-oldFilesData', true);
                     files.migrate = 1;
                     var next = function () {
@@ -902,6 +908,7 @@ define([
                     };
                     if (exp.rt) {
                         exp.rt.sync();
+                        // TODO
                         Cryptpad.whenRealtimeSyncs(exp.rt, next);
                     } else {
                         window.setTimeout(next, 1000);
@@ -1035,20 +1042,6 @@ define([
                     }
                 });
             };
-            var migrateAttributes = function (el, id, parsed) {
-                // Migrate old pad attributes
-                ['userid', 'previewMode'].forEach(function (attr) {
-                    var key = parsed.hash + '.' + attr;
-                    var key2 = parsed.hash.slice(0,-1) + '.' + attr;// old pads not ending with /
-                    if (typeof(files[key]) !== "undefined" || typeof(files[key2]) !== "undefined") {
-                        debug("Migrating pad attribute", attr, "for pad", id);
-                        el[attr] = files[key] || files[key2];
-                        delete files[key];
-                        delete files[key2];
-                    }
-                });
-                // Migration done
-            };
             var fixFilesData = function () {
                 if (typeof files[FILES_DATA] !== "object") { debug("OLD_FILES_DATA was not an object"); files[FILES_DATA] = {}; }
                 var fd = files[FILES_DATA];
@@ -1075,9 +1068,7 @@ define([
                         continue;
                     }
 
-                    migrateAttributes(el, id, parsed);
-
-                    if ((Cryptpad.isLoggedIn() || config.testMode) && rootFiles.indexOf(id) === -1) {
+                    if ((loggedIn || config.testMode) && rootFiles.indexOf(id) === -1) {
                         debug("An element in filesData was not in ROOT, TEMPLATE or TRASH.", id, el);
                         var newName = Cryptpad.createChannelId();
                         root[newName] = id;
diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less
new file mode 100644
index 000000000..ea027d76e
--- /dev/null
+++ b/www/drive/app-drive.less
@@ -0,0 +1,820 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/leftside-menu.less';
+@import (once) "../../customize/src/less2/include/tools.less";
+@import (once) "../../customize/src/less2/include/limit-bar.less";
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+.limit-bar_main();
+
+@drive_hover: #eee;
+@drive_hover-light: lighten(@drive_hover, 20%);
+@drive_info-box-bg: #d2e1f2;
+@drive_info-box-border: #bbb;
+@drive_table-header-fg: #555;
+@drive_table-header-bg: #e8e8e8;
+@drive_mobile-tree-border-col: #ccc;
+
+@drive_content-fg: @colortheme_sidebar-right-fg;
+@drive_content-bg: @colortheme_sidebar-right-bg;
+@drive_content-bg-ro: darken(@drive_content-bg, 10%);
+
+
+/* PAGE */
+
+display: flex;
+flex-flow: column;
+max-height: 100%;
+min-height: auto;
+
+.cp-unselectable {
+    .tools_unselectable();
+}
+
+/* local mixins */
+.drive_fileIcon {
+    li {
+        display: inline-block;
+        margin: 10px 10px;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 5px;
+        padding-bottom: 5px;
+
+        &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
+            border: 1px solid #CCC;
+        }
+        .cp-app-drive-element-name {
+            width: 100%;
+            height: 48px;
+            margin: 8px 0;
+            display: inline-block;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            //text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .cp-app-drive-element-truncated {
+            display: block;
+            position: absolute;
+            bottom: 0px;
+            left: 0; right: 0;
+            text-align: center;
+        }
+        img.cp-app-drive-content-icon {
+            height: 48px;
+            max-height: none;
+            max-width: none;
+            margin: 8px 0;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 48px;
+            margin: 8px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+
+img.cp-app-drive-icon {
+    max-width: 20px;
+    max-height: 16px;
+}
+
+.cp-app-drive-container {
+    flex: 1;
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+    @media screen and (max-width: @browser_media-medium-screen) {
+        display: block;
+        #cp-app-drive-toolbar {
+            .path .element {
+                display: none;
+            }
+        }
+        #cp-app-drive-tree {
+            resize: none;
+            width: 100%;
+            max-width: unset;
+            max-height: unset;
+            border-bottom: 1px solid @drive_mobile-tree-border-col;
+            .cp-app-drive-tree-category {
+                margin-top: 0.5em;
+            }
+        }
+    }
+}
+
+div:focus {
+    outline: none;
+}
+
+.fa {
+    font-family: FontAwesome;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0px; // Remove the default padding
+}
+
+li {
+    padding: 0px 5px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.cp-app-drive-context {
+    display: none;
+    position: absolute;
+    z-index: 500;
+    li {
+        padding: 0;
+        font-size: @colortheme_app-font-size;
+        a {
+            cursor: pointer;
+        }
+    }
+}
+
+.cp-app-drive-element-droppable {
+    background-color: #FE9A2E;
+    color: #222;
+}
+
+.cp-app-drive-element-selected {
+    background: #666 !important;
+    color: #eee;
+    margin: -1px;
+    .fa-minus-square-o, .fa-plus-square-o {
+        color: @colortheme_sidebar-left-fg;
+    }
+}
+
+.cp-app-drive-element-selected-tmp {
+    border: 1px dotted #bbb;
+    background: #AAA;
+    color: #ddd;
+    margin: -1px;
+    .fa-minus-square-o, .fa-plus-square-o {
+        color: @colortheme_sidebar-left-fg;
+    }
+}
+
+span {
+    &.fa-folder, &.fa-folder-open {
+        //color: #FEDE8B;
+        //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    }
+}
+
+/* TREE */
+
+
+#cp-app-drive-tree {
+    font-size: @colortheme_app-font-size;
+    //border-right: 1px solid #ccc;
+    box-sizing: border-box;
+    background: @colortheme_sidebar-left-bg;
+    overflow: auto;
+    resize: horizontal;
+    width: auto;
+    white-space: nowrap;
+    max-width: 500px;
+    min-width: 200px;
+    padding: 0px;
+    color: @colortheme_sidebar-left-fg;
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    .cp-app-drive-tree-categories-container {
+        flex: 1;
+        max-width: 500px;
+        overflow: auto;
+    }
+    img.cp-app-drive-icon {
+        margin-bottom: 3px;
+        margin-left: -2px;
+    }
+    .cp-app-drive-tree-docs {
+        margin-top: 20px;
+        //padding: 0 0 0 20px;
+        padding: 0;
+        cursor: auto;
+        &li, li {
+            padding: 0;
+            &.cp-app-drive-element-collapsed ul {
+                display: none;
+            }
+            input {
+                width: ~"calc(100% - 30px)";
+                padding: 0 10px;
+                border: 0;
+                color: lighten(@colortheme_sidebar-left-fg, 40%);
+            }
+            & > span.cp-app-drive-element-row {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                //min-width: ~"calc(100% + 5px)";
+                .leftside-menu-category_main();
+                width: ~"calc(100% + 5px)";
+                margin: 0;
+                margin-bottom: -6px;
+                display: inline-block;
+                cursor: pointer;
+                margin-left: -5px;
+                padding-left: 5px;
+            }
+            & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover {
+            }
+        }
+    }
+    span.cp-app-drive-element {
+        cursor: pointer;
+    }
+    .cp-app-drive-tree-category {
+        margin: 0;
+        margin-top: 15px;
+        .cp-app-drive-tree-root {
+            &> .fa {
+                min-width: 30px;
+                cursor: pointer;
+            }
+        }
+        li {
+            padding: 0;
+            .cp-app-drive-element-row {
+                display: block;
+                padding-left: 20px;
+                .leftside-menu-category_main();
+                margin: 0;
+                .fa {
+                    width: 25px;
+                }
+            }
+        }
+    }
+    .cp-app-drive-tree-category:last-child {
+        margin-bottom: 20px;
+    }
+    .limit-container {
+        margin-top: 0;
+    }
+    #cp-app-drive-tree-search {
+        text-align: center;
+        padding: 0;
+        position: relative;
+        input {
+            background: lighten(@colortheme_drive-bg, 8%);
+            color: @colortheme_drive-color;
+            .tools_placeholder-color(@colortheme_drive-color);
+            outline-width: 0px;
+            border-radius: 0;
+            width: 100%;
+            //border: 1px solid #ccc;
+            border: 0;
+            border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
+            //border-right: 0;
+            height: @variables_bar-height;
+            padding: 0 5px;
+            padding-left: 45px;
+            &:focus {
+                outline-width: 0px;
+            }
+        }
+        .cp-app-drive-tree-search-con {
+            color: @colortheme_drive-color;
+            position: absolute;
+            left: 20px; // TODO align with drive categories
+            top: 8px;
+        }
+    }
+    .fa.cp-app-drive-icon-expcol {
+        margin-left: -10px;
+        font-size: 14px;
+        position: absolute;
+        left: -20px;
+        top: 10px;
+        width: 11px !important;
+        height: 11px !important;
+        padding: 0;
+        margin: 0;
+        background: white;
+        z-index: 10;
+        cursor: default;
+        &:before {
+            position:relative;
+            top: -1px;
+        }
+    }
+    .cp-app-drive-tree-docs {
+        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
+            position: relative;
+            top:0;
+            left: -10px;
+        }
+        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
+            margin-left: -5px;
+        }
+        .cp-app-drive-tree-root {
+            &> .cp-app-drive-element-row {
+                padding-left: 20px;
+            }
+            &> ul {
+                padding-left: 30px;
+            }
+        }
+    }
+
+    // Expand/collapse lines
+    .cp-app-drive-tree-docs ul {
+        margin: 0px 0px 0px 10px;
+        list-style: none;
+        padding-left: 10px;
+        li {
+            position: relative;
+            &:before {
+                position: absolute;
+                left: -15px;
+                top: -11px;
+                content: '';
+                display: block;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
+                height: ~"calc(1em + 11px)";
+                border-bottom: 1px solid @colortheme_sidebar-left-branch;
+                width: 15px;
+            }
+            &:after {
+                position: absolute;
+                left: -15px;
+                bottom: -7px;
+                content: '';
+                display: block;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
+                height: 100%;
+            }
+            &.cp-app-drive-tree-root {
+                margin: 0px 0px 0px -10px;
+                &:before {
+                    display: none;
+                }
+                &:after {
+                    display: none;
+                }
+            }
+            &:last-child:after {
+                display: none;
+            }
+        }
+    }
+}
+
+/* CONTENT */
+#cp-app-drive-content-container {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+    // Needed to avoid the folder's path to overflows
+    // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
+    min-width: 0;
+}
+#cp-app-drive-content {
+    box-sizing: border-box;
+    background: @drive_content-bg;
+    color: @drive_content-fg;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-flow: column;
+    position: relative;
+    .cp-app-drive-content-select-box {
+        display: none;
+        background-color: rgba(100, 100, 100, 0.7);
+        position: absolute;
+        z-index: 50;
+    }
+    &.cp-app-drive-readonly {
+        background: @drive_content-bg-ro;
+    }
+    h1 {
+        padding-left: 10px;
+        margin-top: 10px;
+    }
+    .cp-app-drive-content-info-box {
+        line-height: 2em;
+        padding: 0.25em 0.75em;
+        margin: 1em;
+        background: @drive_info-box-bg;
+        span {
+            cursor: pointer;
+            float: right;
+            margin-top: 0.5em;
+        }
+    }
+    li {
+        cursor: default;
+        &:not(.cp-app-drive-element-header) {
+            &:hover {
+                &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
+                    background-color: @drive_hover;
+                }
+            }
+        }
+    }
+    #cp-app-drive-content-folder {
+        li {
+            &.cp-app-drive-search-result {
+                border-bottom: 1px solid @drive_info-box-border;
+                display: block;
+                &:hover {
+                    background-color: initial;
+                }
+                table {
+                    width: 100%;
+                    .cp-app-drive-search-label2 {
+                        width: 150px;
+                        font-size: 15px;
+                        text-align: right;
+                        padding-right: 15px;
+                    }
+                    .cp-app-drive-search-opendir {
+                        a {
+                            cursor: pointer;
+                            color: #41b7d8;
+                            &:hover {
+                                color: #014c8c;
+                                text-decoration: underline;
+                            }
+                        }
+                    }
+                    .cp-app-drive-search-path {
+                        font-style: italic;
+                        direction: rtl;
+                        .cp-app-drive-path-element {
+                            display: inline-block;
+                            margin-right: 5px;
+                        }
+                    }
+                    .cp-app-drive-search-title {
+                        font-weight: bold;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: @drive_hover;
+                        }
+                    }
+                    .cp-app-drive-search-col2 {
+                        width: 250px;
+                    }
+                    td.cp-app-drive-search-icon {
+                        width: 50px;
+                        font-size: 40px;
+                    }
+                }
+            }
+        }
+    }
+    .cp-app-drive-element {
+        .cp-app-drive-element-truncated { display: none; }
+    }
+    div.cp-app-drive-content-grid {
+        padding: 20px;
+        .drive_fileIcon;
+        li {
+            &.cp-app-drive-element {
+                position: relative;
+            }
+            input {
+                width: 100%;
+                margin-top: 5px;
+            }
+            .cp-app-drive-element-state {
+                position: absolute;
+                top: 3px;
+                right: 3px;
+                .fa {
+                    margin:0;
+                    font-size: 18px;
+                }
+            }
+        }
+        .cp-app-drive-element-list {
+            display: none;
+        }
+        .cp-app-drive-new-ghost {
+            cursor: pointer;
+            opacity: 0.5;
+            padding: 0;
+            &:hover {
+                opacity: 0.7;
+            }
+            .fa {
+                cursor: pointer;
+                font-size: 90px;
+                margin-top: 5px;
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .cp-app-drive-content-list {
+        .cp-app-drive-element-grid {
+            display: none;
+        }
+        // Make it act as a table!
+        padding-left: 20px;
+        ul {
+            display: table;
+            width: 100%;
+            padding: 0px 10px;
+        }
+        li {
+            display: table-row;
+            &> span {
+                padding: 0 5px;
+                display: table-cell;
+            }
+            &:not(.cp-app-drive-element-header) {
+                height: @variables_bar-height;
+                line-height: @variables_bar-height;
+            }
+            &.cp-app-drive-element-header {
+                cursor: default;
+                color: @drive_table-header-fg;
+                span {
+                    &:not(.fa) {
+                        text-align: left;
+                    }
+                    &.sortasc, &.sortdesc {
+                        float: right;
+                    }
+                }
+                &> span {
+                    padding: 15px 5px;
+                    &.cp-app-drive-sort-active {
+                        font-weight: bold;
+                    }
+                    &.cp-app-drive-sort-clickable {
+                        cursor: pointer;
+                        &:hover {
+                            background: @drive_table-header-bg;
+                        }
+                    }
+                }
+            }
+        }
+        .cp-app-drive-element {
+            span {
+                overflow: hidden;
+                white-space: nowrap;
+                box-sizing: border-box;
+                &.cp-app-drive-element-state {
+                    .fa:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+                &.cp-app-drive-content-icon, &.cp-app-drive-element-state {
+                    width: 30px;
+                }
+                &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
+                    width: 175px;
+                }
+                &.cp-app-drive-element-title {
+                    width: 250px;
+                    @media screen and (max-width: 1200px) {
+                        display: none;
+                    }
+                }
+                &.cp-app-drive-element-folders, &.cp-app-drive-element-files {
+                    width: 150px;
+                }
+            }
+        }
+    }
+}
+
+#cp-app-drive-content-folder {
+    padding-right: 10px;
+    flex: 1;
+}
+
+#cp-app-drive-new-ghost-dialog.cp-modal-container {
+    .drive_fileIcon;
+
+    li:not(.cp-app-drive-element-selected):hover {
+        border: 1px solid white;
+    }
+    .cp-modal {
+        display: flex;
+        flex-flow: column;
+        li, li .fa {
+            cursor: pointer;
+        }
+        &> p {
+            margin: 50px;
+        }
+        &> div {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-content: center;
+            overflow-y: auto;
+            .cp-app-drive-new-upload {
+                break-after: always;
+                page-break-after: always;
+            }
+        }
+    }
+
+    @media screen and (max-height: @browser_media-not-big) {
+        .cp-modal {
+            & > p {
+                display: none;
+            }
+            & > div {
+                align-content: unset;
+                li {
+                    height: 40px;
+                    width: 90%;
+                    display: flex;
+                    align-items: center;
+                    .fa {
+                        font-size: 32px;
+                    }
+                    .cp-app-drive-new-name {
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* Toolbar */
+
+#cp-app-drive-toolbar {
+    background: lighten(@colortheme_drive-bg, 8%);
+    color: @colortheme_drive-color;
+    //height: 30px;
+    //display: flex;
+    //flex-flow: row;
+    z-index: 100;
+    box-sizing: border-box;
+    height: @variables_bar-height;
+    padding: 0;
+    display: flex;
+    flex-flow: row;
+
+    * {
+        outline-width: 0;
+        &:focus {
+            outline-width: 0;
+        }
+    }
+
+    .history {
+        float: right;
+        .cp-toolbar-drawer-element {
+            display: none;
+        }
+    }
+
+    .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        .fa {
+            margin: 0;
+        }
+        button {
+            height: @variables_bar-height;
+            padding: 0 10px;
+            border: none;
+            border-radius: 0;
+            box-sizing: border-box;
+            background: transparent;
+            font-size: @colortheme_app-font-size;
+            color: @colortheme_drive-color;
+            transition: all 0.15s;
+            .drawer {
+                display: none;
+            }
+            .fa, span {
+                font-size: @colortheme_app-font-size;
+            }
+            &:hover {
+                background: @colortheme_drive-bg;
+            }
+            &.cp-app-drive-toolbar-active {
+                display: none;
+            }
+        }
+    }
+    .cp-app-drive-toolbar-rightside {
+        float: right;
+        & > * {
+            float: right;
+        }
+        #cp-app-drive-toolbar-contextbuttons {
+            display: inline-block;
+            height: 100%;
+        }
+        padding-left: 10px;
+    }
+    .cp-app-drive-toolbar-leftside {
+        & > span {
+            height: 100%;
+            margin: 0;
+        }
+        button {
+            padding: 0 10px;
+            .fa {
+                margin-right: 5px;
+            }
+            .cp-dropdown-button-title {
+                display: inline-flex;
+                height: @variables_bar-height;
+                align-items: center;
+                span:not(.fa) {
+                    line-height: 23px;
+                }
+            }
+        }
+    }
+
+    button {
+        font: @colortheme_app-font;
+        span {
+            font: @colortheme_app-font;
+        }
+        .fa, &.fa {
+            font-family: FontAwesome;
+        }
+    }
+    /* The container <div> - needed to position the dropdown content */
+    .cp-dropdown-container {
+        margin: 2px 2px;
+        line-height: 1em;
+        position: relative;
+        display: inline-block;
+    }
+    .cp-dropdown-content {
+        margin-right: 2px;
+    }
+
+    .cp-app-drive-path {
+        flex: 1;
+        width: 100%;
+        height: @variables_bar-height;
+        line-height: @variables_bar-height;
+        cursor: default;
+        width: auto;
+        overflow: hidden;
+        white-space: nowrap;
+        direction: rtl;
+        max-width: 100%;
+        text-align: left;
+        .cp-app-drive-path-element {
+            display: inline-block;
+            height: @variables_bar-height;
+            line-height: @variables_bar-height;
+            font-size: @colortheme_app-font-size;
+            padding: 0 5px;
+            border: 0;
+            background: darken(@colortheme_drive-bg, 10%);
+            color: @colortheme_drive-color;
+            box-sizing: border-box;
+            transition: all 0.15s;
+            &.cp-app-drive-path-separator {
+                color: #ccc;
+            }
+            &.cp-app-drive-path-lickable {
+                cursor: pointer;
+                &:hover {
+                    background: darken(@colortheme_drive-bg, 15%);
+                }
+            }
+        }
+    }
+}
+
+
+
diff --git a/www/drive/index.html b/www/drive/index.html
index 02f92a5b3..e3f7eacc4 100644
--- a/www/drive/index.html
+++ b/www/drive/index.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
-<html class="cp">
+<html>
 <head>
-    <title>CryptDrive</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style>
         html, body {
             margin: 0px;
             padding: 0px;
         }
-        #pad-iframe {
+        #sbox-iframe {
             position:fixed;
-            top:0;
+            top:0px;
             left:0px;
             bottom:0px;
             right:0px;
@@ -23,7 +24,15 @@
             padding:0;
             overflow:hidden;
         }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
     </style>
 </head>
 <body>
-    <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
+<iframe id="sbox-iframe">
diff --git a/www/drive/inner.html b/www/drive/inner.html
index 0b26aa7a1..7ec8fc651 100644
--- a/www/drive/inner.html
+++ b/www/drive/inner.html
@@ -1,57 +1,60 @@
 <!DOCTYPE html>
-<html>
+<html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
-    <script async data-bootload="/drive/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/drive/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+    </style>
 </head>
-<body style="display: none;">
-    <div id="toolbar" class="toolbar-container"></div>
-    <div class="app-container" tabindex="0">
-        <div id="tree">
+<body class="cp-app-drive">
+  <div id="cp-toolbar" class="cp-toolbar-container"></div>
+    <div class="cp-app-drive-container" tabindex="0">
+        <div id="cp-app-drive-tree">
         </div>
-        <div id="rightCol">
-            <div id="driveToolbar"></div>
-            <div id="content" tabindex="2"></div>
+        <div id="cp-app-drive-content-container">
+            <div id="cp-app-drive-toolbar"></div>
+            <div id="cp-app-drive-content" tabindex="2"></div>
         </div>
-        <div id="treeContextMenu" class="contextMenu dropdown clearfix unselectable">
+        <div id="cp-app-drive-context-tree" class="cp-app-drive-context dropdown cp-unselectable">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
-                <li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
-                <li><a tabindex="-1" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
-                <li><a tabindex="-1" data-icon="fa-trash" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
-                <li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
-                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+                <li><a tabindex="-1" data-icon="fa-folder-open" class="cp-app-drive-context-open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" data-icon="fa-eye" class="cp-app-drive-context-openro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" data-icon="fa-pencil" class="cp-app-drive-context-rename cp-app-drive-context-editable dropdown-item" data-localization="fc_rename">Rename</a></li>
+                <li><a tabindex="-1" data-icon="fa-trash" class="cp-app-drive-context-delete cp-app-drive-context-editable dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" data-icon="fa-folder" class="cp-app-drive-context-newfolder cp-app-drive-context-editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
             </ul>
         </div>
-        <div id="contentContextMenu" class="contextMenu dropdown clearfix unselectable">
+        <div id="cp-app-drive-context-content" class="cp-app-drive-context dropdown cp-unselectable">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
-                <li><a tabindex="-1" data-icon="fa-file-word-o" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
-                <li><a tabindex="-1" data-icon="fa-file-code-o" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
-                <li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
-                <li><a tabindex="-1" data-icon="fa-calendar" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
-                <li><a tabindex="-1" data-icon="fa-paint-brush" class="newdoc own editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li>
+                <li><a tabindex="-1" data-icon="fa-folder" class="cp-app-drive-context-newfolder cp-app-drive-context-editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-word-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-code-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
+                <li><a tabindex="-1" data-icon="fa-calendar" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
+                <li><a tabindex="-1" data-icon="fa-paint-brush" class="cp-app-drive-context-newdoc cp-app-drive-context-own cp-app-drive-context-editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li>
             </ul>
         </div>
-        <div id="defaultContextMenu" class="contextMenu dropdown clearfix unselectable">
+        <div id="cp-app-drive-context-default" class="cp-app-drive-context dropdown cp-unselectable">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
-                <li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
-                <li><a tabindex="-1" data-icon="fa-trash" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
-                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+                <li><a tabindex="-1" data-icon="fa-folder-open" class="cp-app-drive-context-open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" data-icon="fa-eye" class="cp-app-drive-context-openro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" data-icon="fa-trash" class="cp-app-drive-context-delete dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
             </ul>
         </div>
-        <div id="trashTreeContextMenu" class="contextMenu dropdown clearfix unselectable">
+        <div id="cp-app-drive-context-trashtree" class="cp-app-drive-context dropdown cp-unselectable">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" data-icon="fa-trash-o" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
+                <li><a tabindex="-1" data-icon="fa-trash-o" class="cp-app-drive-context-empty cp-app-drive-context-editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
             </ul>
         </div>
-        <div id="trashContextMenu" class="contextMenu dropdown clearfix unselectable">
+        <div id="cp-app-drive-context-trash" class="cp-app-drive-context dropdown cp-unselectable">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" data-icon="fa-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
-                <li><a tabindex="-1" data-icon="fa-repeat" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
-                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+                <li><a tabindex="-1" data-icon="fa-eraser" class="cp-app-drive-context-remove cp-app-drive-context-editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
+                <li><a tabindex="-1" data-icon="fa-repeat" class="cp-app-drive-context-restore cp-app-drive-context-editable dropdown-item" data-localization="fc_restore">Restore</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="cp-app-drive-context-properties dropdown-item" data-localization="fc_prop">Properties</a></li>
             </ul>
         </div>
     </div>
diff --git a/www/drive/inner.js b/www/drive/inner.js
index e1779778b..f8ed897ed 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -1,7 +1,3026 @@
 define([
-    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/common/cryptpad-common.js',
+    '/common/common-util.js',
+    '/common/cryptget.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-realtime.js',
+    '/common/userObject.js',
+    '/customize/application_config.js',
+    '/common/mergeDrive.js',
+    '/common/sframe-chainpad-listmap.js',
+
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'less!/drive/file.less',
-    'less!/customize/src/less/cryptpad.less',
-    'less!/customize/src/less/toolbar.less',
-], function () {});
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+], function (
+    $,
+    Crypto,
+    TextPatcher,
+    Toolbar,
+    JSONSortify,
+    Cryptpad,
+    Util,
+    Cryptget,
+    nThen,
+    SFCommon,
+    CommonRealtime,
+    FO,
+    AppConfig,
+    Merge,
+    Listmap)
+{
+    var Messages = Cryptpad.Messages;
+
+    var APP = window.APP = {
+        editable: false,
+        Cryptpad: Cryptpad,
+        mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles
+    };
+
+    var stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+
+    var E_OVER_LIMIT = 'E_OVER_LIMIT';
+
+    var SEARCH = "search";
+    var SEARCH_NAME = Messages.fm_searchName;
+    var ROOT = "root";
+    var ROOT_NAME = Messages.fm_rootName;
+    var FILES_DATA = Cryptpad.storageKey;
+    var FILES_DATA_NAME = Messages.fm_filesDataName;
+    var TEMPLATE = "template";
+    var TEMPLATE_NAME = Messages.fm_templateName;
+    var TRASH = "trash";
+    var TRASH_NAME = Messages.fm_trashName;
+    var RECENT = "recent";
+    var RECENT_NAME = Messages.fm_recentPadsName;
+
+    var LS_LAST = "app-drive-lastOpened";
+    var LS_OPENED = "app-drive-openedFolders";
+    var LS_VIEWMODE = "app-drive-viewMode";
+    var LS_SEARCHCURSOR = "app-drive-searchCursor";
+    var FOLDER_CONTENT_ID = "cp-app-drive-content-folder";
+
+    var config = {};
+    var DEBUG = config.DEBUG = true;
+    var debug = config.debug = DEBUG ? function () {
+        console.log.apply(console, arguments);
+    } : function () { return; };
+    var logError = config.logError = function () {
+        console.error.apply(console, arguments);
+    };
+    var log = config.log = Cryptpad.log;
+
+    var localStore = window.cryptpadStore;
+    APP.store = {};
+    var getLastOpenedFolder = function () {
+        var path;
+        try {
+            path = APP.store[LS_LAST] ? JSON.parse(APP.store[LS_LAST]) : [ROOT];
+        } catch (e) {
+            path = [ROOT];
+        }
+        return path;
+    };
+    var setLastOpenedFolder = function (path) {
+        if (path[0] === SEARCH) { return; }
+        APP.store[LS_LAST] = JSON.stringify(path);
+        localStore.put(LS_LAST, JSON.stringify(path));
+    };
+
+    var wasFolderOpened = function (path) {
+        var stored = JSON.parse(APP.store[LS_OPENED] || '[]');
+        return stored.indexOf(JSON.stringify(path)) !== -1;
+    };
+    var setFolderOpened = function (path, opened) {
+        var s = JSON.stringify(path);
+        var stored = JSON.parse(APP.store[LS_OPENED] || '[]');
+        if (opened && stored.indexOf(s) === -1) {
+            stored.push(s);
+        }
+        if (!opened) {
+            var idx = stored.indexOf(s);
+            if (idx !== -1) {
+                stored.splice(idx, 1);
+            }
+        }
+        APP.store[LS_OPENED] = JSON.stringify(stored);
+        localStore.put(LS_OPENED, JSON.stringify(stored));
+    };
+
+    var getViewModeClass = function () {
+        var mode = APP.store[LS_VIEWMODE];
+        if (mode === 'list') { return 'cp-app-drive-content-list'; }
+        return 'cp-app-drive-content-grid';
+    };
+    var getViewMode = function () {
+        return APP.store[LS_VIEWMODE] || 'grid';
+    };
+    var setViewMode = function (mode) {
+        if (typeof(mode) !== "string") {
+            logError("Incorrect view mode: ", mode);
+            return;
+        }
+        APP.store[LS_VIEWMODE] = mode;
+        localStore.put(LS_VIEWMODE, mode);
+    };
+
+    var setSearchCursor = function () {
+        var $input = $('#cp-app-drive-tree-search-input');
+        APP.store[LS_SEARCHCURSOR] = $input[0].selectionStart;
+        localStore.put(LS_SEARCHCURSOR, $input[0].selectionStart);
+    };
+    var getSearchCursor = function () {
+        return APP.store[LS_SEARCHCURSOR] || 0;
+    };
+
+    var setEditable = function (state) {
+        APP.editable = state;
+        if (!state) {
+            APP.$content.addClass('cp-app-drive-readonly');
+            $('[draggable="true"]').attr('draggable', false);
+        }
+        else {
+            APP.$content.removeClass('cp-app-drive-readonly');
+            $('[draggable="false"]').attr('draggable', true);
+        }
+    };
+
+    // Icons
+    var $folderIcon = $('<span>', {
+        "class": "fa fa-folder cp-app-drive-icon-folder cp-app-drive-content-icon"
+    });
+    //var $folderIcon = $('<img>', {src: "/customize/images/icons/folder.svg", "class": "folder icon"});
+    var $folderEmptyIcon = $folderIcon.clone();
+    var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open cp-app-drive-icon-folder"});
+    //var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
+    var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
+    //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
+    var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
+    var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
+    var $recentIcon = $('<span>', {"class": "fa fa-clock-o"});
+    var $trashIcon = $('<span>', {"class": "fa fa-trash"});
+    var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
+    //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o cp-app-drive-icon-expcol"});
+    var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o cp-app-drive-icon-expcol"});
+    var $emptyTrashIcon = $('<button>', {"class": "fa fa-ban"});
+    var $listIcon = $('<button>', {"class": "fa fa-list"});
+    var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
+    var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
+    var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
+    var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
+    //var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
+    var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-con"});
+    var $addIcon = $('<span>', {"class": "fa fa-plus"});
+    var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
+    var $readonlyIcon = $('<span>', {"class": "fa fa-eye"});
+
+    var history = {
+        isHistoryMode: false,
+    };
+
+    var andThen = function (common, proxy) {
+        var files = proxy.drive;
+        var metadataMgr = common.getMetadataMgr();
+        var priv = metadataMgr.getPrivateData();
+        var user = metadataMgr.getUserData();
+        var isOwnDrive = function () {
+            return true; // TODO
+            //return Cryptpad.getUserHash() === APP.hash || localStorage.FS_hash === APP.hash;
+        };
+        var isWorkgroup = function () {
+            return files.workgroup === 1;
+        };
+        config.workgroup = isWorkgroup();
+        config.Cryptpad = Cryptpad;
+        config.loggedIn = APP.loggedIn;
+
+        APP.origin = priv.origin;
+
+        var filesOp = FO.init(files, config);
+        filesOp.fixFiles();
+
+        var error = filesOp.error;
+
+        var $tree = APP.$tree = $("#cp-app-drive-tree");
+        var $content = APP.$content = $("#cp-app-drive-content");
+        var $appContainer = $(".cp-app-drive-container");
+        var $driveToolbar = $("#cp-app-drive-toolbar");
+        var $contextMenu = $("#cp-app-drive-context-tree");
+        var $contentContextMenu = $("#cp-app-drive-context-content");
+        var $defaultContextMenu = $("#cp-app-drive-context-default");
+        var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree");
+        var $trashContextMenu = $("#cp-app-drive-context-trash");
+
+        $tree.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        $driveToolbar.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+
+
+        // TOOLBAR
+
+        /* add a "change username" button */
+        if (!APP.readOnly) {
+            APP.$displayName.text(user.name || Messages.anonymous);
+        } else {
+            APP.$displayName.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
+        }
+
+        // FILE MANAGER
+        // _WORKGROUP_ and other people drive : display Documents as main page
+        var currentPath = APP.currentPath = isOwnDrive() ? getLastOpenedFolder() : [ROOT];
+
+        // Categories dislayed in the menu
+        // _WORKGROUP_ : do not display unsorted
+        var displayedCategories = [ROOT, TRASH, SEARCH, RECENT];
+        if (AppConfig.enableTemplates) { displayedCategories.push(TEMPLATE); }
+        if (isWorkgroup()) { displayedCategories = [ROOT, TRASH, SEARCH]; }
+        var virtualCategories = [SEARCH, RECENT];
+
+        if (!APP.loggedIn) {
+            displayedCategories = [FILES_DATA];
+            currentPath = [FILES_DATA];
+            $tree.hide();
+            if (Object.keys(files.root).length && !proxy.anonymousAlert) {
+                Cryptpad.alert(Messages.fm_alert_anonymous, null, true);
+                proxy.anonymousAlert = true;
+            }
+        }
+
+        if (!APP.readOnly) {
+            setEditable(true);
+        }
+        var appStatus = {
+            isReady: true,
+            _onReady: [],
+            onReady: function (handler) {
+                if (appStatus.isReady) {
+                    handler();
+                    return;
+                }
+                appStatus._onReady.push(handler);
+            },
+            ready: function (state) {
+                appStatus.isReady = state;
+                if (state) {
+                    appStatus._onReady.forEach(function (h) {
+                        h();
+                    });
+                    appStatus._onReady = [];
+                }
+            }
+        };
+
+        var findDataHolder = function ($el) {
+            return $el.is('.cp-app-drive-element-row') ? $el : $el.closest('.cp-app-drive-element-row');
+        };
+
+
+        // Selection
+        var sel = {};
+
+        var removeSelected =  function (keepObj) {
+            $('.cp-app-drive-element-selected').removeClass("cp-app-drive-element-selected");
+            var $container = $driveToolbar.find('#cp-app-drive-toolbar-contextbuttons');
+            if (!$container.length) { return; }
+            $container.html('');
+            if (!keepObj) {
+                delete sel.startSelected;
+                delete sel.endSelected;
+                delete sel.oldSelection;
+            }
+        };
+
+        sel.refresh = 200;
+        sel.$selectBox = $('<div>', {'class': 'cp-app-drive-content-select-box'}).appendTo($content);
+        var checkSelected = function () {
+            if (!sel.down) { return; }
+            var pos = sel.pos;
+            var l = $content[0].querySelectorAll('.cp-app-drive-element:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-header)');
+            var p, el;
+            var offset = getViewMode() === "grid" ? 10 : 0;
+            for (var i = 0; i < l.length; i++) {
+                el = l[i];
+                p = $(el).position();
+                p.top += offset + $content.scrollTop();
+                p.left += offset;
+                p.bottom = p.top + $(el).outerHeight();
+                p.right = p.left + $(el).outerWidth();
+                if (p.right < pos.left || p.left > pos.right
+                    || p.top > pos.bottom || p.bottom < pos.top) {
+                    $(el).removeClass('cp-app-drive-element-selected-tmp');
+                } else {
+                    $(el).addClass('cp-app-drive-element-selected-tmp');
+                }
+            }
+        };
+        $content.on('mousedown', function (e) {
+            if (currentPath[0] === SEARCH) { return; }
+            if (e.which !== 1) { return; }
+            $content.focus();
+            sel.down = true;
+            if (!e.ctrlKey) { removeSelected(); }
+            var rect = e.currentTarget.getBoundingClientRect();
+            sel.startX = e.clientX - rect.left;
+            sel.startY = e.clientY - rect.top + $content.scrollTop();
+            sel.$selectBox.show().css({
+                left: sel.startX + 'px',
+                top: sel.startY + 'px',
+                width: '0px',
+                height: '0px'
+            });
+            APP.hideMenu(e);
+            if (sel.move) { return; }
+            sel.move = function (ev) {
+                var rectMove = ev.currentTarget.getBoundingClientRect(),
+                    offX = ev.clientX - rectMove.left,
+                    offY = ev.clientY - rectMove.top + $content.scrollTop();
+
+
+                var left = sel.startX,
+                    top = sel.startY;
+                var width = offX - sel.startX;
+                if (width < 0) {
+                    left = Math.max(0, offX);
+                    var diffX = left-offX;
+                    width = Math.abs(width) - diffX;
+                }
+                var height = offY - sel.startY;
+                if (height < 0) {
+                    top = Math.max(0, offY);
+                    var diffY = top-offY;
+                    height = Math.abs(height) - diffY;
+                }
+                sel.$selectBox.css({
+                    width: width + 'px',
+                    left: left + 'px',
+                    height: height + 'px',
+                    top: top + 'px'
+                });
+
+
+                sel.pos = {
+                    top: top,
+                    left: left,
+                    bottom: top + height,
+                    right: left + width
+                };
+                var diffT = sel.update ? +new Date() - sel.update : sel.refresh;
+                if (diffT < sel.refresh) {
+                    if (!sel.to) {
+                        sel.to = window.setTimeout(function () {
+                            sel.update = +new Date();
+                            checkSelected();
+                            sel.to = undefined;
+                        }, (sel.refresh - diffT));
+                    }
+                    return;
+                }
+                sel.update = +new Date();
+                checkSelected();
+            };
+            $content.mousemove(sel.move);
+        });
+        $(window).on('mouseup', function (e) {
+            if (!sel.down) { return; }
+            if (e.which !== 1) { return; }
+            sel.down = false;
+            sel.$selectBox.hide();
+            $content.off('mousemove', sel.move);
+            delete sel.move;
+            $content.find('.cp-app-drive-element-selected-tmp')
+                .removeClass('cp-app-drive-element-selected-tmp')
+                .addClass('cp-app-drive-element-selected');
+            e.stopPropagation();
+        });
+
+        // Arrow keys to modify the selection
+        $(window).keydown(function (e) {
+            var $searchBar = $tree.find('#cp-app-drive-tree-search-input');
+            if ($searchBar.is(':focus') && $searchBar.val()) { return; }
+
+            var $elements = $content.find('.cp-app-drive-element:not(.cp-app-drive-element-header)');
+
+            var ev = {};
+            if (e.ctrlKey) { ev.ctrlKey = true; }
+            if (e.shiftKey) { ev.shiftKey = true; }
+            var click = function (el) {
+                if (!el) { return; }
+                APP.onElementClick(ev, $(el));
+            };
+
+            // Enter
+            if (e.which === 13) {
+                var $allSelected = $content.find('.cp-app-drive-element.cp-app-drive-element-selected');
+                if ($allSelected.length === 1) {
+                    // Open the folder or the file
+                    $allSelected.dblclick();
+                    return;
+                }
+                // If more than one, open only the files
+                var $select = $content.find('.cp-app-drive-element-file.cp-app-drive-element-selected');
+                $select.each(function (idx, el) {
+                    $(el).dblclick();
+                });
+                return;
+            }
+
+            // [Left, Up, Right, Down]
+            if ([37, 38, 39, 40].indexOf(e.which) === -1) { return; }
+            e.preventDefault();
+
+            var $selection = $content.find('.cp-app-drive-element.cp-app-drive-element-selected');
+            if ($selection.length === 0) { return void click($elements.first()[0]); }
+
+            var lastIndex = typeof sel.endSelected === "number" ? sel.endSelected :
+                            typeof sel.startSelected === "number" ? sel.startSelected :
+                            $elements.index($selection.last()[0]);
+            var length = $elements.length;
+            if (length === 0) { return; }
+            // List mode
+            if (getViewMode() === "list") {
+                if (e.which === 40) { click($elements.get(Math.min(lastIndex+1, length -1))); }
+                if (e.which === 38) { click($elements.get(Math.max(lastIndex-1, 0))); }
+                return;
+            }
+
+            // Icon mode
+            // Get the vertical and horizontal position of lastIndex
+            // Filter all the elements to get those in the same line/column
+            var pos = $($elements.get(0)).position();
+            var $line = $elements.filter(function (idx, el) {
+                return $(el).position().top === pos.top;
+            });
+            var cols = $line.length;
+            var lines = Math.ceil(length/cols);
+
+            var lastPos = {
+                l : Math.floor(lastIndex/cols),
+                c : lastIndex - Math.floor(lastIndex/cols)*cols
+            };
+
+            if (e.which === 37) {
+                if (lastPos.c === 0) { return; }
+                click($elements.get(Math.max(lastIndex-1, 0)));
+                return;
+            }
+            if (e.which === 38) {
+                if (lastPos.l === 0) { return; }
+                click($elements.get(Math.max(lastIndex-cols, 0)));
+                return;
+            }
+            if (e.which === 39) {
+                if (lastPos.c === cols-1) { return; }
+                click($elements.get(Math.min(lastIndex+1, length-1)));
+                return;
+            }
+            if (e.which === 40) {
+                if (lastPos.l === lines-1) { return; }
+                click($elements.get(Math.min(lastIndex+cols, length-1)));
+                return;
+            }
+
+        });
+
+
+        var removeInput =  function (cancel) {
+            if (!cancel && $('.cp-app-drive-element-row > input').length === 1) {
+                var $input = $('.cp-app-drive-element-row > input');
+                filesOp.rename($input.data('path'), $input.val(), APP.refresh);
+            }
+            $('.cp-app-drive-element-row > input').remove();
+            $('.cp-app-drive-element-row > span:hidden').removeAttr('style');
+        };
+
+        var compareDays = function (date1, date2) {
+            var day1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate());
+            var day2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate());
+            var ms = Math.abs(day1-day2);
+            return Math.floor(ms/1000/60/60/24);
+        };
+
+        var getDate = function (sDate) {
+            if (!sDate) { return ''; }
+            var ret = sDate.toString();
+            try {
+                var date = new Date(sDate);
+                var today = new Date();
+                var diff = compareDays(date, today);
+                if (diff === 0) {
+                    ret = date.toLocaleTimeString();
+                } else {
+                    ret = date.toLocaleDateString();
+                }
+            } catch (e) {
+                error("Unable to format that string to a date with .toLocaleString", sDate, e);
+            }
+            return ret;
+        };
+
+        var openFile = function (el, href) {
+            if (!href) {
+                var data = filesOp.getFileData(el);
+                if (!data || !data.href) {
+                    return void logError("Missing data for the file", el, data);
+                }
+                href = data.href;
+            }
+            window.open(APP.origin + href);
+        };
+
+        var refresh = APP.refresh = function () {
+            APP.displayDirectory(currentPath);
+        };
+
+        var getFileNameExtension = function (name) {
+            var matched = /\.\S+$/.exec(name);
+            if (matched && matched.length) { return matched[matched.length -1]; }
+            return '';
+        };
+
+        // Replace a file/folder name by an input to change its value
+        var displayRenameInput = function ($element, path) {
+            // NOTE: setTimeout(f, 0) otherwise the "rename" button in the toolbar is not working
+            window.setTimeout(function () {
+                if (!APP.editable) { return; }
+                if (!path || path.length < 2) {
+                    logError("Renaming a top level element (root, trash or filesData) is forbidden.");
+                    return;
+                }
+                removeInput();
+                removeSelected();
+                var $name = $element.find('.cp-app-drive-element-name');
+                if (!$name.length) {
+                    $name = $element.find('> .cp-app-drive-element');
+                }
+                $name.hide();
+                var el = filesOp.find(path);
+                var name = filesOp.isFile(el) ? filesOp.getTitle(el)  : path[path.length - 1];
+                var $input = $('<input>', {
+                    placeholder: name,
+                    value: name
+                }).data('path', path);
+
+
+                // Stop propagation on keydown to avoid issues with arrow keys
+                $input.on('keydown', function (e) { e.stopPropagation(); });
+
+                $input.on('keyup', function (e) {
+                    if (e.which === 13) {
+                        removeInput(true);
+                        filesOp.rename(path, $input.val(), refresh);
+                        return;
+                    }
+                    if (e.which === 27) {
+                        removeInput(true);
+                    }
+                });
+                //$element.parent().append($input);
+                $name.after($input);
+                $input.focus();
+
+                var extension = getFileNameExtension(name);
+                var input = $input[0];
+                input.selectionStart = 0;
+                input.selectionEnd = name.length - extension.length;
+
+                // We don't want to open the file/folder when clicking on the input
+                $input.on('click dblclick', function (e) {
+                    removeSelected();
+                    e.stopPropagation();
+                });
+                // Remove the browser ability to drag text from the input to avoid
+                // triggering our drag/drop event handlers
+                $input.on('dragstart dragleave drag drop', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+                // Make the parent element non-draggable when selecting text in the field
+                // since it would remove the input
+                $input.on('mousedown', function (e) {
+                    e.stopPropagation();
+                    $input.parents('.cp-app-drive-element-row').attr("draggable", false);
+                });
+                $input.on('mouseup', function (e) {
+                    e.stopPropagation();
+                    $input.parents('.cp-app-drive-element-row').attr("draggable", true);
+                });
+            },0);
+        };
+
+        var filterContextMenu = function ($menu, paths) {
+            //var path = $element.data('path');
+            if (!paths || paths.length === 0) { logError('no paths'); }
+
+            var hide = [];
+            var hasFolder = false;
+            paths.forEach(function (p) {
+                var path = p.path;
+                var $element = p.element;
+                if (path.length === 1) {
+                    // Can't rename or delete root elements
+                    hide.push($menu.find('a.cp-app-drive-context-rename'));
+                    hide.push($menu.find('a.cp-app-drive-context-delete'));
+                }
+                if (!APP.editable) {
+                    hide.push($menu.find('a.cp-app-drive-context-editable'));
+                }
+                if (!isOwnDrive()) {
+                    hide.push($menu.find('a.cp-app-drive-context-own'));
+                }
+                if ($element.is('.cp-app-drive-element-file')) {
+                    // No folder in files
+                    hide.push($menu.find('a.cp-app-drive-context-newfolder'));
+                    if ($element.is('.cp-app-drive-readonly')) {
+                        // Keep only open readonly
+                        hide.push($menu.find('a.cp-app-drive-context-open'));
+                    } else if ($element.is('.cp-app-drive-noreadonly')) {
+                        // Keep only open readonly
+                        hide.push($menu.find('a.cp-app-drive-context-openro'));
+                    }
+                } else {
+                    if (hasFolder) {
+                        // More than 1 folder selected: cannot create a new subfolder
+                        hide.push($menu.find('a.cp-app-drive-context-newfolder'));
+                    }
+                    hasFolder = true;
+                    hide.push($menu.find('a.cp-app-drive-context-openro'));
+                    hide.push($menu.find('a.cp-app-drive-context-properties'));
+                }
+                // If we're in the trash, hide restore and properties for non-root elements
+                if ($menu.find('a.cp-app-drive-context-restore').length && path && path.length > 4) {
+                    hide.push($menu.find('a.cp-app-drive-context-restore'));
+                    hide.push($menu.find('a.cp-app-drive-context-properties'));
+                }
+            });
+            if (paths.length > 1) {
+                hide.push($menu.find('a.cp-app-drive-context-restore'));
+                hide.push($menu.find('a.cp-app-drive-context-properties'));
+                hide.push($menu.find('a.cp-app-drive-context-rename'));
+            }
+            if (hasFolder && paths.length > 1) {
+                // Cannot open multiple folders
+                hide.push($menu.find('a.cp-app-drive-context-open'));
+            }
+            return hide;
+        };
+
+        var getSelectedPaths = function ($element) {
+            var paths = [];
+            if ($('.cp-app-drive-element-selected').length > 1) {
+                var $selected = $('.cp-app-drive-element-selected');
+                $selected.each(function (idx, elmt) {
+                    var ePath = $(elmt).data('path');
+                    if (ePath) {
+                        paths.push({
+                            path: ePath,
+                            element: $(elmt)
+                        });
+                    }
+                });
+            }
+
+            if (!paths.length) {
+                var path = $element.data('path');
+                if (!path) { return false; }
+                paths.push({
+                    path: path,
+                    element: $element
+                });
+            }
+            return paths;
+        };
+
+        var updateContextButton = function () {
+            if (filesOp.isPathIn(currentPath, [TRASH])) {
+                $driveToolbar.find('cp-app-drive-toolbar-emptytrash').show();
+            } else {
+                $driveToolbar.find('cp-app-drive-toolbar-emptytrash').hide();
+            }
+            var $li = $content.find('.cp-app-drive-element-selected');
+            if ($li.length === 0) {
+                $li = findDataHolder($tree.find('.cp-app-drive-element-active'));
+            }
+            var $button = $driveToolbar.find('#cp-app-drive-toolbar-context-mobile');
+            if ($button.length) { // mobile
+                if ($li.length !== 1
+                    || !$._data($li[0], 'events').contextmenu
+                    || $._data($li[0], 'events').contextmenu.length === 0) {
+                    $button.hide();
+                    return;
+                }
+                $button.show();
+                $button.css({
+                    background: '#000'
+                });
+                window.setTimeout(function () {
+                    $button.css({
+                        background: ''
+                    });
+                }, 500);
+                return;
+            }
+            // Non mobile
+            var $container = $driveToolbar.find('#cp-app-drive-toolbar-contextbuttons');
+            if (!$container.length) { return; }
+            $container.html('');
+            var $element = $li.length === 1 ? $li : $($li[0]);
+            var paths = getSelectedPaths($element);
+            var $menu = $element.data('context');
+            if (!$menu) { return; }
+            //var actions = [];
+            var $actions = $menu.find('a');
+            var toHide = filterContextMenu($menu, paths);
+            $actions = $actions.filter(function (i, el) {
+                for (var j = 0; j < toHide.length; j++) {
+                    if ($(el).is(toHide[j])) { return false; }
+                }
+                return true;
+            });
+            $actions.each(function (i, el) {
+                var $a = $('<button>', {'class': 'cp-app-drive-element'});
+                if ($(el).attr('data-icon')) {
+                    $a.addClass('fa').addClass($(el).attr('data-icon'));
+                    $a.attr('title', $(el).text());
+                } else {
+                    $a.text($(el).text());
+                }
+                $(el).data('paths', paths);
+                //$(el).data('path', path);
+                //:$(el).data('element', $element);
+                $container.append($a);
+                $a.click(function() { $(el).click(); });
+            });
+        };
+
+        var scrollTo = function ($element) {
+            // Current scroll position
+            var st = $content.scrollTop();
+            // Block height
+            var h = $content.height();
+            // Current top position of the element relative to the scroll position
+            var pos = Math.round($element.offset().top - $content.position().top);
+            // Element height
+            var eh = $element.outerHeight();
+            // New scroll value
+            var v = st + pos + eh - h;
+            // If the element is completely visile, don't change the scroll position
+            if (pos+eh <= h && pos >= 0) { return; }
+            $content.scrollTop(v);
+        };
+        // Add the "selected" class to the "li" corresponding to the clicked element
+        var onElementClick = APP.onElementClick = function (e, $element) {
+            // If "Ctrl" is pressed, do not remove the current selection
+            removeInput();
+            $element = findDataHolder($element);
+            // If we're selecting a new element with the left click, hide the menu
+            if (e) { APP.hideMenu(); }
+            // Remove the selection if we don't hold ctrl key or if we are right-clicking
+            if (!e || !e.ctrlKey) {
+                removeSelected(e && e.shiftKey);
+            }
+            if (!$element.length) {
+                log(Messages.fm_selectError);
+                return;
+            }
+            scrollTo($element);
+            // Add the selected class to the clicked / right-clicked element
+            // Remove the class if it already has it
+            // If ctrlKey, add to the selection
+            // If shiftKey, select a range of elements
+            var $elements = $content.find('.cp-app-drive-element:not(.cp-app-drive-element-header)');
+            var $selection = $elements.filter('.cp-app-drive-element-selected');
+            if (typeof sel.startSelected !== "number" || !e || (e.ctrlKey && !e.shiftKey)) {
+                sel.startSelected = $elements.index($element[0]);
+                sel.oldSelection = [];
+                $selection.each(function (idx, el) {
+                    sel.oldSelection.push(el);
+                });
+                delete sel.endSelected;
+            }
+            if (e && e.shiftKey) {
+                var end = $elements.index($element[0]);
+                sel.endSelected = end;
+                var $el;
+                removeSelected(true);
+                sel.oldSelection.forEach(function (el) {
+                    if (!$(el).hasClass("cp-app-drive-element-selected")) {
+                        $(el).addClass("cp-app-drive-element-selected");
+                    }
+                });
+                for (var i = Math.min(sel.startSelected, sel.endSelected);
+                     i <= Math.max(sel.startSelected, sel.endSelected);
+                     i++) {
+                    $el = $($elements.get(i));
+                    if (!$el.hasClass("cp-app-drive-element-selected")) {
+                        $el.addClass("cp-app-drive-element-selected");
+                    }
+                }
+            } else {
+                if (!$element.hasClass("cp-app-drive-element-selected")) {
+                    $element.addClass("cp-app-drive-element-selected");
+                } else {
+                    $element.removeClass("cp-app-drive-element-selected");
+                }
+            }
+            updateContextButton();
+        };
+
+        var displayMenu = function (e, $menu) {
+            $menu.css({ display: "block" });
+            if (APP.mobile()) { return; }
+            var h = $menu.outerHeight();
+            var w = $menu.outerWidth();
+            var wH = window.innerHeight;
+            var wW = window.innerWidth;
+            if (h > wH) {
+                $menu.css({
+                    top: '0px',
+                    bottom: ''
+                });
+            } else if (e.pageY + h <= wH) {
+                $menu.css({
+                    top: e.pageY+'px',
+                    bottom: ''
+                });
+            } else {
+                $menu.css({
+                    bottom: '0px',
+                    top: ''
+                });
+            }
+            if(w > wW) {
+                $menu.css({
+                    left: '0px',
+                    right: ''
+                });
+            } else if (e.pageX + w <= wW) {
+                $menu.css({
+                    left: e.pageX+'px',
+                    right: ''
+                });
+            } else {
+                $menu.css({
+                    left: '',
+                    right: '0px',
+                });
+            }
+        };
+
+        // Open the selected context menu on the closest "li" element
+        var openContextMenu = function (e, $menu) {
+            APP.hideMenu();
+            e.stopPropagation();
+
+            var $element = findDataHolder($(e.target));
+            if (!$element.length) {
+                logError("Unable to locate the .element tag", e.target);
+                $menu.hide();
+                log(Messages.fm_contextMenuError);
+                return false;
+            }
+
+            if (!$element.hasClass('cp-app-drive-element-selected')) { //paths.length === 1) {
+                onElementClick(undefined, $element);
+            }
+
+            var paths = getSelectedPaths($element);
+
+            var toHide = filterContextMenu($menu, paths);
+            toHide.forEach(function ($a) {
+                $a.parent('li').hide();
+            });
+
+            displayMenu(e, $menu);
+
+            if ($menu.find('li:visible').length === 0) {
+                debug("No visible element in the context menu. Abort.");
+                $menu.hide();
+                return true;
+            }
+
+            $menu.find('a').data('paths', paths);
+            //$menu.find('a').data('path', path);
+            //$menu.find('a').data('element', $element);
+            return false;
+        };
+
+        var openDirectoryContextMenu = function (e) {
+            $contextMenu.find('li').show();
+            openContextMenu(e, $contextMenu);
+            return false;
+        };
+
+        var openDefaultContextMenu = function (e) {
+            $defaultContextMenu.find('li').show();
+            openContextMenu(e, $defaultContextMenu);
+            return false;
+        };
+
+        var openTrashTreeContextMenu = function (e) {
+            removeSelected();
+            $trashTreeContextMenu.find('li').show();
+            openContextMenu(e, $trashTreeContextMenu);
+            return false;
+        };
+
+        var openTrashContextMenu = function (e) {
+            var path = findDataHolder($(e.target)).data('path');
+            if (!path) { return; }
+            $trashContextMenu.find('li').show();
+            openContextMenu(e, $trashContextMenu);
+            return false;
+        };
+
+        var openContentContextMenu = function (e) {
+            APP.hideMenu();
+            e.stopPropagation();
+            var path = $(e.target).closest('#' + FOLDER_CONTENT_ID).data('path');
+            if (!path) { return; }
+            var $menu = $contentContextMenu;
+            removeSelected();
+
+            if (!APP.editable) {
+                $menu.find('a.cp-app-drive-context-editable').parent('li').hide();
+            }
+            if (!isOwnDrive()) {
+                $menu.find('a.cp-app-drive-context-own').parent('li').hide();
+            }
+
+            $menu.find('[data-type]').each(function (idx, el) {
+                if (AppConfig.availablePadTypes.indexOf($(el).attr('data-type')) === -1) {
+                    $(el).hide();
+                }
+            });
+
+            displayMenu(e, $menu);
+
+            if ($menu.find('li:visible').length === 0) {
+                debug("No visible element in the context menu. Abort.");
+                $menu.hide();
+                return true;
+            }
+
+            $menu.find('a').data('path', path);
+            return false;
+        };
+
+        var getElementName = function (path) {
+            var file = filesOp.find(path);
+            if (!file || !filesOp.isFile(file)) { return '???'; }
+            return filesOp.getTitle(file);
+        };
+        // filesOp.moveElements is able to move several paths to a new location, including
+        // the Trash or the "Unsorted files" folder
+        var moveElements = function (paths, newPath, force, cb) {
+            if (!APP.editable) { return; }
+            var andThenMove = function () {
+                filesOp.move(paths, newPath, cb);
+            };
+            // Cancel drag&drop from TRASH to TRASH
+            if (filesOp.isPathIn(newPath, [TRASH]) && paths.length && paths[0][0] === TRASH) {
+                return;
+            }
+            andThenMove();
+        };
+        // Drag & drop:
+        // The data transferred is a stringified JSON containing the path of the dragged element
+        var onDrag = function (ev, path) {
+            var paths = [];
+            var $element = findDataHolder($(ev.target));
+            if ($element.hasClass('cp-app-drive-element-selected')) {
+                var $selected = $('.cp-app-drive-element-selected');
+                $selected.each(function (idx, elmt) {
+                    var ePath = $(elmt).data('path');
+                    if (ePath) {
+                        var val = filesOp.find(ePath);
+                        if (!val) { return; } // Error? A ".selected" element in not in the object
+                        paths.push({
+                            path: ePath,
+                            value: {
+                                name: getElementName(ePath),
+                                el: val
+                            }
+                        });
+                    }
+                });
+            } else {
+                removeSelected();
+                $element.addClass('cp-app-drive-element-selected');
+                var val = filesOp.find(path);
+                if (!val) { return; } // The element in not in the object
+                paths = [{
+                    path: path,
+                    value: {
+                        name: getElementName(path),
+                        el: val
+                    }
+                }];
+            }
+            var data = {
+                'path': paths
+            };
+            ev.dataTransfer.setData("text", stringify(data));
+        };
+
+        var onFileDrop = APP.onFileDrop = function (file, e) {
+            APP.FM.onFileDrop(file, e);
+        };
+        var findDropPath = function (target) {
+            var $target = $(target);
+            var $el = findDataHolder($target);
+            var newPath = $el.data('path');
+            if ((!newPath || filesOp.isFile(filesOp.find(newPath)))
+                    && $target.parents('#cp-app-drive-content')) {
+                newPath = currentPath;
+            }
+            return newPath;
+        };
+        var onDrop = function (ev) {
+            ev.preventDefault();
+            $('.cp-app-drive-element-droppable').removeClass('cp-app-drive-element-droppable');
+            var data = ev.dataTransfer.getData("text");
+
+            // Don't the the normal drop handler for file upload
+            var fileDrop = ev.dataTransfer.files;
+            if (fileDrop.length) { return void onFileDrop(fileDrop, ev); }
+
+            var oldPaths = JSON.parse(data).path;
+            if (!oldPaths) { return; }
+            // Dropped elements can be moved from the same file manager or imported from another one.
+            // A moved element should be removed from its previous location
+            var movedPaths = [];
+            var importedElements = [];
+            oldPaths.forEach(function (p) {
+                var el = filesOp.find(p.path);
+                if (el && (stringify(el) === stringify(p.value.el) || !p.value || !p.value.el)) {
+                    movedPaths.push(p.path);
+                } else {
+                    importedElements.push(p.value);
+                }
+            });
+
+            var newPath = findDropPath(ev.target);
+            if (!newPath) { return; }
+            if (movedPaths && movedPaths.length) {
+                moveElements(movedPaths, newPath, null, refresh);
+            }
+            if (importedElements && importedElements.length) {
+                // TODO workgroup
+                //filesOp.importElements(importedElements, newPath, refresh);
+            }
+        };
+
+        var addDragAndDropHandlers = function ($element, path, isFolder, droppable) {
+            if (!APP.editable) { return; }
+            // "dragenter" is fired for an element and all its children
+            // "dragleave" may be fired when entering a child
+            // --> we use pointer-events: none in CSS, but we still need a counter to avoid some issues
+            // --> We store the number of enter/leave and the element entered and we remove the
+            // highlighting only when we have left everything
+            var counter = 0;
+            $element.on('dragstart', function (e) {
+                e.stopPropagation();
+                counter = 0;
+                onDrag(e.originalEvent, path);
+            });
+
+            $element.on('mousedown', function (e) {
+                e.stopPropagation();
+            });
+
+            // Add drop handlers if we are not in the trash and if the element is a folder
+            if (!droppable || !isFolder) { return; }
+
+            $element.on('dragover', function (e) {
+                e.preventDefault();
+            });
+            $element.on('drop', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                onDrop(e.originalEvent);
+            });
+            $element.on('dragenter', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                counter++;
+                $element.addClass('droppable');
+            });
+            $element.on('dragleave', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                counter--;
+                if (counter <= 0) {
+                    counter = 0;
+                    $element.removeClass('droppable');
+                }
+            });
+        };
+        addDragAndDropHandlers($content, null, true, true);
+
+        // In list mode, display metadata from the filesData object
+        // _WORKGROUP_ : Do not display title, atime and ctime columns since we don't have files data
+        var addFileData = function (element, $span) {
+            if (!filesOp.isFile(element)) { return; }
+
+            var data = filesOp.getFileData(element);
+            if (!data) { return void logError("No data for the file", element); }
+
+            var hrefData = Cryptpad.parsePadUrl(data.href);
+            var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
+            if (hrefData.hashData && hrefData.hashData.mode === 'view') {
+                var $ro = $readonlyIcon.clone().appendTo($state);
+                $ro.attr('title', Messages.readonly);
+            }
+            if (data.filename && data.filename !== data.title) {
+                var $renamed = $renamedIcon.clone().appendTo($state);
+                $renamed.attr('title', Messages._getKey('fm_renamedPad', [data.title]));
+            }
+
+            var name = filesOp.getTitle(element);
+
+            // The element with the class '.name' is underlined when the 'li' is hovered
+            var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
+            $span.html('');
+            $span.append($name);
+            $span.append($state);
+
+            var type = Messages.type[hrefData.type] || hrefData.type;
+            var $type = $('<span>', {
+                'class': 'cp-app-drive-element-type cp-app-drive-element-list'
+            }).text(type);
+            var $adate = $('<span>', {
+                'class': 'cp-app-drive-element-atime cp-app-drive-element-list'
+            }).text(getDate(data.atime));
+            var $cdate = $('<span>', {
+                'class': 'cp-app-drive-element-ctime cp-app-drive-element-list'
+            }).text(getDate(data.ctime));
+            $span.append($type);
+            if (!isWorkgroup()) {
+                $span.append($adate).append($cdate);
+            }
+        };
+
+        var addFolderData = function (element, key, $span) {
+            if (!element || !filesOp.isFolder(element)) { return; }
+            $span.html('');
+            // The element with the class '.name' is underlined when the 'li' is hovered
+            var sf = filesOp.hasSubfolder(element);
+            var files = filesOp.hasFile(element);
+            var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(key);
+            var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
+            var $subfolders = $('<span>', {
+                'class': 'cp-app-drive-element-folders cp-app-drive-element-list'
+            }).text(sf);
+            var $files = $('<span>', {
+                'class': 'cp-app-drive-element-files cp-app-drive-element-list'
+            }).text(files);
+            $span.append($name).append($state).append($subfolders).append($files);
+        };
+
+        // This is duplicated in cryptpad-common, it should be unified
+        var getFileIcon = function (id) {
+            var data = filesOp.getFileData(id);
+            return Cryptpad.getFileIcon(data);
+        };
+        var getIcon = Cryptpad.getIcon;
+
+        // Create the "li" element corresponding to the file/folder located in "path"
+        var createElement = function (path, elPath, root, isFolder) {
+            // Forbid drag&drop inside the trash
+            var isTrash = path[0] === TRASH;
+            var newPath = path.slice();
+            var key;
+            if (isTrash && Array.isArray(elPath)) {
+                key = elPath[0];
+                elPath.forEach(function (k) { newPath.push(k); });
+            } else {
+                key = elPath;
+                newPath.push(key);
+            }
+
+            var element = filesOp.find(newPath);
+            var $icon = !isFolder ? getFileIcon(element) : undefined;
+            var ro = filesOp.isReadOnlyFile(element);
+            // ro undefined means it's an old hash which doesn't support read-only
+            var roClass = typeof(ro) === 'undefined' ?' cp-app-drive-element-noreadonly' :
+                            ro ? ' cp-app-drive-element-readonly' : '';
+            var liClass = 'cp-app-drive-element-file cp-app-drive-element' + roClass;
+            if (isFolder) {
+                liClass = 'cp-app-drive-element-folder cp-app-drive-element';
+                $icon = filesOp.isFolderEmpty(root[key]) ? $folderEmptyIcon.clone() : $folderIcon.clone();
+            }
+            var $element = $('<li>', {
+                draggable: true,
+                'class': 'cp-app-drive-element-row'
+            });
+            if (!isFolder && Array.isArray(APP.selectedFiles)) {
+                var idx = APP.selectedFiles.indexOf(element);
+                if (idx !== -1) {
+                    $element.addClass('cp-app-drive-element-selected');
+                    APP.selectedFiles.splice(idx, 1);
+                }
+            }
+            if (isFolder) {
+                addFolderData(element, key, $element);
+            } else {
+                addFileData(element, $element);
+            }
+            $element.prepend($icon).dblclick(function () {
+                if (isFolder) {
+                    APP.displayDirectory(newPath);
+                    return;
+                }
+                if (isTrash) { return; }
+                openFile(root[key]);
+            });
+            $element.addClass(liClass);
+            $element.data('path', newPath);
+            addDragAndDropHandlers($element, newPath, isFolder, !isTrash);
+            $element.click(function(e) {
+                e.stopPropagation();
+                onElementClick(e, $element, newPath);
+            });
+            if (!isTrash) {
+                $element.contextmenu(openDirectoryContextMenu);
+                $element.data('context', $contextMenu);
+            } else {
+                $element.contextmenu(openTrashContextMenu);
+                $element.data('context', $trashContextMenu);
+            }
+            var isNewFolder = APP.newFolder && filesOp.comparePath(newPath, module.newFolder);
+            if (isNewFolder) {
+                appStatus.onReady(function () {
+                    window.setTimeout(function () { displayRenameInput($element, newPath); }, 0);
+                });
+                delete APP.newFolder;
+            }
+            return $element;
+        };
+
+        // Display the full path in the title when displaying a directory from the trash
+        /*
+        var getTrashTitle = function (path) {
+            if (!path[0] || path[0] !== TRASH) { return; }
+            var title = TRASH_NAME;
+            for (var i=1; i<path.length; i++) {
+                if (i === 3 && path[i] === 'element') {}
+                else if (i === 2 && parseInt(path[i]) === path[i]) {
+                    if (path[i] !== 0) {
+                        title += " [" + path[i] + "]";
+                    }
+                } else {
+                    title += " / " + path[i];
+                }
+            }
+            return title;
+        }; */
+
+        var getPrettyName = function (name) {
+            var pName;
+            switch (name) {
+                case ROOT: pName = ROOT_NAME; break;
+                case TRASH: pName = TRASH_NAME; break;
+                case TEMPLATE: pName = TEMPLATE_NAME; break;
+                case FILES_DATA: pName = FILES_DATA_NAME; break;
+                case SEARCH: pName = SEARCH_NAME; break;
+                case RECENT: pName = RECENT_NAME; break;
+                default: pName = name;
+            }
+            return pName;
+        };
+
+        // Create the title block with the "parent folder" button
+        var createTitle = function ($container, path, noStyle) {
+            if (!path || path.length === 0) { return; }
+            var isTrash = filesOp.isPathIn(path, [TRASH]);
+            if (APP.mobile() && !noStyle) { // noStyle means title in search result
+                return $container;
+            }
+            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
+            var el = isVirtual ? undefined : filesOp.find(path);
+            path = path[0] === SEARCH ? path.slice(0,1) : path;
+            path.forEach(function (p, idx) {
+                if (isTrash && [2,3].indexOf(idx) !== -1) { return; }
+
+                var name = p;
+
+                var $span = $('<span>', {'class': 'cp-app-drive-path-element'});
+                if (idx < path.length - 1) {
+                    if (!noStyle) {
+                        $span.addClass('cp-app-drive-path-clickable');
+                        $span.click(function () {
+                            var sliceEnd = idx + 1;
+                            if (isTrash && idx === 1) { sliceEnd = 4; } // Make sure we don't show the index or 'element' and 'path'
+                            APP.displayDirectory(path.slice(0, sliceEnd));
+                        });
+                    }
+                } else if (idx > 0 && filesOp.isFile(el)) {
+                    name = getElementName(path);
+                }
+
+                if (idx === 0) { name = getPrettyName(p); }
+                else {
+                    var $span2 = $('<span>', {
+                        'class': 'cp-app-drive-path-element cp-app-drive-path-separator'
+                    }).text(' / ');
+                    $container.prepend($span2);
+                }
+
+                $span.text(name).prependTo($container);
+            });
+        };
+
+        var createInfoBox = function (path) {
+            var $box = $('<div>', {'class': 'cp-app-drive-content-info-box'});
+            var msg;
+            switch (path[0]) {
+                case ROOT:
+                    msg = Messages.fm_info_root;
+                    break;
+                case TEMPLATE:
+                    msg = Messages.fm_info_template;
+                    break;
+                case TRASH:
+                    msg = Messages.fm_info_trash;
+                    break;
+                case FILES_DATA:
+                    msg = Messages.fm_info_allFiles;
+                    break;
+                case RECENT:
+                    msg = Messages.fm_info_recent;
+                    break;
+                default:
+                    msg = undefined;
+            }
+            if (!APP.loggedIn) {
+                msg = Messages.fm_info_anonymous;
+                $box.html(msg);
+                return $box;
+            }
+            if (!msg || APP.store['hide-info-' + path[0]] === '1') {
+                $box.hide();
+            } else {
+                $box.text(msg);
+                var $close = $closeIcon.clone().css({
+                    'cursor': 'pointer',
+                    'margin-left': '10px',
+                    title: Messages.fm_closeInfoBox
+                }).on('click', function () {
+                    $box.hide();
+                    APP.store['hide-info-' + path[0]] = '1';
+                    localStore.put('hide-info-' + path[0], '1');
+                });
+                $box.prepend($close);
+            }
+            return $box;
+        };
+
+        // Create the button allowing the user to switch from list to icons modes
+        var createViewModeButton = function ($container) {
+            var $listButton = $listIcon.clone();
+            var $gridButton = $gridIcon.clone();
+
+            $listButton.click(function () {
+                $gridButton.removeClass('cp-app-drive-toolbar-active');
+                $listButton.addClass('cp-app-drive-toolbar-active');
+                setViewMode('list');
+                $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-grid');
+                $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-list');
+                common.feedback('DRIVE_LIST_MODE');
+            });
+            $gridButton.click(function () {
+                $listButton.removeClass('cp-app-drive-toolbar-active');
+                $gridButton.addClass('cp-app-drive-toolbar-active');
+                setViewMode('grid');
+                $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-grid');
+                $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-list');
+                common.feedback('DRIVE_GRID_MODE');
+            });
+
+            if (getViewMode() === 'list') {
+                $listButton.addClass('cp-app-drive-toolbar-active');
+            } else {
+                $gridButton.addClass('cp-app-drive-toolbar-active');
+            }
+            $listButton.attr('title', Messages.fm_viewListButton);
+            $gridButton.attr('title', Messages.fm_viewGridButton);
+            $container.append($listButton).append($gridButton);
+        };
+        var createEmptyTrashButton = function ($container) {
+            var $button = $emptyTrashIcon.clone();
+            $button.addClass('cp-app-drive-toolbar-emptytrash');
+            $button.attr('title', Messages.fc_empty);
+            $button.click(function () {
+                Cryptpad.confirm(Messages.fm_emptyTrashDialog, function(res) {
+                    if (!res) { return; }
+                    filesOp.emptyTrash(refresh);
+                });
+            });
+            $container.append($button);
+        };
+
+        var getNewPadTypes = function () {
+            var arr = [];
+            AppConfig.availablePadTypes.forEach(function (type) {
+                if (type === 'drive') { return; }
+                if (type === 'contacts') { return; }
+                if (type === 'todo') { return; }
+                if (type === 'file') { return; }
+                if (!Cryptpad.isLoggedIn() && AppConfig.registeredOnlyTypes &&
+                    AppConfig.registeredOnlyTypes.indexOf(type) !== -1) {
+                    return;
+                }
+                arr.push(type);
+            });
+            return arr;
+        };
+        var addNewPadHandlers = function ($block, isInRoot) {
+            // Handlers
+            if (isInRoot) {
+                var onCreated = function (err, info) {
+                    if (err) {
+                        if (err === E_OVER_LIMIT) {
+                            return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                        }
+                        return void Cryptpad.alert(Messages.fm_error_cantPin);
+                    }
+                    APP.newFolder = info.newPath;
+                    refresh();
+                };
+                $block.find('a.cp-app-drive-toolbar-new-folder, li.cp-app-drive-toolbar-new-folder')
+                    .click(function () {
+                    filesOp.addFolder(currentPath, null, onCreated);
+                });
+                $block.find('a.cp-app-drive-toolbar-new-upload, li.cp-app-drive-toolbar-new-upload')
+                    .click(function () {
+                    var $input = $('<input>', {
+                        'type': 'file',
+                        'style': 'display: none;'
+                    }).on('change', function (e) {
+                        var file = e.target.files[0];
+                        var ev = {
+                            target: $content[0]
+                        };
+                        APP.FM.handleFile(file, ev);
+                    });
+                    $input.click();
+                });
+            }
+            $block.find('a.cp-app-drive-toolbar-new-doc, li.cp-app-drive-toolbar-new-doc')
+                .click(function () {
+                var type = $(this).attr('data-type') || 'pad';
+                var path = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
+                common.sessionStorage.put(Cryptpad.newPadPathKey, path, function () {
+                    common.openURL('/' + type + '/');
+                });
+            });
+        };
+        var createNewButton = function (isInRoot, $container) {
+            if (!APP.editable) { return; }
+            if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
+
+            if (!filesOp.isPathIn(currentPath, [ROOT, 'hrefArray'])) { return; }
+
+            // Create dropdown
+            var options = [];
+            if (isInRoot) {
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-toolbar-new-older'},
+                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
+                });
+                options.push({tag: 'hr'});
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-toolbar-new-upload'},
+                    content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
+                });
+                options.push({tag: 'hr'});
+            }
+            getNewPadTypes().forEach(function (type) {
+                var attributes = {
+                    'class': 'cp-app-drive-toolbar-new-doc',
+                    'data-type': type,
+                    'href': '#'
+                };
+                options.push({
+                    tag: 'a',
+                    attributes: attributes,
+                    content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
+                });
+            });
+            var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
+
+
+            var dropdownConfig = {
+                text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
+                options: options,
+                feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
+            };
+            var $block = Cryptpad.createDropdown(dropdownConfig);
+
+            // Custom style:
+            $block.find('button').addClass('cp-app-drive-toolbar-new');
+            $block.find('button').attr('title', Messages.fm_newButtonTitle);
+
+            addNewPadHandlers($block, isInRoot);
+
+            $container.append($block);
+        };
+
+        var hideNewButton = function () {
+            $('.cp-dropdown-content').hide();
+        };
+
+        var SORT_FOLDER_DESC = 'sortFoldersDesc';
+        var SORT_FILE_BY = 'sortFilesBy';
+        var SORT_FILE_DESC = 'sortFilesDesc';
+
+        var getSortFileDesc = function () {
+            return APP.store[SORT_FILE_DESC]+"" === "true";
+        };
+        var getSortFolderDesc = function () {
+            return APP.store[SORT_FOLDER_DESC]+"" === "true";
+        };
+
+        var onSortByClick = function () {
+            var $span = $(this);
+            var value;
+            if ($span.hasClass('cp-app-drive-sort-foldername')) {
+                value = getSortFolderDesc();
+                APP.store[SORT_FOLDER_DESC] = value ? false : true;
+                localStore.put(SORT_FOLDER_DESC, value ? false : true);
+                refresh();
+                return;
+            }
+            value = APP.store[SORT_FILE_BY];
+            var descValue = getSortFileDesc();
+            if ($span.hasClass('cp-app-drive-sort-filename')) {
+                if (value === '') {
+                    descValue = descValue ? false : true;
+                } else {
+                    descValue = false;
+                    value = '';
+                }
+            } else {
+                ['cp-app-drive-element-title', 'cp-app-drive-element-type',
+                 'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) {
+                    if ($span.hasClass(c)) {
+                        if (value === c) { descValue = descValue ? false : true; }
+                        else {
+                            // atime and ctime should be ordered in a desc order at the first click
+                            value = c.replace(/cp-app-drive-element-/, '');
+                            descValue = value !== 'title';
+                        }
+                        return true;
+                    }
+                });
+            }
+            APP.store[SORT_FILE_BY] = value;
+            APP.store[SORT_FILE_DESC] = descValue;
+            localStore.put(SORT_FILE_BY, value);
+            localStore.put(SORT_FILE_DESC, descValue);
+            refresh();
+        };
+
+        var addFolderSortIcon = function ($list) {
+            var $icon = $sortAscIcon.clone();
+            if (getSortFolderDesc()) {
+                $icon = $sortDescIcon.clone();
+            }
+            if (typeof(APP.store[SORT_FOLDER_DESC]) !== "undefined") {
+                $list.find('.cp-app-drive-sort-foldername').addClass('cp-app-drive-sort-active').prepend($icon);
+            }
+        };
+        var getFolderListHeader = function () {
+            var $fohElement = $('<li>', {
+                'class': 'cp-app-drive-element-header cp-app-drive-element-list'
+            });
+            //var $fohElement = $('<span>', {'class': 'element'}).appendTo($folderHeader);
+            var $fhIcon = $('<span>', {'class': 'cp-app-drive-content-icon'});
+            var $name = $('<span>', {
+                'class': 'cp-app-drive-element-name cp-app-drive-sort-foldername ' +
+                         'cp-app-drive-sort-clickable'
+            }).text(Messages.fm_folderName).click(onSortByClick);
+            var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
+            var $subfolders = $('<span>', {
+                'class': 'cp-app-drive-element-folders cp-app-drive-element-list'
+            }).text(Messages.fm_numberOfFolders);
+            var $files = $('<span>', {
+                'class': 'cp-app-drive-element-files cp-app-drive-element-list'
+            }).text(Messages.fm_numberOfFiles);
+            $fohElement.append($fhIcon).append($name).append($state)
+                        .append($subfolders).append($files);
+            addFolderSortIcon($fohElement);
+            return $fohElement;
+        };
+        var addFileSortIcon = function ($list) {
+            var $icon = $sortAscIcon.clone();
+            if (getSortFileDesc()) {
+                $icon = $sortDescIcon.clone();
+            }
+            var classSorted;
+            if (APP.store[SORT_FILE_BY] === '') { classSorted = 'cp-app-drive-sort-filename'; }
+            else if (APP.store[SORT_FILE_BY]) { classSorted = APP.store[SORT_FILE_BY]; }
+            if (classSorted) {
+                $list.find('.' + classSorted).addClass('cp-app-drive-sort-active').prepend($icon);
+            }
+        };
+        // _WORKGROUP_ : do not display title, atime and ctime in workgroups since we don't have files data
+        var getFileListHeader = function () {
+            var $fihElement = $('<li>', {
+                'class': 'cp-app-drive-element-header cp-app-drive-element-list'
+            });
+            //var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader);
+            var $fhIcon = $('<span>', {'class': 'cp-app-drive-content-icon'});
+            var $fhName = $('<span>', {
+                'class': 'cp-app-drive-element-name cp-app-drive-sort-filename ' +
+                         'cp-app-drive-sort-clickable'
+            }).text(Messages.fm_fileName).click(onSortByClick);
+            var $fhState = $('<span>', {'class': 'cp-app-drive-element-state'});
+            var $fhType = $('<span>', {
+                'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable'
+            }).text(Messages.fm_type).click(onSortByClick);
+            var $fhAdate = $('<span>', {
+                'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable'
+            }).text(Messages.fm_lastAccess).click(onSortByClick);
+            var $fhCdate = $('<span>', {
+                'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable'
+            }).text(Messages.fm_creation).click(onSortByClick);
+            // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
+            $fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType);
+            if (!isWorkgroup()) {
+                $fihElement.append($fhAdate).append($fhCdate);
+            }
+            addFileSortIcon($fihElement);
+            return $fihElement;
+        };
+
+        var sortElements = function (folder, path, oldkeys, prop, asc, useId) {
+            var root = filesOp.find(path);
+            var test = folder ? filesOp.isFolder : filesOp.isFile;
+            var keys = oldkeys.filter(function (e) {
+                return useId ? test(e) : test(root[e]);
+            });
+            if (keys.length < 2) { return keys; }
+            var mult = asc ? 1 : -1;
+            var getProp = function (el, prop) {
+                if (folder) { return el.toLowerCase(); }
+                var id = useId ? el : root[el];
+                var data = filesOp.getFileData(id);
+                if (!data) { return ''; }
+                if (prop === 'type') {
+                    var hrefData = Cryptpad.parsePadUrl(data.href);
+                    return hrefData.type;
+                }
+                if (prop === 'atime' || prop === 'ctime') {
+                    return new Date(data[prop]);
+                }
+                return (filesOp.getTitle(id) || "").toLowerCase();
+            };
+            keys.sort(function(a, b) {
+                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
+                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
+                return 0;
+            });
+            return keys;
+        };
+        var sortTrashElements = function (folder, oldkeys, prop, asc) {
+            var test = folder ? filesOp.isFolder : filesOp.isFile;
+            var keys = oldkeys.filter(function (e) {
+                return test(e.element);
+            });
+            if (keys.length < 2) { return keys; }
+            var mult = asc ? 1 : -1;
+            var getProp = function (el, prop) {
+                if (prop && !folder) {
+                    var element = el.element;
+                    var e = filesOp.getFileData(element);
+                    if (!e) {
+                        e = {
+                            href : el,
+                            title : Messages.fm_noname,
+                            atime : 0,
+                            ctime : 0
+                        };
+                    }
+                    if (prop === 'type') {
+                        var hrefData = Cryptpad.parsePadUrl(e.href);
+                        return hrefData.type;
+                    }
+                    if (prop === 'atime' || prop === 'ctime') {
+                        return new Date(e[prop]);
+                    }
+                }
+                return (el.name || "").toLowerCase();
+            };
+            keys.sort(function(a, b) {
+                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
+                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
+                return 0;
+            });
+            return keys;
+        };
+
+        // Create the ghost icon to add pads/folders
+        var createNewPadIcons = function ($block, isInRoot) {
+            var $container = $('<div>');
+            if (isInRoot) {
+                // Folder
+                var $element1 = $('<li>', {
+                    'class': 'cp-app-drive-new-folder cp-app-drive-element-row ' +
+                             'cp-app-drive-element-grid'
+                }).prepend($folderIcon.clone()).appendTo($container);
+                $element1.append($('<span>', { 'class': 'cp-app-drive-new-name' })
+                    .text(Messages.fm_folder));
+                // File
+                var $element2 = $('<li>', {
+                    'class': 'cp-app-drive-new-upload cp-app-drive-element-row ' +
+                             'cp-app-drive-element-grid'
+                }).prepend(getIcon('file')).appendTo($container);
+                $element2.append($('<span>', {'class': 'cp-app-drive-new-name'})
+                    .text(Messages.uploadButton));
+            }
+            // Pads
+            getNewPadTypes().forEach(function (type) {
+                var $element = $('<li>', {
+                    'class': 'cp-app-drive-new-doc cp-app-drive-element-row ' +
+                             'cp-app-drive-element-grid'
+                }).prepend(getIcon(type)).appendTo($container);
+                $element.append($('<span>', {'class': 'cp-app-drive-new-name'})
+                    .text(Messages.type[type]));
+                $element.attr('data-type', type);
+            });
+
+            $container.find('.cp-app-drive-element-row').click(function () {
+                $block.hide();
+            });
+            return $container;
+        };
+        var createGhostIcon = function ($list) {
+            var isInRoot = currentPath[0] === ROOT;
+            var $element = $('<li>', {
+                'class': 'cp-app-drive-element-row cp-app-drive-element-grid cp-app-drive-new-ghost'
+            }).prepend($addIcon.clone()).appendTo($list);
+            $element.append($('<span>', {'class': 'cp-app-drive-element-name'})
+                .text(Messages.fm_newFile));
+            $element.attr('title', Messages.fm_newFile);
+            $element.click(function () {
+                var $modal = Cryptpad.createModal({
+                    id: 'cp-app-drive-new-ghost-dialog',
+                    $body: $('body')
+                });
+                var $title = $('<h3>').text(Messages.fm_newFile);
+                var $description = $('<p>').text(Messages.fm_newButtonTitle);
+                $modal.find('.cp-modal').append($title);
+                $modal.find('.cp-modal').append($description);
+                var $content = createNewPadIcons($modal, isInRoot);
+                $modal.find('.cp-modal').append($content);
+                window.setTimeout(function () { $modal.show(); });
+                addNewPadHandlers($modal, isInRoot);
+            });
+        };
+
+        // Drive content toolbar
+        var createToolbar = function () {
+            var $toolbar = $driveToolbar;
+            $toolbar.html('');
+            $('<div>', {'class': 'cp-app-drive-toolbar-leftside'}).appendTo($toolbar);
+            $('<div>', {'class': 'cp-app-drive-path cp-unselectable'}).appendTo($toolbar);
+            var $rightside = $('<div>', {'class': 'cp-app-drive-toolbar-rightside'})
+                .appendTo($toolbar);
+            var $hist = common.createButton('history', true, {histConfig: APP.histConfig});
+            $rightside.append($hist);
+            return $toolbar;
+        };
+
+        // Unsorted element are represented by "href" in an array: they don't have a filename
+        // and they don't hav a hierarchical structure (folder/subfolders)
+        var displayHrefArray = function ($container, rootName, draggable) {
+            var unsorted = files[rootName];
+            if (unsorted.length) {
+                var $fileHeader = getFileListHeader(false);
+                $container.append($fileHeader);
+            }
+            var keys = unsorted;
+            var sortBy = APP.store[SORT_FILE_BY];
+            sortBy = sortBy === "" ? sortBy = 'name' : sortBy;
+            var sortedFiles = sortElements(false, [rootName], keys, sortBy, !getSortFileDesc(), true);
+            sortedFiles.forEach(function (id) {
+                var file = filesOp.getFileData(id);
+                if (!file) {
+                    //debug("Unsorted or template returns an element not present in filesData: ", href);
+                    file = { title: Messages.fm_noname };
+                    //return;
+                }
+                var idx = files[rootName].indexOf(id);
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined mens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' cp-app-drive-element-noreadonly' :
+                                ro ? ' cp-app-drive-element-readonly' : '';
+                var $element = $('<li>', {
+                    'class': 'cp-app-drive-element cp-app-drive-element-row' + roClass,
+                    draggable: draggable
+                });
+                if (Array.isArray(APP.selectedFiles)) {
+                    var sidx = APP.selectedFiles.indexOf(id);
+                    if (sidx !== -1) {
+                        $element.addClass('cp-app-drive-element-selected');
+                        APP.selectedFiles.splice(sidx, 1);
+                    }
+                }
+                addFileData(id, $element);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                var path = [rootName, idx];
+                $element.data('path', path);
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element, path);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                if (draggable) {
+                    addDragAndDropHandlers($element, path, false, false);
+                }
+                $container.append($element);
+            });
+            createGhostIcon($container);
+        };
+
+        var displayAllFiles = function ($container) {
+            var allfiles = files[FILES_DATA];
+            if (allfiles.length === 0) { return; }
+            var $fileHeader = getFileListHeader(false);
+            $container.append($fileHeader);
+            var keys = filesOp.getFiles([FILES_DATA]);
+            var sortedFiles = sortElements(false, [FILES_DATA], keys, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
+            sortedFiles.forEach(function (id) {
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined maens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' cp-app-drive-element-noreadonly' :
+                    ro ? ' cp-app-drive-element-readonly' : '';
+                var $element = $('<li>', {
+                    'class': 'cp-app-drive-element cp-app-drive-element-row' + roClass 
+                });
+                addFileData(id, $element);
+                $element.data('path', [FILES_DATA, id]);
+                $element.data('element', id);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                $container.append($element);
+            });
+        };
+
+        var displayTrashRoot = function ($list, $folderHeader, $fileHeader) {
+            var filesList = [];
+            var root = files[TRASH];
+            // Elements in the trash are JS arrays (several elements can have the same name)
+            Object.keys(root).forEach(function (key) {
+                if (!Array.isArray(root[key])) {
+                    logError("Trash element has a wrong type", root[key]);
+                    return;
+                }
+                root[key].forEach(function (el, idx) {
+                    if (!filesOp.isFile(el.element) && !filesOp.isFolder(el.element)) { return; }
+                    var spath = [key, idx, 'element'];
+                    filesList.push({
+                        element: el.element,
+                        spath: spath,
+                        name: key
+                    });
+                });
+            });
+            var sortedFolders = sortTrashElements(true, filesList, null, !getSortFolderDesc());
+            var sortedFiles = sortTrashElements(false, filesList, APP.store[SORT_FILE_BY], !getSortFileDesc());
+            if (filesOp.hasSubfolder(root, true)) { $list.append($folderHeader); }
+            sortedFolders.forEach(function (f) {
+                var $element = createElement([TRASH], f.spath, root, true);
+                $list.append($element);
+            });
+            if (filesOp.hasFile(root, true)) { $list.append($fileHeader); }
+            sortedFiles.forEach(function (f) {
+                var $element = createElement([TRASH], f.spath, root, false);
+                $list.append($element);
+            });
+        };
+
+        var displaySearch = function ($list, value) {
+            var filesList = filesOp.search(value);
+            filesList.forEach(function (r) {
+                r.paths.forEach(function (path) {
+                    var href = r.data.href;
+                    var parsed = Cryptpad.parsePadUrl(href);
+                    var $table = $('<table>');
+                    var $icon = $('<td>', {'rowspan': '3', 'class': 'cp-app-drive-search-icon'})
+                        .append(getFileIcon(href));
+                    var $title = $('<td>', {
+                        'class': 'cp-app-drive-search-col1 cp-app-drive-search-title'
+                    }).text(r.data.title)
+                        .click(function () {
+                        openFile(null, r.data.href);
+                    });
+                    var $typeName = $('<td>', {'class': 'cp-app-drive-search-label2'})
+                        .text(Messages.fm_type);
+                    var $type = $('<td>', {'class': 'cp-app-drive-search-col2'})
+                        .text(Messages.type[parsed.type] || parsed.type);
+                    var $atimeName = $('<td>', {'class': 'cp-app-drive-search-label2'})
+                        .text(Messages.fm_lastAccess);
+                    var $atime = $('<td>', {'class': 'cp-app-drive-search-col2'})
+                        .text(new Date(r.data.atime).toLocaleString());
+                    var $ctimeName = $('<td>', {'class': 'cp-app-drive-search-label2'})
+                        .text(Messages.fm_creation);
+                    var $ctime = $('<td>', {'class': 'cp-app-drive-search-col2'})
+                        .text(new Date(r.data.ctime).toLocaleString());
+                    if (filesOp.isPathIn(path, ['hrefArray'])) {
+                        path.pop();
+                        path.push(r.data.title);
+                    }
+                    var $path = $('<td>', {
+                        'class': 'cp-app-drive-search-col1 cp-app-drive-search-path'
+                    });
+                    createTitle($path, path, true);
+                    var parentPath = path.slice();
+                    var $a;
+                    if (parentPath) {
+                        $a = $('<a>').text(Messages.fm_openParent).click(function (e) {
+                            e.preventDefault();
+                            if (filesOp.isInTrashRoot(parentPath)) { parentPath = [TRASH]; }
+                            else { parentPath.pop(); }
+                            APP.selectedFiles = [r.id];
+                            APP.displayDirectory(parentPath);
+                        });
+                    }
+                    var $openDir = $('<td>', {'class': 'cp-app-drive-search-opendir'}).append($a);
+
+                    // rows 1-3
+                    $('<tr>').append($icon).append($title).append($typeName).append($type).appendTo($table);
+                    $('<tr>').append($path).append($atimeName).append($atime).appendTo($table);
+                    $('<tr>').append($openDir).append($ctimeName).append($ctime).appendTo($table);
+                    $('<li>', {'class':'cp-app-drive-search-result'}).append($table).appendTo($list);
+                });
+            });
+        };
+
+        var displayRecent = function ($list) {
+            var filesList = filesOp.getRecentPads();
+            var limit = 20;
+            var i = 0;
+            filesList.forEach(function (id) {
+                if (i >= limit) { return; }
+                // Check path (pad exists and not in trash)
+                var paths = filesOp.findFile(id);
+                if (!paths.length) { return; }
+                var path = paths[0];
+                if (filesOp.isPathIn(path, [TRASH])) { return; }
+                // Display the pad
+                var file = filesOp.getFileData(id);
+                if (!file) {
+                    //debug("Unsorted or template returns an element not present in filesData: ", href);
+                    file = { title: Messages.fm_noname };
+                    //return;
+                }
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined mens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' cp-app-drive-element-noreadonly' :
+                                ro ? ' cp-app-drive-element-readonly' : '';
+                var $element = $('<li>', {
+                    'class': 'cp-app-drive-element cp-app-drive-element-row' + roClass,
+                });
+                addFileData(id, $element);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                $element.data('path', path);
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element, path);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                /*if (draggable) {
+                    addDragAndDropHandlers($element, path, false, false);
+                }*/
+                $list.append($element);
+                i++;
+            });
+        };
+
+        // Display the selected directory into the content part (rightside)
+        // NOTE: Elements in the trash are not using the same storage structure as the others
+        // _WORKGROUP_ : do not change the lastOpenedFolder value in localStorage
+        var displayDirectory = APP.displayDirectory = function (path, force) {
+            APP.hideMenu();
+            if (!APP.editable) { debug("Read-only mode"); }
+            if (!appStatus.isReady && !force) { return; }
+
+            // Only Trash and Root are available in not-owned files manager
+            if (!path || displayedCategories.indexOf(path[0]) === -1) {
+                log(Messages.categoryError);
+                currentPath = [ROOT];
+                displayDirectory(currentPath);
+                return;
+            }
+            appStatus.ready(false);
+            currentPath = path;
+            var s = $content.scrollTop() || 0;
+            $content.html("");
+            sel.$selectBox = $('<div>', {'class': 'cp-app-drive-content-select-box'})
+                .appendTo($content);
+            if (!path || path.length === 0) {
+                path = [ROOT];
+            }
+            var isInRoot = filesOp.isPathIn(path, [ROOT]);
+            var inTrash = filesOp.isPathIn(path, [TRASH]);
+            var isTrashRoot = filesOp.comparePath(path, [TRASH]);
+            var isTemplate = filesOp.comparePath(path, [TEMPLATE]);
+            var isAllFiles = filesOp.comparePath(path, [FILES_DATA]);
+            var isSearch = path[0] === SEARCH;
+            var isRecent = path[0] === RECENT;
+            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
+
+            var root = isVirtual ? undefined : filesOp.find(path);
+            if (!isVirtual && typeof(root) === "undefined") {
+                log(Messages.fm_unknownFolderError);
+                debug("Unable to locate the selected directory: ", path);
+                var parentPath = path.slice();
+                parentPath.pop();
+                displayDirectory(parentPath, true);
+                return;
+            }
+            if (!isSearch) { delete APP.Search.oldLocation; }
+
+            APP.resetTree();
+            if (displayedCategories.indexOf(SEARCH) !== -1 && $tree.find('#cp-app-drive-tree-search-input').length) {
+                // in history mode we want to focus the version number input
+                if (!history.isHistoryMode && !APP.mobile()) {
+                    var st = $tree.scrollTop() || 0;
+                    $tree.find('#cp-app-drive-tree-search-input').focus();
+                    $tree.scrollTop(st);
+                }
+                $tree.find('#cp-app-drive-tree-search-input')[0].selectionStart = getSearchCursor();
+                $tree.find('#cp-app-drive-tree-search-input')[0].selectionEnd = getSearchCursor();
+            }
+
+            if (!isWorkgroup()) {
+                setLastOpenedFolder(path);
+            }
+
+            var $toolbar = createToolbar(path);
+            var $info = createInfoBox(path);
+
+            var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
+            $dirContent.data('path', path);
+            if (!isSearch) {
+                var mode = getViewMode();
+                if (mode) {
+                    $dirContent.addClass(getViewModeClass());
+                }
+                createViewModeButton($toolbar.find('.cp-app-drive-toolbar-rightside'));
+            }
+            if (inTrash) {
+                createEmptyTrashButton($toolbar.find('.cp-app-drive-toolbar-rightside'));
+            }
+
+            var $list = $('<ul>').appendTo($dirContent);
+
+            // NewButton can be undefined if we're in read only mode
+            createNewButton(isInRoot, $toolbar.find('.cp-app-drive-toolbar-leftside'));
+
+            createTitle($toolbar.find('.cp-app-drive-path'), path);
+
+            if (APP.mobile()) {
+                var $context = $('<button>', {
+                    'class': 'cp-dropdown-container',
+                    id: 'cp-app-drive-toolbar-context-mobile'
+                });
+                $context.append($('<span>', {'class': 'fa fa-caret-down'}));
+                $context.appendTo($toolbar.find('.cp-app-drive-toolbar-rightside'));
+                $context.click(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var $li = $content.find('.cp-app-drive-element-selected');
+                    if ($li.length !== 1) {
+                        $li = findDataHolder($tree.find('.cp-app-drive-element-active'));
+                    }
+                    // Close if already opened
+                    if ($('.cp-app-drive-context:visible').length) {
+                        APP.hideMenu();
+                        return;
+                    }
+                    // Open the menu
+                    $('.cp-app-drive-context').css({
+                        top: ($context.offset().top + 32) + 'px',
+                        right: '0px',
+                        left: ''
+                    });
+                    $li.contextmenu();
+                });
+            } else {
+                var $contextButtons = $('<span>', {'id' : 'cp-app-drive-toolbar-contextbuttons'});
+                $contextButtons.appendTo($toolbar.find('.cp-app-drive-toolbar-rightside'));
+            }
+            updateContextButton();
+
+            var $folderHeader = getFolderListHeader();
+            var $fileHeader = getFileListHeader(true);
+
+            if (isTemplate) {
+                displayHrefArray($list, path[0], true);
+            } else if (isAllFiles) {
+                displayAllFiles($list);
+            } else if (isTrashRoot) {
+                displayTrashRoot($list, $folderHeader, $fileHeader);
+            } else if (isSearch) {
+                displaySearch($list, path[1]);
+            } else if (isRecent) {
+                displayRecent($list);
+            } else {
+                $dirContent.contextmenu(openContentContextMenu);
+                if (filesOp.hasSubfolder(root)) { $list.append($folderHeader); }
+                // display sub directories
+                var keys = Object.keys(root);
+                var sortedFolders = sortElements(true, path, keys, null, !getSortFolderDesc());
+                var sortedFiles = sortElements(false, path, keys, APP.store[SORT_FILE_BY], !getSortFileDesc());
+                sortedFolders.forEach(function (key) {
+                    if (filesOp.isFile(root[key])) { return; }
+                    var $element = createElement(path, key, root, true);
+                    $element.appendTo($list);
+                });
+                if (filesOp.hasFile(root)) { $list.append($fileHeader); }
+                // display files
+                sortedFiles.forEach(function (key) {
+                    if (filesOp.isFolder(root[key])) { return; }
+                    var $element = createElement(path, key, root, false);
+                    $element.appendTo($list);
+                });
+
+                createGhostIcon($list);
+            }
+            $content.append($info).append($dirContent);
+
+            var $truncated = $('<span>', {'class': 'cp-app-drive-element-truncated'}).text('...');
+            $content.find('.cp-app-drive-element').each(function (idx, el) {
+                var $name = $(el).find('.cp-app-drive-element-name');
+                if ($name.length === 0) { return; }
+                if ($name[0].scrollHeight > $name[0].clientHeight) {
+                    var $tr = $truncated.clone();
+                    $tr.attr('title', $name.text());
+                    $(el).append($tr);
+                }
+            });
+
+            $content.scrollTop(s);
+            appStatus.ready(true);
+        };
+
+        var createTreeElement = function (name, $icon, path, draggable, droppable, collapsable, active) {
+            var $name = $('<span>', { 'class': 'cp-app-drive-element' }).text(name);
+            var $collapse;
+            if (collapsable) {
+                $collapse = $expandIcon.clone();
+            }
+            var $elementRow = $('<span>', {'class': 'cp-app-drive-element-row'}).append($collapse).append($icon).append($name).click(function (e) {
+                e.stopPropagation();
+                APP.displayDirectory(path);
+            });
+            var $element = $('<li>').append($elementRow);
+            if (draggable) { $elementRow.attr('draggable', true); }
+            if (collapsable) {
+                $element.addClass('cp-app-drive-element-collapsed');
+                $collapse.click(function(e) {
+                    e.stopPropagation();
+                    if ($element.hasClass('cp-app-drive-element-collapsed')) {
+                        // It is closed, open it
+                        $element.removeClass('cp-app-drive-element-collapsed');
+                        setFolderOpened(path, true);
+                        $collapse.removeClass('fa-plus-square-o');
+                        $collapse.addClass('fa-minus-square-o');
+                    } else {
+                        // Collapse the folder
+                        $element.addClass('cp-app-drive-element-collapsed');
+                        setFolderOpened(path, false);
+                        $collapse.removeClass('fa-minus-square-o');
+                        $collapse.addClass('fa-plus-square-o');
+                        // Change the current opened folder if it was collapsed
+                        if (filesOp.isSubpath(currentPath, path)) {
+                            displayDirectory(path);
+                        }
+                    }
+                });
+                if (wasFolderOpened(path) ||
+                        (filesOp.isSubpath(currentPath, path) && path.length < currentPath.length)) {
+                    $collapse.click();
+                }
+            }
+            $elementRow.data('path', path);
+            addDragAndDropHandlers($elementRow, path, true, droppable);
+            if (active) {
+                $elementRow.addClass('cp-app-drive-element-active cp-leftside-active');
+            }
+            return $element;
+        };
+
+        var createTree = function ($container, path) {
+            var root = filesOp.find(path);
+
+            // don't try to display what doesn't exist
+            if (!root) { return; }
+
+            // Display the root element in the tree
+            var displayingRoot = filesOp.comparePath([ROOT], path);
+            if (displayingRoot) {
+                var isRootOpened = filesOp.comparePath([ROOT], currentPath);
+                var $rootIcon = filesOp.isFolderEmpty(files[ROOT]) ?
+                    (isRootOpened ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
+                    (isRootOpened ? $folderOpenedIcon : $folderIcon);
+                var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, true, isRootOpened);
+                if (!filesOp.hasSubfolder(root)) {
+                    $rootElement.find('.cp-app-drive-icon-expcol').css('visibility', 'hidden');
+                }
+                $rootElement.addClass('cp-app-drive-tree-root');
+                $rootElement.find('>.cp-app-drive-element-row')
+                    .contextmenu(openDirectoryContextMenu);
+                $('<ul>', {'class': 'cp-app-drive-tree-docs'})
+                    .append($rootElement).appendTo($container);
+                $container = $rootElement;
+            } else if (filesOp.isFolderEmpty(root)) { return; }
+
+            // Display root content
+            var $list = $('<ul>').appendTo($container);
+            var keys = Object.keys(root).sort();
+            keys.forEach(function (key) {
+                // Do not display files in the menu
+                if (!filesOp.isFolder(root[key])) { return; }
+                var newPath = path.slice();
+                newPath.push(key);
+                var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
+                var isEmpty = filesOp.isFolderEmpty(root[key]);
+                var subfolder = filesOp.hasSubfolder(root[key]);
+                var $icon = isEmpty ?
+                    (isCurrentFolder ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
+                    (isCurrentFolder ? $folderOpenedIcon : $folderIcon);
+                var $element = createTreeElement(key, $icon.clone(), newPath, true, true, subfolder, isCurrentFolder);
+                $element.appendTo($list);
+                $element.find('>.cp-app-drive-element-row').contextmenu(openDirectoryContextMenu);
+                createTree($element, newPath);
+            });
+        };
+
+        var createTemplate = function ($container, path) {
+            var $icon = $templateIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
+            $element.addClass('cp-app-drive-tree-root');
+            var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
+            $container.append($list);
+        };
+
+        var createAllFiles = function ($container, path) {
+            var $icon = $unsortedIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
+            $allfilesElement.addClass('root');
+            var $allfilesList = $('<ul>', { 'class': 'cp-app-drive-tree-category' })
+                .append($allfilesElement);
+            $container.append($allfilesList);
+        };
+
+        var createTrash = function ($container, path) {
+            var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
+            $trashElement.addClass('root');
+            $trashElement.find('>.cp-app-drive-element-row').contextmenu(openTrashTreeContextMenu);
+            var $trashList = $('<ul>', { 'class': 'cp-app-drive-tree-category' })
+                .append($trashElement);
+            $container.append($trashList);
+        };
+
+        var createRecent = function ($container, path) {
+            var $icon = $recentIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $element = createTreeElement(RECENT_NAME, $icon, [RECENT], false, false, false, isOpened);
+            $element.addClass('root');
+            var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
+            $container.append($list);
+        };
+
+        var search = APP.Search = {};
+        var createSearch = function ($container) {
+            var isInSearch = currentPath[0] === SEARCH;
+            var $div = $('<div>', {'id': 'cp-app-drive-tree-search', 'class': 'cp-unselectable'});
+            var $input = $('<input>', {
+                id: 'cp-app-drive-tree-search-input',
+                type: 'text',
+                draggable: false,
+                tabindex: 1,
+                placeholder: Messages.fm_searchPlaceholder
+            }).keyup(function (e) {
+                if (search.to) { window.clearTimeout(search.to); }
+                if ([38, 39, 40, 41].indexOf(e.which) !== -1) {
+                    if (!$input.val()) {
+                        $input.blur();
+                        $content.focus();
+                        return;
+                    } else {
+                        e.stopPropagation();
+                    }
+                }
+                var isInSearchTmp = currentPath[0] === SEARCH;
+                if ($input.val().trim() === "") {
+                    setSearchCursor(0);
+                    if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
+                    return;
+                }
+                if (e.which === 13) {
+                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
+                    var newLocation = [SEARCH, $input.val()];
+                    setSearchCursor();
+                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                    return;
+                }
+                if (APP.mobile()) { return; }
+                search.to = window.setTimeout(function () {
+                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
+                    var newLocation = [SEARCH, $input.val()];
+                    setSearchCursor();
+                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                }, 500);
+            }).appendTo($div);
+            $searchIcon.clone().appendTo($div);
+            if (isInSearch) { $input.val(currentPath[1] || ''); }
+            $container.append($div);
+        };
+
+        APP.resetTree = function () {
+            var $categories = $tree.find('.cp-app-drive-tree-categories-container');
+            var s = $categories.scrollTop() || 0;
+
+            $tree.html('');
+            if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
+            var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
+                .appendTo($tree);
+            if (displayedCategories.indexOf(RECENT) !== -1) { createRecent($div, [RECENT]); }
+            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
+            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
+            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
+            if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
+
+            $tree.append(APP.$limit);
+            $categories = $tree.find('.cp-app-drive-tree-categories-container');
+            $categories.scrollTop(s);
+        };
+
+        APP.hideMenu = function () {
+            $contextMenu.hide();
+            $trashTreeContextMenu.hide();
+            $trashContextMenu.hide();
+            $contentContextMenu.hide();
+            $defaultContextMenu.hide();
+            $('.cp-dropdown-content').hide();
+        };
+
+        var stringifyPath = function (path) {
+            if (!Array.isArray(path)) { return; }
+            var $div = $('<div>');
+            var i = 0;
+            var space = 10;
+            path.forEach(function (s) {
+                if (i === 0) { s = getPrettyName(s); }
+                $div.append($('<span>', {'style': 'margin: 0 0 0 ' + i * space + 'px;'}).text(s));
+                $div.append($('<br>'));
+                i++;
+            });
+            return $div.html();
+        };
+
+        var getReadOnlyUrl = APP.getRO = function (id) {
+            if (!filesOp.isFile(id)) { return; }
+            var data = filesOp.getFileData(id);
+            if (!data) { return; }
+            var parsed = Cryptpad.parsePadUrl(data.href);
+            if (parsed.hashData.type !== "pad") { return; }
+            var i = data.href.indexOf('#') + 1;
+            var base = APP.origin + data.href.slice(0, i);
+            var hrefsecret = Cryptpad.getSecrets(parsed.type, parsed.hash);
+            if (!hrefsecret.keys) { return; }
+            var viewHash = Cryptpad.getViewHashFromKeys(hrefsecret.channel, hrefsecret.keys);
+            return base + viewHash;
+        };
+
+        // Disable middle click in the context menu to avoid opening /drive/inner.html# in new tabs
+        $(window).click(function (e) {
+            if (!e.target || !$(e.target).parents('.cp-dropdown-content').length) { return; }
+            if (e.which !== 1) {
+                e.stopPropagation();
+                return false;
+            }
+        });
+
+        var getProperties = function (el, cb) {
+            if (!filesOp.isFile(el)) {
+                return void cb('NOT_FILE');
+            }
+            var ro = filesOp.isReadOnlyFile(el);
+            var base = APP.origin;
+            var $d = $('<div>');
+            $('<strong>').text(Messages.fc_prop).appendTo($d);
+
+            var data = filesOp.getFileData(el);
+            if (!data || !data.href) { return void cb(void 0, $d); }
+
+            $('<br>').appendTo($d);
+            if (!ro) {
+                $('<label>', {'for': 'cp-app-drive-prop-link'}).text(Messages.editShare).appendTo($d);
+                $d.append(Cryptpad.dialog.selectable(base + data.href, {
+                    id: 'cp-app-drive-prop-link',
+                }));
+            }
+
+            var parsed = Cryptpad.parsePadUrl(data.href);
+            if (parsed.hashData && parsed.hashData.type === 'pad') {
+                var roLink = ro ? base + data.href : getReadOnlyUrl(el);
+                if (roLink) {
+                    $('<label>', {'for': 'cp-app-drive-prop-rolink'}).text(Messages.viewShare).appendTo($d);
+                    $d.append(Cryptpad.dialog.selectable(roLink, {
+                        id: 'cp-app-drive-prop-rolink',
+                    }));
+                }
+            }
+
+            if (data.tags && Array.isArray(data.tags)) {
+                $('<label>', {'for': 'cp-app-drive-prop-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
+                $d.append(Cryptpad.dialog.selectable(data.tags.join(', '), {
+                    id: 'cp-app-drive-prop-tags',
+                }));
+            }
+
+            if (APP.loggedIn && AppConfig.enablePinning) {
+                // check the size of this file...
+                common.getFileSize(data.href, function (e, bytes) {
+                    if (e) {
+                        // there was a problem with the RPC
+                        logError(e);
+
+                        // but we don't want to break the interface.
+                        // continue as if there was no RPC
+
+                        return void cb(void 0, $d);
+                    }
+                    var KB = Cryptpad.bytesToKilobytes(bytes);
+
+                    var formatted = Messages._getKey('formattedKB', [KB]);
+                    $('<br>').appendTo($d);
+
+                    $('<label>', {
+                        'for': 'cp-app-drive-prop-size'
+                    }).text(Messages.fc_sizeInKilobytes).appendTo($d);
+
+                    $d.append(Cryptpad.dialog.selectable(formatted, {
+                        id: 'cp-app-drive-prop-size',
+                    }));
+                    cb(void 0, $d);
+                });
+            } else {
+                cb(void 0, $d);
+            }
+        };
+
+        $contextMenu.on("click", "a", function(e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            //var path = $(this).data('path');
+            //var $element = $(this).data('element');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Directory context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass("cp-app-drive-context-rename")) {
+                if (paths.length !== 1) { return; }
+                displayRenameInput(paths[0].element, paths[0].path);
+            }
+            else if($(this).hasClass("cp-app-drive-context-delete")) {
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                moveElements(pathsList, [TRASH], false, refresh);
+            }
+            else if ($(this).hasClass('cp-app-drive-context-open')) {
+                paths.forEach(function (p) {
+                    var $element = p.element;
+                    $element.click();
+                    $element.dblclick();
+                });
+            }
+            else if ($(this).hasClass('cp-app-drive-context-openro')) {
+                paths.forEach(function (p) {
+                    var el = filesOp.find(p.path);
+                    if (filesOp.isFolder(el)) { return; }
+                    var roUrl = getReadOnlyUrl(el);
+                    openFile(null, roUrl);
+                });
+            }
+            else if ($(this).hasClass('cp-app-drive-context-newfolder')) {
+                if (paths.length !== 1) { return; }
+                var onCreated = function (err, info) {
+                    if (err) { return void logError(err); }
+                    APP.newFolder = info.newPath;
+                    APP.displayDirectory(paths[0].path);
+                };
+                filesOp.addFolder(paths[0].path, null, onCreated);
+            }
+            else if ($(this).hasClass("cp-app-drive-context-properties")) {
+                if (paths.length !== 1) { return; }
+                var el = filesOp.find(paths[0].path);
+                getProperties(el, function (e, $prop) {
+                    if (e) { return void logError(e); }
+                    Cryptpad.alert($prop[0], undefined, true);
+                });
+            }
+            APP.hideMenu();
+        });
+
+        $defaultContextMenu.on("click", "a", function(e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass('cp-app-drive-context-open')) {
+                paths.forEach(function (p) {
+                    var $element = p.element;
+                    $element.dblclick();
+                });
+            }
+            else if ($(this).hasClass('cp-app-drive-context-openro')) {
+                paths.forEach(function (p) {
+                    var el = filesOp.find(p.path);
+                    if (filesOp.isPathIn(p.path, [FILES_DATA])) { el = el.href; }
+                    if (!el || filesOp.isFolder(el)) { return; }
+                    var roUrl = getReadOnlyUrl(el);
+                    openFile(null, roUrl);
+                });
+            }
+            else if ($(this).hasClass('cp-app-drive-context-delete')) {
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                if (!APP.loggedIn) {
+                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                    if (paths.length === 1) {
+                        msg = Messages.fm_removePermanentlyDialog;
+                    }
+                    Cryptpad.confirm(msg, function(res) {
+                        $(window).focus();
+                        if (!res) { return; }
+                        filesOp.delete(pathsList, refresh);
+                    });
+                    return;
+                }
+                moveElements(pathsList, [TRASH], false, refresh);
+            }
+            else if ($(this).hasClass("cp-app-drive-context-properties")) {
+                if (paths.length !== 1) { return; }
+                var el = filesOp.find(paths[0].path);
+                getProperties(el, function (e, $prop) {
+                    if (e) { return void logError(e); }
+                    Cryptpad.alert($prop[0], undefined, true);
+                });
+            }
+            APP.hideMenu();
+        });
+
+        $contentContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var path = $(this).data('path');
+            var onCreated = function (err, info) {
+                if (err === E_OVER_LIMIT) {
+                    return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                }
+                if (err) {
+                    return void Cryptpad.alert(Messages.fm_error_cantPin);
+                }
+                APP.newFolder = info.newPath;
+                refresh();
+            };
+            if ($(this).hasClass("cp-app-drive-context-newfolder")) {
+                filesOp.addFolder(path, null, onCreated);
+            }
+            else if ($(this).hasClass("cp-app-drive-context-newdoc")) {
+                var type = $(this).data('type') || 'pad';
+                sessionStorage[Cryptpad.newPadPathKey] = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
+                window.open('/' + type + '/');
+            }
+            APP.hideMenu();
+        });
+
+        $trashTreeContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length !== 1 || !paths[0].element || !filesOp.comparePath(paths[0].path, [TRASH])) {
+                log(Messages.fm_forbidden);
+                debug("Trash tree context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass("cp-app-drive-context-empty")) {
+                Cryptpad.confirm(Messages.fm_emptyTrashDialog, function(res) {
+                    if (!res) { return; }
+                    filesOp.emptyTrash(refresh);
+                });
+            }
+            APP.hideMenu();
+        });
+
+        $trashContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Trash context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            var path = paths[0].path;
+            var name = paths[0].path[paths[0].path.length - 1];
+            if ($(this).hasClass("cp-app-drive-context-remove")) {
+                if (paths.length === 1) {
+                    Cryptpad.confirm(Messages.fm_removePermanentlyDialog, function(res) {
+                        if (!res) { return; }
+                        filesOp.delete([path], refresh);
+                    });
+                    return;
+                }
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                Cryptpad.confirm(msg, function(res) {
+                    if (!res) { return; }
+                    filesOp.delete(pathsList, refresh);
+                });
+            }
+            else if ($(this).hasClass("cp-app-drive-context-restore")) {
+                if (paths.length !== 1) { return; }
+                if (path.length === 4) {
+                    var el = filesOp.find(path);
+                    if (filesOp.isFile(el)) {
+                        name = filesOp.getTitle(el);
+                    } else {
+                        name = path[1];
+                    }
+                }
+                Cryptpad.confirm(Messages._getKey("fm_restoreDialog", [name]), function(res) {
+                    if (!res) { return; }
+                    filesOp.restore(path, refresh);
+                });
+            }
+            else if ($(this).hasClass("cp-app-drive-context-properties")) {
+                if (paths.length !== 1 || path.length !== 4) { return; }
+                var element = filesOp.find(path.slice(0,3)); // element containing the oldpath
+                var sPath = stringifyPath(element.path);
+                Cryptpad.alert('<strong>' + Messages.fm_originalPath + "</strong>:<br>" + sPath, undefined, true);
+            }
+            APP.hideMenu();
+        });
+
+        // Chrome considers the double-click means "select all" in the window
+        $content.on('mousedown', function (e) {
+            $content.focus();
+            e.preventDefault();
+        });
+        $appContainer.on('mouseup', function (e) {
+            //if (sel.down) { return; }
+            if (e.which !== 1) { return ; }
+            APP.hideMenu(e);
+            //removeSelected(e);
+        });
+        $appContainer.on('click', function (e) {
+            if (e.which !== 1) { return ; }
+            removeInput();
+            hideNewButton();
+        });
+        $appContainer.on('drag drop', function (e) {
+            removeInput();
+            APP.hideMenu(e);
+        });
+        $appContainer.on('mouseup drop', function () {
+            $('.cp-app-drive-element-droppable').removeClass('cp-app-drive-element-droppable');
+        });
+        $appContainer.on('keydown', function (e) {
+            // "Del"
+            if (e.which === 46) {
+                if (filesOp.isPathIn(currentPath, [FILES_DATA]) && APP.loggedIn) {
+                    return; // We can't remove elements directly from filesData
+                }
+                var $selected = $('.cp-app-drive-element-selected');
+                if (!$selected.length) { return; }
+                var paths = [];
+                var isTrash = filesOp.isPathIn(currentPath, [TRASH]);
+                $selected.each(function (idx, elmt) {
+                    if (!$(elmt).data('path')) { return; }
+                    paths.push($(elmt).data('path'));
+                });
+                // If we are in the trash or anon pad or if we are holding the "shift" key, delete permanently,
+                if (!APP.loggedIn || isTrash || e.shiftKey) {
+                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                    if (paths.length === 1) {
+                        msg = Messages.fm_removePermanentlyDialog;
+                    }
+
+                    Cryptpad.confirm(msg, function(res) {
+                        $(window).focus();
+                        if (!res) { return; }
+                        filesOp.delete(paths, refresh);
+                    });
+                    return;
+                }
+                // else move to trash
+                moveElements(paths, [TRASH], false, refresh);
+            }
+        });
+        $appContainer.contextmenu(function () {
+            APP.hideMenu();
+            return false;
+        });
+
+        var onRefresh = {
+            refresh: function() {
+                if (onRefresh.to) {
+                    window.clearTimeout(onRefresh.to);
+                }
+                onRefresh.to = window.setTimeout(refresh, 500);
+            }
+        };
+        proxy.on('change', [], function () {
+            if (history.isHistoryMode) { return; }
+            var path = arguments[2];
+            if (path[0] !== 'drive') { return false; }
+            path = path.slice(1);
+            var cPath = currentPath.slice();
+            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
+                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
+                // Reload after a few ms to make sure all the change events have been received
+                onRefresh.refresh();
+            } else if (path.length && path[0] === FILES_DATA) {
+                onRefresh.refresh();
+            }
+            APP.resetTree();
+            return false;
+        }).on('remove', [], function () {
+            if (history.isHistoryMode) { return; }
+            var path = arguments[1];
+            if (path[0] !== 'drive') { return false; }
+            path = path.slice(1);
+            var cPath = currentPath.slice();
+            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
+                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
+                // Reload after a few to make sure all the change events have been received
+                onRefresh.to = window.setTimeout(refresh, 500);
+            }
+            APP.resetTree();
+            return false;
+        }).on('change', ['drive', 'migrate'], function () {
+            var path = arguments[2];
+            var value = arguments[1];
+            if (path[1] === "migrate" && value === 1) {
+                if (APP.onDisconnect) { APP.onDisconnect(true); }
+            }
+        });
+
+        history.onEnterHistory = function (obj) {
+            var files = obj.drive;
+            filesOp = FO.init(files, config);
+            appStatus.isReady = true;
+            refresh();
+        };
+        history.onLeaveHistory = function () {
+            var files = proxy.drive;
+            filesOp = FO.init(files, config);
+            refresh();
+        };
+
+        var fmConfig = {
+            noHandlers: true,
+            onUploaded: function (ev, data) {
+                try {
+                    // Get the folder path
+                    console.log(ev.target);
+                    console.log(data);
+                    var newPath = findDropPath(ev.target);
+                    if (!newPath) { return void refresh(); }
+                    var href = data.url;
+                    // Get the current file location in ROOT
+                    var id = filesOp.getIdFromHref(href);
+                    var paths = filesOp.findFile(id);
+                    if (paths.length !== 1) { return; }
+                    // Try to move and refresh
+                    moveElements([paths[0]], newPath, true);
+                    refresh();
+                } catch (e) {
+                    console.error(e);
+                    refresh();
+                }
+            },
+            body: $('body')
+        };
+        APP.FM = common.createFileManager(fmConfig);
+
+        refresh();
+        Cryptpad.removeLoadingScreen();
+    };
+
+    var setHistory = function (bool, update) {
+        history.isHistoryMode = bool;
+        setEditable(!bool);
+        if (!bool && update) {
+            history.onLeaveHistory();
+        }
+    };
+
+    var main = function () {
+        var common;
+        var proxy;
+        var readOnly;
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                Cryptpad.addLoadingScreen();
+            }));
+            window.cryptpadStore.getAll(waitFor(function (val) {
+                APP.store = JSON.parse(JSON.stringify(val));
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (waitFor) {
+            var privReady = Util.once(waitFor());
+            var metadataMgr = common.getMetadataMgr();
+            if (JSON.stringify(metadataMgr.getPrivateData()) !== '{}') {
+                privReady();
+                return;
+            }
+            metadataMgr.onChange(function () {
+                if (typeof(metadataMgr.getPrivateData().readOnly) === 'boolean') {
+                    readOnly = metadataMgr.getPrivateData().readOnly;
+                    privReady();
+                }
+            });
+        }).nThen(function (/* waitFor */) {
+            APP.loggedIn = common.isLoggedIn();
+            APP.SFCommon = common;
+            if (!APP.loggedIn) { common.feedback('ANONYMOUS_DRIVE'); }
+            APP.$body = $('body');
+            APP.$bar = $('#cp-toolbar');
+
+            common.setTabTitle(Messages.type.drive);
+
+            var listmapConfig = {
+                data: {},
+                common: common,
+                logging: false
+            };
+
+            var metadataMgr;
+            var rt = APP.rt = Listmap.create(listmapConfig);
+            proxy = rt.proxy;
+            var onCreate = function (info) {
+                var realtime = APP.realtime = info.realtime;
+
+                APP.patchText = TextPatcher.create({
+                    realtime: realtime,
+                    logging: true,
+                });
+
+                metadataMgr = common.getMetadataMgr();
+
+                var configTb = {
+                    displayed: ['useradmin', 'pageTitle', 'newpad', 'limit'],
+                    pageTitle: Messages.type.drive,
+                    metadataMgr: metadataMgr,
+                    readOnly: readOnly,
+                    realtime: info.realtime,
+                    common: Cryptpad,
+                    sfCommon: common,
+                    $container: APP.$bar
+                };
+                var toolbar = APP.toolbar = Toolbar.create(configTb);
+
+                var $rightside = toolbar.$rightside;
+                $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+                APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
+
+                /* add the usage */
+                common.createUsageBar(function (err, $limitContainer) {
+                    if (err) { return void logError(err); }
+                    APP.$limit = $limitContainer;
+                }, true);
+
+                /* add a history button */
+                APP.histConfig = {
+                    onLocal: function () {
+                        proxy.drive = history.currentObj.drive;
+                    },
+                    onRemote: function () {},
+                    setHistory: setHistory,
+                    applyVal: function (val) {
+                        var obj = JSON.parse(val || '{}');
+                        history.currentObj = obj;
+                        history.onEnterHistory(obj);
+                    },
+                    $toolbar: APP.$bar,
+                };
+
+                /* TODO iframe: backup button here?
+                if (!readOnly && !APP.loggedIn) {
+                    // TODO secure drive
+                    // cryptpad-backup --> cp-toolbar-backup
+                    var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
+                    $backupButton.append($backupIcon.clone().css('marginRight', '0px'));
+                    $backupButton.attr('title', Messages.fm_backup_title);
+                    $backupButton.on('click', function() {
+                        var url = window.location.origin + window.location.pathname + '#' + editHash;
+                        var msg = Messages.fm_alert_backupUrl + '<input type="text" readonly="readonly" id="fm_backupUrl" value="'+url+'">';
+                        Cryptpad.alert(msg, undefined, true);
+                        $('#fm_backupUrl').val(url);
+                        $('#fm_backupUrl').click(function () {
+                            $(this).select();
+                        });
+                    });
+                    $userBlock.append($backupButton);
+                }
+                */
+
+                metadataMgr.onChange(function () {
+                    var name = metadataMgr.getUserData().name || Messages.anonymous;
+                    APP.$displayName.text(name);
+                });
+            };
+            var onReady = function () {
+                $('body').css('display', '');
+                APP.files = proxy;
+                if (!proxy.drive || typeof(proxy.drive) !== 'object') { proxy.drive = {}; }
+                andThen(common, proxy);
+                Cryptpad.removeLoadingScreen();
+            };
+            var onDisconnect = APP.onDisconnect = function (noAlert) {
+                setEditable(false);
+                if (APP.refresh) { APP.refresh(); }
+                APP.toolbar.failed();
+                if (!noAlert) { Cryptpad.alert(Messages.common_connectionLost, undefined, true); }
+            };
+            var onReconnect = function (info) {
+                setEditable(true);
+                if (APP.refresh) { APP.refresh(); }
+                APP.toolbar.reconnecting(info.myId);
+                Cryptpad.findOKButton().click();
+            };
+
+            proxy.on('create', function (info) {
+                onCreate(info);
+            }).on('ready', function () {
+                onReady();
+            });
+            proxy.on('disconnect', function () {
+                onDisconnect();
+            });
+            proxy.on('reconnect', function (info) {
+                onReconnect(info);
+            });
+
+            Cryptpad.onError(function (info) {
+                if (info && info.type === "store") {
+                    onConnectError();
+                }
+            });
+            //Cryptpad.onLogout(function () { setEditable(false); });
+        });
+    };
+    main();
+});
diff --git a/www/drive/main.js b/www/drive/main.js
index a57c0687c..5a46b8f6b 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -1,2982 +1,53 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
 define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
     'jquery',
-    '/bower_components/chainpad-listmap/chainpad-listmap.js',
-    '/bower_components/chainpad-crypto/crypto.js',
-    '/bower_components/textpatcher/TextPatcher.amd.js',
-    'json.sortify',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
     '/common/cryptpad-common.js',
-    '/common/userObject.js',
-    '/common/toolbar2.js',
-    '/customize/application_config.js',
-    '/common/cryptget.js',
-    '/common/mergeDrive.js',
+    '/bower_components/netflux-websocket/netflux-client.js',
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO, Cryptpad, Netflux) {
+    var requireConfig = RequireConfig();
 
-    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
-], function ($, Listmap, Crypto, TextPatcher, JSONSortify, Cryptpad, FO, Toolbar, AppConfig, Get, Merge) {
-    var module = window.MODULE = {};
-
-    var Messages = Cryptpad.Messages;
-    //var saveAs = window.saveAs;
-
-    // Use `$(function () {});` to make sure the html is loaded before doing anything else
-    $(function () {
-    var ifrw = $('#pad-iframe')[0].contentWindow;
-
-    Cryptpad.addLoadingScreen();
-    var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
-    };
-
-    var APP = window.APP = {
-        editable: false,
-        Cryptpad: Cryptpad,
-        loggedIn: Cryptpad.isLoggedIn(),
-        mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles
-    };
-
-    var stringify = APP.stringify = function (obj) {
-        return JSONSortify(obj);
-    };
-
-    var E_OVER_LIMIT = 'E_OVER_LIMIT';
-
-    var SEARCH = "search";
-    var SEARCH_NAME = Messages.fm_searchName;
-    var ROOT = "root";
-    var ROOT_NAME = Messages.fm_rootName;
-    var FILES_DATA = Cryptpad.storageKey;
-    var FILES_DATA_NAME = Messages.fm_filesDataName;
-    var TEMPLATE = "template";
-    var TEMPLATE_NAME = Messages.fm_templateName;
-    var TRASH = "trash";
-    var TRASH_NAME = Messages.fm_trashName;
-    var RECENT = "recent";
-    var RECENT_NAME = Messages.fm_recentPadsName;
-
-    var LOCALSTORAGE_LAST = "cryptpad-file-lastOpened";
-    var LOCALSTORAGE_OPENED = "cryptpad-file-openedFolders";
-    var LOCALSTORAGE_VIEWMODE = "cryptpad-file-viewMode";
-    var FOLDER_CONTENT_ID = "folderContent";
-
-    var config = {};
-    var DEBUG = config.DEBUG = true;
-    var debug = config.debug = DEBUG ? function () {
-        console.log.apply(console, arguments);
-    } : function () { return; };
-    var logError = config.logError = function () {
-        console.error.apply(console, arguments);
-    };
-    var log = config.log = Cryptpad.log;
-
-    var getLastOpenedFolder = function () {
-        var path;
-        try {
-            path = localStorage[LOCALSTORAGE_LAST] ? JSON.parse(localStorage[LOCALSTORAGE_LAST]) : [ROOT];
-        } catch (e) {
-            path = [ROOT];
-        }
-        return path;
-    };
-    var setLastOpenedFolder = function (path) {
-        if (path[0] === SEARCH) { return; }
-        localStorage[LOCALSTORAGE_LAST] = JSON.stringify(path);
-    };
-
-    var initLocalStorage = function () {
-        try {
-            var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
-            if (!$.isArray(store)) {
-                localStorage[LOCALSTORAGE_OPENED] = '[]';
-            }
-        } catch (e) {
-            localStorage[LOCALSTORAGE_OPENED] = '[]';
-        }
-    };
-
-    var wasFolderOpened = function (path) {
-        var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
-        return store.indexOf(JSON.stringify(path)) !== -1;
-    };
-    var setFolderOpened = function (path, opened) {
-        var s = JSON.stringify(path);
-        var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
-        if (opened && store.indexOf(s) === -1) {
-            store.push(s);
-        }
-        if (!opened) {
-            var idx = store.indexOf(s);
-            if (idx !== -1) {
-                store.splice(idx, 1);
-            }
-        }
-        localStorage[LOCALSTORAGE_OPENED] = JSON.stringify(store);
-    };
-
-    var getViewModeClass = function () {
-        var mode = localStorage[LOCALSTORAGE_VIEWMODE];
-        if (mode === 'list') { return 'list'; }
-        return 'grid';
-    };
-    var getViewMode = function () {
-        return localStorage[LOCALSTORAGE_VIEWMODE] || 'grid';
-    };
-    var setViewMode = function (mode) {
-        if (typeof(mode) !== "string") {
-            logError("Incorrect view mode: ", mode);
-            return;
-        }
-        localStorage[LOCALSTORAGE_VIEWMODE] = mode;
-    };
-
-    var setSearchCursor = function () {
-        var $input = APP.$iframe.find('#searchInput');
-        localStorage.searchCursor = $input[0].selectionStart;
-    };
-    var getSearchCursor = function () {
-        return localStorage.searchCursor || 0;
-    };
-
-/*  var now = function () {
-        return new Date().getTime();
-    }; */
-
-    var setEditable = function (state) {
-        APP.editable = state;
-        if (!state) {
-            APP.$iframe.find('#content').addClass('readonly');
-            APP.$iframe.find('[draggable="true"]').attr('draggable', false);
-        }
-        else {
-            APP.$iframe.find('#content').removeClass('readonly');
-            APP.$iframe.find('[draggable="false"]').attr('draggable', true);
-        }
-    };
-
-    // Icons
-    var $folderIcon = $('<span>', {"class": "fa fa-folder folder icon"});
-    //var $folderIcon = $('<img>', {src: "/customize/images/icons/folder.svg", "class": "folder icon"});
-    var $folderEmptyIcon = $folderIcon.clone();
-    var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
-    //var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
-    var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
-    //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
-    var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
-    var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
-    var $recentIcon = $('<span>', {"class": "fa fa-clock-o"});
-    var $trashIcon = $('<span>', {"class": "fa fa-trash-o"});
-    var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
-    //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
-    var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
-    var $listIcon = $('<button>', {"class": "fa fa-list"});
-    var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
-    var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
-    var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
-    var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
-    var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
-    var $searchIcon = $('<span>', {"class": "fa fa-search searchIcon"});
-    var $addIcon = $('<span>', {"class": "fa fa-plus"});
-    var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
-    var $readonlyIcon = $('<span>', {"class": "fa fa-eye"});
-
-    var history = {
-        isHistoryMode: false,
-    };
-
-    var init = function (proxy) {
-        var files = proxy.drive;
-        var isOwnDrive = function () {
-            return Cryptpad.getUserHash() === APP.hash || localStorage.FS_hash === APP.hash;
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
         };
-        var isWorkgroup = function () {
-            return files.workgroup === 1;
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/drive/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
         };
-        config.workgroup = isWorkgroup();
-        config.Cryptpad = Cryptpad;
-
-        var $iframe = APP.$iframe;
-
-        var filesOp = FO.init(files, config);
-        filesOp.fixFiles();
-
-        var error = filesOp.error;
-
-        var $tree = $iframe.find("#tree");
-        var $content = $iframe.find("#content");
-        var $appContainer = $iframe.find(".app-container");
-        var $driveToolbar = $iframe.find("#driveToolbar");
-        var $contextMenu = $iframe.find("#treeContextMenu");
-        var $contentContextMenu = $iframe.find("#contentContextMenu");
-        var $defaultContextMenu = $iframe.find("#defaultContextMenu");
-        var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu");
-        var $trashContextMenu = $iframe.find("#trashContextMenu");
-
-        $tree.on('drop dragover', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-        });
-        $driveToolbar.on('drop dragover', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-        });
-
-
-
-        // TOOLBAR
-
-        /* add a "change username" button */
-        if (!APP.readOnly) {
-            Cryptpad.getLastName(function (err, lastName) {
-                APP.$displayName.text(lastName || Messages.anonymous);
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        var getSecrets = function (Cryptpad) {
+            var hash = window.location.hash.slice(1) || Cryptpad.getUserHash() || localStorage.FS_hash;
+            return Cryptpad.getSecrets('drive', hash);
+        };
+        Netflux.connect(Cryptpad.getWebsocketURL()).then(function (network) {
+            SFCommonO.start({
+                getSecrets: getSecrets,
+                newNetwork: network,
+                noHash: true
             });
-        } else {
-            APP.$displayName.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
-        }
-
-        // FILE MANAGER
-        // _WORKGROUP_ and other people drive : display Documents as main page
-        var currentPath = module.currentPath = isOwnDrive() ? getLastOpenedFolder() : [ROOT];
-
-        // Categories dislayed in the menu
-        // _WORKGROUP_ : do not display unsorted
-        var displayedCategories = [ROOT, TRASH, SEARCH, RECENT];
-        if (AppConfig.enableTemplates) { displayedCategories.push(TEMPLATE); }
-        if (isWorkgroup()) { displayedCategories = [ROOT, TRASH, SEARCH]; }
-        var virtualCategories = [SEARCH, RECENT];
-
-        if (!APP.loggedIn) {
-            displayedCategories = [FILES_DATA];
-            currentPath = [FILES_DATA];
-            $tree.hide();
-            if (Object.keys(files.root).length && !proxy.anonymousAlert) {
-                Cryptpad.alert(Messages.fm_alert_anonymous, null, true);
-                proxy.anonymousAlert = true;
-            }
-        }
-
-        if (!APP.readOnly) {
-            setEditable(true);
-        }
-        var appStatus = {
-            isReady: true,
-            _onReady: [],
-            onReady: function (handler) {
-                if (appStatus.isReady) {
-                    handler();
-                    return;
-                }
-                appStatus._onReady.push(handler);
-            },
-            ready: function (state) {
-                appStatus.isReady = state;
-                if (state) {
-                    appStatus._onReady.forEach(function (h) {
-                        h();
-                    });
-                    appStatus._onReady = [];
-                }
-            }
-        };
-
-        var findDataHolder = function ($el) {
-            return $el.is('.element-row') ? $el : $el.closest('.element-row');
-        };
-
-
-        // Selection
-        var sel = {};
-
-        var removeSelected =  function (keepObj) {
-            $iframe.find('.selected').removeClass("selected");
-            var $container = $driveToolbar.find('#contextButtonsContainer');
-            if (!$container.length) { return; }
-            $container.html('');
-            if (!keepObj) {
-                delete sel.startSelected;
-                delete sel.endSelected;
-                delete sel.oldSelection;
-            }
-        };
-
-        sel.refresh = 200;
-        sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
-        var checkSelected = function () {
-            if (!sel.down) { return; }
-            var pos = sel.pos;
-            var l = $content[0].querySelectorAll('.element:not(.selected):not(.header)');
-            var p, el;
-            var offset = getViewMode() === "grid" ? 10 : 0;
-            for (var i = 0; i < l.length; i++) {
-                el = l[i];
-                p = $(el).position();
-                p.top += offset + $content.scrollTop();
-                p.left += offset;
-                p.bottom = p.top + $(el).outerHeight();
-                p.right = p.left + $(el).outerWidth();
-                if (p.right < pos.left || p.left > pos.right
-                    || p.top > pos.bottom || p.bottom < pos.top) {
-                    $(el).removeClass('selectedTmp');
-                } else {
-                    $(el).addClass('selectedTmp');
-                }
-            }
-        };
-        $content.on('mousedown', function (e) {
-            if (currentPath[0] === SEARCH) { return; }
-            if (e.which !== 1) { return; }
-            $content.focus();
-            sel.down = true;
-            if (!e.ctrlKey) { removeSelected(); }
-            var rect = e.currentTarget.getBoundingClientRect();
-            sel.startX = e.clientX - rect.left;
-            sel.startY = e.clientY - rect.top + $content.scrollTop();
-            sel.$selectBox.show().css({
-                left: sel.startX + 'px',
-                top: sel.startY + 'px',
-                width: '0px',
-                height: '0px'
-            });
-            module.hideMenu(e);
-            if (sel.move) { return; }
-            sel.move = function (ev) {
-                var rectMove = ev.currentTarget.getBoundingClientRect(),
-                    offX = ev.clientX - rectMove.left,
-                    offY = ev.clientY - rectMove.top + $content.scrollTop();
-
-
-                var left = sel.startX,
-                    top = sel.startY;
-                var width = offX - sel.startX;
-                if (width < 0) {
-                    left = Math.max(0, offX);
-                    var diffX = left-offX;
-                    width = Math.abs(width) - diffX;
-                }
-                var height = offY - sel.startY;
-                if (height < 0) {
-                    top = Math.max(0, offY);
-                    var diffY = top-offY;
-                    height = Math.abs(height) - diffY;
-                }
-                sel.$selectBox.css({
-                    width: width + 'px',
-                    left: left + 'px',
-                    height: height + 'px',
-                    top: top + 'px'
-                });
-
-
-                sel.pos = {
-                    top: top,
-                    left: left,
-                    bottom: top + height,
-                    right: left + width
-                };
-                var diffT = sel.update ? +new Date() - sel.update : sel.refresh;
-                if (diffT < sel.refresh) {
-                    if (!sel.to) {
-                        sel.to = window.setTimeout(function () {
-                            sel.update = +new Date();
-                            checkSelected();
-                            sel.to = undefined;
-                        }, (sel.refresh - diffT));
-                    }
-                    return;
-                }
-                sel.update = +new Date();
-                checkSelected();
-            };
-            $content.mousemove(sel.move);
-        });
-        $(ifrw).on('mouseup', function (e) {
-            if (!sel.down) { return; }
-            if (e.which !== 1) { return; }
-            sel.down = false;
-            sel.$selectBox.hide();
-            $content.off('mousemove', sel.move);
-            delete sel.move;
-            $content.find('.selectedTmp').removeClass('selectedTmp').addClass('selected');
-            e.stopPropagation();
-        });
-
-        // Arrow keys to modify the selection
-        $(ifrw).keydown(function (e) {
-            var $searchBar = $tree.find('#searchInput');
-            if ($searchBar.is(':focus') && $searchBar.val()) { return; }
-
-            var $elements = $content.find('.element:not(.header)');
-
-            var ev = {};
-            if (e.ctrlKey) { ev.ctrlKey = true; }
-            if (e.shiftKey) { ev.shiftKey = true; }
-            var click = function (el) {
-                if (!el) { return; }
-                module.onElementClick(ev, $(el));
-            };
-
-            // Enter
-            if (e.which === 13) {
-                var $allSelected = $content.find('.element.selected');
-                if ($allSelected.length === 1) {
-                    // Open the folder or the file
-                    $allSelected.dblclick();
-                    return;
-                }
-                // If more than one, open only the files
-                var $select = $content.find('.file-element.selected');
-                $select.each(function (idx, el) {
-                    $(el).dblclick();
-                });
-                return;
-            }
-
-            // [Left, Up, Right, Down]
-            if ([37, 38, 39, 40].indexOf(e.which) === -1) { return; }
-            e.preventDefault();
-
-            var $selection = $content.find('.element.selected');
-            if ($selection.length === 0) { return void click($elements.first()[0]); }
-
-            var lastIndex = typeof sel.endSelected === "number" ? sel.endSelected :
-                            typeof sel.startSelected === "number" ? sel.startSelected :
-                            $elements.index($selection.last()[0]);
-            var length = $elements.length;
-            if (length === 0) { return; }
-            // List mode
-            if (getViewMode() === "list") {
-                if (e.which === 40) { click($elements.get(Math.min(lastIndex+1, length -1))); }
-                if (e.which === 38) { click($elements.get(Math.max(lastIndex-1, 0))); }
-                return;
-            }
-
-            // Icon mode
-            // Get the vertical and horizontal position of lastIndex
-            // Filter all the elements to get those in the same line/column
-            var pos = $($elements.get(0)).position();
-            var $line = $elements.filter(function (idx, el) {
-                return $(el).position().top === pos.top;
-            });
-            var cols = $line.length;
-            var lines = Math.ceil(length/cols);
-
-            var lastPos = {
-                l : Math.floor(lastIndex/cols),
-                c : lastIndex - Math.floor(lastIndex/cols)*cols
-            };
-
-            if (e.which === 37) {
-                if (lastPos.c === 0) { return; }
-                click($elements.get(Math.max(lastIndex-1, 0)));
-                return;
-            }
-            if (e.which === 38) {
-                if (lastPos.l === 0) { return; }
-                click($elements.get(Math.max(lastIndex-cols, 0)));
-                return;
-            }
-            if (e.which === 39) {
-                if (lastPos.c === cols-1) { return; }
-                click($elements.get(Math.min(lastIndex+1, length-1)));
-                return;
-            }
-            if (e.which === 40) {
-                if (lastPos.l === lines-1) { return; }
-                click($elements.get(Math.min(lastIndex+cols, length-1)));
-                return;
-            }
-
-        });
-
-
-        var removeInput =  function (cancel) {
-            if (!cancel && $iframe.find('.element-row > input').length === 1) {
-                var $input = $iframe.find('.element-row > input');
-                filesOp.rename($input.data('path'), $input.val(), APP.refresh);
-            }
-            $iframe.find('.element-row > input').remove();
-            $iframe.find('.element-row > span:hidden').removeAttr('style');
-        };
-
-        var compareDays = function (date1, date2) {
-            var day1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate());
-            var day2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate());
-            var ms = Math.abs(day1-day2);
-            return Math.floor(ms/1000/60/60/24);
-        };
-
-        var getDate = function (sDate) {
-            if (!sDate) { return ''; }
-            var ret = sDate.toString();
-            try {
-                var date = new Date(sDate);
-                var today = new Date();
-                var diff = compareDays(date, today);
-                if (diff === 0) {
-                    ret = date.toLocaleTimeString();
-                } else {
-                    ret = date.toLocaleDateString();
-                }
-            } catch (e) {
-                error("Unable to format that string to a date with .toLocaleString", sDate, e);
-            }
-            return ret;
-        };
-
-        var openFile = function (el, href) {
-            if (!href) {
-                var data = filesOp.getFileData(el);
-                if (!data || !data.href) {
-                    return void logError("Missing data for the file", el, data);
-                }
-                href = data.href;
-            }
-            window.open(href);
-        };
-
-        var refresh = APP.refresh = function () {
-            module.displayDirectory(currentPath);
-        };
-
-        var getFileNameExtension = function (name) {
-            var matched = /\.\S+$/.exec(name);
-            if (matched && matched.length) { return matched[matched.length -1]; }
-            return '';
-        };
-
-        // Replace a file/folder name by an input to change its value
-        var displayRenameInput = function ($element, path) {
-            // NOTE: setTimeout(f, 0) otherwise the "rename" button in the toolbar is not working
-            window.setTimeout(function () {
-                if (!APP.editable) { return; }
-                if (!path || path.length < 2) {
-                    logError("Renaming a top level element (root, trash or filesData) is forbidden.");
-                    return;
-                }
-                removeInput();
-                removeSelected();
-                var $name = $element.find('.name');
-                if (!$name.length) {
-                    $name = $element.find('> .element');
-                }
-                $name.hide();
-                var el = filesOp.find(path);
-                var name = filesOp.isFile(el) ? filesOp.getTitle(el)  : path[path.length - 1];
-                var $input = $('<input>', {
-                    placeholder: name,
-                    value: name
-                }).data('path', path);
-
-
-                // Stop propagation on keydown to avoid issues with arrow keys
-                $input.on('keydown', function (e) { e.stopPropagation(); });
-
-                $input.on('keyup', function (e) {
-                    if (e.which === 13) {
-                        removeInput(true);
-                        filesOp.rename(path, $input.val(), refresh);
-                        return;
-                    }
-                    if (e.which === 27) {
-                        removeInput(true);
-                    }
-                });
-                //$element.parent().append($input);
-                $name.after($input);
-                $input.focus();
-
-                var extension = getFileNameExtension(name);
-                var input = $input[0];
-                input.selectionStart = 0;
-                input.selectionEnd = name.length - extension.length;
-
-                // We don't want to open the file/folder when clicking on the input
-                $input.on('click dblclick', function (e) {
-                    removeSelected();
-                    e.stopPropagation();
-                });
-                // Remove the browser ability to drag text from the input to avoid
-                // triggering our drag/drop event handlers
-                $input.on('dragstart dragleave drag drop', function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                });
-                // Make the parent element non-draggable when selecting text in the field
-                // since it would remove the input
-                $input.on('mousedown', function (e) {
-                    e.stopPropagation();
-                    $input.parents('.element-row').attr("draggable", false);
-                });
-                $input.on('mouseup', function (e) {
-                    e.stopPropagation();
-                    $input.parents('.element-row').attr("draggable", true);
-                });
-            },0);
-        };
-
-        var filterContextMenu = function ($menu, paths) {
-            //var path = $element.data('path');
-            if (!paths || paths.length === 0) { logError('no paths'); }
-
-            var hide = [];
-            var hasFolder = false;
-            paths.forEach(function (p) {
-                var path = p.path;
-                var $element = p.element;
-                if (path.length === 1) {
-                    hide.push($menu.find('a.rename'));
-                    hide.push($menu.find('a.delete'));
-                }
-                if (!APP.editable) {
-                    hide.push($menu.find('a.editable'));
-                }
-                if (!isOwnDrive()) {
-                    hide.push($menu.find('a.own'));
-                }
-                if ($element.is('.file-element')) {
-                    // No folder in files
-                    hide.push($menu.find('a.newfolder'));
-                    if ($element.is('.readonly')) {
-                        // Keep only open readonly
-                        hide.push($menu.find('a.open'));
-                    } else if ($element.is('.noreadonly')) {
-                        // Keep only open readonly
-                        hide.push($menu.find('a.open_ro'));
-                    }
-                } else {
-                    if (hasFolder) {
-                        // More than 1 folder selected: cannot create a new subfolder
-                        hide.push($menu.find('a.newfolder'));
-                    }
-                    hasFolder = true;
-                    hide.push($menu.find('a.open_ro'));
-                    hide.push($menu.find('a.properties'));
-                }
-                // If we're in the trash, hide restore and properties for non-root elements
-                if ($menu.find('a.restore').length && path && path.length > 4) {
-                    hide.push($menu.find('a.restore'));
-                    hide.push($menu.find('a.properties'));
-                }
-            });
-            if (paths.length > 1) {
-                hide.push($menu.find('a.restore'));
-                hide.push($menu.find('a.properties'));
-                hide.push($menu.find('a.rename'));
-            }
-            if (hasFolder && paths.length > 1) {
-                // Cannot open multiple folders
-                hide.push($menu.find('a.open'));
-            }
-            return hide;
-        };
-
-        var getSelectedPaths = function ($element) {
-            var paths = [];
-            if ($iframe.find('.selected').length > 1) {
-                var $selected = $iframe.find('.selected');
-                $selected.each(function (idx, elmt) {
-                    var ePath = $(elmt).data('path');
-                    if (ePath) {
-                        paths.push({
-                            path: ePath,
-                            element: $(elmt)
-                        });
-                    }
-                });
-            }
-
-            if (!paths.length) {
-                var path = $element.data('path');
-                if (!path) { return false; }
-                paths.push({
-                    path: path,
-                    element: $element
-                });
-            }
-            return paths;
-        };
-
-        var updateContextButton = function () {
-            var $li = $content.find('.selected');
-            if ($li.length === 0) {
-                $li = findDataHolder($tree.find('.active'));
-            }
-            var $button = $driveToolbar.find('#contextButton');
-            if ($button.length) { // mobile
-                if ($li.length !== 1
-                    || !$._data($li[0], 'events').contextmenu
-                    || $._data($li[0], 'events').contextmenu.length === 0) {
-                    $button.hide();
-                    return;
-                }
-                $button.show();
-                $button.css({
-                    background: '#000'
-                });
-                window.setTimeout(function () {
-                    $button.css({
-                        background: ''
-                    });
-                }, 500);
-                return;
-            }
-            // Non mobile
-            var $container = $driveToolbar.find('#contextButtonsContainer');
-            if (!$container.length) { return; }
-            $container.html('');
-            var $element = $li.length === 1 ? $li : $($li[0]);
-            var paths = getSelectedPaths($element);
-            var $menu = $element.data('context');
-            if (!$menu) { return; }
-            //var actions = [];
-            var $actions = $menu.find('a');
-            var toHide = filterContextMenu($menu, paths);
-            $actions = $actions.filter(function (i, el) {
-                for (var j = 0; j < toHide.length; j++) {
-                    if ($(el).is(toHide[j])) { return false; }
-                }
-                return true;
-            });
-            $actions.each(function (i, el) {
-                var $a = $('<button>', {'class': 'element'});
-                if ($(el).attr('data-icon')) {
-                    $a.addClass('fa').addClass($(el).attr('data-icon'));
-                    $a.attr('title', $(el).text());
-                } else {
-                    $a.text($(el).text());
-                }
-                $(el).data('paths', paths);
-                //$(el).data('path', path);
-                //:$(el).data('element', $element);
-                $container.append($a);
-                $a.click(function() { $(el).click(); });
-            });
-        };
-
-        var scrollTo = function ($element) {
-            // Current scroll position
-            var st = $content.scrollTop();
-            // Block height
-            var h = $content.height();
-            // Current top position of the element relative to the scroll position
-            var pos = Math.round($element.offset().top - $content.position().top);
-            // Element height
-            var eh = $element.outerHeight();
-            // New scroll value
-            var v = st + pos + eh - h;
-            // If the element is completely visile, don't change the scroll position
-            if (pos+eh <= h && pos >= 0) { return; }
-            $content.scrollTop(v);
-        };
-        // Add the "selected" class to the "li" corresponding to the clicked element
-        var onElementClick = module.onElementClick = function (e, $element) {
-            // If "Ctrl" is pressed, do not remove the current selection
-            removeInput();
-            $element = findDataHolder($element);
-            // If we're selecting a new element with the left click, hide the menu
-            if (e) { module.hideMenu(); }
-            // Remove the selection if we don't hold ctrl key or if we are right-clicking
-            if (!e || !e.ctrlKey) {
-                removeSelected(e && e.shiftKey);
-            }
-            if (!$element.length) {
-                log(Messages.fm_selectError);
-                return;
-            }
-            scrollTo($element);
-            // Add the selected class to the clicked / right-clicked element
-            // Remove the class if it already has it
-            // If ctrlKey, add to the selection
-            // If shiftKey, select a range of elements
-            var $elements = $content.find('.element:not(.header)');
-            var $selection = $elements.filter('.selected');
-            if (typeof sel.startSelected !== "number" || !e || (e.ctrlKey && !e.shiftKey)) {
-                sel.startSelected = $elements.index($element[0]);
-                sel.oldSelection = [];
-                $selection.each(function (idx, el) {
-                    sel.oldSelection.push(el);
-                });
-                delete sel.endSelected;
-            }
-            if (e && e.shiftKey) {
-                var end = $elements.index($element[0]);
-                sel.endSelected = end;
-                var $el;
-                removeSelected(true);
-                sel.oldSelection.forEach(function (el) {
-                    if (!$(el).hasClass("selected")) { $(el).addClass("selected"); }
-                });
-                for (var i = Math.min(sel.startSelected, sel.endSelected);
-                     i <= Math.max(sel.startSelected, sel.endSelected);
-                     i++) {
-                    $el = $($elements.get(i));
-                    if (!$el.hasClass("selected")) { $el.addClass("selected"); }
-                }
-            } else {
-                if (!$element.hasClass("selected")) {
-                    $element.addClass("selected");
-                } else {
-                    $element.removeClass("selected");
-                }
-            }
-            updateContextButton();
-        };
-
-        var displayMenu = function (e, $menu) {
-            $menu.css({ display: "block" });
-            if (APP.mobile()) { return; }
-            var h = $menu.outerHeight();
-            var w = $menu.outerWidth();
-            var wH = window.innerHeight;
-            var wW = window.innerWidth;
-            if (h > wH) {
-                $menu.css({
-                    top: '0px',
-                    bottom: ''
-                });
-            } else if (e.pageY + h <= wH) {
-                $menu.css({
-                    top: e.pageY+'px',
-                    bottom: ''
-                });
-            } else {
-                $menu.css({
-                    bottom: '0px',
-                    top: ''
-                });
-            }
-            if(w > wW) {
-                $menu.css({
-                    left: '0px',
-                    right: ''
-                });
-            } else if (e.pageX + w <= wW) {
-                $menu.css({
-                    left: e.pageX+'px',
-                    right: ''
-                });
-            } else {
-                $menu.css({
-                    left: '',
-                    right: '0px',
-                });
-            }
-        };
-
-        // Open the selected context menu on the closest "li" element
-        var openContextMenu = function (e, $menu) {
-            module.hideMenu();
-            e.stopPropagation();
-
-            var $element = findDataHolder($(e.target));
-            if (!$element.length) {
-                logError("Unable to locate the .element tag", e.target);
-                $menu.hide();
-                log(Messages.fm_contextMenuError);
-                return false;
-            }
-
-            if (!$element.hasClass('selected')) { //paths.length === 1) {
-                onElementClick(undefined, $element);
-            }
-
-            var paths = getSelectedPaths($element);
-
-            var toHide = filterContextMenu($menu, paths);
-            toHide.forEach(function ($a) {
-                $a.parent('li').hide();
-            });
-
-            displayMenu(e, $menu);
-
-            if ($menu.find('li:visible').length === 0) {
-                debug("No visible element in the context menu. Abort.");
-                $menu.hide();
-                return true;
-            }
-
-            $menu.find('a').data('paths', paths);
-            //$menu.find('a').data('path', path);
-            //$menu.find('a').data('element', $element);
-            return false;
-        };
-
-        var openDirectoryContextMenu = function (e) {
-            $contextMenu.find('li').show();
-            openContextMenu(e, $contextMenu);
-            return false;
-        };
-
-        var openDefaultContextMenu = function (e) {
-            $defaultContextMenu.find('li').show();
-            openContextMenu(e, $defaultContextMenu);
-            return false;
-        };
-
-        var openTrashTreeContextMenu = function (e) {
-            removeSelected();
-            $trashTreeContextMenu.find('li').show();
-            openContextMenu(e, $trashTreeContextMenu);
-            return false;
-        };
-
-        var openTrashContextMenu = function (e) {
-            var path = findDataHolder($(e.target)).data('path');
-            if (!path) { return; }
-            $trashContextMenu.find('li').show();
-            openContextMenu(e, $trashContextMenu);
-            return false;
-        };
-
-        var openContentContextMenu = function (e) {
-            module.hideMenu();
-            e.stopPropagation();
-            var path = $(e.target).closest('#' + FOLDER_CONTENT_ID).data('path');
-            if (!path) { return; }
-            var $menu = $contentContextMenu;
-            removeSelected();
-
-            if (!APP.editable) {
-                $menu.find('a.editable').parent('li').hide();
-            }
-            if (!isOwnDrive()) {
-                $menu.find('a.own').parent('li').hide();
-            }
-
-            $menu.find('[data-type]').each(function (idx, el) {
-                if (AppConfig.availablePadTypes.indexOf($(el).attr('data-type')) === -1) {
-                    $(el).hide();
-                }
-            });
-
-            displayMenu(e, $menu);
-
-            if ($menu.find('li:visible').length === 0) {
-                debug("No visible element in the context menu. Abort.");
-                $menu.hide();
-                return true;
-            }
-
-            $menu.find('a').data('path', path);
-            return false;
-        };
-
-        var getElementName = function (path) {
-            var file = filesOp.find(path);
-            if (!file || !filesOp.isFile(file)) { return '???'; }
-            return filesOp.getTitle(file);
-        };
-        // filesOp.moveElements is able to move several paths to a new location, including
-        // the Trash or the "Unsorted files" folder
-        var moveElements = function (paths, newPath, force, cb) {
-            if (!APP.editable) { return; }
-            var andThen = function () {
-                filesOp.move(paths, newPath, cb);
-            };
-            // Cancel drag&drop from TRASH to TRASH
-            if (filesOp.isPathIn(newPath, [TRASH]) && paths.length && paths[0][0] === TRASH) {
-                return;
-            }
-            andThen();
-        };
-        // Drag & drop:
-        // The data transferred is a stringified JSON containing the path of the dragged element
-        var onDrag = function (ev, path) {
-            var paths = [];
-            var $element = findDataHolder($(ev.target));
-            if ($element.hasClass('selected')) {
-                var $selected = $iframe.find('.selected');
-                $selected.each(function (idx, elmt) {
-                    var ePath = $(elmt).data('path');
-                    if (ePath) {
-                        var val = filesOp.find(ePath);
-                        if (!val) { return; } // Error? A ".selected" element in not in the object
-                        paths.push({
-                            path: ePath,
-                            value: {
-                                name: getElementName(ePath),
-                                el: val
-                            }
-                        });
-                    }
-                });
-            } else {
-                removeSelected();
-                $element.addClass('selected');
-                var val = filesOp.find(path);
-                if (!val) { return; } // The element in not in the object
-                paths = [{
-                    path: path,
-                    value: {
-                        name: getElementName(path),
-                        el: val
-                    }
-                }];
-            }
-            var data = {
-                'path': paths
-            };
-            ev.dataTransfer.setData("text", stringify(data));
-        };
-
-        var onFileDrop = APP.onFileDrop = function (file, e) {
-            APP.FM.onFileDrop(file, e);
-        };
-        var findDropPath = function (target) {
-            var $target = $(target);
-            var $el = findDataHolder($target);
-            var newPath = $el.data('path');
-            if ((!newPath || filesOp.isFile(filesOp.find(newPath)))
-                    && $target.parents('#content')) {
-                newPath = currentPath;
-            }
-            return newPath;
-        };
-        var onDrop = function (ev) {
-            ev.preventDefault();
-            $iframe.find('.droppable').removeClass('droppable');
-            var data = ev.dataTransfer.getData("text");
-
-            // Don't the the normal drop handler for file upload
-            var fileDrop = ev.dataTransfer.files;
-            if (fileDrop.length) { return void onFileDrop(fileDrop, ev); }
-
-            var oldPaths = JSON.parse(data).path;
-            if (!oldPaths) { return; }
-            // Dropped elements can be moved from the same file manager or imported from another one.
-            // A moved element should be removed from its previous location
-            var movedPaths = [];
-            var importedElements = [];
-            oldPaths.forEach(function (p) {
-                var el = filesOp.find(p.path);
-                if (el && (stringify(el) === stringify(p.value.el) || !p.value || !p.value.el)) {
-                    movedPaths.push(p.path);
-                } else {
-                    importedElements.push(p.value);
-                }
-            });
-
-            var newPath = findDropPath(ev.target);
-            if (!newPath) { return; }
-            if (movedPaths && movedPaths.length) {
-                moveElements(movedPaths, newPath, null, refresh);
-            }
-            if (importedElements && importedElements.length) {
-                // TODO workgroup
-                //filesOp.importElements(importedElements, newPath, refresh);
-            }
-        };
-
-        var addDragAndDropHandlers = function ($element, path, isFolder, droppable) {
-            if (!APP.editable) { return; }
-            // "dragenter" is fired for an element and all its children
-            // "dragleave" may be fired when entering a child
-            // --> we use pointer-events: none in CSS, but we still need a counter to avoid some issues
-            // --> We store the number of enter/leave and the element entered and we remove the
-            // highlighting only when we have left everything
-            var counter = 0;
-            $element.on('dragstart', function (e) {
-                e.stopPropagation();
-                counter = 0;
-                onDrag(e.originalEvent, path);
-            });
-
-            $element.on('mousedown', function (e) {
-                e.stopPropagation();
-            });
-
-            // Add drop handlers if we are not in the trash and if the element is a folder
-            if (!droppable || !isFolder) { return; }
-
-            $element.on('dragover', function (e) {
-                e.preventDefault();
-            });
-            $element.on('drop', function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                onDrop(e.originalEvent);
-            });
-            $element.on('dragenter', function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                counter++;
-                $element.addClass('droppable');
-            });
-            $element.on('dragleave', function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                counter--;
-                if (counter <= 0) {
-                    counter = 0;
-                    $element.removeClass('droppable');
-                }
-            });
-        };
-        addDragAndDropHandlers($content, null, true, true);
-
-        // In list mode, display metadata from the filesData object
-        // _WORKGROUP_ : Do not display title, atime and ctime columns since we don't have files data
-        var addFileData = function (element, $span) {
-            if (!filesOp.isFile(element)) { return; }
-
-            var data = filesOp.getFileData(element);
-            if (!data) { return void logError("No data for the file", element); }
-
-            var hrefData = Cryptpad.parsePadUrl(data.href);
-            var $state = $('<span>', {'class': 'state'});
-            if (hrefData.hashData && hrefData.hashData.mode === 'view') {
-                var $ro = $readonlyIcon.clone().appendTo($state);
-                $ro.attr('title', Messages.readonly);
-            }
-            if (data.filename && data.filename !== data.title) {
-                var $renamed = $renamedIcon.clone().appendTo($state);
-                $renamed.attr('title', "TODO: you've set a custom name for this pad. Its shared title is:\n<b>{0}</b>");
-            }
-
-            var name = filesOp.getTitle(element);
-
-            // The element with the class '.name' is underlined when the 'li' is hovered
-            var $name = $('<span>', {'class': 'name'}).text(name);
-            $span.html('');
-            $span.append($name);
-            $span.append($state);
-
-            var type = Messages.type[hrefData.type] || hrefData.type;
-            var $type = $('<span>', {'class': 'type listElement'}).text(type);
-            var $adate = $('<span>', {'class': 'atime listElement'}).text(getDate(data.atime));
-            var $cdate = $('<span>', {'class': 'ctime listElement'}).text(getDate(data.ctime));
-            $span.append($type);
-            if (!isWorkgroup()) {
-                $span.append($adate).append($cdate);
-            }
-        };
-
-        var addFolderData = function (element, key, $span) {
-            if (!element || !filesOp.isFolder(element)) { return; }
-            $span.html('');
-            // The element with the class '.name' is underlined when the 'li' is hovered
-            var sf = filesOp.hasSubfolder(element);
-            var files = filesOp.hasFile(element);
-            var $name = $('<span>', {'class': 'name'}).text(key);
-            var $state = $('<span>', {'class': 'state'});
-            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(sf);
-            var $files = $('<span>', {'class': 'files listElement'}).text(files);
-            $span.append($name).append($state).append($subfolders).append($files);
-        };
-
-        // This is duplicated in cryptpad-common, it should be unified
-        var getFileIcon = function (id) {
-            var data = filesOp.getFileData(id);
-            return Cryptpad.getFileIcon(data);
-        };
-        var getIcon = Cryptpad.getIcon;
-
-        // Create the "li" element corresponding to the file/folder located in "path"
-        var createElement = function (path, elPath, root, isFolder) {
-            // Forbid drag&drop inside the trash
-            var isTrash = path[0] === TRASH;
-            var newPath = path.slice();
-            var key;
-            if (isTrash && Array.isArray(elPath)) {
-                key = elPath[0];
-                elPath.forEach(function (k) { newPath.push(k); });
-            } else {
-                key = elPath;
-                newPath.push(key);
-            }
-
-            var element = filesOp.find(newPath);
-            var $icon = !isFolder ? getFileIcon(element) : undefined;
-            var ro = filesOp.isReadOnlyFile(element);
-            // ro undefined means it's an old hash which doesn't support read-only
-            var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
-            var liClass = 'file-item file-element element' + roClass;
-            if (isFolder) {
-                liClass = 'folder-item folder-element element';
-                $icon = filesOp.isFolderEmpty(root[key]) ? $folderEmptyIcon.clone() : $folderIcon.clone();
-            }
-            var $element = $('<li>', {
-                draggable: true,
-                'class': 'element-row'
-            });
-            if (isFolder) {
-                addFolderData(element, key, $element);
-            } else {
-                addFileData(element, $element);
-            }
-            $element.prepend($icon).dblclick(function () {
-                if (isFolder) {
-                    module.displayDirectory(newPath);
-                    return;
-                }
-                if (isTrash) { return; }
-                openFile(root[key]);
-            });
-            $element.addClass(liClass);
-            $element.data('path', newPath);
-            addDragAndDropHandlers($element, newPath, isFolder, !isTrash);
-            $element.click(function(e) {
-                e.stopPropagation();
-                onElementClick(e, $element, newPath);
-            });
-            if (!isTrash) {
-                $element.contextmenu(openDirectoryContextMenu);
-                $element.data('context', $contextMenu);
-            } else {
-                $element.contextmenu(openTrashContextMenu);
-                $element.data('context', $trashContextMenu);
-            }
-            var isNewFolder = module.newFolder && filesOp.comparePath(newPath, module.newFolder);
-            if (isNewFolder) {
-                appStatus.onReady(function () {
-                    window.setTimeout(function () { displayRenameInput($element, newPath); }, 0);
-                });
-                delete module.newFolder;
-            }
-            return $element;
-        };
-
-        // Display the full path in the title when displaying a directory from the trash
-        /*
-        var getTrashTitle = function (path) {
-            if (!path[0] || path[0] !== TRASH) { return; }
-            var title = TRASH_NAME;
-            for (var i=1; i<path.length; i++) {
-                if (i === 3 && path[i] === 'element') {}
-                else if (i === 2 && parseInt(path[i]) === path[i]) {
-                    if (path[i] !== 0) {
-                        title += " [" + path[i] + "]";
-                    }
-                } else {
-                    title += " / " + path[i];
-                }
-            }
-            return title;
-        }; */
-
-        var getPrettyName = function (name) {
-            var pName;
-            switch (name) {
-                case ROOT: pName = ROOT_NAME; break;
-                case TRASH: pName = TRASH_NAME; break;
-                case TEMPLATE: pName = TEMPLATE_NAME; break;
-                case FILES_DATA: pName = FILES_DATA_NAME; break;
-                case SEARCH: pName = SEARCH_NAME; break;
-                case RECENT: pName = RECENT_NAME; break;
-                default: pName = name;
-            }
-            return pName;
-        };
-
-        // Create the title block with the "parent folder" button
-        var createTitle = function ($container, path, noStyle) {
-            if (!path || path.length === 0) { return; }
-            var isTrash = filesOp.isPathIn(path, [TRASH]);
-            if (APP.mobile() && !noStyle) { // noStyle means title in search result
-                return $container;
-            }
-            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
-            var el = isVirtual ? undefined : filesOp.find(path);
-            path = path[0] === SEARCH ? path.slice(0,1) : path;
-            path.forEach(function (p, idx) {
-                if (isTrash && [2,3].indexOf(idx) !== -1) { return; }
-
-                var name = p;
-
-                var $span = $('<span>', {'class': 'element'});
-                if (idx < path.length - 1) {
-                    if (!noStyle) {
-                        $span.addClass('clickable');
-                        $span.click(function () {
-                            var sliceEnd = idx + 1;
-                            if (isTrash && idx === 1) { sliceEnd = 4; } // Make sure we don't show the index or 'element' and 'path'
-                            module.displayDirectory(path.slice(0, sliceEnd));
-                        });
-                    }
-                } else if (idx > 0 && filesOp.isFile(el)) {
-                    name = getElementName(path);
-                }
-
-                if (idx === 0) { name = getPrettyName(p); }
-                else {
-                    var $span2 = $('<span>', {'class': 'element separator'}).text(' / ');
-                    $container.prepend($span2);
-                }
-
-                $span.text(name).prependTo($container);
-            });
-        };
-
-        var createInfoBox = function (path) {
-            var $box = $('<div>', {'class': 'info-box'});
-            var msg;
-            switch (path[0]) {
-                case ROOT:
-                    msg = Messages.fm_info_root;
-                    break;
-                case TEMPLATE:
-                    msg = Messages.fm_info_template;
-                    break;
-                case TRASH:
-                    msg = Messages.fm_info_trash;
-                    break;
-                case FILES_DATA:
-                    msg = Messages.fm_info_allFiles;
-                    break;
-                case RECENT:
-                    msg = Messages.fm_info_recent;
-                    break;
-                default:
-                    msg = undefined;
-            }
-            if (!APP.loggedIn) {
-                msg = Messages.fm_info_anonymous;
-                $box.html(msg);
-                $box.addClass('noclose');
-                return $box;
-            }
-            if (!msg || Cryptpad.getLSAttribute('hide-info-' + path[0]) === '1') {
-                $box.hide();
-            } else {
-                $box.text(msg);
-                var $close = $closeIcon.clone().css({
-                    'cursor': 'pointer',
-                    'margin-left': '10px',
-                    title: Messages.fm_closeInfoBox
-                }).on('click', function () {
-                    $box.hide();
-                    Cryptpad.setLSAttribute('hide-info-' + path[0], '1');
-                });
-                $box.prepend($close);
-            }
-            return $box;
-        };
-
-        // Create the button allowing the user to switch from list to icons modes
-        var createViewModeButton = function ($container) {
-            var $listButton = $listIcon.clone().addClass('element');
-            var $gridButton = $gridIcon.clone().addClass('element');
-
-            $listButton.click(function () {
-                $gridButton.removeClass('active');
-                $listButton.addClass('active');
-                setViewMode('list');
-                $iframe.find('#' + FOLDER_CONTENT_ID).removeClass('grid');
-                $iframe.find('#' + FOLDER_CONTENT_ID).addClass('list');
-                Cryptpad.feedback('DRIVE_LIST_MODE');
-            });
-            $gridButton.click(function () {
-                $listButton.removeClass('active');
-                $gridButton.addClass('active');
-                setViewMode('grid');
-                $iframe.find('#' + FOLDER_CONTENT_ID).addClass('grid');
-                $iframe.find('#' + FOLDER_CONTENT_ID).removeClass('list');
-                Cryptpad.feedback('DRIVE_GRID_MODE');
-            });
-
-            if (getViewMode() === 'list') {
-                $listButton.addClass('active');
-            } else {
-                $gridButton.addClass('active');
-            }
-            $listButton.attr('title', Messages.fm_viewListButton);
-            $gridButton.attr('title', Messages.fm_viewGridButton);
-            $container.append($listButton).append($gridButton);
-        };
-
-        var getNewPadTypes = function () {
-            var arr = [];
-            AppConfig.availablePadTypes.forEach(function (type) {
-                if (type === 'drive') { return; }
-                if (type === 'contacts') { return; }
-                if (type === 'todo') { return; }
-                if (type === 'file') { return; }
-                if (!Cryptpad.isLoggedIn() && AppConfig.registeredOnlyTypes &&
-                    AppConfig.registeredOnlyTypes.indexOf(type) !== -1) {
-                    return;
-                }
-                arr.push(type);
-            });
-            return arr;
-        };
-        var addNewPadHandlers = function ($block, isInRoot) {
-            // Handlers
-            if (isInRoot) {
-                var onCreated = function (err, info) {
-                    if (err) {
-                        if (err === E_OVER_LIMIT) {
-                            return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
-                        }
-                        return void Cryptpad.alert(Messages.fm_error_cantPin);
-                    }
-                    module.newFolder = info.newPath;
-                    refresh();
-                };
-                $block.find('a.newFolder, li.newFolder').click(function () {
-                    filesOp.addFolder(currentPath, null, onCreated);
-                });
-                $block.find('a.uploadFile, li.uploadFile').click(function () {
-                    var $input = $('<input>', {
-                        'type': 'file',
-                        'style': 'display: none;'
-                    }).on('change', function (e) {
-                        var file = e.target.files[0];
-                        var ev = {
-                            target: $content[0]
-                        };
-                        APP.FM.handleFile(file, ev);
-                    });
-                    $input.click();
-                });
-            }
-            $block.find('a.newdoc, li.newdoc').click(function () {
-                var type = $(this).attr('data-type') || 'pad';
-                sessionStorage[Cryptpad.newPadPathKey] = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
-                window.open('/' + type + '/');
-            });
-        };
-        var createNewButton = function (isInRoot, $container) {
-            if (!APP.editable) { return; }
-            if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
-
-            if (!filesOp.isPathIn(currentPath, [ROOT, 'hrefArray'])) { return; }
-
-            // Create dropdown
-            var options = [];
-            if (isInRoot) {
-                options.push({
-                    tag: 'a',
-                    attributes: {'class': 'newFolder'},
-                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
-                });
-                options.push({tag: 'hr'});
-                options.push({
-                    tag: 'a',
-                    attributes: {'class': 'uploadFile'},
-                    content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
-                });
-                options.push({tag: 'hr'});
-            }
-            getNewPadTypes().forEach(function (type) {
-                var attributes = {
-                    'class': 'newdoc',
-                    'data-type': type,
-                    'href': '#'
-                };
-                options.push({
-                    tag: 'a',
-                    attributes: attributes,
-                    content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
-                });
-            });
-            var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
-
-
-            var dropdownConfig = {
-                text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
-                options: options,
-                feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
-            };
-            var $block = Cryptpad.createDropdown(dropdownConfig);
-
-            // Custom style:
-            $block.find('button').addClass('new');
-            $block.find('button').attr('title', Messages.fm_newButtonTitle);
-
-            addNewPadHandlers($block, isInRoot);
-
-            $container.append($block);
-        };
-
-        var hideNewButton = function () {
-            $iframe.find('.cp-dropdown-content').hide();
-        };
-
-        var SORT_FOLDER_DESC = 'sortFoldersDesc';
-        var SORT_FILE_BY = 'sortFilesBy';
-        var SORT_FILE_DESC = 'sortFilesDesc';
-
-        var getSortFileDesc = function () {
-            return Cryptpad.getLSAttribute(SORT_FILE_DESC) === "true";
-        };
-        var getSortFolderDesc = function () {
-            return Cryptpad.getLSAttribute(SORT_FOLDER_DESC) === "true";
-        };
-
-        var onSortByClick = function () {
-            var $span = $(this);
-            var value;
-            if ($span.hasClass('foldername')) {
-                value = getSortFolderDesc();
-                Cryptpad.setLSAttribute(SORT_FOLDER_DESC, value ? false : true);
-                refresh();
-                return;
-            }
-            value = Cryptpad.getLSAttribute(SORT_FILE_BY);
-            var descValue = getSortFileDesc();
-            if ($span.hasClass('filename')) {
-                if (value === '') {
-                    descValue = descValue ? false : true;
-                } else {
-                    descValue = false;
-                    value = '';
-                }
-            } else {
-                var found = false;
-                ['title', 'type', 'atime', 'ctime'].forEach(function (c) {
-                    if (!found && $span.hasClass(c)) {
-                        found = true;
-                        if (value === c) { descValue = descValue ? false : true; }
-                        else {
-                            // atime and ctime should be ordered in a desc order at the first click
-                            descValue = c !== 'title';
-                            value = c;
-                        }
-                    }
-                });
-            }
-            Cryptpad.setLSAttribute(SORT_FILE_BY, value);
-            Cryptpad.setLSAttribute(SORT_FILE_DESC, descValue);
-            refresh();
-        };
-
-        var addFolderSortIcon = function ($list) {
-            var $icon = $sortAscIcon.clone();
-            if (getSortFolderDesc()) {
-                $icon = $sortDescIcon.clone();
-            }
-            if (typeof(Cryptpad.getLSAttribute(SORT_FOLDER_DESC)) !== "undefined") {
-                $list.find('.foldername').addClass('active').prepend($icon);
-            }
-        };
-        var getFolderListHeader = function () {
-            var $fohElement = $('<li>', {'class': 'header listElement'});
-            //var $fohElement = $('<span>', {'class': 'element'}).appendTo($folderHeader);
-            var $fhIcon = $('<span>', {'class': 'icon'});
-            var $name = $('<span>', {'class': 'name foldername clickable'}).text(Messages.fm_folderName).click(onSortByClick);
-            var $state = $('<span>', {'class': 'state'});
-            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(Messages.fm_numberOfFolders);
-            var $files = $('<span>', {'class': 'files listElement'}).text(Messages.fm_numberOfFiles);
-            $fohElement.append($fhIcon).append($name).append($state)
-                        .append($subfolders).append($files);
-            addFolderSortIcon($fohElement);
-            return $fohElement;
-        };
-        var addFileSortIcon = function ($list) {
-            var $icon = $sortAscIcon.clone();
-            if (getSortFileDesc()) {
-                $icon = $sortDescIcon.clone();
-            }
-            var classSorted;
-            if (Cryptpad.getLSAttribute(SORT_FILE_BY) === '') { classSorted = 'filename'; }
-            else if (Cryptpad.getLSAttribute(SORT_FILE_BY)) { classSorted = Cryptpad.getLSAttribute(SORT_FILE_BY); }
-            if (classSorted) {
-                $list.find('.' + classSorted).addClass('active').prepend($icon);
-            }
-        };
-        // _WORKGROUP_ : do not display title, atime and ctime in workgroups since we don't have files data
-        var getFileListHeader = function () {
-            var $fihElement = $('<li>', {'class': 'file-header header listElement element'});
-            //var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader);
-            var $fhIcon = $('<span>', {'class': 'icon'});
-            var $fhName = $('<span>', {'class': 'name filename clickable'}).text(Messages.fm_fileName).click(onSortByClick);
-            var $fhState = $('<span>', {'class': 'state'});
-            var $fhType = $('<span>', {'class': 'type clickable'}).text(Messages.fm_type).click(onSortByClick);
-            var $fhAdate = $('<span>', {'class': 'atime clickable'}).text(Messages.fm_lastAccess).click(onSortByClick);
-            var $fhCdate = $('<span>', {'class': 'ctime clickable'}).text(Messages.fm_creation).click(onSortByClick);
-            // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
-            $fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType);
-            if (!isWorkgroup()) {
-                $fihElement.append($fhAdate).append($fhCdate);
-            }
-            addFileSortIcon($fihElement);
-            return $fihElement;
-        };
-
-        var sortElements = function (folder, path, oldkeys, prop, asc, useId) {
-            var root = filesOp.find(path);
-            var test = folder ? filesOp.isFolder : filesOp.isFile;
-            var keys = oldkeys.filter(function (e) {
-                return useId ? test(e) : test(root[e]);
-            });
-            if (keys.length < 2) { return keys; }
-            var mult = asc ? 1 : -1;
-            var getProp = function (el, prop) {
-                if (folder) { return el.toLowerCase(); }
-                var id = useId ? el : root[el];
-                var data = filesOp.getFileData(id);
-                if (!data) { return ''; }
-                if (prop === 'type') {
-                    var hrefData = Cryptpad.parsePadUrl(data.href);
-                    return hrefData.type;
-                }
-                if (prop === 'atime' || prop === 'ctime') {
-                    return new Date(data[prop]);
-                }
-                return (filesOp.getTitle(id) || "").toLowerCase();
-            };
-            keys.sort(function(a, b) {
-                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
-                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
-                return 0;
-            });
-            return keys;
-        };
-        var sortTrashElements = function (folder, oldkeys, prop, asc) {
-            var test = folder ? filesOp.isFolder : filesOp.isFile;
-            var keys = oldkeys.filter(function (e) {
-                return test(e.element);
-            });
-            if (keys.length < 2) { return keys; }
-            var mult = asc ? 1 : -1;
-            var getProp = function (el, prop) {
-                if (prop && !folder) {
-                    var element = el.element;
-                    var e = filesOp.getFileData(element);
-                    if (!e) {
-                        e = {
-                            href : el,
-                            title : Messages.fm_noname,
-                            atime : 0,
-                            ctime : 0
-                        };
-                    }
-                    if (prop === 'type') {
-                        var hrefData = Cryptpad.parsePadUrl(e.href);
-                        return hrefData.type;
-                    }
-                    if (prop === 'atime' || prop === 'ctime') {
-                        return new Date(e[prop]);
-                    }
-                }
-                return (el.name || "").toLowerCase();
-            };
-            keys.sort(function(a, b) {
-                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
-                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
-                return 0;
-            });
-            return keys;
-        };
-
-        // Create the ghost icon to add pads/folders
-        var createNewPadIcons = function ($block, isInRoot) {
-            var $container = $('<div>');
-            if (isInRoot) {
-                // Folder
-                var $element1 = $('<li>', {
-                    'class': 'newFolder element-row grid-element'
-                }).prepend($folderIcon.clone()).appendTo($container);
-                $element1.append($('<span>', {'class': 'name'}).text(Messages.fm_folder));
-                // File
-                var $element2 = $('<li>', {
-                    'class': 'uploadFile element-row grid-element'
-                }).prepend(getIcon('file')).appendTo($container);
-                $element2.append($('<span>', {'class': 'name'}).text(Messages.uploadButton));
-            }
-            // Pads
-            getNewPadTypes().forEach(function (type) {
-                var $element = $('<li>', {
-                    'class': 'newdoc element-row grid-element'
-                }).prepend(getIcon(type)).appendTo($container);
-                $element.append($('<span>', {'class': 'name'}).text(Messages.type[type]));
-                $element.attr('data-type', type);
-            });
-
-            $container.find('.element-row').click(function () {
-                $block.hide();
-            });
-            return $container;
-        };
-        var createGhostIcon = function ($list) {
-            var isInRoot = currentPath[0] === ROOT;
-            var $element = $('<li>', {
-                'class': 'element-row grid-element addpad'
-            }).prepend($addIcon.clone()).appendTo($list);
-            $element.append($('<span>', {'class': 'name'}).text(Messages.fm_newFile));
-            $element.attr('title', Messages.fm_newFile);
-            $element.click(function () {
-                var $modal = Cryptpad.createModal({
-                    id: 'addPadDialog',
-                    $body: $iframe.find('body')
-                });
-                var $title = $('<h3>').text(Messages.fm_newFile);
-                var $description = $('<p>').text(Messages.fm_newButtonTitle);
-                $modal.find('.cp-modal').append($title);
-                $modal.find('.cp-modal').append($description);
-                var $content = createNewPadIcons($modal, isInRoot);
-                $modal.find('.cp-modal').append($content);
-                window.setTimeout(function () { $modal.show(); });
-                addNewPadHandlers($modal, isInRoot);
-            });
-        };
-
-        // Drive content toolbar
-        var createToolbar = function () {
-            var $toolbar = $driveToolbar;
-            $toolbar.html('');
-            $('<div>', {'class': 'leftside'}).appendTo($toolbar);
-            $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
-            var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
-            var $hist = Cryptpad.createButton('history', true, {histConfig: APP.histConfig});
-            $hist.addClass('element');
-            $rightside.append($hist);
-            return $toolbar;
-        };
-
-        // Unsorted element are represented by "href" in an array: they don't have a filename
-        // and they don't hav a hierarchical structure (folder/subfolders)
-        var displayHrefArray = function ($container, rootName, draggable) {
-            var unsorted = files[rootName];
-            if (unsorted.length) {
-                var $fileHeader = getFileListHeader(false);
-                $container.append($fileHeader);
-            }
-            var keys = unsorted;
-            var sortBy = Cryptpad.getLSAttribute(SORT_FILE_BY);
-            sortBy = sortBy === "" ? sortBy = 'name' : sortBy;
-            var sortedFiles = sortElements(false, [rootName], keys, sortBy, !getSortFileDesc(), true);
-            sortedFiles.forEach(function (id) {
-                var file = filesOp.getFileData(id);
-                if (!file) {
-                    //debug("Unsorted or template returns an element not present in filesData: ", href);
-                    file = { title: Messages.fm_noname };
-                    //return;
-                }
-                var idx = files[rootName].indexOf(id);
-                var $icon = getFileIcon(id);
-                var ro = filesOp.isReadOnlyFile(id);
-                // ro undefined mens it's an old hash which doesn't support read-only
-                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
-                var $element = $('<li>', {
-                    'class': 'file-element element element-row' + roClass,
-                    draggable: draggable
-                });
-                addFileData(id, $element);
-                $element.prepend($icon).dblclick(function () {
-                    openFile(id);
-                });
-                var path = [rootName, idx];
-                $element.data('path', path);
-                $element.click(function(e) {
-                    e.stopPropagation();
-                    onElementClick(e, $element, path);
-                });
-                $element.contextmenu(openDefaultContextMenu);
-                $element.data('context', $defaultContextMenu);
-                if (draggable) {
-                    addDragAndDropHandlers($element, path, false, false);
-                }
-                $container.append($element);
-            });
-            createGhostIcon($container);
-        };
-
-        var displayAllFiles = function ($container) {
-            var allfiles = files[FILES_DATA];
-            if (allfiles.length === 0) { return; }
-            var $fileHeader = getFileListHeader(false);
-            $container.append($fileHeader);
-            var keys = filesOp.getFiles([FILES_DATA]);
-            var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), true);
-            sortedFiles.forEach(function (id) {
-                var $icon = getFileIcon(id);
-                var ro = filesOp.isReadOnlyFile(id);
-                // ro undefined maens it's an old hash which doesn't support read-only
-                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
-                var $element = $('<li>', { 'class': 'file-element element element-row' + roClass });
-                addFileData(id, $element);
-                $element.data('path', [FILES_DATA, id]);
-                $element.data('element', id);
-                $element.prepend($icon).dblclick(function () {
-                    openFile(id);
-                });
-                $element.click(function(e) {
-                    e.stopPropagation();
-                    onElementClick(e, $element);
-                });
-                $element.contextmenu(openDefaultContextMenu);
-                $element.data('context', $defaultContextMenu);
-                $container.append($element);
-            });
-        };
-
-        var displayTrashRoot = function ($list, $folderHeader, $fileHeader) {
-            var filesList = [];
-            var root = files[TRASH];
-            // Elements in the trash are JS arrays (several elements can have the same name)
-            Object.keys(root).forEach(function (key) {
-                if (!Array.isArray(root[key])) {
-                    logError("Trash element has a wrong type", root[key]);
-                    return;
-                }
-                root[key].forEach(function (el, idx) {
-                    if (!filesOp.isFile(el.element) && !filesOp.isFolder(el.element)) { return; }
-                    var spath = [key, idx, 'element'];
-                    filesList.push({
-                        element: el.element,
-                        spath: spath,
-                        name: key
-                    });
-                });
-            });
-            var sortedFolders = sortTrashElements(true, filesList, null, !getSortFolderDesc());
-            var sortedFiles = sortTrashElements(false, filesList, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc());
-            if (filesOp.hasSubfolder(root, true)) { $list.append($folderHeader); }
-            sortedFolders.forEach(function (f) {
-                var $element = createElement([TRASH], f.spath, root, true);
-                $list.append($element);
-            });
-            if (filesOp.hasFile(root, true)) { $list.append($fileHeader); }
-            sortedFiles.forEach(function (f) {
-                var $element = createElement([TRASH], f.spath, root, false);
-                $list.append($element);
-            });
-        };
-
-        var displaySearch = function ($list, value) {
-            var filesList = filesOp.search(value);
-            filesList.forEach(function (r) {
-                r.paths.forEach(function (path) {
-                    var href = r.data.href;
-                    var parsed = Cryptpad.parsePadUrl(href);
-                    var $table = $('<table>');
-                    var $icon = $('<td>', {'rowspan': '3', 'class': 'icon'}).append(getFileIcon(href));
-                    var $title = $('<td>', {'class': 'col1 title'}).text(r.data.title)
-                        .click(function () {
-                        openFile(null, r.data.href);
-                    });
-                    var $typeName = $('<td>', {'class': 'label2'}).text(Messages.fm_type);
-                    var $type = $('<td>', {'class': 'col2'}).text(Messages.type[parsed.type] || parsed.type);
-                    var $atimeName = $('<td>', {'class': 'label2'}).text(Messages.fm_lastAccess);
-                    var $atime = $('<td>', {'class': 'col2'}).text(new Date(r.data.atime).toLocaleString());
-                    var $ctimeName = $('<td>', {'class': 'label2'}).text(Messages.fm_creation);
-                    var $ctime = $('<td>', {'class': 'col2'}).text(new Date(r.data.ctime).toLocaleString());
-                    if (filesOp.isPathIn(path, ['hrefArray'])) {
-                        path.pop();
-                        path.push(r.data.title);
-                    }
-                    var $path = $('<td>', {'class': 'col1 path'});
-                    createTitle($path, path, true);
-                    var parentPath = path.slice();
-                    var $a;
-                    if (parentPath) {
-                        $a = $('<a>').text(Messages.fm_openParent).click(function (e) {
-                            e.preventDefault();
-                            if (filesOp.isInTrashRoot(parentPath)) { parentPath = [TRASH]; }
-                            else { parentPath.pop(); }
-                            module.displayDirectory(parentPath);
-                        });
-                    }
-                    var $openDir = $('<td>', {'class': 'openDir'}).append($a);
-
-                    // rows 1-3
-                    $('<tr>').append($icon).append($title).append($typeName).append($type).appendTo($table);
-                    $('<tr>').append($path).append($atimeName).append($atime).appendTo($table);
-                    $('<tr>').append($openDir).append($ctimeName).append($ctime).appendTo($table);
-                    $('<li>', {'class':'searchResult'}).append($table).appendTo($list);
-                });
-            });
-        };
-
-        var displayRecent = function ($list) {
-            var filesList = filesOp.getRecentPads();
-            var limit = 20;
-            var i = 0;
-            filesList.forEach(function (id) {
-                if (i >= limit) { return; }
-                // Check path (pad exists and not in trash)
-                var paths = filesOp.findFile(id);
-                if (!paths.length) { return; }
-                var path = paths[0];
-                if (filesOp.isPathIn(path, [TRASH])) { return; }
-                // Display the pad
-                var file = filesOp.getFileData(id);
-                if (!file) {
-                    //debug("Unsorted or template returns an element not present in filesData: ", href);
-                    file = { title: Messages.fm_noname };
-                    //return;
-                }
-                var $icon = getFileIcon(id);
-                var ro = filesOp.isReadOnlyFile(id);
-                // ro undefined mens it's an old hash which doesn't support read-only
-                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
-                var $element = $('<li>', {
-                    'class': 'file-element element element-row' + roClass,
-                });
-                addFileData(id, $element);
-                $element.prepend($icon).dblclick(function () {
-                    openFile(id);
-                });
-                $element.data('path', path);
-                $element.click(function(e) {
-                    e.stopPropagation();
-                    onElementClick(e, $element, path);
-                });
-                $element.contextmenu(openDefaultContextMenu);
-                $element.data('context', $defaultContextMenu);
-                /*if (draggable) {
-                    addDragAndDropHandlers($element, path, false, false);
-                }*/
-                $list.append($element);
-                i++;
-            });
-        };
-
-        // Display the selected directory into the content part (rightside)
-        // NOTE: Elements in the trash are not using the same storage structure as the others
-        // _WORKGROUP_ : do not change the lastOpenedFolder value in localStorage
-        var displayDirectory = module.displayDirectory = function (path, force) {
-            module.hideMenu();
-            if (!APP.editable) { debug("Read-only mode"); }
-            if (!appStatus.isReady && !force) { return; }
-
-            // Only Trash and Root are available in not-owned files manager
-            if (displayedCategories.indexOf(path[0]) === -1) {
-                log(Messages.categoryError);
-                currentPath = [ROOT];
-                displayDirectory(currentPath);
-                return;
-            }
-            appStatus.ready(false);
-            currentPath = path;
-            var s = $content.scrollTop() || 0;
-            $content.html("");
-            sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
-            if (!path || path.length === 0) {
-                path = [ROOT];
-            }
-            var isInRoot = filesOp.isPathIn(path, [ROOT]);
-            var isTrashRoot = filesOp.comparePath(path, [TRASH]);
-            var isTemplate = filesOp.comparePath(path, [TEMPLATE]);
-            var isAllFiles = filesOp.comparePath(path, [FILES_DATA]);
-            var isSearch = path[0] === SEARCH;
-            var isRecent = path[0] === RECENT;
-            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
-
-            var root = isVirtual ? undefined : filesOp.find(path);
-            if (!isVirtual && typeof(root) === "undefined") {
-                log(Messages.fm_unknownFolderError);
-                debug("Unable to locate the selected directory: ", path);
-                var parentPath = path.slice();
-                parentPath.pop();
-                displayDirectory(parentPath, true);
-                return;
-            }
-            if (!isSearch) { delete APP.Search.oldLocation; }
-
-            module.resetTree();
-            if (displayedCategories.indexOf(SEARCH) !== -1 && $tree.find('#searchInput').length) {
-                // in history mode we want to focus the version number input
-                if (!history.isHistoryMode && !APP.mobile()) {
-                    var st = $tree.scrollTop() || 0;
-                    $tree.find('#searchInput').focus();
-                    $tree.scrollTop(st);
-                }
-                $tree.find('#searchInput')[0].selectionStart = getSearchCursor();
-                $tree.find('#searchInput')[0].selectionEnd = getSearchCursor();
-            }
-
-            if (!isWorkgroup()) {
-                setLastOpenedFolder(path);
-            }
-
-            var $toolbar = createToolbar(path);
-            var $info = createInfoBox(path);
-
-            var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
-            $dirContent.data('path', path);
-            if (!isSearch) {
-                var mode = getViewMode();
-                if (mode) {
-                    $dirContent.addClass(getViewModeClass());
-                }
-                createViewModeButton($toolbar.find('.rightside'));
-            }
-            var $list = $('<ul>').appendTo($dirContent);
-
-            // NewButton can be undefined if we're in read only mode
-            createNewButton(isInRoot, $toolbar.find('.leftside'));
-
-            createTitle($toolbar.find('.path'), path);
-
-            if (APP.mobile()) {
-                var $context = $('<button>', {'class': 'element right cp-dropdown-container', id: 'contextButton'});
-                $context.append($('<span>', {'class': 'fa fa-caret-down'}));
-                $context.appendTo($toolbar.find('.rightside'));
-                $context.click(function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    var $li = $content.find('.selected');
-                    if ($li.length !== 1) {
-                        $li = findDataHolder($tree.find('.active'));
-                    }
-                    // Close if already opened
-                    if ($iframe.find('.contextMenu:visible').length) {
-                        module.hideMenu();
-                        return;
-                    }
-                    // Open the menu
-                    $iframe.find('.contextMenu').css({
-                        top: ($context.offset().top + 32) + 'px',
-                        right: '0px',
-                        left: ''
-                    });
-                    $li.contextmenu();
-                });
-            } else {
-                var $contextButtons = $('<span>', {'id' : 'contextButtonsContainer'});
-                $contextButtons.appendTo($toolbar.find('.rightside'));
-            }
-            updateContextButton();
-
-            var $folderHeader = getFolderListHeader();
-            var $fileHeader = getFileListHeader(true);
-
-            if (isTemplate) {
-                displayHrefArray($list, path[0], true);
-            } else if (isAllFiles) {
-                displayAllFiles($list);
-            } else if (isTrashRoot) {
-                displayTrashRoot($list, $folderHeader, $fileHeader);
-            } else if (isSearch) {
-                displaySearch($list, path[1]);
-            } else if (isRecent) {
-                displayRecent($list);
-            } else {
-                $dirContent.contextmenu(openContentContextMenu);
-                if (filesOp.hasSubfolder(root)) { $list.append($folderHeader); }
-                // display sub directories
-                var keys = Object.keys(root);
-                var sortedFolders = sortElements(true, path, keys, null, !getSortFolderDesc());
-                var sortedFiles = sortElements(false, path, keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc());
-                sortedFolders.forEach(function (key) {
-                    if (filesOp.isFile(root[key])) { return; }
-                    var $element = createElement(path, key, root, true);
-                    $element.appendTo($list);
-                });
-                if (filesOp.hasFile(root)) { $list.append($fileHeader); }
-                // display files
-                sortedFiles.forEach(function (key) {
-                    if (filesOp.isFolder(root[key])) { return; }
-                    var $element = createElement(path, key, root, false);
-                    $element.appendTo($list);
-                });
-
-                createGhostIcon($list);
-            }
-            $content.append($info).append($dirContent);
-
-            var $truncated = $('<span>', {'class': 'truncated'}).text('...');
-            $content.find('.element').each(function (idx, el) {
-                var $name = $(el).find('.name');
-                if ($name.length === 0) { return; }
-                if ($name[0].scrollHeight > $name[0].clientHeight) {
-                    var $tr = $truncated.clone();
-                    $tr.attr('title', $name.text());
-                    $(el).append($tr);
-                }
-            });
-
-            $content.scrollTop(s);
-            appStatus.ready(true);
-        };
-
-/*      var refreshFilesData = function () {
-            $content.find('.element-row').each(function (i, e) {
-                var $el = $(e);
-                if ($el.data('path')) {
-                    var path = $el.data('path');
-                    var element = filesOp.find(path);
-                    if (!filesOp.isFile(element)) { return; }
-                    var data = filesOp.getFileData(element);
-                    if (!data) { return; }
-                    if (filesOp.isPathIn(path, ['hrefArray'])) { $el.find('.name').attr('title', data.title).text(data.title); }
-                    $el.find('.title').attr('title', data.title).text(data.title);
-                    $el.find('.atime').attr('title', getDate(data.atime)).text(getDate(data.atime));
-                    $el.find('.ctime').attr('title', getDate(data.ctime)).text(getDate(data.ctime));
-                }
-            });
-        }; */
-
-
-        var createTreeElement = function (name, $icon, path, draggable, droppable, collapsable, active) {
-            var $name = $('<span>', { 'class': 'folder-element element' }).text(name);
-            var $collapse;
-            if (collapsable) {
-                $collapse = $expandIcon.clone();
-            }
-            var $elementRow = $('<span>', {'class': 'element-row'}).append($collapse).append($icon).append($name).click(function (e) {
-                e.stopPropagation();
-                module.displayDirectory(path);
-            });
-            var $element = $('<li>').append($elementRow);
-            if (draggable) { $elementRow.attr('draggable', true); }
-            if (collapsable) {
-                $element.addClass('collapsed');
-                $collapse.click(function(e) {
-                    e.stopPropagation();
-                    if ($element.hasClass('collapsed')) {
-                        // It is closed, open it
-                        $element.removeClass('collapsed');
-                        setFolderOpened(path, true);
-                        $collapse.removeClass('fa-plus-square-o');
-                        $collapse.addClass('fa-minus-square-o');
-                    } else {
-                        // Collapse the folder
-                        $element.addClass('collapsed');
-                        setFolderOpened(path, false);
-                        $collapse.removeClass('fa-minus-square-o');
-                        $collapse.addClass('fa-plus-square-o');
-                        // Change the current opened folder if it was collapsed
-                        if (filesOp.isSubpath(currentPath, path)) {
-                            displayDirectory(path);
-                        }
-                    }
-                });
-                if (wasFolderOpened(path) ||
-                        (filesOp.isSubpath(currentPath, path) && path.length < currentPath.length)) {
-                    $collapse.click();
-                }
-            }
-            $elementRow.data('path', path);
-            addDragAndDropHandlers($elementRow, path, true, droppable);
-            if (active) {
-                $elementRow.addClass('active');
-            }
-            return $element;
-        };
-
-        var createTree = function ($container, path) {
-            var root = filesOp.find(path);
-
-            // don't try to display what doesn't exist
-            if (!root) { return; }
-
-            // Display the root element in the tree
-            var displayingRoot = filesOp.comparePath([ROOT], path);
-            if (displayingRoot) {
-                var isRootOpened = filesOp.comparePath([ROOT], currentPath);
-                var $rootIcon = filesOp.isFolderEmpty(files[ROOT]) ?
-                    (isRootOpened ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
-                    (isRootOpened ? $folderOpenedIcon : $folderIcon);
-                var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, true, isRootOpened);
-                if (!filesOp.hasSubfolder(root)) {
-                    $rootElement.find('.expcol').css('visibility', 'hidden');
-                }
-                $rootElement.addClass('root');
-                $rootElement.find('>.element-row').contextmenu(openDirectoryContextMenu);
-                $('<ul>', {'class': 'docTree'}).append($rootElement).appendTo($container);
-                $container = $rootElement;
-            } else if (filesOp.isFolderEmpty(root)) { return; }
-
-            // Display root content
-            var $list = $('<ul>').appendTo($container);
-            var keys = Object.keys(root).sort();
-            keys.forEach(function (key) {
-                // Do not display files in the menu
-                if (!filesOp.isFolder(root[key])) { return; }
-                var newPath = path.slice();
-                newPath.push(key);
-                var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
-                var isEmpty = filesOp.isFolderEmpty(root[key]);
-                var subfolder = filesOp.hasSubfolder(root[key]);
-                var $icon = isEmpty ?
-                    (isCurrentFolder ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
-                    (isCurrentFolder ? $folderOpenedIcon : $folderIcon);
-                var $element = createTreeElement(key, $icon.clone(), newPath, true, true, subfolder, isCurrentFolder);
-                $element.appendTo($list);
-                $element.find('>.element-row').contextmenu(openDirectoryContextMenu);
-                createTree($element, newPath);
-            });
-        };
-
-        var createTemplate = function ($container, path) {
-            var $icon = $templateIcon.clone();
-            var isOpened = filesOp.comparePath(path, currentPath);
-            var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
-            $element.addClass('root');
-            var $list = $('<ul>', { id: 'templateTree', 'class': 'category' }).append($element);
-            $container.append($list);
-        };
-
-        var createAllFiles = function ($container, path) {
-            var $icon = $unsortedIcon.clone();
-            var isOpened = filesOp.comparePath(path, currentPath);
-            var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
-            $allfilesElement.addClass('root');
-            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category' }).append($allfilesElement);
-            $container.append($allfilesList);
-        };
-
-        var createTrash = function ($container, path) {
-            var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
-            var isOpened = filesOp.comparePath(path, currentPath);
-            var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
-            $trashElement.addClass('root');
-            $trashElement.find('>.element-row').contextmenu(openTrashTreeContextMenu);
-            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category' }).append($trashElement);
-            $container.append($trashList);
-        };
-
-        var createRecent = function ($container, path) {
-            var $icon = $recentIcon.clone();
-            var isOpened = filesOp.comparePath(path, currentPath);
-            var $element = createTreeElement(RECENT_NAME, $icon, [RECENT], false, false, false, isOpened);
-            $element.addClass('root');
-            var $list = $('<ul>', { id: 'recentTree', 'class': 'category' }).append($element);
-            $container.append($list);
-        };
-
-        var search = APP.Search = {};
-        var createSearch = function ($container) {
-            var isInSearch = currentPath[0] === SEARCH;
-            var $div = $('<div>', {'id': 'searchContainer', 'class': 'unselectable'});
-            var $input = $('<input>', {
-                id: 'searchInput',
-                type: 'text',
-                draggable: false,
-                tabindex: 1,
-                placeholder: Messages.fm_searchPlaceholder
-            }).keyup(function (e) {
-                if (search.to) { window.clearTimeout(search.to); }
-                if ([38, 39, 40, 41].indexOf(e.which) !== -1) {
-                    if (!$input.val()) {
-                        $input.blur();
-                        $content.focus();
-                        return;
-                    } else {
-                        e.stopPropagation();
-                    }
-                }
-                var isInSearchTmp = currentPath[0] === SEARCH;
-                if ($input.val().trim() === "") {
-                    setSearchCursor(0);
-                    if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
-                    return;
-                }
-                if (e.which === 13) {
-                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
-                    var newLocation = [SEARCH, $input.val()];
-                    setSearchCursor();
-                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
-                    return;
-                }
-                if (APP.mobile()) { return; }
-                search.to = window.setTimeout(function () {
-                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
-                    var newLocation = [SEARCH, $input.val()];
-                    setSearchCursor();
-                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
-                }, 500);
-            }).appendTo($div);
-            $searchIcon.clone().appendTo($div);
-            if (isInSearch) { $input.val(currentPath[1] || ''); }
-            $container.append($div);
-        };
-
-        module.resetTree = function () {
-            var $categories = $tree.find('.categories-container');
-            var s = $categories.scrollTop() || 0;
-
-            $tree.html('');
-            if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
-            var $div = $('<div>', {'class': 'categories-container'}).appendTo($tree);
-            if (displayedCategories.indexOf(RECENT) !== -1) { createRecent($div, [RECENT]); }
-            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
-            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
-            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
-            if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
-
-            $tree.append(APP.$limit);
-            $categories = $tree.find('.categories-container');
-            $categories.scrollTop(s);
-        };
-
-        module.hideMenu = function () {
-            $contextMenu.hide();
-            $trashTreeContextMenu.hide();
-            $trashContextMenu.hide();
-            $contentContextMenu.hide();
-            $defaultContextMenu.hide();
-            $iframe.find('.cp-dropdown-content').hide();
-        };
-
-        var stringifyPath = function (path) {
-            if (!Array.isArray(path)) { return; }
-            var $div = $('<div>');
-            var i = 0;
-            var space = 10;
-            path.forEach(function (s) {
-                if (i === 0) { s = getPrettyName(s); }
-                $div.append($('<span>', {'style': 'margin: 0 0 0 ' + i * space + 'px;'}).text(s));
-                $div.append($('<br>'));
-                i++;
-            });
-            return $div.html();
-        };
-
-        var getReadOnlyUrl = APP.getRO = function (id) {
-            if (!filesOp.isFile(id)) { return; }
-            var data = filesOp.getFileData(id);
-            if (!data) { return; }
-            var parsed = Cryptpad.parsePadUrl(data.href);
-            if (parsed.hashData.type !== "pad") { return; }
-            var origin = window.location.origin;
-            var i = data.href.indexOf('#') + 1;
-            var base = origin + data.href.slice(0, i);
-            var hrefsecret = Cryptpad.getSecrets(parsed.type, parsed.hash);
-            if (!hrefsecret.keys) { return; }
-            var viewHash = Cryptpad.getViewHashFromKeys(hrefsecret.channel, hrefsecret.keys);
-            return base + viewHash;
-        };
-
-        // Disable middle click in the context menu to avoid opening /drive/inner.html# in new tabs
-        $(ifrw).click(function (e) {
-            if (!e.target || !$(e.target).parents('.cp-dropdown-content').length) { return; }
-            if (e.which !== 1) {
-                e.stopPropagation();
-                return false;
-            }
-        });
-
-        var getProperties = function (el, cb) {
-            if (!filesOp.isFile(el)) {
-                return void cb('NOT_FILE');
-            }
-            var ro = filesOp.isReadOnlyFile(el);
-            var base = window.location.origin;
-            var $d = $('<div>');
-            $('<strong>').text(Messages.fc_prop).appendTo($d);
-
-            var data = filesOp.getFileData(el);
-            if (!data || !data.href) { return void cb(void 0, $d); }
-
-            $('<br>').appendTo($d);
-            if (!ro) {
-                $('<label>', {'for': 'propLink'}).text(Messages.editShare).appendTo($d);
-                $d.append(Cryptpad.dialog.selectable(base + data.href, {
-                    id: 'propLink',
-                }));
-            }
-
-            var parsed = Cryptpad.parsePadUrl(data.href);
-            if (parsed.hashData && parsed.hashData.type === 'pad') {
-                var roLink = ro ? base + data.href : getReadOnlyUrl(el);
-                if (roLink) {
-                    $('<label>', {'for': 'propROLink'}).text(Messages.viewShare).appendTo($d);
-                    $d.append(Cryptpad.dialog.selectable(roLink, {
-                        id: 'propROLink',
-                    }));
-                }
-            }
-
-            if (APP.loggedIn && AppConfig.enablePinning) {
-                // check the size of this file...
-                console.log(data.href);
-                Cryptpad.getFileSize(data.href, function (e, bytes) {
-                    if (e) {
-                        // there was a problem with the RPC
-                        logError(e);
-
-                        // but we don't want to break the interface.
-                        // continue as if there was no RPC
-
-                        return void cb(void 0, $d);
-                    }
-                    var KB = Cryptpad.bytesToKilobytes(bytes);
-
-                    var formatted = Messages._getKey('formattedKB', [KB]);
-                    $('<br>').appendTo($d);
-
-                    $('<label>', {
-                        'for': 'size'
-                    }).text(Messages.fc_sizeInKilobytes).appendTo($d);
-
-                    $d.append(Cryptpad.dialog.selectable(formatted, {
-                        id: 'size',
-                    }));
-                    cb(void 0, $d);
-                });
-            } else {
-                cb(void 0, $d);
-            }
-        };
-
-        $contextMenu.on("click", "a", function(e) {
-            e.stopPropagation();
-            var paths = $(this).data('paths');
-            //var path = $(this).data('path');
-            //var $element = $(this).data('element');
-            if (paths.length === 0) {
-                log(Messages.fm_forbidden);
-                debug("Directory context menu on a forbidden or unexisting element. ", paths);
-                return;
-            }
-            if ($(this).hasClass("rename")) {
-                if (paths.length !== 1) { return; }
-                displayRenameInput(paths[0].element, paths[0].path);
-            }
-            else if($(this).hasClass("delete")) {
-                var pathsList = [];
-                paths.forEach(function (p) { pathsList.push(p.path); });
-                moveElements(pathsList, [TRASH], false, refresh);
-            }
-            else if ($(this).hasClass('open')) {
-                paths.forEach(function (p) {
-                    var $element = p.element;
-                    $element.click();
-                    $element.dblclick();
-                });
-            }
-            else if ($(this).hasClass('open_ro')) {
-                paths.forEach(function (p) {
-                    var el = filesOp.find(p.path);
-                    if (filesOp.isFolder(el)) { return; }
-                    var roUrl = getReadOnlyUrl(el);
-                    openFile(null, roUrl);
-                });
-            }
-            else if ($(this).hasClass('newfolder')) {
-                if (paths.length !== 1) { return; }
-                var onCreated = function (err, info) {
-                    if (err) { return void logError(err); }
-                    module.newFolder = info.newPath;
-                    module.displayDirectory(paths[0].path);
-                };
-                filesOp.addFolder(paths[0].path, null, onCreated);
-            }
-            else if ($(this).hasClass("properties")) {
-                if (paths.length !== 1) { return; }
-                var el = filesOp.find(paths[0].path);
-                getProperties(el, function (e, $prop) {
-                    if (e) { return void logError(e); }
-                    Cryptpad.alert($prop[0], undefined, true);
-                });
-            }
-            module.hideMenu();
-        });
-
-        $defaultContextMenu.on("click", "a", function(e) {
-            e.stopPropagation();
-            var paths = $(this).data('paths');
-            if (paths.length === 0) {
-                log(Messages.fm_forbidden);
-                debug("Context menu on a forbidden or unexisting element. ", paths);
-                return;
-            }
-            if ($(this).hasClass('open')) {
-                paths.forEach(function (p) {
-                    var $element = p.element;
-                    $element.dblclick();
-                });
-            }
-            else if ($(this).hasClass('open_ro')) {
-                paths.forEach(function (p) {
-                    var el = filesOp.find(p.path);
-                    if (filesOp.isPathIn(p.path, [FILES_DATA])) { el = el.href; }
-                    if (!el || filesOp.isFolder(el)) { return; }
-                    var roUrl = getReadOnlyUrl(el);
-                    openFile(null, roUrl);
-                });
-            }
-            else if ($(this).hasClass('delete')) {
-                var pathsList = [];
-                paths.forEach(function (p) { pathsList.push(p.path); });
-                if (!APP.loggedIn) {
-                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
-                    if (paths.length === 1) {
-                        msg = Messages.fm_removePermanentlyDialog;
-                    }
-                    Cryptpad.confirm(msg, function(res) {
-                        $(ifrw).focus();
-                        if (!res) { return; }
-                        filesOp.delete(pathsList, refresh);
-                    });
-                    return;
-                }
-                moveElements(pathsList, [TRASH], false, refresh);
-            }
-            else if ($(this).hasClass("properties")) {
-                if (paths.length !== 1) { return; }
-                var el = filesOp.find(paths[0].path);
-                getProperties(el, function (e, $prop) {
-                    if (e) { return void logError(e); }
-                    Cryptpad.alert($prop[0], undefined, true);
-                });
-            }
-            module.hideMenu();
-        });
-
-        $contentContextMenu.on('click', 'a', function (e) {
-            e.stopPropagation();
-            var path = $(this).data('path');
-            var onCreated = function (err, info) {
-                if (err === E_OVER_LIMIT) {
-                    return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
-                }
-                if (err) {
-                    return void Cryptpad.alert(Messages.fm_error_cantPin);
-                }
-                module.newFolder = info.newPath;
-                refresh();
-            };
-            if ($(this).hasClass("newfolder")) {
-                filesOp.addFolder(path, null, onCreated);
-            }
-            else if ($(this).hasClass("newdoc")) {
-                var type = $(this).data('type') || 'pad';
-                sessionStorage[Cryptpad.newPadPathKey] = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
-                window.open('/' + type + '/');
-            }
-            module.hideMenu();
-        });
-
-        $trashTreeContextMenu.on('click', 'a', function (e) {
-            e.stopPropagation();
-            var paths = $(this).data('paths');
-            if (paths.length !== 1 || !paths[0].element || !filesOp.comparePath(paths[0].path, [TRASH])) {
-                log(Messages.fm_forbidden);
-                debug("Trash tree context menu on a forbidden or unexisting element. ", paths);
-                return;
-            }
-            if ($(this).hasClass("empty")) {
-                Cryptpad.confirm(Messages.fm_emptyTrashDialog, function(res) {
-                    if (!res) { return; }
-                    filesOp.emptyTrash(refresh);
-                });
-            }
-            module.hideMenu();
-        });
-
-        $trashContextMenu.on('click', 'a', function (e) {
-            e.stopPropagation();
-            var paths = $(this).data('paths');
-            if (paths.length === 0) {
-                log(Messages.fm_forbidden);
-                debug("Trash context menu on a forbidden or unexisting element. ", paths);
-                return;
-            }
-            var path = paths[0].path;
-            var name = paths[0].path[paths[0].path.length - 1];
-            if ($(this).hasClass("remove")) {
-                if (paths.length === 1) {
-                    Cryptpad.confirm(Messages.fm_removePermanentlyDialog, function(res) {
-                        if (!res) { return; }
-                        filesOp.delete([path], refresh);
-                    });
-                    return;
-                }
-                var pathsList = [];
-                paths.forEach(function (p) { pathsList.push(p.path); });
-                var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
-                Cryptpad.confirm(msg, function(res) {
-                    if (!res) { return; }
-                    filesOp.delete(pathsList, refresh);
-                });
-            }
-            else if ($(this).hasClass("restore")) {
-                if (paths.length !== 1) { return; }
-                if (path.length === 4) {
-                    var el = filesOp.find(path);
-                    if (filesOp.isFile(el)) {
-                        name = filesOp.getTitle(el);
-                    } else {
-                        name = path[1];
-                    }
-                }
-                Cryptpad.confirm(Messages._getKey("fm_restoreDialog", [name]), function(res) {
-                    if (!res) { return; }
-                    filesOp.restore(path, refresh);
-                });
-            }
-            else if ($(this).hasClass("properties")) {
-                if (paths.length !== 1 || path.length !== 4) { return; }
-                var element = filesOp.find(path.slice(0,3)); // element containing the oldpath
-                var sPath = stringifyPath(element.path);
-                Cryptpad.alert('<strong>' + Messages.fm_originalPath + "</strong>:<br>" + sPath, undefined, true);
-            }
-            module.hideMenu();
-        });
-
-        // Chrome considers the double-click means "select all" in the window
-        $content.on('mousedown', function (e) {
-            $content.focus();
-            e.preventDefault();
-        });
-        $appContainer.on('mouseup', function (e) {
-            //if (sel.down) { return; }
-            if (e.which !== 1) { return ; }
-            module.hideMenu(e);
-            //removeSelected(e);
-        });
-        $appContainer.on('click', function (e) {
-            if (e.which !== 1) { return ; }
-            removeInput();
-            hideNewButton();
-        });
-        $appContainer.on('drag drop', function (e) {
-            removeInput();
-            module.hideMenu(e);
-        });
-        $appContainer.on('mouseup drop', function () {
-            $iframe.find('.droppable').removeClass('droppable');
-        });
-        $appContainer.on('keydown', function (e) {
-            // "Del"
-            if (e.which === 46) {
-                if (filesOp.isPathIn(currentPath, [FILES_DATA]) && APP.loggedIn) {
-                    return; // We can't remove elements directly from filesData
-                }
-                var $selected = $iframe.find('.selected');
-                if (!$selected.length) { return; }
-                var paths = [];
-                var isTrash = filesOp.isPathIn(currentPath, [TRASH]);
-                $selected.each(function (idx, elmt) {
-                    if (!$(elmt).data('path')) { return; }
-                    paths.push($(elmt).data('path'));
-                });
-                // If we are in the trash or anon pad or if we are holding the "shift" key, delete permanently,
-                if (!APP.loggedIn || isTrash || e.shiftKey) {
-                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
-                    if (paths.length === 1) {
-                        msg = Messages.fm_removePermanentlyDialog;
-                    }
-
-                    Cryptpad.confirm(msg, function(res) {
-                        $(ifrw).focus();
-                        if (!res) { return; }
-                        filesOp.delete(paths, refresh);
-                    });
-                    return;
-                }
-                // else move to trash
-                moveElements(paths, [TRASH], false, refresh);
-            }
-        });
-        $appContainer.contextmenu(function () {
-            module.hideMenu();
-            return false;
-        });
-
-        var onRefresh = {
-            refresh: function() {
-                if (onRefresh.to) {
-                    window.clearTimeout(onRefresh.to);
-                }
-                onRefresh.to = window.setTimeout(refresh, 500);
-            }
-        };
-        proxy.on('change', [], function () {
-            if (history.isHistoryMode) { return; }
-            var path = arguments[2];
-            if (path[0] !== 'drive') { return false; }
-            path = path.slice(1);
-            var cPath = currentPath.slice();
-            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
-                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
-                // Reload after a few ms to make sure all the change events have been received
-                onRefresh.refresh();
-            } else if (path.length && path[0] === FILES_DATA) {
-                onRefresh.refresh();
-            }
-            module.resetTree();
-            return false;
-        }).on('remove', [], function () {
-            if (history.isHistoryMode) { return; }
-            var path = arguments[1];
-            if (path[0] !== 'drive') { return false; }
-            path = path.slice(1);
-            var cPath = currentPath.slice();
-            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
-                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
-                // Reload after a few to make sure all the change events have been received
-                onRefresh.to = window.setTimeout(refresh, 500);
-            }
-            module.resetTree();
-            return false;
-        }).on('change', ['drive', 'migrate'], function () {
-            var path = arguments[2];
-            var value = arguments[1];
-            if (path[1] === "migrate" && value === 1) {
-                if (APP.onDisconnect) { APP.onDisconnect(true); }
-            }
-        });
-
-        history.onEnterHistory = function (obj) {
-            var files = obj.drive;
-            filesOp = FO.init(files, config);
-            appStatus.isReady = true;
-            refresh();
-        };
-        history.onLeaveHistory = function () {
-            var files = proxy.drive;
-            filesOp = FO.init(files, config);
-            refresh();
-        };
-
-        var createReadme = function (proxy, cb) {
-            if (sessionStorage.createReadme) {
-                var hash = Cryptpad.createRandomHash();
-                Get.put(hash, Messages.driveReadme, function (e) {
-                    if (e) { logError(e); }
-                    var href = '/pad/#' + hash;
-                    var data = {
-                        href: href,
-                        title: Messages.driveReadmeTitle,
-                        atime: new Date().toISOString(),
-                        ctime: new Date().toISOString()
-                    };
-                    filesOp.pushData(data, function (e, id) {
-                        if (e) { return void console.error("Error while creating the default pad:", e); } // TODO LIMIT?
-                        filesOp.add(id);
-                        if (typeof(cb) === "function") { cb(); }
-                    });
-                });
-                delete sessionStorage.createReadme;
-                return;
-            }
-            if (typeof(cb) === "function") { cb(); }
-        };
-
-        var fmConfig = {
-            noHandlers: true,
-            onUploaded: function (ev, data) {
-                try {
-                    // Get the folder path
-                    var newPath = findDropPath(ev.target);
-                    if (!newPath) { return void refresh(); }
-                    var href = data.url;
-                    // Get the current file location in ROOT
-                    var id = filesOp.getIdFromHref(href);
-                    var paths = filesOp.findFile(id);
-                    if (paths.length !== 1) { return; }
-                    // Try to move and refresh
-                    moveElements([paths[0]], newPath, true);
-                    refresh();
-                } catch (e) {
-                    console.error(e);
-                    refresh();
-                }
-            },
-            body: $iframe.find('body')
-        };
-        APP.FM = Cryptpad.createFileManager(fmConfig);
-
-        createReadme(proxy, function () {
-            refresh();
-            APP.userList.onChange();
-            Cryptpad.removeLoadingScreen();
-        });
-    };
-
-    var setHistory = function (bool, update) {
-        history.isHistoryMode = bool;
-        setEditable(!bool);
-        if (!bool && update) {
-            history.onLeaveHistory();
-        }
-    };
-
-    var setName = APP.setName = function (newName) {
-        if (typeof(newName) !== 'string') { return; }
-        var myUserNameTemp = newName.trim();
-        if(myUserNameTemp.length > 32) {
-            myUserNameTemp = myUserNameTemp.substr(0, 32);
-        }
-        var myUserName = myUserNameTemp;
-        Cryptpad.setDisplayName(myUserName, function (err) {
-            if (err) {
-                logError("Couldn't set username", err);
-                return;
-            }
-            if (myUserName === "") {
-                myUserName = Messages.anonymous;
-            }
-            APP.$displayName.text(myUserName);
-        });
-    };
-
-    var migrateAnonDrive = function (proxy, cb) {
-        if (sessionStorage.migrateAnonDrive) {
-            Merge.anonDriveIntoUser(proxy, function () {
-                delete sessionStorage.migrateAnonDrive;
-                if (typeof(cb) === "function") { cb(); }
-            });
-        } else {
-            if (typeof(cb) === "function") { cb(); }
-        }
-    };
-
-    // don't initialize until the store is ready.
-    Cryptpad.ready(function () {
-        Cryptpad.reportAppUsage();
-        if (!APP.loggedIn) { Cryptpad.feedback('ANONYMOUS_DRIVE'); }
-        var $iframe = APP.$iframe = $('#pad-iframe').contents();
-        APP.$bar = $iframe.find('#toolbar');
-
-        var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy ? Cryptpad.getStore().getProxy() : undefined;
-
-        if (window.location.hash && window.location.hash === "#iframe") {
-            $iframe.find('body').addClass('iframe');
-            window.location.hash = "";
-            APP.homePageIframe = true;
-        }
-
-        var hash = window.location.hash.slice(1) || Cryptpad.getUserHash() || localStorage.FS_hash;
-        var secret = Cryptpad.getSecrets('drive', hash);
-        var readOnly = APP.readOnly = secret.keys && !secret.keys.editKeyStr;
-
-        var listmapConfig = module.config = {
-            data: {},
-            websocketURL: Cryptpad.getWebsocketURL(),
-            channel: secret.channel,
-            readOnly: readOnly,
-            validateKey: secret.keys.validateKey || undefined,
-            crypto: Crypto.createEncryptor(secret.keys),
-            logging: false
-        };
-
-        var proxy;
-        if (storeObj && !window.location.hash.slice(1)) { proxy = storeObj.proxy; }
-        else {
-            var rt = window.rt = module.rt = Listmap.create(listmapConfig);
-            proxy = rt.proxy;
-        }
-        var onCreate = function (info) {
-            var realtime = module.realtime = info.realtime;
-
-            var editHash = APP.editHash = !readOnly ? Cryptpad.getEditHashFromKeys(info.channel, secret.keys) : undefined;
-            var viewHash = APP.viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
-
-            APP.hash = readOnly ? viewHash : editHash;
-            if (!readOnly && !localStorage.FS_hash && !Cryptpad.getUserHash() && !window.location.hash) {
-                localStorage.FS_hash = editHash;
-            }
-
-            module.patchText = TextPatcher.create({
-                realtime: realtime,
-                logging: true,
-            });
-
-            var userList = APP.userList = info.userList;
-            var config = {
-                displayed: ['useradmin', 'limit', 'newpad', 'pageTitle'],
-                userList: {
-                    list: userList,
-                    userNetfluxId: info.myID
-                },
-                common: Cryptpad,
-                readOnly: readOnly,
-                ifrw: window,
-                realtime: info.realtime,
-                network: info.network,
-                $container: APP.$bar,
-                pageTitle: Messages.type.drive
-            };
-            var toolbar = APP.toolbar = Toolbar.create(config);
-
-            var $rightside = toolbar.$rightside;
-            $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
-            var $userBlock = toolbar.$userAdmin;
-            APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
-
-            if (APP.homePageIframe) {
-                var $linkToMain = toolbar.linkToMain;
-                $linkToMain.attr('href', '#');
-                $linkToMain.attr('title', '');
-                $linkToMain.css('cursor', 'default');
-                $linkToMain.off('click');
-            }
-
-            /* add the usage */
-            Cryptpad.createUsageBar(function (err, $limitContainer) {
-                if (err) { return void logError(err); }
-                APP.$limit = $limitContainer;
-            }, true);
-
-            /* add a history button */
-            APP.histConfig = {
-                onLocal: function () {
-                    proxy.drive = history.currentObj.drive;
-                },
-                onRemote: function () {},
-                setHistory: setHistory,
-                applyVal: function (val) {
-                    var obj = JSON.parse(val || '{}');
-                    history.currentObj = obj;
-                    history.onEnterHistory(obj);
-                },
-                $toolbar: APP.$bar,
-                href: window.location.origin + window.location.pathname + '#' + APP.hash
-            };
-
-            if (!readOnly && !APP.loggedIn) {
-                // TODO secure drive
-                // cryptpad-backup --> cp-toolbar-backup
-                var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
-                $backupButton.append($backupIcon.clone().css('marginRight', '0px'));
-                $backupButton.attr('title', Messages.fm_backup_title);
-                $backupButton.on('click', function() {
-                    var url = window.location.origin + window.location.pathname + '#' + editHash;
-                    var msg = Messages.fm_alert_backupUrl + '<input type="text" readonly="readonly" id="fm_backupUrl" value="'+url+'">';
-                    Cryptpad.alert(msg, undefined, true);
-                    $('#fm_backupUrl').val(url);
-                    $('#fm_backupUrl').click(function () {
-                        $(this).select();
-                    });
-                });
-                $userBlock.append($backupButton);
-            }
-
-            Cryptpad.onDisplayNameChanged(setName);
-        };
-        var onReady = function () {
-            APP.$iframe.find('body').css('display', '');
-            module.files = proxy;
-            if (!proxy.drive || typeof(proxy.drive) !== 'object') { proxy.drive = {}; }
-            migrateAnonDrive(proxy, function () {
-                initLocalStorage();
-                init(proxy);
-                APP.userList.onChange();
-                Cryptpad.removeLoadingScreen();
-            });
-        };
-        var onDisconnect = APP.onDisconnect = function (noAlert) {
-            setEditable(false);
-            if (APP.refresh) { APP.refresh(); }
-            APP.toolbar.failed();
-            if (!noAlert) { Cryptpad.alert(Messages.common_connectionLost, undefined, true); }
-        };
-        var onReconnect = function (info) {
-            setEditable(true);
-            if (APP.refresh) { APP.refresh(); }
-            APP.toolbar.reconnecting(info.myId);
-            Cryptpad.findOKButton().click();
-        };
-
-        if (storeObj && !window.location.hash) {
-            onCreate(storeObj.info);
-            onReady();
-        } else {
-            proxy.on('create', function (info) {
-                onCreate(info);
-            }).on('ready', function () {
-                onReady();
-            });
-        }
-        proxy.on('disconnect', function () {
-            onDisconnect();
-        });
-        proxy.on('reconnect', function (info) {
-            onReconnect(info);
-        });
-
-        Cryptpad.onLogout(function () { setEditable(false); });
-    });
-    Cryptpad.onError(function (info) {
-        if (info) {
-            onConnectError();
-        }
-    });
+        }, function (err) { console.error(err); });
     });
 });
diff --git a/www/drive/tests.js b/www/drive/tests.js
index 5861e5410..eaae78e13 100644
--- a/www/drive/tests.js
+++ b/www/drive/tests.js
@@ -243,6 +243,7 @@ define([
         }, "DRIVE4: migration and fixFiles with a pad in trash not root");
 
         // Pad attributes migration
+/*
         assert(function (cb) {
             console.log('START PAD ATTRIBUTES');
             var files = JSON.parse(JSON.stringify(example));
@@ -253,6 +254,7 @@ define([
             return cb(files.filesData[id1].userid === 'value'
                         && files.filesData[id1].previewMode);
         }, "PAD ATTRIBUTES");
+*/
 
         // userObject Tests
 
diff --git a/www/file/inner.html b/www/file/inner.html
index 90137b8b0..3b3ede8fc 100644
--- a/www/file/inner.html
+++ b/www/file/inner.html
@@ -2,7 +2,7 @@
 <html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/file/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/file/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style>
         .loading-hidden { display: none; }
         #editor1 { display: none; }
diff --git a/www/filepicker/inner.html b/www/filepicker/inner.html
index 3465a8546..8090d7abc 100644
--- a/www/filepicker/inner.html
+++ b/www/filepicker/inner.html
@@ -2,10 +2,10 @@
 <html style="height: 100%; background: transparent;">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/filepicker/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/filepicker/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style>
         .loading-hidden { display: none; }
-        body #loading {
+        body #cp-loading {
             position: absolute;
             top: 15vh;
             bottom: 15vh;
@@ -14,10 +14,10 @@
             z-index: 200000;
             overflow: hidden;
         }
-        body #loading .loadingContainer {
+        body #cp-loading .cp-loading-container {
             margin-top: 35vh;
         }
-        body #loading .cryptofist {
+        body #cp-loading .cp-loading-cryptofist {
             display: none;
         }
     </style>
diff --git a/www/drive/file.less b/www/olddrive/file.less
similarity index 99%
rename from www/drive/file.less
rename to www/olddrive/file.less
index 42019501f..729368af3 100644
--- a/www/drive/file.less
+++ b/www/olddrive/file.less
@@ -1,5 +1,6 @@
 @import "/customize/src/less/variables.less";
 @import "/customize/src/less/mixins.less";
+@import (once) "/customize/src/less2/include/tools.less";
 
 @tree-bg: #eee;
 @tree-fg: #000;
@@ -267,7 +268,7 @@ span {
         input {
             background: lighten(@toolbar-drive-bg, 8%);
             color: @toolbar-drive-color;
-            .placeholderColor(@toolbar-drive-color);
+            .tools_placeholder-color(@toolbar-drive-color);
             outline-width: 0px;
             border-radius: 0;
             width: 100%;
diff --git a/www/olddrive/index.html b/www/olddrive/index.html
new file mode 100644
index 000000000..02f92a5b3
--- /dev/null
+++ b/www/olddrive/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="cp">
+<head>
+    <title>CryptDrive</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #pad-iframe {
+            position:fixed;
+            top:0;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+    </style>
+</head>
+<body>
+    <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
diff --git a/www/olddrive/inner.html b/www/olddrive/inner.html
new file mode 100644
index 000000000..0b26aa7a1
--- /dev/null
+++ b/www/olddrive/inner.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script async data-bootload="/drive/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body style="display: none;">
+    <div id="toolbar" class="toolbar-container"></div>
+    <div class="app-container" tabindex="0">
+        <div id="tree">
+        </div>
+        <div id="rightCol">
+            <div id="driveToolbar"></div>
+            <div id="content" tabindex="2"></div>
+        </div>
+        <div id="treeContextMenu" class="contextMenu dropdown clearfix unselectable">
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
+                <li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
+                <li><a tabindex="-1" data-icon="fa-trash" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+            </ul>
+        </div>
+        <div id="contentContextMenu" class="contextMenu dropdown clearfix unselectable">
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
+                <li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-word-o" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-code-o" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
+                <li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
+                <li><a tabindex="-1" data-icon="fa-calendar" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
+                <li><a tabindex="-1" data-icon="fa-paint-brush" class="newdoc own editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li>
+            </ul>
+        </div>
+        <div id="defaultContextMenu" class="contextMenu dropdown clearfix unselectable">
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
+                <li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" data-icon="fa-trash" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+            </ul>
+        </div>
+        <div id="trashTreeContextMenu" class="contextMenu dropdown clearfix unselectable">
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
+                <li><a tabindex="-1" data-icon="fa-trash-o" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
+            </ul>
+        </div>
+        <div id="trashContextMenu" class="contextMenu dropdown clearfix unselectable">
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
+                <li><a tabindex="-1" data-icon="fa-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
+                <li><a tabindex="-1" data-icon="fa-repeat" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
+                <li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
+
diff --git a/www/olddrive/inner.js b/www/olddrive/inner.js
new file mode 100644
index 000000000..e1779778b
--- /dev/null
+++ b/www/olddrive/inner.js
@@ -0,0 +1,7 @@
+define([
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/drive/file.less',
+    'less!/customize/src/less/cryptpad.less',
+    'less!/customize/src/less/toolbar.less',
+], function () {});
diff --git a/www/olddrive/main.js b/www/olddrive/main.js
new file mode 100644
index 000000000..d7766b75f
--- /dev/null
+++ b/www/olddrive/main.js
@@ -0,0 +1,3027 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-listmap/chainpad-listmap.js',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.amd.js',
+    'json.sortify',
+    '/common/cryptpad-common.js',
+    '/common/userObject.js',
+    '/common/toolbar2.js',
+    '/customize/application_config.js',
+    '/common/cryptget.js',
+    '/common/mergeDrive.js',
+
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less',
+], function ($, Listmap, Crypto, TextPatcher, JSONSortify, Cryptpad, FO, Toolbar, AppConfig, Get, Merge) {
+    var module = window.MODULE = {};
+
+    var Messages = Cryptpad.Messages;
+    //var saveAs = window.saveAs;
+
+    // Use `$(function () {});` to make sure the html is loaded before doing anything else
+    $(function () {
+    var ifrw = $('#pad-iframe')[0].contentWindow;
+
+    Cryptpad.addLoadingScreen();
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+
+    var APP = window.APP = {
+        editable: false,
+        Cryptpad: Cryptpad,
+        loggedIn: Cryptpad.isLoggedIn(),
+        mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles
+    };
+
+    var stringify = APP.stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var E_OVER_LIMIT = 'E_OVER_LIMIT';
+
+    var SEARCH = "search";
+    var SEARCH_NAME = Messages.fm_searchName;
+    var ROOT = "root";
+    var ROOT_NAME = Messages.fm_rootName;
+    var FILES_DATA = Cryptpad.storageKey;
+    var FILES_DATA_NAME = Messages.fm_filesDataName;
+    var TEMPLATE = "template";
+    var TEMPLATE_NAME = Messages.fm_templateName;
+    var TRASH = "trash";
+    var TRASH_NAME = Messages.fm_trashName;
+    var RECENT = "recent";
+    var RECENT_NAME = Messages.fm_recentPadsName;
+
+    var LOCALSTORAGE_LAST = "cryptpad-file-lastOpened";
+    var LOCALSTORAGE_OPENED = "cryptpad-file-openedFolders";
+    var LOCALSTORAGE_VIEWMODE = "cryptpad-file-viewMode";
+    var FOLDER_CONTENT_ID = "folderContent";
+
+    var config = {};
+    var DEBUG = config.DEBUG = true;
+    var debug = config.debug = DEBUG ? function () {
+        console.log.apply(console, arguments);
+    } : function () { return; };
+    var logError = config.logError = function () {
+        console.error.apply(console, arguments);
+    };
+    var log = config.log = Cryptpad.log;
+
+    var getLastOpenedFolder = function () {
+        var path;
+        try {
+            path = localStorage[LOCALSTORAGE_LAST] ? JSON.parse(localStorage[LOCALSTORAGE_LAST]) : [ROOT];
+        } catch (e) {
+            path = [ROOT];
+        }
+        return path;
+    };
+    var setLastOpenedFolder = function (path) {
+        if (path[0] === SEARCH) { return; }
+        localStorage[LOCALSTORAGE_LAST] = JSON.stringify(path);
+    };
+
+    var initLocalStorage = function () {
+        try {
+            var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
+            if (!$.isArray(store)) {
+                localStorage[LOCALSTORAGE_OPENED] = '[]';
+            }
+        } catch (e) {
+            localStorage[LOCALSTORAGE_OPENED] = '[]';
+        }
+    };
+
+    var wasFolderOpened = function (path) {
+        var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
+        return store.indexOf(JSON.stringify(path)) !== -1;
+    };
+    var setFolderOpened = function (path, opened) {
+        var s = JSON.stringify(path);
+        var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]);
+        if (opened && store.indexOf(s) === -1) {
+            store.push(s);
+        }
+        if (!opened) {
+            var idx = store.indexOf(s);
+            if (idx !== -1) {
+                store.splice(idx, 1);
+            }
+        }
+        localStorage[LOCALSTORAGE_OPENED] = JSON.stringify(store);
+    };
+
+    var getViewModeClass = function () {
+        var mode = localStorage[LOCALSTORAGE_VIEWMODE];
+        if (mode === 'list') { return 'list'; }
+        return 'grid';
+    };
+    var getViewMode = function () {
+        return localStorage[LOCALSTORAGE_VIEWMODE] || 'grid';
+    };
+    var setViewMode = function (mode) {
+        if (typeof(mode) !== "string") {
+            logError("Incorrect view mode: ", mode);
+            return;
+        }
+        localStorage[LOCALSTORAGE_VIEWMODE] = mode;
+    };
+
+    var setSearchCursor = function () {
+        var $input = APP.$iframe.find('#searchInput');
+        localStorage.searchCursor = $input[0].selectionStart;
+    };
+    var getSearchCursor = function () {
+        return localStorage.searchCursor || 0;
+    };
+
+/*  var now = function () {
+        return new Date().getTime();
+    }; */
+
+    var setEditable = function (state) {
+        APP.editable = state;
+        if (!state) {
+            APP.$iframe.find('#content').addClass('readonly');
+            APP.$iframe.find('[draggable="true"]').attr('draggable', false);
+        }
+        else {
+            APP.$iframe.find('#content').removeClass('readonly');
+            APP.$iframe.find('[draggable="false"]').attr('draggable', true);
+        }
+    };
+
+    // Icons
+    var $folderIcon = $('<span>', {"class": "fa fa-folder folder icon"});
+    //var $folderIcon = $('<img>', {src: "/customize/images/icons/folder.svg", "class": "folder icon"});
+    var $folderEmptyIcon = $folderIcon.clone();
+    var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
+    //var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
+    var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
+    //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
+    var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
+    var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
+    var $recentIcon = $('<span>', {"class": "fa fa-clock-o"});
+    var $trashIcon = $('<span>', {"class": "fa fa-trash"});
+    var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
+    //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
+    var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
+    var $emptyTrashIcon = $('<button>', {"class": "fa fa-ban"});
+    var $listIcon = $('<button>', {"class": "fa fa-list"});
+    var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
+    var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
+    var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
+    var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
+    var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
+    var $searchIcon = $('<span>', {"class": "fa fa-search searchIcon"});
+    var $addIcon = $('<span>', {"class": "fa fa-plus"});
+    var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
+    var $readonlyIcon = $('<span>', {"class": "fa fa-eye"});
+
+    var history = {
+        isHistoryMode: false,
+    };
+
+    var init = function (proxy) {
+        var files = proxy.drive;
+        var isOwnDrive = function () {
+            return Cryptpad.getUserHash() === APP.hash || localStorage.FS_hash === APP.hash;
+        };
+        var isWorkgroup = function () {
+            return files.workgroup === 1;
+        };
+        config.workgroup = isWorkgroup();
+        config.Cryptpad = Cryptpad;
+
+        var $iframe = APP.$iframe;
+
+        var filesOp = FO.init(files, config);
+        filesOp.fixFiles();
+
+        var error = filesOp.error;
+
+        var $tree = $iframe.find("#tree");
+        var $content = $iframe.find("#content");
+        var $appContainer = $iframe.find(".app-container");
+        var $driveToolbar = $iframe.find("#driveToolbar");
+        var $contextMenu = $iframe.find("#treeContextMenu");
+        var $contentContextMenu = $iframe.find("#contentContextMenu");
+        var $defaultContextMenu = $iframe.find("#defaultContextMenu");
+        var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu");
+        var $trashContextMenu = $iframe.find("#trashContextMenu");
+
+        $tree.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        $driveToolbar.on('drop dragover', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+
+
+        // TOOLBAR
+
+        /* add a "change username" button */
+        if (!APP.readOnly) {
+            Cryptpad.getLastName(function (err, lastName) {
+                APP.$displayName.text(lastName || Messages.anonymous);
+            });
+        } else {
+            APP.$displayName.html('<span class="' + Toolbar.constants.readonly + '">' + Messages.readonly + '</span>');
+        }
+
+        // FILE MANAGER
+        // _WORKGROUP_ and other people drive : display Documents as main page
+        var currentPath = module.currentPath = isOwnDrive() ? getLastOpenedFolder() : [ROOT];
+
+        // Categories dislayed in the menu
+        // _WORKGROUP_ : do not display unsorted
+        var displayedCategories = [ROOT, TRASH, SEARCH, RECENT];
+        if (AppConfig.enableTemplates) { displayedCategories.push(TEMPLATE); }
+        if (isWorkgroup()) { displayedCategories = [ROOT, TRASH, SEARCH]; }
+        var virtualCategories = [SEARCH, RECENT];
+
+        if (!APP.loggedIn) {
+            displayedCategories = [FILES_DATA];
+            currentPath = [FILES_DATA];
+            $tree.hide();
+            if (Object.keys(files.root).length && !proxy.anonymousAlert) {
+                Cryptpad.alert(Messages.fm_alert_anonymous, null, true);
+                proxy.anonymousAlert = true;
+            }
+        }
+
+        if (!APP.readOnly) {
+            setEditable(true);
+        }
+        var appStatus = {
+            isReady: true,
+            _onReady: [],
+            onReady: function (handler) {
+                if (appStatus.isReady) {
+                    handler();
+                    return;
+                }
+                appStatus._onReady.push(handler);
+            },
+            ready: function (state) {
+                appStatus.isReady = state;
+                if (state) {
+                    appStatus._onReady.forEach(function (h) {
+                        h();
+                    });
+                    appStatus._onReady = [];
+                }
+            }
+        };
+
+        var findDataHolder = function ($el) {
+            return $el.is('.element-row') ? $el : $el.closest('.element-row');
+        };
+
+
+        // Selection
+        var sel = {};
+
+        var removeSelected =  function (keepObj) {
+            $iframe.find('.selected').removeClass("selected");
+            var $container = $driveToolbar.find('#contextButtonsContainer');
+            if (!$container.length) { return; }
+            $container.html('');
+            if (!keepObj) {
+                delete sel.startSelected;
+                delete sel.endSelected;
+                delete sel.oldSelection;
+            }
+        };
+
+        sel.refresh = 200;
+        sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
+        var checkSelected = function () {
+            if (!sel.down) { return; }
+            var pos = sel.pos;
+            var l = $content[0].querySelectorAll('.element:not(.selected):not(.header)');
+            var p, el;
+            var offset = getViewMode() === "grid" ? 10 : 0;
+            for (var i = 0; i < l.length; i++) {
+                el = l[i];
+                p = $(el).position();
+                p.top += offset + $content.scrollTop();
+                p.left += offset;
+                p.bottom = p.top + $(el).outerHeight();
+                p.right = p.left + $(el).outerWidth();
+                if (p.right < pos.left || p.left > pos.right
+                    || p.top > pos.bottom || p.bottom < pos.top) {
+                    $(el).removeClass('selectedTmp');
+                } else {
+                    $(el).addClass('selectedTmp');
+                }
+            }
+        };
+        $content.on('mousedown', function (e) {
+            if (currentPath[0] === SEARCH) { return; }
+            if (e.which !== 1) { return; }
+            $content.focus();
+            sel.down = true;
+            if (!e.ctrlKey) { removeSelected(); }
+            var rect = e.currentTarget.getBoundingClientRect();
+            sel.startX = e.clientX - rect.left;
+            sel.startY = e.clientY - rect.top + $content.scrollTop();
+            sel.$selectBox.show().css({
+                left: sel.startX + 'px',
+                top: sel.startY + 'px',
+                width: '0px',
+                height: '0px'
+            });
+            module.hideMenu(e);
+            if (sel.move) { return; }
+            sel.move = function (ev) {
+                var rectMove = ev.currentTarget.getBoundingClientRect(),
+                    offX = ev.clientX - rectMove.left,
+                    offY = ev.clientY - rectMove.top + $content.scrollTop();
+
+
+                var left = sel.startX,
+                    top = sel.startY;
+                var width = offX - sel.startX;
+                if (width < 0) {
+                    left = Math.max(0, offX);
+                    var diffX = left-offX;
+                    width = Math.abs(width) - diffX;
+                }
+                var height = offY - sel.startY;
+                if (height < 0) {
+                    top = Math.max(0, offY);
+                    var diffY = top-offY;
+                    height = Math.abs(height) - diffY;
+                }
+                sel.$selectBox.css({
+                    width: width + 'px',
+                    left: left + 'px',
+                    height: height + 'px',
+                    top: top + 'px'
+                });
+
+
+                sel.pos = {
+                    top: top,
+                    left: left,
+                    bottom: top + height,
+                    right: left + width
+                };
+                var diffT = sel.update ? +new Date() - sel.update : sel.refresh;
+                if (diffT < sel.refresh) {
+                    if (!sel.to) {
+                        sel.to = window.setTimeout(function () {
+                            sel.update = +new Date();
+                            checkSelected();
+                            sel.to = undefined;
+                        }, (sel.refresh - diffT));
+                    }
+                    return;
+                }
+                sel.update = +new Date();
+                checkSelected();
+            };
+            $content.mousemove(sel.move);
+        });
+        $(ifrw).on('mouseup', function (e) {
+            if (!sel.down) { return; }
+            if (e.which !== 1) { return; }
+            sel.down = false;
+            sel.$selectBox.hide();
+            $content.off('mousemove', sel.move);
+            delete sel.move;
+            $content.find('.selectedTmp').removeClass('selectedTmp').addClass('selected');
+            e.stopPropagation();
+        });
+
+        // Arrow keys to modify the selection
+        $(ifrw).keydown(function (e) {
+            var $searchBar = $tree.find('#searchInput');
+            if ($searchBar.is(':focus') && $searchBar.val()) { return; }
+
+            var $elements = $content.find('.element:not(.header)');
+
+            var ev = {};
+            if (e.ctrlKey) { ev.ctrlKey = true; }
+            if (e.shiftKey) { ev.shiftKey = true; }
+            var click = function (el) {
+                if (!el) { return; }
+                module.onElementClick(ev, $(el));
+            };
+
+            // Enter
+            if (e.which === 13) {
+                var $allSelected = $content.find('.element.selected');
+                if ($allSelected.length === 1) {
+                    // Open the folder or the file
+                    $allSelected.dblclick();
+                    return;
+                }
+                // If more than one, open only the files
+                var $select = $content.find('.file-element.selected');
+                $select.each(function (idx, el) {
+                    $(el).dblclick();
+                });
+                return;
+            }
+
+            // [Left, Up, Right, Down]
+            if ([37, 38, 39, 40].indexOf(e.which) === -1) { return; }
+            e.preventDefault();
+
+            var $selection = $content.find('.element.selected');
+            if ($selection.length === 0) { return void click($elements.first()[0]); }
+
+            var lastIndex = typeof sel.endSelected === "number" ? sel.endSelected :
+                            typeof sel.startSelected === "number" ? sel.startSelected :
+                            $elements.index($selection.last()[0]);
+            var length = $elements.length;
+            if (length === 0) { return; }
+            // List mode
+            if (getViewMode() === "list") {
+                if (e.which === 40) { click($elements.get(Math.min(lastIndex+1, length -1))); }
+                if (e.which === 38) { click($elements.get(Math.max(lastIndex-1, 0))); }
+                return;
+            }
+
+            // Icon mode
+            // Get the vertical and horizontal position of lastIndex
+            // Filter all the elements to get those in the same line/column
+            var pos = $($elements.get(0)).position();
+            var $line = $elements.filter(function (idx, el) {
+                return $(el).position().top === pos.top;
+            });
+            var cols = $line.length;
+            var lines = Math.ceil(length/cols);
+
+            var lastPos = {
+                l : Math.floor(lastIndex/cols),
+                c : lastIndex - Math.floor(lastIndex/cols)*cols
+            };
+
+            if (e.which === 37) {
+                if (lastPos.c === 0) { return; }
+                click($elements.get(Math.max(lastIndex-1, 0)));
+                return;
+            }
+            if (e.which === 38) {
+                if (lastPos.l === 0) { return; }
+                click($elements.get(Math.max(lastIndex-cols, 0)));
+                return;
+            }
+            if (e.which === 39) {
+                if (lastPos.c === cols-1) { return; }
+                click($elements.get(Math.min(lastIndex+1, length-1)));
+                return;
+            }
+            if (e.which === 40) {
+                if (lastPos.l === lines-1) { return; }
+                click($elements.get(Math.min(lastIndex+cols, length-1)));
+                return;
+            }
+
+        });
+
+
+        var removeInput =  function (cancel) {
+            if (!cancel && $iframe.find('.element-row > input').length === 1) {
+                var $input = $iframe.find('.element-row > input');
+                filesOp.rename($input.data('path'), $input.val(), APP.refresh);
+            }
+            $iframe.find('.element-row > input').remove();
+            $iframe.find('.element-row > span:hidden').removeAttr('style');
+        };
+
+        var compareDays = function (date1, date2) {
+            var day1 = Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate());
+            var day2 = Date.UTC(date2.getFullYear(), date2.getMonth(), date2.getDate());
+            var ms = Math.abs(day1-day2);
+            return Math.floor(ms/1000/60/60/24);
+        };
+
+        var getDate = function (sDate) {
+            if (!sDate) { return ''; }
+            var ret = sDate.toString();
+            try {
+                var date = new Date(sDate);
+                var today = new Date();
+                var diff = compareDays(date, today);
+                if (diff === 0) {
+                    ret = date.toLocaleTimeString();
+                } else {
+                    ret = date.toLocaleDateString();
+                }
+            } catch (e) {
+                error("Unable to format that string to a date with .toLocaleString", sDate, e);
+            }
+            return ret;
+        };
+
+        var openFile = function (el, href) {
+            if (!href) {
+                var data = filesOp.getFileData(el);
+                if (!data || !data.href) {
+                    return void logError("Missing data for the file", el, data);
+                }
+                href = data.href;
+            }
+            window.open(href);
+        };
+
+        var refresh = APP.refresh = function () {
+            module.displayDirectory(currentPath);
+        };
+
+        var getFileNameExtension = function (name) {
+            var matched = /\.\S+$/.exec(name);
+            if (matched && matched.length) { return matched[matched.length -1]; }
+            return '';
+        };
+
+        // Replace a file/folder name by an input to change its value
+        var displayRenameInput = function ($element, path) {
+            // NOTE: setTimeout(f, 0) otherwise the "rename" button in the toolbar is not working
+            window.setTimeout(function () {
+                if (!APP.editable) { return; }
+                if (!path || path.length < 2) {
+                    logError("Renaming a top level element (root, trash or filesData) is forbidden.");
+                    return;
+                }
+                removeInput();
+                removeSelected();
+                var $name = $element.find('.name');
+                if (!$name.length) {
+                    $name = $element.find('> .element');
+                }
+                $name.hide();
+                var el = filesOp.find(path);
+                var name = filesOp.isFile(el) ? filesOp.getTitle(el)  : path[path.length - 1];
+                var $input = $('<input>', {
+                    placeholder: name,
+                    value: name
+                }).data('path', path);
+
+
+                // Stop propagation on keydown to avoid issues with arrow keys
+                $input.on('keydown', function (e) { e.stopPropagation(); });
+
+                $input.on('keyup', function (e) {
+                    if (e.which === 13) {
+                        removeInput(true);
+                        filesOp.rename(path, $input.val(), refresh);
+                        return;
+                    }
+                    if (e.which === 27) {
+                        removeInput(true);
+                    }
+                });
+                //$element.parent().append($input);
+                $name.after($input);
+                $input.focus();
+
+                var extension = getFileNameExtension(name);
+                var input = $input[0];
+                input.selectionStart = 0;
+                input.selectionEnd = name.length - extension.length;
+
+                // We don't want to open the file/folder when clicking on the input
+                $input.on('click dblclick', function (e) {
+                    removeSelected();
+                    e.stopPropagation();
+                });
+                // Remove the browser ability to drag text from the input to avoid
+                // triggering our drag/drop event handlers
+                $input.on('dragstart dragleave drag drop', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+                // Make the parent element non-draggable when selecting text in the field
+                // since it would remove the input
+                $input.on('mousedown', function (e) {
+                    e.stopPropagation();
+                    $input.parents('.element-row').attr("draggable", false);
+                });
+                $input.on('mouseup', function (e) {
+                    e.stopPropagation();
+                    $input.parents('.element-row').attr("draggable", true);
+                });
+            },0);
+        };
+
+        var filterContextMenu = function ($menu, paths) {
+            //var path = $element.data('path');
+            if (!paths || paths.length === 0) { logError('no paths'); }
+
+            var hide = [];
+            var hasFolder = false;
+            paths.forEach(function (p) {
+                var path = p.path;
+                var $element = p.element;
+                if (path.length === 1) {
+                    hide.push($menu.find('a.rename'));
+                    hide.push($menu.find('a.delete'));
+                }
+                if (!APP.editable) {
+                    hide.push($menu.find('a.editable'));
+                }
+                if (!isOwnDrive()) {
+                    hide.push($menu.find('a.own'));
+                }
+                if ($element.is('.file-element')) {
+                    // No folder in files
+                    hide.push($menu.find('a.newfolder'));
+                    if ($element.is('.readonly')) {
+                        // Keep only open readonly
+                        hide.push($menu.find('a.open'));
+                    } else if ($element.is('.noreadonly')) {
+                        // Keep only open readonly
+                        hide.push($menu.find('a.open_ro'));
+                    }
+                } else {
+                    if (hasFolder) {
+                        // More than 1 folder selected: cannot create a new subfolder
+                        hide.push($menu.find('a.newfolder'));
+                    }
+                    hasFolder = true;
+                    hide.push($menu.find('a.open_ro'));
+                    hide.push($menu.find('a.properties'));
+                }
+                // If we're in the trash, hide restore and properties for non-root elements
+                if ($menu.find('a.restore').length && path && path.length > 4) {
+                    hide.push($menu.find('a.restore'));
+                    hide.push($menu.find('a.properties'));
+                }
+            });
+            if (paths.length > 1) {
+                hide.push($menu.find('a.restore'));
+                hide.push($menu.find('a.properties'));
+                hide.push($menu.find('a.rename'));
+            }
+            if (hasFolder && paths.length > 1) {
+                // Cannot open multiple folders
+                hide.push($menu.find('a.open'));
+            }
+            return hide;
+        };
+
+        var getSelectedPaths = function ($element) {
+            var paths = [];
+            if ($iframe.find('.selected').length > 1) {
+                var $selected = $iframe.find('.selected');
+                $selected.each(function (idx, elmt) {
+                    var ePath = $(elmt).data('path');
+                    if (ePath) {
+                        paths.push({
+                            path: ePath,
+                            element: $(elmt)
+                        });
+                    }
+                });
+            }
+
+            if (!paths.length) {
+                var path = $element.data('path');
+                if (!path) { return false; }
+                paths.push({
+                    path: path,
+                    element: $element
+                });
+            }
+            return paths;
+        };
+
+        var updateContextButton = function () {
+            if (filesOp.isPathIn(currentPath, [TRASH])) {
+                $driveToolbar.find('cp-app-drive-toolbar-emptytrash').show();
+            } else {
+                $driveToolbar.find('cp-app-drive-toolbar-emptytrash').hide();
+            }
+            var $li = $content.find('.selected');
+            if ($li.length === 0) {
+                $li = findDataHolder($tree.find('.active'));
+            }
+            var $button = $driveToolbar.find('#contextButton');
+            if ($button.length) { // mobile
+                if ($li.length !== 1
+                    || !$._data($li[0], 'events').contextmenu
+                    || $._data($li[0], 'events').contextmenu.length === 0) {
+                    $button.hide();
+                    return;
+                }
+                $button.show();
+                $button.css({
+                    background: '#000'
+                });
+                window.setTimeout(function () {
+                    $button.css({
+                        background: ''
+                    });
+                }, 500);
+                return;
+            }
+            // Non mobile
+            var $container = $driveToolbar.find('#contextButtonsContainer');
+            if (!$container.length) { return; }
+            $container.html('');
+            var $element = $li.length === 1 ? $li : $($li[0]);
+            var paths = getSelectedPaths($element);
+            var $menu = $element.data('context');
+            if (!$menu) { return; }
+            //var actions = [];
+            var $actions = $menu.find('a');
+            var toHide = filterContextMenu($menu, paths);
+            $actions = $actions.filter(function (i, el) {
+                for (var j = 0; j < toHide.length; j++) {
+                    if ($(el).is(toHide[j])) { return false; }
+                }
+                return true;
+            });
+            $actions.each(function (i, el) {
+                var $a = $('<button>', {'class': 'element'});
+                if ($(el).attr('data-icon')) {
+                    $a.addClass('fa').addClass($(el).attr('data-icon'));
+                    $a.attr('title', $(el).text());
+                } else {
+                    $a.text($(el).text());
+                }
+                $(el).data('paths', paths);
+                //$(el).data('path', path);
+                //:$(el).data('element', $element);
+                $container.append($a);
+                $a.click(function() { $(el).click(); });
+            });
+        };
+
+        var scrollTo = function ($element) {
+            // Current scroll position
+            var st = $content.scrollTop();
+            // Block height
+            var h = $content.height();
+            // Current top position of the element relative to the scroll position
+            var pos = Math.round($element.offset().top - $content.position().top);
+            // Element height
+            var eh = $element.outerHeight();
+            // New scroll value
+            var v = st + pos + eh - h;
+            // If the element is completely visile, don't change the scroll position
+            if (pos+eh <= h && pos >= 0) { return; }
+            $content.scrollTop(v);
+        };
+        // Add the "selected" class to the "li" corresponding to the clicked element
+        var onElementClick = module.onElementClick = function (e, $element) {
+            // If "Ctrl" is pressed, do not remove the current selection
+            removeInput();
+            $element = findDataHolder($element);
+            // If we're selecting a new element with the left click, hide the menu
+            if (e) { module.hideMenu(); }
+            // Remove the selection if we don't hold ctrl key or if we are right-clicking
+            if (!e || !e.ctrlKey) {
+                removeSelected(e && e.shiftKey);
+            }
+            if (!$element.length) {
+                log(Messages.fm_selectError);
+                return;
+            }
+            scrollTo($element);
+            // Add the selected class to the clicked / right-clicked element
+            // Remove the class if it already has it
+            // If ctrlKey, add to the selection
+            // If shiftKey, select a range of elements
+            var $elements = $content.find('.element:not(.header)');
+            var $selection = $elements.filter('.selected');
+            if (typeof sel.startSelected !== "number" || !e || (e.ctrlKey && !e.shiftKey)) {
+                sel.startSelected = $elements.index($element[0]);
+                sel.oldSelection = [];
+                $selection.each(function (idx, el) {
+                    sel.oldSelection.push(el);
+                });
+                delete sel.endSelected;
+            }
+            if (e && e.shiftKey) {
+                var end = $elements.index($element[0]);
+                sel.endSelected = end;
+                var $el;
+                removeSelected(true);
+                sel.oldSelection.forEach(function (el) {
+                    if (!$(el).hasClass("selected")) { $(el).addClass("selected"); }
+                });
+                for (var i = Math.min(sel.startSelected, sel.endSelected);
+                     i <= Math.max(sel.startSelected, sel.endSelected);
+                     i++) {
+                    $el = $($elements.get(i));
+                    if (!$el.hasClass("selected")) { $el.addClass("selected"); }
+                }
+            } else {
+                if (!$element.hasClass("selected")) {
+                    $element.addClass("selected");
+                } else {
+                    $element.removeClass("selected");
+                }
+            }
+            updateContextButton();
+        };
+
+        var displayMenu = function (e, $menu) {
+            $menu.css({ display: "block" });
+            if (APP.mobile()) { return; }
+            var h = $menu.outerHeight();
+            var w = $menu.outerWidth();
+            var wH = window.innerHeight;
+            var wW = window.innerWidth;
+            if (h > wH) {
+                $menu.css({
+                    top: '0px',
+                    bottom: ''
+                });
+            } else if (e.pageY + h <= wH) {
+                $menu.css({
+                    top: e.pageY+'px',
+                    bottom: ''
+                });
+            } else {
+                $menu.css({
+                    bottom: '0px',
+                    top: ''
+                });
+            }
+            if(w > wW) {
+                $menu.css({
+                    left: '0px',
+                    right: ''
+                });
+            } else if (e.pageX + w <= wW) {
+                $menu.css({
+                    left: e.pageX+'px',
+                    right: ''
+                });
+            } else {
+                $menu.css({
+                    left: '',
+                    right: '0px',
+                });
+            }
+        };
+
+        // Open the selected context menu on the closest "li" element
+        var openContextMenu = function (e, $menu) {
+            module.hideMenu();
+            e.stopPropagation();
+
+            var $element = findDataHolder($(e.target));
+            if (!$element.length) {
+                logError("Unable to locate the .element tag", e.target);
+                $menu.hide();
+                log(Messages.fm_contextMenuError);
+                return false;
+            }
+
+            if (!$element.hasClass('selected')) { //paths.length === 1) {
+                onElementClick(undefined, $element);
+            }
+
+            var paths = getSelectedPaths($element);
+
+            var toHide = filterContextMenu($menu, paths);
+            toHide.forEach(function ($a) {
+                $a.parent('li').hide();
+            });
+
+            displayMenu(e, $menu);
+
+            if ($menu.find('li:visible').length === 0) {
+                debug("No visible element in the context menu. Abort.");
+                $menu.hide();
+                return true;
+            }
+
+            $menu.find('a').data('paths', paths);
+            //$menu.find('a').data('path', path);
+            //$menu.find('a').data('element', $element);
+            return false;
+        };
+
+        var openDirectoryContextMenu = function (e) {
+            $contextMenu.find('li').show();
+            openContextMenu(e, $contextMenu);
+            return false;
+        };
+
+        var openDefaultContextMenu = function (e) {
+            $defaultContextMenu.find('li').show();
+            openContextMenu(e, $defaultContextMenu);
+            return false;
+        };
+
+        var openTrashTreeContextMenu = function (e) {
+            removeSelected();
+            $trashTreeContextMenu.find('li').show();
+            openContextMenu(e, $trashTreeContextMenu);
+            return false;
+        };
+
+        var openTrashContextMenu = function (e) {
+            var path = findDataHolder($(e.target)).data('path');
+            if (!path) { return; }
+            $trashContextMenu.find('li').show();
+            openContextMenu(e, $trashContextMenu);
+            return false;
+        };
+
+        var openContentContextMenu = function (e) {
+            module.hideMenu();
+            e.stopPropagation();
+            var path = $(e.target).closest('#' + FOLDER_CONTENT_ID).data('path');
+            if (!path) { return; }
+            var $menu = $contentContextMenu;
+            removeSelected();
+
+            if (!APP.editable) {
+                $menu.find('a.editable').parent('li').hide();
+            }
+            if (!isOwnDrive()) {
+                $menu.find('a.own').parent('li').hide();
+            }
+
+            $menu.find('[data-type]').each(function (idx, el) {
+                if (AppConfig.availablePadTypes.indexOf($(el).attr('data-type')) === -1) {
+                    $(el).hide();
+                }
+            });
+
+            displayMenu(e, $menu);
+
+            if ($menu.find('li:visible').length === 0) {
+                debug("No visible element in the context menu. Abort.");
+                $menu.hide();
+                return true;
+            }
+
+            $menu.find('a').data('path', path);
+            return false;
+        };
+
+        var getElementName = function (path) {
+            var file = filesOp.find(path);
+            if (!file || !filesOp.isFile(file)) { return '???'; }
+            return filesOp.getTitle(file);
+        };
+        // filesOp.moveElements is able to move several paths to a new location, including
+        // the Trash or the "Unsorted files" folder
+        var moveElements = function (paths, newPath, force, cb) {
+            if (!APP.editable) { return; }
+            var andThen = function () {
+                filesOp.move(paths, newPath, cb);
+            };
+            // Cancel drag&drop from TRASH to TRASH
+            if (filesOp.isPathIn(newPath, [TRASH]) && paths.length && paths[0][0] === TRASH) {
+                return;
+            }
+            andThen();
+        };
+        // Drag & drop:
+        // The data transferred is a stringified JSON containing the path of the dragged element
+        var onDrag = function (ev, path) {
+            var paths = [];
+            var $element = findDataHolder($(ev.target));
+            if ($element.hasClass('selected')) {
+                var $selected = $iframe.find('.selected');
+                $selected.each(function (idx, elmt) {
+                    var ePath = $(elmt).data('path');
+                    if (ePath) {
+                        var val = filesOp.find(ePath);
+                        if (!val) { return; } // Error? A ".selected" element in not in the object
+                        paths.push({
+                            path: ePath,
+                            value: {
+                                name: getElementName(ePath),
+                                el: val
+                            }
+                        });
+                    }
+                });
+            } else {
+                removeSelected();
+                $element.addClass('selected');
+                var val = filesOp.find(path);
+                if (!val) { return; } // The element in not in the object
+                paths = [{
+                    path: path,
+                    value: {
+                        name: getElementName(path),
+                        el: val
+                    }
+                }];
+            }
+            var data = {
+                'path': paths
+            };
+            ev.dataTransfer.setData("text", stringify(data));
+        };
+
+        var onFileDrop = APP.onFileDrop = function (file, e) {
+            APP.FM.onFileDrop(file, e);
+        };
+        var findDropPath = function (target) {
+            var $target = $(target);
+            var $el = findDataHolder($target);
+            var newPath = $el.data('path');
+            if ((!newPath || filesOp.isFile(filesOp.find(newPath)))
+                    && $target.parents('#content')) {
+                newPath = currentPath;
+            }
+            return newPath;
+        };
+        var onDrop = function (ev) {
+            ev.preventDefault();
+            $iframe.find('.droppable').removeClass('droppable');
+            var data = ev.dataTransfer.getData("text");
+
+            // Don't the the normal drop handler for file upload
+            var fileDrop = ev.dataTransfer.files;
+            if (fileDrop.length) { return void onFileDrop(fileDrop, ev); }
+
+            var oldPaths = JSON.parse(data).path;
+            if (!oldPaths) { return; }
+            // Dropped elements can be moved from the same file manager or imported from another one.
+            // A moved element should be removed from its previous location
+            var movedPaths = [];
+            var importedElements = [];
+            oldPaths.forEach(function (p) {
+                var el = filesOp.find(p.path);
+                if (el && (stringify(el) === stringify(p.value.el) || !p.value || !p.value.el)) {
+                    movedPaths.push(p.path);
+                } else {
+                    importedElements.push(p.value);
+                }
+            });
+
+            var newPath = findDropPath(ev.target);
+            if (!newPath) { return; }
+            if (movedPaths && movedPaths.length) {
+                moveElements(movedPaths, newPath, null, refresh);
+            }
+            if (importedElements && importedElements.length) {
+                // TODO workgroup
+                //filesOp.importElements(importedElements, newPath, refresh);
+            }
+        };
+
+        var addDragAndDropHandlers = function ($element, path, isFolder, droppable) {
+            if (!APP.editable) { return; }
+            // "dragenter" is fired for an element and all its children
+            // "dragleave" may be fired when entering a child
+            // --> we use pointer-events: none in CSS, but we still need a counter to avoid some issues
+            // --> We store the number of enter/leave and the element entered and we remove the
+            // highlighting only when we have left everything
+            var counter = 0;
+            $element.on('dragstart', function (e) {
+                e.stopPropagation();
+                counter = 0;
+                onDrag(e.originalEvent, path);
+            });
+
+            $element.on('mousedown', function (e) {
+                e.stopPropagation();
+            });
+
+            // Add drop handlers if we are not in the trash and if the element is a folder
+            if (!droppable || !isFolder) { return; }
+
+            $element.on('dragover', function (e) {
+                e.preventDefault();
+            });
+            $element.on('drop', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                onDrop(e.originalEvent);
+            });
+            $element.on('dragenter', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                counter++;
+                $element.addClass('droppable');
+            });
+            $element.on('dragleave', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                counter--;
+                if (counter <= 0) {
+                    counter = 0;
+                    $element.removeClass('droppable');
+                }
+            });
+        };
+        addDragAndDropHandlers($content, null, true, true);
+
+        // In list mode, display metadata from the filesData object
+        // _WORKGROUP_ : Do not display title, atime and ctime columns since we don't have files data
+        var addFileData = function (element, $span) {
+            if (!filesOp.isFile(element)) { return; }
+
+            var data = filesOp.getFileData(element);
+            if (!data) { return void logError("No data for the file", element); }
+
+            var hrefData = Cryptpad.parsePadUrl(data.href);
+            var $state = $('<span>', {'class': 'state'});
+            if (hrefData.hashData && hrefData.hashData.mode === 'view') {
+                var $ro = $readonlyIcon.clone().appendTo($state);
+                $ro.attr('title', Messages.readonly);
+            }
+            if (data.filename && data.filename !== data.title) {
+                var $renamed = $renamedIcon.clone().appendTo($state);
+                $renamed.attr('title', Messages._getKey('fm_renamedPad', [data.title]));
+            }
+
+            var name = filesOp.getTitle(element);
+
+            // The element with the class '.name' is underlined when the 'li' is hovered
+            var $name = $('<span>', {'class': 'name'}).text(name);
+            $span.html('');
+            $span.append($name);
+            $span.append($state);
+
+            var type = Messages.type[hrefData.type] || hrefData.type;
+            var $type = $('<span>', {'class': 'type listElement'}).text(type);
+            var $adate = $('<span>', {'class': 'atime listElement'}).text(getDate(data.atime));
+            var $cdate = $('<span>', {'class': 'ctime listElement'}).text(getDate(data.ctime));
+            $span.append($type);
+            if (!isWorkgroup()) {
+                $span.append($adate).append($cdate);
+            }
+        };
+
+        var addFolderData = function (element, key, $span) {
+            if (!element || !filesOp.isFolder(element)) { return; }
+            $span.html('');
+            // The element with the class '.name' is underlined when the 'li' is hovered
+            var sf = filesOp.hasSubfolder(element);
+            var files = filesOp.hasFile(element);
+            var $name = $('<span>', {'class': 'name'}).text(key);
+            var $state = $('<span>', {'class': 'state'});
+            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(sf);
+            var $files = $('<span>', {'class': 'files listElement'}).text(files);
+            $span.append($name).append($state).append($subfolders).append($files);
+        };
+
+        // This is duplicated in cryptpad-common, it should be unified
+        var getFileIcon = function (id) {
+            var data = filesOp.getFileData(id);
+            return Cryptpad.getFileIcon(data);
+        };
+        var getIcon = Cryptpad.getIcon;
+
+        // Create the "li" element corresponding to the file/folder located in "path"
+        var createElement = function (path, elPath, root, isFolder) {
+            // Forbid drag&drop inside the trash
+            var isTrash = path[0] === TRASH;
+            var newPath = path.slice();
+            var key;
+            if (isTrash && Array.isArray(elPath)) {
+                key = elPath[0];
+                elPath.forEach(function (k) { newPath.push(k); });
+            } else {
+                key = elPath;
+                newPath.push(key);
+            }
+
+            var element = filesOp.find(newPath);
+            var $icon = !isFolder ? getFileIcon(element) : undefined;
+            var ro = filesOp.isReadOnlyFile(element);
+            // ro undefined means it's an old hash which doesn't support read-only
+            var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
+            var liClass = 'file-item file-element element' + roClass;
+            if (isFolder) {
+                liClass = 'folder-item folder-element element';
+                $icon = filesOp.isFolderEmpty(root[key]) ? $folderEmptyIcon.clone() : $folderIcon.clone();
+            }
+            var $element = $('<li>', {
+                draggable: true,
+                'class': 'element-row'
+            });
+            if (!isFolder && Array.isArray(APP.selectedFiles)) {
+                var idx = APP.selectedFiles.indexOf(element);
+                if (idx !== -1) {
+                    $element.addClass('selected');
+                    APP.selectedFiles.splice(idx, 1);
+                }
+            }
+            if (isFolder) {
+                addFolderData(element, key, $element);
+            } else {
+                addFileData(element, $element);
+            }
+            $element.prepend($icon).dblclick(function () {
+                if (isFolder) {
+                    module.displayDirectory(newPath);
+                    return;
+                }
+                if (isTrash) { return; }
+                openFile(root[key]);
+            });
+            $element.addClass(liClass);
+            $element.data('path', newPath);
+            addDragAndDropHandlers($element, newPath, isFolder, !isTrash);
+            $element.click(function(e) {
+                e.stopPropagation();
+                onElementClick(e, $element, newPath);
+            });
+            if (!isTrash) {
+                $element.contextmenu(openDirectoryContextMenu);
+                $element.data('context', $contextMenu);
+            } else {
+                $element.contextmenu(openTrashContextMenu);
+                $element.data('context', $trashContextMenu);
+            }
+            var isNewFolder = module.newFolder && filesOp.comparePath(newPath, module.newFolder);
+            if (isNewFolder) {
+                appStatus.onReady(function () {
+                    window.setTimeout(function () { displayRenameInput($element, newPath); }, 0);
+                });
+                delete module.newFolder;
+            }
+            return $element;
+        };
+
+        // Display the full path in the title when displaying a directory from the trash
+        /*
+        var getTrashTitle = function (path) {
+            if (!path[0] || path[0] !== TRASH) { return; }
+            var title = TRASH_NAME;
+            for (var i=1; i<path.length; i++) {
+                if (i === 3 && path[i] === 'element') {}
+                else if (i === 2 && parseInt(path[i]) === path[i]) {
+                    if (path[i] !== 0) {
+                        title += " [" + path[i] + "]";
+                    }
+                } else {
+                    title += " / " + path[i];
+                }
+            }
+            return title;
+        }; */
+
+        var getPrettyName = function (name) {
+            var pName;
+            switch (name) {
+                case ROOT: pName = ROOT_NAME; break;
+                case TRASH: pName = TRASH_NAME; break;
+                case TEMPLATE: pName = TEMPLATE_NAME; break;
+                case FILES_DATA: pName = FILES_DATA_NAME; break;
+                case SEARCH: pName = SEARCH_NAME; break;
+                case RECENT: pName = RECENT_NAME; break;
+                default: pName = name;
+            }
+            return pName;
+        };
+
+        // Create the title block with the "parent folder" button
+        var createTitle = function ($container, path, noStyle) {
+            if (!path || path.length === 0) { return; }
+            var isTrash = filesOp.isPathIn(path, [TRASH]);
+            if (APP.mobile() && !noStyle) { // noStyle means title in search result
+                return $container;
+            }
+            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
+            var el = isVirtual ? undefined : filesOp.find(path);
+            path = path[0] === SEARCH ? path.slice(0,1) : path;
+            path.forEach(function (p, idx) {
+                if (isTrash && [2,3].indexOf(idx) !== -1) { return; }
+
+                var name = p;
+
+                var $span = $('<span>', {'class': 'element'});
+                if (idx < path.length - 1) {
+                    if (!noStyle) {
+                        $span.addClass('clickable');
+                        $span.click(function () {
+                            var sliceEnd = idx + 1;
+                            if (isTrash && idx === 1) { sliceEnd = 4; } // Make sure we don't show the index or 'element' and 'path'
+                            module.displayDirectory(path.slice(0, sliceEnd));
+                        });
+                    }
+                } else if (idx > 0 && filesOp.isFile(el)) {
+                    name = getElementName(path);
+                }
+
+                if (idx === 0) { name = getPrettyName(p); }
+                else {
+                    var $span2 = $('<span>', {'class': 'element separator'}).text(' / ');
+                    $container.prepend($span2);
+                }
+
+                $span.text(name).prependTo($container);
+            });
+        };
+
+        var createInfoBox = function (path) {
+            var $box = $('<div>', {'class': 'info-box'});
+            var msg;
+            switch (path[0]) {
+                case ROOT:
+                    msg = Messages.fm_info_root;
+                    break;
+                case TEMPLATE:
+                    msg = Messages.fm_info_template;
+                    break;
+                case TRASH:
+                    msg = Messages.fm_info_trash;
+                    break;
+                case FILES_DATA:
+                    msg = Messages.fm_info_allFiles;
+                    break;
+                case RECENT:
+                    msg = Messages.fm_info_recent;
+                    break;
+                default:
+                    msg = undefined;
+            }
+            if (!APP.loggedIn) {
+                msg = Messages.fm_info_anonymous;
+                $box.html(msg);
+                $box.addClass('noclose');
+                return $box;
+            }
+            if (!msg || Cryptpad.getLSAttribute('hide-info-' + path[0]) === '1') {
+                $box.hide();
+            } else {
+                $box.text(msg);
+                var $close = $closeIcon.clone().css({
+                    'cursor': 'pointer',
+                    'margin-left': '10px',
+                    title: Messages.fm_closeInfoBox
+                }).on('click', function () {
+                    $box.hide();
+                    Cryptpad.setLSAttribute('hide-info-' + path[0], '1');
+                });
+                $box.prepend($close);
+            }
+            return $box;
+        };
+
+        // Create the button allowing the user to switch from list to icons modes
+        var createViewModeButton = function ($container) {
+            var $listButton = $listIcon.clone().addClass('element');
+            var $gridButton = $gridIcon.clone().addClass('element');
+
+            $listButton.click(function () {
+                $gridButton.removeClass('active');
+                $listButton.addClass('active');
+                setViewMode('list');
+                $iframe.find('#' + FOLDER_CONTENT_ID).removeClass('grid');
+                $iframe.find('#' + FOLDER_CONTENT_ID).addClass('list');
+                Cryptpad.feedback('DRIVE_LIST_MODE');
+            });
+            $gridButton.click(function () {
+                $listButton.removeClass('active');
+                $gridButton.addClass('active');
+                setViewMode('grid');
+                $iframe.find('#' + FOLDER_CONTENT_ID).addClass('grid');
+                $iframe.find('#' + FOLDER_CONTENT_ID).removeClass('list');
+                Cryptpad.feedback('DRIVE_GRID_MODE');
+            });
+
+            if (getViewMode() === 'list') {
+                $listButton.addClass('active');
+            } else {
+                $gridButton.addClass('active');
+            }
+            $listButton.attr('title', Messages.fm_viewListButton);
+            $gridButton.attr('title', Messages.fm_viewGridButton);
+            $container.append($listButton).append($gridButton);
+        };
+        var createEmptyTrashButton = function ($container) {
+            var $button = $emptyTrashIcon.clone().addClass('element');
+            $button.addClass('cp-app-drive-toolbar-emptytrash');
+            $button.attr('title', Messages.fc_empty);
+            $button.click(function () {
+                Cryptpad.confirm(Messages.fm_emptyTrashDialog, function(res) {
+                    if (!res) { return; }
+                    filesOp.emptyTrash(refresh);
+                });
+            });
+            $container.append($button);
+        };
+
+        var getNewPadTypes = function () {
+            var arr = [];
+            AppConfig.availablePadTypes.forEach(function (type) {
+                if (type === 'drive') { return; }
+                if (type === 'contacts') { return; }
+                if (type === 'todo') { return; }
+                if (type === 'file') { return; }
+                if (!Cryptpad.isLoggedIn() && AppConfig.registeredOnlyTypes &&
+                    AppConfig.registeredOnlyTypes.indexOf(type) !== -1) {
+                    return;
+                }
+                arr.push(type);
+            });
+            return arr;
+        };
+        var addNewPadHandlers = function ($block, isInRoot) {
+            // Handlers
+            if (isInRoot) {
+                var onCreated = function (err, info) {
+                    if (err) {
+                        if (err === E_OVER_LIMIT) {
+                            return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                        }
+                        return void Cryptpad.alert(Messages.fm_error_cantPin);
+                    }
+                    module.newFolder = info.newPath;
+                    refresh();
+                };
+                $block.find('a.newFolder, li.newFolder').click(function () {
+                    filesOp.addFolder(currentPath, null, onCreated);
+                });
+                $block.find('a.uploadFile, li.uploadFile').click(function () {
+                    var $input = $('<input>', {
+                        'type': 'file',
+                        'style': 'display: none;'
+                    }).on('change', function (e) {
+                        var file = e.target.files[0];
+                        var ev = {
+                            target: $content[0]
+                        };
+                        APP.FM.handleFile(file, ev);
+                    });
+                    $input.click();
+                });
+            }
+            $block.find('a.newdoc, li.newdoc').click(function () {
+                var type = $(this).attr('data-type') || 'pad';
+                sessionStorage[Cryptpad.newPadPathKey] = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
+                window.open('/' + type + '/');
+            });
+        };
+        var createNewButton = function (isInRoot, $container) {
+            if (!APP.editable) { return; }
+            if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
+
+            if (!filesOp.isPathIn(currentPath, [ROOT, 'hrefArray'])) { return; }
+
+            // Create dropdown
+            var options = [];
+            if (isInRoot) {
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'newFolder'},
+                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
+                });
+                options.push({tag: 'hr'});
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'uploadFile'},
+                    content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
+                });
+                options.push({tag: 'hr'});
+            }
+            getNewPadTypes().forEach(function (type) {
+                var attributes = {
+                    'class': 'newdoc',
+                    'data-type': type,
+                    'href': '#'
+                };
+                options.push({
+                    tag: 'a',
+                    attributes: attributes,
+                    content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
+                });
+            });
+            var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
+
+
+            var dropdownConfig = {
+                text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
+                options: options,
+                feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
+            };
+            var $block = Cryptpad.createDropdown(dropdownConfig);
+
+            // Custom style:
+            $block.find('button').addClass('new');
+            $block.find('button').attr('title', Messages.fm_newButtonTitle);
+
+            addNewPadHandlers($block, isInRoot);
+
+            $container.append($block);
+        };
+
+        var hideNewButton = function () {
+            $iframe.find('.cp-dropdown-content').hide();
+        };
+
+        var SORT_FOLDER_DESC = 'sortFoldersDesc';
+        var SORT_FILE_BY = 'sortFilesBy';
+        var SORT_FILE_DESC = 'sortFilesDesc';
+
+        var getSortFileDesc = function () {
+            return Cryptpad.getLSAttribute(SORT_FILE_DESC) === "true";
+        };
+        var getSortFolderDesc = function () {
+            return Cryptpad.getLSAttribute(SORT_FOLDER_DESC) === "true";
+        };
+
+        var onSortByClick = function () {
+            var $span = $(this);
+            var value;
+            if ($span.hasClass('foldername')) {
+                value = getSortFolderDesc();
+                Cryptpad.setLSAttribute(SORT_FOLDER_DESC, value ? false : true);
+                refresh();
+                return;
+            }
+            value = Cryptpad.getLSAttribute(SORT_FILE_BY);
+            var descValue = getSortFileDesc();
+            if ($span.hasClass('filename')) {
+                if (value === '') {
+                    descValue = descValue ? false : true;
+                } else {
+                    descValue = false;
+                    value = '';
+                }
+            } else {
+                var found = false;
+                ['title', 'type', 'atime', 'ctime'].forEach(function (c) {
+                    if (!found && $span.hasClass(c)) {
+                        found = true;
+                        if (value === c) { descValue = descValue ? false : true; }
+                        else {
+                            // atime and ctime should be ordered in a desc order at the first click
+                            descValue = c !== 'title';
+                            value = c;
+                        }
+                    }
+                });
+            }
+            Cryptpad.setLSAttribute(SORT_FILE_BY, value);
+            Cryptpad.setLSAttribute(SORT_FILE_DESC, descValue);
+            refresh();
+        };
+
+        var addFolderSortIcon = function ($list) {
+            var $icon = $sortAscIcon.clone();
+            if (getSortFolderDesc()) {
+                $icon = $sortDescIcon.clone();
+            }
+            if (typeof(Cryptpad.getLSAttribute(SORT_FOLDER_DESC)) !== "undefined") {
+                $list.find('.foldername').addClass('active').prepend($icon);
+            }
+        };
+        var getFolderListHeader = function () {
+            var $fohElement = $('<li>', {'class': 'header listElement'});
+            //var $fohElement = $('<span>', {'class': 'element'}).appendTo($folderHeader);
+            var $fhIcon = $('<span>', {'class': 'icon'});
+            var $name = $('<span>', {'class': 'name foldername clickable'}).text(Messages.fm_folderName).click(onSortByClick);
+            var $state = $('<span>', {'class': 'state'});
+            var $subfolders = $('<span>', {'class': 'folders listElement'}).text(Messages.fm_numberOfFolders);
+            var $files = $('<span>', {'class': 'files listElement'}).text(Messages.fm_numberOfFiles);
+            $fohElement.append($fhIcon).append($name).append($state)
+                        .append($subfolders).append($files);
+            addFolderSortIcon($fohElement);
+            return $fohElement;
+        };
+        var addFileSortIcon = function ($list) {
+            var $icon = $sortAscIcon.clone();
+            if (getSortFileDesc()) {
+                $icon = $sortDescIcon.clone();
+            }
+            var classSorted;
+            if (Cryptpad.getLSAttribute(SORT_FILE_BY) === '') { classSorted = 'filename'; }
+            else if (Cryptpad.getLSAttribute(SORT_FILE_BY)) { classSorted = Cryptpad.getLSAttribute(SORT_FILE_BY); }
+            if (classSorted) {
+                $list.find('.' + classSorted).addClass('active').prepend($icon);
+            }
+        };
+        // _WORKGROUP_ : do not display title, atime and ctime in workgroups since we don't have files data
+        var getFileListHeader = function () {
+            var $fihElement = $('<li>', {'class': 'file-header header listElement element'});
+            //var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader);
+            var $fhIcon = $('<span>', {'class': 'icon'});
+            var $fhName = $('<span>', {'class': 'name filename clickable'}).text(Messages.fm_fileName).click(onSortByClick);
+            var $fhState = $('<span>', {'class': 'state'});
+            var $fhType = $('<span>', {'class': 'type clickable'}).text(Messages.fm_type).click(onSortByClick);
+            var $fhAdate = $('<span>', {'class': 'atime clickable'}).text(Messages.fm_lastAccess).click(onSortByClick);
+            var $fhCdate = $('<span>', {'class': 'ctime clickable'}).text(Messages.fm_creation).click(onSortByClick);
+            // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
+            $fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType);
+            if (!isWorkgroup()) {
+                $fihElement.append($fhAdate).append($fhCdate);
+            }
+            addFileSortIcon($fihElement);
+            return $fihElement;
+        };
+
+        var sortElements = function (folder, path, oldkeys, prop, asc, useId) {
+            var root = filesOp.find(path);
+            var test = folder ? filesOp.isFolder : filesOp.isFile;
+            var keys = oldkeys.filter(function (e) {
+                return useId ? test(e) : test(root[e]);
+            });
+            if (keys.length < 2) { return keys; }
+            var mult = asc ? 1 : -1;
+            var getProp = function (el, prop) {
+                if (folder) { return el.toLowerCase(); }
+                var id = useId ? el : root[el];
+                var data = filesOp.getFileData(id);
+                if (!data) { return ''; }
+                if (prop === 'type') {
+                    var hrefData = Cryptpad.parsePadUrl(data.href);
+                    return hrefData.type;
+                }
+                if (prop === 'atime' || prop === 'ctime') {
+                    return new Date(data[prop]);
+                }
+                return (filesOp.getTitle(id) || "").toLowerCase();
+            };
+            keys.sort(function(a, b) {
+                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
+                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
+                return 0;
+            });
+            return keys;
+        };
+        var sortTrashElements = function (folder, oldkeys, prop, asc) {
+            var test = folder ? filesOp.isFolder : filesOp.isFile;
+            var keys = oldkeys.filter(function (e) {
+                return test(e.element);
+            });
+            if (keys.length < 2) { return keys; }
+            var mult = asc ? 1 : -1;
+            var getProp = function (el, prop) {
+                if (prop && !folder) {
+                    var element = el.element;
+                    var e = filesOp.getFileData(element);
+                    if (!e) {
+                        e = {
+                            href : el,
+                            title : Messages.fm_noname,
+                            atime : 0,
+                            ctime : 0
+                        };
+                    }
+                    if (prop === 'type') {
+                        var hrefData = Cryptpad.parsePadUrl(e.href);
+                        return hrefData.type;
+                    }
+                    if (prop === 'atime' || prop === 'ctime') {
+                        return new Date(e[prop]);
+                    }
+                }
+                return (el.name || "").toLowerCase();
+            };
+            keys.sort(function(a, b) {
+                if (getProp(a, prop) < getProp(b, prop)) { return mult * -1; }
+                if (getProp(a, prop) > getProp(b, prop)) { return mult * 1; }
+                return 0;
+            });
+            return keys;
+        };
+
+        // Create the ghost icon to add pads/folders
+        var createNewPadIcons = function ($block, isInRoot) {
+            var $container = $('<div>');
+            if (isInRoot) {
+                // Folder
+                var $element1 = $('<li>', {
+                    'class': 'newFolder element-row grid-element'
+                }).prepend($folderIcon.clone()).appendTo($container);
+                $element1.append($('<span>', {'class': 'name'}).text(Messages.fm_folder));
+                // File
+                var $element2 = $('<li>', {
+                    'class': 'uploadFile element-row grid-element'
+                }).prepend(getIcon('file')).appendTo($container);
+                $element2.append($('<span>', {'class': 'name'}).text(Messages.uploadButton));
+            }
+            // Pads
+            getNewPadTypes().forEach(function (type) {
+                var $element = $('<li>', {
+                    'class': 'newdoc element-row grid-element'
+                }).prepend(getIcon(type)).appendTo($container);
+                $element.append($('<span>', {'class': 'name'}).text(Messages.type[type]));
+                $element.attr('data-type', type);
+            });
+
+            $container.find('.element-row').click(function () {
+                $block.hide();
+            });
+            return $container;
+        };
+        var createGhostIcon = function ($list) {
+            var isInRoot = currentPath[0] === ROOT;
+            var $element = $('<li>', {
+                'class': 'element-row grid-element addpad'
+            }).prepend($addIcon.clone()).appendTo($list);
+            $element.append($('<span>', {'class': 'name'}).text(Messages.fm_newFile));
+            $element.attr('title', Messages.fm_newFile);
+            $element.click(function () {
+                var $modal = Cryptpad.createModal({
+                    id: 'addPadDialog',
+                    $body: $iframe.find('body')
+                });
+                var $title = $('<h3>').text(Messages.fm_newFile);
+                var $description = $('<p>').text(Messages.fm_newButtonTitle);
+                $modal.find('.cp-modal').append($title);
+                $modal.find('.cp-modal').append($description);
+                var $content = createNewPadIcons($modal, isInRoot);
+                $modal.find('.cp-modal').append($content);
+                window.setTimeout(function () { $modal.show(); });
+                addNewPadHandlers($modal, isInRoot);
+            });
+        };
+
+        // Drive content toolbar
+        var createToolbar = function () {
+            var $toolbar = $driveToolbar;
+            $toolbar.html('');
+            $('<div>', {'class': 'leftside'}).appendTo($toolbar);
+            $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
+            var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
+            var $hist = Cryptpad.createButton('history', true, {histConfig: APP.histConfig});
+            $hist.addClass('element');
+            $rightside.append($hist);
+            return $toolbar;
+        };
+
+        // Unsorted element are represented by "href" in an array: they don't have a filename
+        // and they don't hav a hierarchical structure (folder/subfolders)
+        var displayHrefArray = function ($container, rootName, draggable) {
+            var unsorted = files[rootName];
+            if (unsorted.length) {
+                var $fileHeader = getFileListHeader(false);
+                $container.append($fileHeader);
+            }
+            var keys = unsorted;
+            var sortBy = Cryptpad.getLSAttribute(SORT_FILE_BY);
+            sortBy = sortBy === "" ? sortBy = 'name' : sortBy;
+            var sortedFiles = sortElements(false, [rootName], keys, sortBy, !getSortFileDesc(), true);
+            sortedFiles.forEach(function (id) {
+                var file = filesOp.getFileData(id);
+                if (!file) {
+                    //debug("Unsorted or template returns an element not present in filesData: ", href);
+                    file = { title: Messages.fm_noname };
+                    //return;
+                }
+                var idx = files[rootName].indexOf(id);
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined mens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
+                var $element = $('<li>', {
+                    'class': 'file-element element element-row' + roClass,
+                    draggable: draggable
+                });
+                if (Array.isArray(APP.selectedFiles)) {
+                    var sidx = APP.selectedFiles.indexOf(id);
+                    if (sidx !== -1) {
+                        $element.addClass('selected');
+                        APP.selectedFiles.splice(sidx, 1);
+                    }
+                }
+                addFileData(id, $element);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                var path = [rootName, idx];
+                $element.data('path', path);
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element, path);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                if (draggable) {
+                    addDragAndDropHandlers($element, path, false, false);
+                }
+                $container.append($element);
+            });
+            createGhostIcon($container);
+        };
+
+        var displayAllFiles = function ($container) {
+            var allfiles = files[FILES_DATA];
+            if (allfiles.length === 0) { return; }
+            var $fileHeader = getFileListHeader(false);
+            $container.append($fileHeader);
+            var keys = filesOp.getFiles([FILES_DATA]);
+            var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), true);
+            sortedFiles.forEach(function (id) {
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined maens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
+                var $element = $('<li>', { 'class': 'file-element element element-row' + roClass });
+                addFileData(id, $element);
+                $element.data('path', [FILES_DATA, id]);
+                $element.data('element', id);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                $container.append($element);
+            });
+        };
+
+        var displayTrashRoot = function ($list, $folderHeader, $fileHeader) {
+            var filesList = [];
+            var root = files[TRASH];
+            // Elements in the trash are JS arrays (several elements can have the same name)
+            Object.keys(root).forEach(function (key) {
+                if (!Array.isArray(root[key])) {
+                    logError("Trash element has a wrong type", root[key]);
+                    return;
+                }
+                root[key].forEach(function (el, idx) {
+                    if (!filesOp.isFile(el.element) && !filesOp.isFolder(el.element)) { return; }
+                    var spath = [key, idx, 'element'];
+                    filesList.push({
+                        element: el.element,
+                        spath: spath,
+                        name: key
+                    });
+                });
+            });
+            var sortedFolders = sortTrashElements(true, filesList, null, !getSortFolderDesc());
+            var sortedFiles = sortTrashElements(false, filesList, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc());
+            if (filesOp.hasSubfolder(root, true)) { $list.append($folderHeader); }
+            sortedFolders.forEach(function (f) {
+                var $element = createElement([TRASH], f.spath, root, true);
+                $list.append($element);
+            });
+            if (filesOp.hasFile(root, true)) { $list.append($fileHeader); }
+            sortedFiles.forEach(function (f) {
+                var $element = createElement([TRASH], f.spath, root, false);
+                $list.append($element);
+            });
+        };
+
+        var displaySearch = function ($list, value) {
+            var filesList = filesOp.search(value);
+            filesList.forEach(function (r) {
+                r.paths.forEach(function (path) {
+                    var href = r.data.href;
+                    var parsed = Cryptpad.parsePadUrl(href);
+                    var $table = $('<table>');
+                    var $icon = $('<td>', {'rowspan': '3', 'class': 'icon'}).append(getFileIcon(href));
+                    var $title = $('<td>', {'class': 'col1 title'}).text(r.data.title)
+                        .click(function () {
+                        openFile(null, r.data.href);
+                    });
+                    var $typeName = $('<td>', {'class': 'label2'}).text(Messages.fm_type);
+                    var $type = $('<td>', {'class': 'col2'}).text(Messages.type[parsed.type] || parsed.type);
+                    var $atimeName = $('<td>', {'class': 'label2'}).text(Messages.fm_lastAccess);
+                    var $atime = $('<td>', {'class': 'col2'}).text(new Date(r.data.atime).toLocaleString());
+                    var $ctimeName = $('<td>', {'class': 'label2'}).text(Messages.fm_creation);
+                    var $ctime = $('<td>', {'class': 'col2'}).text(new Date(r.data.ctime).toLocaleString());
+                    if (filesOp.isPathIn(path, ['hrefArray'])) {
+                        path.pop();
+                        path.push(r.data.title);
+                    }
+                    var $path = $('<td>', {'class': 'col1 path'});
+                    createTitle($path, path, true);
+                    var parentPath = path.slice();
+                    var $a;
+                    if (parentPath) {
+                        $a = $('<a>').text(Messages.fm_openParent).click(function (e) {
+                            e.preventDefault();
+                            if (filesOp.isInTrashRoot(parentPath)) { parentPath = [TRASH]; }
+                            else { parentPath.pop(); }
+                            APP.selectedFiles = [r.id];
+                            module.displayDirectory(parentPath);
+                        });
+                    }
+                    var $openDir = $('<td>', {'class': 'openDir'}).append($a);
+
+                    // rows 1-3
+                    $('<tr>').append($icon).append($title).append($typeName).append($type).appendTo($table);
+                    $('<tr>').append($path).append($atimeName).append($atime).appendTo($table);
+                    $('<tr>').append($openDir).append($ctimeName).append($ctime).appendTo($table);
+                    $('<li>', {'class':'searchResult'}).append($table).appendTo($list);
+                });
+            });
+        };
+
+        var displayRecent = function ($list) {
+            var filesList = filesOp.getRecentPads();
+            var limit = 20;
+            var i = 0;
+            filesList.forEach(function (id) {
+                if (i >= limit) { return; }
+                // Check path (pad exists and not in trash)
+                var paths = filesOp.findFile(id);
+                if (!paths.length) { return; }
+                var path = paths[0];
+                if (filesOp.isPathIn(path, [TRASH])) { return; }
+                // Display the pad
+                var file = filesOp.getFileData(id);
+                if (!file) {
+                    //debug("Unsorted or template returns an element not present in filesData: ", href);
+                    file = { title: Messages.fm_noname };
+                    //return;
+                }
+                var $icon = getFileIcon(id);
+                var ro = filesOp.isReadOnlyFile(id);
+                // ro undefined mens it's an old hash which doesn't support read-only
+                var roClass = typeof(ro) === 'undefined' ? ' noreadonly' : ro ? ' readonly' : '';
+                var $element = $('<li>', {
+                    'class': 'file-element element element-row' + roClass,
+                });
+                addFileData(id, $element);
+                $element.prepend($icon).dblclick(function () {
+                    openFile(id);
+                });
+                $element.data('path', path);
+                $element.click(function(e) {
+                    e.stopPropagation();
+                    onElementClick(e, $element, path);
+                });
+                $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
+                /*if (draggable) {
+                    addDragAndDropHandlers($element, path, false, false);
+                }*/
+                $list.append($element);
+                i++;
+            });
+        };
+
+        // Display the selected directory into the content part (rightside)
+        // NOTE: Elements in the trash are not using the same storage structure as the others
+        // _WORKGROUP_ : do not change the lastOpenedFolder value in localStorage
+        var displayDirectory = module.displayDirectory = function (path, force) {
+            module.hideMenu();
+            if (!APP.editable) { debug("Read-only mode"); }
+            if (!appStatus.isReady && !force) { return; }
+
+            // Only Trash and Root are available in not-owned files manager
+            if (displayedCategories.indexOf(path[0]) === -1) {
+                log(Messages.categoryError);
+                currentPath = [ROOT];
+                displayDirectory(currentPath);
+                return;
+            }
+            appStatus.ready(false);
+            currentPath = path;
+            var s = $content.scrollTop() || 0;
+            $content.html("");
+            sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
+            if (!path || path.length === 0) {
+                path = [ROOT];
+            }
+            var isInRoot = filesOp.isPathIn(path, [ROOT]);
+            var inTrash = filesOp.isPathIn(path, [TRASH]);
+            var isTrashRoot = filesOp.comparePath(path, [TRASH]);
+            var isTemplate = filesOp.comparePath(path, [TEMPLATE]);
+            var isAllFiles = filesOp.comparePath(path, [FILES_DATA]);
+            var isSearch = path[0] === SEARCH;
+            var isRecent = path[0] === RECENT;
+            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
+
+            var root = isVirtual ? undefined : filesOp.find(path);
+            if (!isVirtual && typeof(root) === "undefined") {
+                log(Messages.fm_unknownFolderError);
+                debug("Unable to locate the selected directory: ", path);
+                var parentPath = path.slice();
+                parentPath.pop();
+                displayDirectory(parentPath, true);
+                return;
+            }
+            if (!isSearch) { delete APP.Search.oldLocation; }
+
+            module.resetTree();
+            if (displayedCategories.indexOf(SEARCH) !== -1 && $tree.find('#searchInput').length) {
+                // in history mode we want to focus the version number input
+                if (!history.isHistoryMode && !APP.mobile()) {
+                    var st = $tree.scrollTop() || 0;
+                    $tree.find('#searchInput').focus();
+                    $tree.scrollTop(st);
+                }
+                $tree.find('#searchInput')[0].selectionStart = getSearchCursor();
+                $tree.find('#searchInput')[0].selectionEnd = getSearchCursor();
+            }
+
+            if (!isWorkgroup()) {
+                setLastOpenedFolder(path);
+            }
+
+            var $toolbar = createToolbar(path);
+            var $info = createInfoBox(path);
+
+            var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
+            $dirContent.data('path', path);
+            if (!isSearch) {
+                var mode = getViewMode();
+                if (mode) {
+                    $dirContent.addClass(getViewModeClass());
+                }
+                createViewModeButton($toolbar.find('.rightside'));
+            }
+            if (inTrash) {
+                createEmptyTrashButton($toolbar.find('.rightside'));
+            }
+
+            var $list = $('<ul>').appendTo($dirContent);
+
+            // NewButton can be undefined if we're in read only mode
+            createNewButton(isInRoot, $toolbar.find('.leftside'));
+
+            createTitle($toolbar.find('.path'), path);
+
+            if (APP.mobile()) {
+                var $context = $('<button>', {'class': 'element right cp-dropdown-container', id: 'contextButton'});
+                $context.append($('<span>', {'class': 'fa fa-caret-down'}));
+                $context.appendTo($toolbar.find('.rightside'));
+                $context.click(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var $li = $content.find('.selected');
+                    if ($li.length !== 1) {
+                        $li = findDataHolder($tree.find('.active'));
+                    }
+                    // Close if already opened
+                    if ($iframe.find('.contextMenu:visible').length) {
+                        module.hideMenu();
+                        return;
+                    }
+                    // Open the menu
+                    $iframe.find('.contextMenu').css({
+                        top: ($context.offset().top + 32) + 'px',
+                        right: '0px',
+                        left: ''
+                    });
+                    $li.contextmenu();
+                });
+            } else {
+                var $contextButtons = $('<span>', {'id' : 'contextButtonsContainer'});
+                $contextButtons.appendTo($toolbar.find('.rightside'));
+            }
+            updateContextButton();
+
+            var $folderHeader = getFolderListHeader();
+            var $fileHeader = getFileListHeader(true);
+
+            if (isTemplate) {
+                displayHrefArray($list, path[0], true);
+            } else if (isAllFiles) {
+                displayAllFiles($list);
+            } else if (isTrashRoot) {
+                displayTrashRoot($list, $folderHeader, $fileHeader);
+            } else if (isSearch) {
+                displaySearch($list, path[1]);
+            } else if (isRecent) {
+                displayRecent($list);
+            } else {
+                $dirContent.contextmenu(openContentContextMenu);
+                if (filesOp.hasSubfolder(root)) { $list.append($folderHeader); }
+                // display sub directories
+                var keys = Object.keys(root);
+                var sortedFolders = sortElements(true, path, keys, null, !getSortFolderDesc());
+                var sortedFiles = sortElements(false, path, keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc());
+                sortedFolders.forEach(function (key) {
+                    if (filesOp.isFile(root[key])) { return; }
+                    var $element = createElement(path, key, root, true);
+                    $element.appendTo($list);
+                });
+                if (filesOp.hasFile(root)) { $list.append($fileHeader); }
+                // display files
+                sortedFiles.forEach(function (key) {
+                    if (filesOp.isFolder(root[key])) { return; }
+                    var $element = createElement(path, key, root, false);
+                    $element.appendTo($list);
+                });
+
+                createGhostIcon($list);
+            }
+            $content.append($info).append($dirContent);
+
+            var $truncated = $('<span>', {'class': 'truncated'}).text('...');
+            $content.find('.element').each(function (idx, el) {
+                var $name = $(el).find('.name');
+                if ($name.length === 0) { return; }
+                if ($name[0].scrollHeight > $name[0].clientHeight) {
+                    var $tr = $truncated.clone();
+                    $tr.attr('title', $name.text());
+                    $(el).append($tr);
+                }
+            });
+
+            $content.scrollTop(s);
+            appStatus.ready(true);
+        };
+
+/*      var refreshFilesData = function () {
+            $content.find('.element-row').each(function (i, e) {
+                var $el = $(e);
+                if ($el.data('path')) {
+                    var path = $el.data('path');
+                    var element = filesOp.find(path);
+                    if (!filesOp.isFile(element)) { return; }
+                    var data = filesOp.getFileData(element);
+                    if (!data) { return; }
+                    if (filesOp.isPathIn(path, ['hrefArray'])) { $el.find('.name').attr('title', data.title).text(data.title); }
+                    $el.find('.title').attr('title', data.title).text(data.title);
+                    $el.find('.atime').attr('title', getDate(data.atime)).text(getDate(data.atime));
+                    $el.find('.ctime').attr('title', getDate(data.ctime)).text(getDate(data.ctime));
+                }
+            });
+        }; */
+
+
+        var createTreeElement = function (name, $icon, path, draggable, droppable, collapsable, active) {
+            var $name = $('<span>', { 'class': 'folder-element element' }).text(name);
+            var $collapse;
+            if (collapsable) {
+                $collapse = $expandIcon.clone();
+            }
+            var $elementRow = $('<span>', {'class': 'element-row'}).append($collapse).append($icon).append($name).click(function (e) {
+                e.stopPropagation();
+                module.displayDirectory(path);
+            });
+            var $element = $('<li>').append($elementRow);
+            if (draggable) { $elementRow.attr('draggable', true); }
+            if (collapsable) {
+                $element.addClass('collapsed');
+                $collapse.click(function(e) {
+                    e.stopPropagation();
+                    if ($element.hasClass('collapsed')) {
+                        // It is closed, open it
+                        $element.removeClass('collapsed');
+                        setFolderOpened(path, true);
+                        $collapse.removeClass('fa-plus-square-o');
+                        $collapse.addClass('fa-minus-square-o');
+                    } else {
+                        // Collapse the folder
+                        $element.addClass('collapsed');
+                        setFolderOpened(path, false);
+                        $collapse.removeClass('fa-minus-square-o');
+                        $collapse.addClass('fa-plus-square-o');
+                        // Change the current opened folder if it was collapsed
+                        if (filesOp.isSubpath(currentPath, path)) {
+                            displayDirectory(path);
+                        }
+                    }
+                });
+                if (wasFolderOpened(path) ||
+                        (filesOp.isSubpath(currentPath, path) && path.length < currentPath.length)) {
+                    $collapse.click();
+                }
+            }
+            $elementRow.data('path', path);
+            addDragAndDropHandlers($elementRow, path, true, droppable);
+            if (active) {
+                $elementRow.addClass('active');
+            }
+            return $element;
+        };
+
+        var createTree = function ($container, path) {
+            var root = filesOp.find(path);
+
+            // don't try to display what doesn't exist
+            if (!root) { return; }
+
+            // Display the root element in the tree
+            var displayingRoot = filesOp.comparePath([ROOT], path);
+            if (displayingRoot) {
+                var isRootOpened = filesOp.comparePath([ROOT], currentPath);
+                var $rootIcon = filesOp.isFolderEmpty(files[ROOT]) ?
+                    (isRootOpened ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
+                    (isRootOpened ? $folderOpenedIcon : $folderIcon);
+                var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, true, isRootOpened);
+                if (!filesOp.hasSubfolder(root)) {
+                    $rootElement.find('.expcol').css('visibility', 'hidden');
+                }
+                $rootElement.addClass('root');
+                $rootElement.find('>.element-row').contextmenu(openDirectoryContextMenu);
+                $('<ul>', {'class': 'docTree'}).append($rootElement).appendTo($container);
+                $container = $rootElement;
+            } else if (filesOp.isFolderEmpty(root)) { return; }
+
+            // Display root content
+            var $list = $('<ul>').appendTo($container);
+            var keys = Object.keys(root).sort();
+            keys.forEach(function (key) {
+                // Do not display files in the menu
+                if (!filesOp.isFolder(root[key])) { return; }
+                var newPath = path.slice();
+                newPath.push(key);
+                var isCurrentFolder = filesOp.comparePath(newPath, currentPath);
+                var isEmpty = filesOp.isFolderEmpty(root[key]);
+                var subfolder = filesOp.hasSubfolder(root[key]);
+                var $icon = isEmpty ?
+                    (isCurrentFolder ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
+                    (isCurrentFolder ? $folderOpenedIcon : $folderIcon);
+                var $element = createTreeElement(key, $icon.clone(), newPath, true, true, subfolder, isCurrentFolder);
+                $element.appendTo($list);
+                $element.find('>.element-row').contextmenu(openDirectoryContextMenu);
+                createTree($element, newPath);
+            });
+        };
+
+        var createTemplate = function ($container, path) {
+            var $icon = $templateIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
+            $element.addClass('root');
+            var $list = $('<ul>', { id: 'templateTree', 'class': 'category' }).append($element);
+            $container.append($list);
+        };
+
+        var createAllFiles = function ($container, path) {
+            var $icon = $unsortedIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
+            $allfilesElement.addClass('root');
+            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category' }).append($allfilesElement);
+            $container.append($allfilesList);
+        };
+
+        var createTrash = function ($container, path) {
+            var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
+            $trashElement.addClass('root');
+            $trashElement.find('>.element-row').contextmenu(openTrashTreeContextMenu);
+            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category' }).append($trashElement);
+            $container.append($trashList);
+        };
+
+        var createRecent = function ($container, path) {
+            var $icon = $recentIcon.clone();
+            var isOpened = filesOp.comparePath(path, currentPath);
+            var $element = createTreeElement(RECENT_NAME, $icon, [RECENT], false, false, false, isOpened);
+            $element.addClass('root');
+            var $list = $('<ul>', { id: 'recentTree', 'class': 'category' }).append($element);
+            $container.append($list);
+        };
+
+        var search = APP.Search = {};
+        var createSearch = function ($container) {
+            var isInSearch = currentPath[0] === SEARCH;
+            var $div = $('<div>', {'id': 'searchContainer', 'class': 'unselectable'});
+            var $input = $('<input>', {
+                id: 'searchInput',
+                type: 'text',
+                draggable: false,
+                tabindex: 1,
+                placeholder: Messages.fm_searchPlaceholder
+            }).keyup(function (e) {
+                if (search.to) { window.clearTimeout(search.to); }
+                if ([38, 39, 40, 41].indexOf(e.which) !== -1) {
+                    if (!$input.val()) {
+                        $input.blur();
+                        $content.focus();
+                        return;
+                    } else {
+                        e.stopPropagation();
+                    }
+                }
+                var isInSearchTmp = currentPath[0] === SEARCH;
+                if ($input.val().trim() === "") {
+                    setSearchCursor(0);
+                    if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
+                    return;
+                }
+                if (e.which === 13) {
+                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
+                    var newLocation = [SEARCH, $input.val()];
+                    setSearchCursor();
+                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                    return;
+                }
+                if (APP.mobile()) { return; }
+                search.to = window.setTimeout(function () {
+                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
+                    var newLocation = [SEARCH, $input.val()];
+                    setSearchCursor();
+                    if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                }, 500);
+            }).appendTo($div);
+            $searchIcon.clone().appendTo($div);
+            if (isInSearch) { $input.val(currentPath[1] || ''); }
+            $container.append($div);
+        };
+
+        module.resetTree = function () {
+            var $categories = $tree.find('.categories-container');
+            var s = $categories.scrollTop() || 0;
+
+            $tree.html('');
+            if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
+            var $div = $('<div>', {'class': 'categories-container'}).appendTo($tree);
+            if (displayedCategories.indexOf(RECENT) !== -1) { createRecent($div, [RECENT]); }
+            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
+            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
+            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
+            if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
+
+            $tree.append(APP.$limit);
+            $categories = $tree.find('.categories-container');
+            $categories.scrollTop(s);
+        };
+
+        module.hideMenu = function () {
+            $contextMenu.hide();
+            $trashTreeContextMenu.hide();
+            $trashContextMenu.hide();
+            $contentContextMenu.hide();
+            $defaultContextMenu.hide();
+            $iframe.find('.cp-dropdown-content').hide();
+        };
+
+        var stringifyPath = function (path) {
+            if (!Array.isArray(path)) { return; }
+            var $div = $('<div>');
+            var i = 0;
+            var space = 10;
+            path.forEach(function (s) {
+                if (i === 0) { s = getPrettyName(s); }
+                $div.append($('<span>', {'style': 'margin: 0 0 0 ' + i * space + 'px;'}).text(s));
+                $div.append($('<br>'));
+                i++;
+            });
+            return $div.html();
+        };
+
+        var getReadOnlyUrl = APP.getRO = function (id) {
+            if (!filesOp.isFile(id)) { return; }
+            var data = filesOp.getFileData(id);
+            if (!data) { return; }
+            var parsed = Cryptpad.parsePadUrl(data.href);
+            if (parsed.hashData.type !== "pad") { return; }
+            var origin = window.location.origin;
+            var i = data.href.indexOf('#') + 1;
+            var base = origin + data.href.slice(0, i);
+            var hrefsecret = Cryptpad.getSecrets(parsed.type, parsed.hash);
+            if (!hrefsecret.keys) { return; }
+            var viewHash = Cryptpad.getViewHashFromKeys(hrefsecret.channel, hrefsecret.keys);
+            return base + viewHash;
+        };
+
+        // Disable middle click in the context menu to avoid opening /drive/inner.html# in new tabs
+        $(ifrw).click(function (e) {
+            if (!e.target || !$(e.target).parents('.cp-dropdown-content').length) { return; }
+            if (e.which !== 1) {
+                e.stopPropagation();
+                return false;
+            }
+        });
+
+        var getProperties = function (el, cb) {
+            if (!filesOp.isFile(el)) {
+                return void cb('NOT_FILE');
+            }
+            var ro = filesOp.isReadOnlyFile(el);
+            var base = window.location.origin;
+            var $d = $('<div>');
+            $('<strong>').text(Messages.fc_prop).appendTo($d);
+
+            var data = filesOp.getFileData(el);
+            if (!data || !data.href) { return void cb(void 0, $d); }
+
+            $('<br>').appendTo($d);
+            if (!ro) {
+                $('<label>', {'for': 'propLink'}).text(Messages.editShare).appendTo($d);
+                $d.append(Cryptpad.dialog.selectable(base + data.href, {
+                    id: 'propLink',
+                }));
+            }
+
+            var parsed = Cryptpad.parsePadUrl(data.href);
+            if (parsed.hashData && parsed.hashData.type === 'pad') {
+                var roLink = ro ? base + data.href : getReadOnlyUrl(el);
+                if (roLink) {
+                    $('<label>', {'for': 'propROLink'}).text(Messages.viewShare).appendTo($d);
+                    $d.append(Cryptpad.dialog.selectable(roLink, {
+                        id: 'propROLink',
+                    }));
+                }
+            }
+
+            if (data.tags && Array.isArray(data.tags)) {
+                $('<label>', {'for': 'cp-drive-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
+                $d.append(Cryptpad.dialog.selectable(data.tags.join(', '), {
+                    id: 'cp-drive-tags',
+                }));
+            }
+
+            if (APP.loggedIn && AppConfig.enablePinning) {
+                // check the size of this file...
+                console.log(data.href);
+                Cryptpad.getFileSize(data.href, function (e, bytes) {
+                    if (e) {
+                        // there was a problem with the RPC
+                        logError(e);
+
+                        // but we don't want to break the interface.
+                        // continue as if there was no RPC
+
+                        return void cb(void 0, $d);
+                    }
+                    var KB = Cryptpad.bytesToKilobytes(bytes);
+
+                    var formatted = Messages._getKey('formattedKB', [KB]);
+                    $('<br>').appendTo($d);
+
+                    $('<label>', {
+                        'for': 'size'
+                    }).text(Messages.fc_sizeInKilobytes).appendTo($d);
+
+                    $d.append(Cryptpad.dialog.selectable(formatted, {
+                        id: 'size',
+                    }));
+                    cb(void 0, $d);
+                });
+            } else {
+                cb(void 0, $d);
+            }
+        };
+
+        $contextMenu.on("click", "a", function(e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            //var path = $(this).data('path');
+            //var $element = $(this).data('element');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Directory context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass("rename")) {
+                if (paths.length !== 1) { return; }
+                displayRenameInput(paths[0].element, paths[0].path);
+            }
+            else if($(this).hasClass("delete")) {
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                moveElements(pathsList, [TRASH], false, refresh);
+            }
+            else if ($(this).hasClass('open')) {
+                paths.forEach(function (p) {
+                    var $element = p.element;
+                    $element.click();
+                    $element.dblclick();
+                });
+            }
+            else if ($(this).hasClass('open_ro')) {
+                paths.forEach(function (p) {
+                    var el = filesOp.find(p.path);
+                    if (filesOp.isFolder(el)) { return; }
+                    var roUrl = getReadOnlyUrl(el);
+                    openFile(null, roUrl);
+                });
+            }
+            else if ($(this).hasClass('newfolder')) {
+                if (paths.length !== 1) { return; }
+                var onCreated = function (err, info) {
+                    if (err) { return void logError(err); }
+                    module.newFolder = info.newPath;
+                    module.displayDirectory(paths[0].path);
+                };
+                filesOp.addFolder(paths[0].path, null, onCreated);
+            }
+            else if ($(this).hasClass("properties")) {
+                if (paths.length !== 1) { return; }
+                var el = filesOp.find(paths[0].path);
+                getProperties(el, function (e, $prop) {
+                    if (e) { return void logError(e); }
+                    Cryptpad.alert($prop[0], undefined, true);
+                });
+            }
+            module.hideMenu();
+        });
+
+        $defaultContextMenu.on("click", "a", function(e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass('open')) {
+                paths.forEach(function (p) {
+                    var $element = p.element;
+                    $element.dblclick();
+                });
+            }
+            else if ($(this).hasClass('open_ro')) {
+                paths.forEach(function (p) {
+                    var el = filesOp.find(p.path);
+                    if (filesOp.isPathIn(p.path, [FILES_DATA])) { el = el.href; }
+                    if (!el || filesOp.isFolder(el)) { return; }
+                    var roUrl = getReadOnlyUrl(el);
+                    openFile(null, roUrl);
+                });
+            }
+            else if ($(this).hasClass('delete')) {
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                if (!APP.loggedIn) {
+                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                    if (paths.length === 1) {
+                        msg = Messages.fm_removePermanentlyDialog;
+                    }
+                    Cryptpad.confirm(msg, function(res) {
+                        $(ifrw).focus();
+                        if (!res) { return; }
+                        filesOp.delete(pathsList, refresh);
+                    });
+                    return;
+                }
+                moveElements(pathsList, [TRASH], false, refresh);
+            }
+            else if ($(this).hasClass("properties")) {
+                if (paths.length !== 1) { return; }
+                var el = filesOp.find(paths[0].path);
+                getProperties(el, function (e, $prop) {
+                    if (e) { return void logError(e); }
+                    Cryptpad.alert($prop[0], undefined, true);
+                });
+            }
+            module.hideMenu();
+        });
+
+        $contentContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var path = $(this).data('path');
+            var onCreated = function (err, info) {
+                if (err === E_OVER_LIMIT) {
+                    return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
+                }
+                if (err) {
+                    return void Cryptpad.alert(Messages.fm_error_cantPin);
+                }
+                module.newFolder = info.newPath;
+                refresh();
+            };
+            if ($(this).hasClass("newfolder")) {
+                filesOp.addFolder(path, null, onCreated);
+            }
+            else if ($(this).hasClass("newdoc")) {
+                var type = $(this).data('type') || 'pad';
+                sessionStorage[Cryptpad.newPadPathKey] = filesOp.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
+                window.open('/' + type + '/');
+            }
+            module.hideMenu();
+        });
+
+        $trashTreeContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length !== 1 || !paths[0].element || !filesOp.comparePath(paths[0].path, [TRASH])) {
+                log(Messages.fm_forbidden);
+                debug("Trash tree context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            if ($(this).hasClass("empty")) {
+                Cryptpad.confirm(Messages.fm_emptyTrashDialog, function(res) {
+                    if (!res) { return; }
+                    filesOp.emptyTrash(refresh);
+                });
+            }
+            module.hideMenu();
+        });
+
+        $trashContextMenu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            var paths = $(this).data('paths');
+            if (paths.length === 0) {
+                log(Messages.fm_forbidden);
+                debug("Trash context menu on a forbidden or unexisting element. ", paths);
+                return;
+            }
+            var path = paths[0].path;
+            var name = paths[0].path[paths[0].path.length - 1];
+            if ($(this).hasClass("remove")) {
+                if (paths.length === 1) {
+                    Cryptpad.confirm(Messages.fm_removePermanentlyDialog, function(res) {
+                        if (!res) { return; }
+                        filesOp.delete([path], refresh);
+                    });
+                    return;
+                }
+                var pathsList = [];
+                paths.forEach(function (p) { pathsList.push(p.path); });
+                var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                Cryptpad.confirm(msg, function(res) {
+                    if (!res) { return; }
+                    filesOp.delete(pathsList, refresh);
+                });
+            }
+            else if ($(this).hasClass("restore")) {
+                if (paths.length !== 1) { return; }
+                if (path.length === 4) {
+                    var el = filesOp.find(path);
+                    if (filesOp.isFile(el)) {
+                        name = filesOp.getTitle(el);
+                    } else {
+                        name = path[1];
+                    }
+                }
+                Cryptpad.confirm(Messages._getKey("fm_restoreDialog", [name]), function(res) {
+                    if (!res) { return; }
+                    filesOp.restore(path, refresh);
+                });
+            }
+            else if ($(this).hasClass("properties")) {
+                if (paths.length !== 1 || path.length !== 4) { return; }
+                var element = filesOp.find(path.slice(0,3)); // element containing the oldpath
+                var sPath = stringifyPath(element.path);
+                Cryptpad.alert('<strong>' + Messages.fm_originalPath + "</strong>:<br>" + sPath, undefined, true);
+            }
+            module.hideMenu();
+        });
+
+        // Chrome considers the double-click means "select all" in the window
+        $content.on('mousedown', function (e) {
+            $content.focus();
+            e.preventDefault();
+        });
+        $appContainer.on('mouseup', function (e) {
+            //if (sel.down) { return; }
+            if (e.which !== 1) { return ; }
+            module.hideMenu(e);
+            //removeSelected(e);
+        });
+        $appContainer.on('click', function (e) {
+            if (e.which !== 1) { return ; }
+            removeInput();
+            hideNewButton();
+        });
+        $appContainer.on('drag drop', function (e) {
+            removeInput();
+            module.hideMenu(e);
+        });
+        $appContainer.on('mouseup drop', function () {
+            $iframe.find('.droppable').removeClass('droppable');
+        });
+        $appContainer.on('keydown', function (e) {
+            // "Del"
+            if (e.which === 46) {
+                if (filesOp.isPathIn(currentPath, [FILES_DATA]) && APP.loggedIn) {
+                    return; // We can't remove elements directly from filesData
+                }
+                var $selected = $iframe.find('.selected');
+                if (!$selected.length) { return; }
+                var paths = [];
+                var isTrash = filesOp.isPathIn(currentPath, [TRASH]);
+                $selected.each(function (idx, elmt) {
+                    if (!$(elmt).data('path')) { return; }
+                    paths.push($(elmt).data('path'));
+                });
+                // If we are in the trash or anon pad or if we are holding the "shift" key, delete permanently,
+                if (!APP.loggedIn || isTrash || e.shiftKey) {
+                    var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [paths.length]);
+                    if (paths.length === 1) {
+                        msg = Messages.fm_removePermanentlyDialog;
+                    }
+
+                    Cryptpad.confirm(msg, function(res) {
+                        $(ifrw).focus();
+                        if (!res) { return; }
+                        filesOp.delete(paths, refresh);
+                    });
+                    return;
+                }
+                // else move to trash
+                moveElements(paths, [TRASH], false, refresh);
+            }
+        });
+        $appContainer.contextmenu(function () {
+            module.hideMenu();
+            return false;
+        });
+
+        var onRefresh = {
+            refresh: function() {
+                if (onRefresh.to) {
+                    window.clearTimeout(onRefresh.to);
+                }
+                onRefresh.to = window.setTimeout(refresh, 500);
+            }
+        };
+        proxy.on('change', [], function () {
+            if (history.isHistoryMode) { return; }
+            var path = arguments[2];
+            if (path[0] !== 'drive') { return false; }
+            path = path.slice(1);
+            var cPath = currentPath.slice();
+            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
+                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
+                // Reload after a few ms to make sure all the change events have been received
+                onRefresh.refresh();
+            } else if (path.length && path[0] === FILES_DATA) {
+                onRefresh.refresh();
+            }
+            module.resetTree();
+            return false;
+        }).on('remove', [], function () {
+            if (history.isHistoryMode) { return; }
+            var path = arguments[1];
+            if (path[0] !== 'drive') { return false; }
+            path = path.slice(1);
+            var cPath = currentPath.slice();
+            if ((filesOp.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
+                    (path.length >= cPath.length && filesOp.isSubpath(path, cPath))) {
+                // Reload after a few to make sure all the change events have been received
+                onRefresh.to = window.setTimeout(refresh, 500);
+            }
+            module.resetTree();
+            return false;
+        }).on('change', ['drive', 'migrate'], function () {
+            var path = arguments[2];
+            var value = arguments[1];
+            if (path[1] === "migrate" && value === 1) {
+                if (APP.onDisconnect) { APP.onDisconnect(true); }
+            }
+        });
+
+        history.onEnterHistory = function (obj) {
+            var files = obj.drive;
+            filesOp = FO.init(files, config);
+            appStatus.isReady = true;
+            refresh();
+        };
+        history.onLeaveHistory = function () {
+            var files = proxy.drive;
+            filesOp = FO.init(files, config);
+            refresh();
+        };
+
+        var createReadme = function (proxy, cb) {
+            if (sessionStorage.createReadme) {
+                var hash = Cryptpad.createRandomHash();
+                Get.put(hash, Messages.driveReadme, function (e) {
+                    if (e) { logError(e); }
+                    var href = '/pad/#' + hash;
+                    var data = {
+                        href: href,
+                        title: Messages.driveReadmeTitle,
+                        atime: new Date().toISOString(),
+                        ctime: new Date().toISOString()
+                    };
+                    filesOp.pushData(data, function (e, id) {
+                        if (e) { return void console.error("Error while creating the default pad:", e); } // TODO LIMIT?
+                        filesOp.add(id);
+                        if (typeof(cb) === "function") { cb(); }
+                    });
+                });
+                delete sessionStorage.createReadme;
+                return;
+            }
+            if (typeof(cb) === "function") { cb(); }
+        };
+
+        var fmConfig = {
+            noHandlers: true,
+            onUploaded: function (ev, data) {
+                try {
+                    // Get the folder path
+                    var newPath = findDropPath(ev.target);
+                    if (!newPath) { return void refresh(); }
+                    var href = data.url;
+                    // Get the current file location in ROOT
+                    var id = filesOp.getIdFromHref(href);
+                    var paths = filesOp.findFile(id);
+                    if (paths.length !== 1) { return; }
+                    // Try to move and refresh
+                    moveElements([paths[0]], newPath, true);
+                    refresh();
+                } catch (e) {
+                    console.error(e);
+                    refresh();
+                }
+            },
+            body: $iframe.find('body')
+        };
+        APP.FM = Cryptpad.createFileManager(fmConfig);
+
+        createReadme(proxy, function () {
+            refresh();
+            APP.userList.onChange();
+            Cryptpad.removeLoadingScreen();
+        });
+    };
+
+    var setHistory = function (bool, update) {
+        history.isHistoryMode = bool;
+        setEditable(!bool);
+        if (!bool && update) {
+            history.onLeaveHistory();
+        }
+    };
+
+    var setName = APP.setName = function (newName) {
+        if (typeof(newName) !== 'string') { return; }
+        var myUserNameTemp = newName.trim();
+        if(myUserNameTemp.length > 32) {
+            myUserNameTemp = myUserNameTemp.substr(0, 32);
+        }
+        var myUserName = myUserNameTemp;
+        Cryptpad.setDisplayName(myUserName, function (err) {
+            if (err) {
+                logError("Couldn't set username", err);
+                return;
+            }
+            if (myUserName === "") {
+                myUserName = Messages.anonymous;
+            }
+            APP.$displayName.text(myUserName);
+        });
+    };
+
+    var migrateAnonDrive = function (proxy, cb) {
+        if (sessionStorage.migrateAnonDrive) {
+            Merge.anonDriveIntoUser(proxy, function () {
+                delete sessionStorage.migrateAnonDrive;
+                if (typeof(cb) === "function") { cb(); }
+            });
+        } else {
+            if (typeof(cb) === "function") { cb(); }
+        }
+    };
+
+    // don't initialize until the store is ready.
+    Cryptpad.ready(function () {
+        Cryptpad.reportAppUsage();
+        if (!APP.loggedIn) { Cryptpad.feedback('ANONYMOUS_DRIVE'); }
+        var $iframe = APP.$iframe = $('#pad-iframe').contents();
+        APP.$bar = $iframe.find('#toolbar');
+
+        var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy ? Cryptpad.getStore().getProxy() : undefined;
+
+        if (window.location.hash && window.location.hash === "#iframe") {
+            $iframe.find('body').addClass('iframe');
+            window.location.hash = "";
+            APP.homePageIframe = true;
+        }
+
+        var hash = window.location.hash.slice(1) || Cryptpad.getUserHash() || localStorage.FS_hash;
+        var secret = Cryptpad.getSecrets('drive', hash);
+        var readOnly = APP.readOnly = secret.keys && !secret.keys.editKeyStr;
+
+        var listmapConfig = module.config = {
+            data: {},
+            websocketURL: Cryptpad.getWebsocketURL(),
+            channel: secret.channel,
+            readOnly: readOnly,
+            validateKey: secret.keys.validateKey || undefined,
+            crypto: Crypto.createEncryptor(secret.keys),
+            logging: false
+        };
+
+        var proxy;
+        if (storeObj && !window.location.hash.slice(1)) { proxy = storeObj.proxy; }
+        else {
+            var rt = window.rt = module.rt = Listmap.create(listmapConfig);
+            proxy = rt.proxy;
+        }
+        var onCreate = function (info) {
+            var realtime = module.realtime = info.realtime;
+
+            var editHash = APP.editHash = !readOnly ? Cryptpad.getEditHashFromKeys(info.channel, secret.keys) : undefined;
+            var viewHash = APP.viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
+
+            APP.hash = readOnly ? viewHash : editHash;
+            if (!readOnly && !localStorage.FS_hash && !Cryptpad.getUserHash() && !window.location.hash) {
+                localStorage.FS_hash = editHash;
+            }
+
+            module.patchText = TextPatcher.create({
+                realtime: realtime,
+                logging: true,
+            });
+
+            var userList = APP.userList = info.userList;
+            var config = {
+                displayed: ['useradmin', 'limit', 'newpad', 'pageTitle'],
+                userList: {
+                    list: userList,
+                    userNetfluxId: info.myID
+                },
+                common: Cryptpad,
+                readOnly: readOnly,
+                ifrw: window,
+                realtime: info.realtime,
+                network: info.network,
+                $container: APP.$bar,
+                pageTitle: Messages.type.drive
+            };
+            var toolbar = APP.toolbar = Toolbar.create(config);
+
+            var $rightside = toolbar.$rightside;
+            $rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+            var $userBlock = toolbar.$userAdmin;
+            APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
+
+            if (APP.homePageIframe) {
+                var $linkToMain = toolbar.linkToMain;
+                $linkToMain.attr('href', '#');
+                $linkToMain.attr('title', '');
+                $linkToMain.css('cursor', 'default');
+                $linkToMain.off('click');
+            }
+
+            /* add the usage */
+            Cryptpad.createUsageBar(function (err, $limitContainer) {
+                if (err) { return void logError(err); }
+                APP.$limit = $limitContainer;
+            }, true);
+
+            /* add a history button */
+            APP.histConfig = {
+                onLocal: function () {
+                    proxy.drive = history.currentObj.drive;
+                },
+                onRemote: function () {},
+                setHistory: setHistory,
+                applyVal: function (val) {
+                    var obj = JSON.parse(val || '{}');
+                    history.currentObj = obj;
+                    history.onEnterHistory(obj);
+                },
+                $toolbar: APP.$bar,
+                href: window.location.origin + window.location.pathname + '#' + APP.hash
+            };
+
+            if (!readOnly && !APP.loggedIn) {
+                // TODO secure drive
+                // cryptpad-backup --> cp-toolbar-backup
+                var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');
+                $backupButton.append($backupIcon.clone().css('marginRight', '0px'));
+                $backupButton.attr('title', Messages.fm_backup_title);
+                $backupButton.on('click', function() {
+                    var url = window.location.origin + window.location.pathname + '#' + editHash;
+                    var msg = Messages.fm_alert_backupUrl + '<input type="text" readonly="readonly" id="fm_backupUrl" value="'+url+'">';
+                    Cryptpad.alert(msg, undefined, true);
+                    $('#fm_backupUrl').val(url);
+                    $('#fm_backupUrl').click(function () {
+                        $(this).select();
+                    });
+                });
+                $userBlock.append($backupButton);
+            }
+
+            Cryptpad.onDisplayNameChanged(setName);
+        };
+        var onReady = function () {
+            APP.$iframe.find('body').css('display', '');
+            module.files = proxy;
+            if (!proxy.drive || typeof(proxy.drive) !== 'object') { proxy.drive = {}; }
+            migrateAnonDrive(proxy, function () {
+                initLocalStorage();
+                init(proxy);
+                APP.userList.onChange();
+                Cryptpad.removeLoadingScreen();
+            });
+        };
+        var onDisconnect = APP.onDisconnect = function (noAlert) {
+            setEditable(false);
+            if (APP.refresh) { APP.refresh(); }
+            APP.toolbar.failed();
+            if (!noAlert) { Cryptpad.alert(Messages.common_connectionLost, undefined, true); }
+        };
+        var onReconnect = function (info) {
+            setEditable(true);
+            if (APP.refresh) { APP.refresh(); }
+            APP.toolbar.reconnecting(info.myId);
+            Cryptpad.findOKButton().click();
+        };
+
+        if (storeObj && !window.location.hash) {
+            onCreate(storeObj.info);
+            onReady();
+        } else {
+            proxy.on('create', function (info) {
+                onCreate(info);
+            }).on('ready', function () {
+                onReady();
+            });
+        }
+        proxy.on('disconnect', function () {
+            onDisconnect();
+        });
+        proxy.on('reconnect', function (info) {
+            onReconnect(info);
+        });
+
+        Cryptpad.onLogout(function () { setEditable(false); });
+    });
+    Cryptpad.onError(function (info) {
+        if (info) {
+            onConnectError();
+        }
+    });
+    });
+});
diff --git a/www/oldwhiteboard/colors.js b/www/oldwhiteboard/colors.js
new file mode 100644
index 000000000..d812f4d34
--- /dev/null
+++ b/www/oldwhiteboard/colors.js
@@ -0,0 +1,52 @@
+define(function () {
+    var padZero = function (str, len) {
+        len = len || 2;
+        var zeros = new Array(len).join('0');
+        return (zeros + str).slice(-len);
+    };
+    var invertColor = function (hex) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        // convert 3-digit hex to 6-digits.
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (hex.length !== 6) {
+            console.error(hex);
+            throw new Error('Invalid HEX color.');
+        }
+        // invert color components
+        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
+            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
+            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
+        // pad each with zeros and return
+        return '#' + padZero(r) + padZero(g) + padZero(b);
+    };
+    var rgb2hex = function (rgb) {
+        if (rgb.indexOf('#') === 0) { return rgb; }
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        var hex = function (x) {
+            return ("0" + parseInt(x).toString(16)).slice(-2);
+        };
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    };
+    var hex2rgba = function (hex, opacity) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (!opacity) { opacity = 1; }
+        var r = parseInt(hex.slice(0,2), 16);
+        var g = parseInt(hex.slice(2,4), 16);
+        var b = parseInt(hex.slice(4,6), 16);
+        return 'rgba('+r+', '+g+', '+b+', '+opacity+')';
+    };
+    return {
+        invert: invertColor,
+        rgb2hex: rgb2hex,
+        hex2rgba: hex2rgba
+    };
+});
diff --git a/www/oldwhiteboard/index.html b/www/oldwhiteboard/index.html
new file mode 100644
index 000000000..a5794b8d6
--- /dev/null
+++ b/www/oldwhiteboard/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="cp">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body>
+
diff --git a/www/oldwhiteboard/main.js b/www/oldwhiteboard/main.js
new file mode 100644
index 000000000..17e929d9b
--- /dev/null
+++ b/www/oldwhiteboard/main.js
@@ -0,0 +1,511 @@
+define([
+    'jquery',
+    '/api/config',
+    '/bower_components/chainpad-netflux/chainpad-netflux.js',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar2.js',
+    '/bower_components/textpatcher/TextPatcher.amd.js',
+    'json.sortify',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    '/common/cryptpad-common.js',
+    '/common/cryptget.js',
+    '/whiteboard/colors.js',
+    '/customize/application_config.js',
+    '/common/common-thumbnail.js',
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/customize/src/less/cryptpad.less',
+    'less!/whiteboard/whiteboard.less',
+    'less!/customize/src/less/toolbar.less',
+], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
+    var saveAs = window.saveAs;
+    var Messages = Cryptpad.Messages;
+
+    var module = window.APP = { $:$ };
+    var Fabric = module.Fabric = window.fabric;
+
+    $(function () {
+    Cryptpad.addLoadingScreen();
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+    var toolbar;
+
+    var secret = Cryptpad.getSecrets();
+    var readOnly = secret.keys && !secret.keys.editKeyStr;
+    if (!secret.keys) {
+        secret.keys = secret.key;
+    }
+
+    var andThen = function () {
+        /* Initialize Fabric */
+        var canvas = module.canvas = new Fabric.Canvas('canvas');
+        var $canvas = $('canvas');
+        var $controls = $('#controls');
+        var $canvasContainer = $('canvas').parents('.canvas-container');
+        var $pickers = $('#pickers');
+        var $colors = $('#colors');
+        var $cursors = $('#cursors');
+        var $deleteButton = $('#delete');
+
+        var brush = {
+            color: '#000000',
+            opacity: 1
+        };
+
+        var $toggle = $('#toggleDraw');
+        var $width = $('#width');
+        var $widthLabel = $('label[for="width"]');
+        var $opacity = $('#opacity');
+        var $opacityLabel = $('label[for="opacity"]');
+window.canvas = canvas;
+        var createCursor = function () {
+            var w = canvas.freeDrawingBrush.width;
+            var c = canvas.freeDrawingBrush.color;
+            var size = w > 30 ? w+2 : w+32;
+            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
+            var $ccanvas = $cursors.find('canvas');
+            var ccanvas = $ccanvas[0];
+
+            var ctx = ccanvas.getContext('2d');
+            var centerX = size / 2;
+            var centerY = size / 2;
+            var radius = w/2;
+
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = c;
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = brush.color;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
+            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
+            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
+            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
+            ctx.strokeStyle = '#000000';
+            ctx.stroke();
+
+            var img = ccanvas.toDataURL("image/png");
+            $controls.find('.selected > img').attr('src', img);
+            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
+        };
+
+        var updateBrushWidth = function () {
+            var val = $width.val();
+            canvas.freeDrawingBrush.width = Number(val);
+            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#width-val').text(val + 'px');
+            createCursor();
+        };
+        updateBrushWidth();
+
+        $width.on('change', updateBrushWidth);
+
+        var updateBrushOpacity = function () {
+            var val = $opacity.val();
+            brush.opacity = Number(val);
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#opacity-val').text((Number(val) * 100) + '%');
+            createCursor();
+        };
+        updateBrushOpacity();
+
+        $opacity.on('change', updateBrushOpacity);
+
+        var pickColor = function (current, cb) {
+            var $picker = $('<input>', {
+                type: 'color',
+                value: '#FFFFFF',
+                })
+            // TODO confirm that this is safe to remove
+            //.css({ visibility: 'hidden' })
+            .on('change', function () {
+                var color = this.value;
+                cb(color);
+            }).appendTo($pickers);
+            setTimeout(function () {
+                $picker.val(current);
+                $picker.click();
+            });
+        };
+
+        var setColor = function (c) {
+            c = Colors.rgb2hex(c);
+            brush.color = c;
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            module.$color.css({
+                'color': c,
+            });
+            createCursor();
+        };
+
+
+        var palette = AppConfig.whiteboardPalette || [
+            'red', 'blue', 'green', 'white', 'black', 'purple',
+            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
+        ];
+
+        $('.palette-color').on('click', function () {
+            var color = $(this).css('background-color');
+            setColor(color);
+        });
+
+        module.draw = true;
+        var toggleDrawMode = function () {
+            module.draw = !module.draw;
+            canvas.isDrawingMode = module.draw;
+            $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
+            if (module.draw) { $deleteButton.hide(); }
+            else { $deleteButton.show(); }
+        };
+        $toggle.click(toggleDrawMode);
+
+        var deleteSelection = function () {
+            if (canvas.getActiveObject()) {
+                canvas.getActiveObject().remove();
+            }
+            if (canvas.getActiveGroup()) {
+                canvas.getActiveGroup()._objects.forEach(function (el) {
+                    el.remove();
+                });
+                canvas.discardActiveGroup();
+            }
+            canvas.renderAll();
+            module.onLocal();
+        };
+        $deleteButton.click(deleteSelection);
+        $(window).on('keyup', function (e) {
+            if (e.which === 46) { deleteSelection (); }
+        });
+
+        var setEditable = function (bool) {
+            if (readOnly && bool) { return; }
+            if (bool) { $controls.css('display', 'flex'); }
+            else { $controls.hide(); }
+
+            canvas.isDrawingMode = bool ? module.draw : false;
+            if (!bool) {
+                canvas.deactivateAll();
+                canvas.renderAll();
+            }
+            canvas.forEachObject(function (object) {
+                object.selectable = bool;
+            });
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
+        };
+
+        var saveImage = module.saveImage = function () {
+            var defaultName = "pretty-picture.png";
+            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
+                if (!(typeof(filename) === 'string' && filename)) { return; }
+                $canvas[0].toBlob(function (blob) {
+                    saveAs(blob, filename);
+                });
+            });
+        };
+
+        module.FM = Cryptpad.createFileManager({});
+        module.upload = function (title) {
+            var canvas = $canvas[0];
+            var finish = function (thumb) {
+                canvas.toBlob(function (blob) {
+                    blob.name = title;
+                    module.FM.handleFile(blob, void 0, thumb);
+                });
+            };
+
+            Thumb.fromCanvas(canvas, function (e, blob) {
+                // carry on even if you can't get a thumbnail
+                if (e) { console.error(e); }
+                finish(blob);
+            });
+        };
+
+        var initializing = true;
+
+        var $bar = $('#toolbar');
+
+        var Title;
+        var UserList;
+        var Metadata;
+
+        var config = module.config = {
+            initialState: '{}',
+            websocketURL: Cryptpad.getWebsocketURL(),
+            validateKey: secret.keys.validateKey,
+            readOnly: readOnly,
+            channel: secret.channel,
+            crypto: Crypto.createEncryptor(secret.keys),
+            transformFunction: JsonOT.transform,
+        };
+
+        var addColorToPalette = function (color, i) {
+            if (readOnly) { return; }
+            var $color = $('<span>', {
+                'class': 'palette-color',
+            })
+            .css({
+                'background-color': color,
+            })
+            .click(function () {
+                var c = Colors.rgb2hex($color.css('background-color'));
+                setColor(c);
+            })
+            .on('dblclick', function (e) {
+                e.preventDefault();
+                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
+                    $color.css({
+                        'background-color': c,
+                    });
+                    palette.splice(i, 1, c);
+                    config.onLocal();
+                    setColor(c);
+                });
+            });
+
+            $colors.append($color);
+        };
+
+        var metadataCfg = {};
+        var updatePalette = metadataCfg.updatePalette = function (newPalette) {
+            palette = newPalette;
+            $colors.html('<div class="hidden">&nbsp;</div>');
+            palette.forEach(addColorToPalette);
+        };
+        updatePalette(palette);
+
+        var makeColorButton = function ($container) {
+            var $testColor = $('<input>', { type: 'color', value: '!' });
+
+            // if colors aren't supported, bail out
+            if ($testColor.attr('type') !== 'color' ||
+                $testColor.val() === '!') {
+                console.log("Colors aren't supported. Aborting");
+                return;
+            }
+
+            var $color = module.$color = $('<button>', {
+                id: "color-picker",
+                title: Messages.canvas_chooseColor,
+                'class': "fa fa-square rightside-button",
+            })
+            .on('click', function () {
+                pickColor($color.css('background-color'), function (color) {
+                    setColor(color);
+                });
+            });
+
+            setColor('#000');
+
+            $container.append($color);
+
+            return $color;
+        };
+
+        config.onInit = function (info) {
+            UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
+
+            Title = Cryptpad.createTitle({}, config.onLocal, Cryptpad);
+
+            Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
+
+            var configTb = {
+                displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
+                userList: UserList.getToolbarConfig(),
+                share: {
+                    secret: secret,
+                    channel: info.channel
+                },
+                title: Title.getTitleConfig(),
+                common: Cryptpad,
+                readOnly: readOnly,
+                ifrw: window,
+                realtime: info.realtime,
+                network: info.network,
+                $container: $bar,
+                $contentContainer: $('#canvas-area')
+            };
+
+            toolbar = module.toolbar = Toolbar.create(configTb);
+
+            Title.setToolbar(toolbar);
+
+            var $rightside = toolbar.$rightside;
+
+            /* save as template */
+            if (!Cryptpad.isTemplate(window.location.href)) {
+                var templateObj = {
+                    rt: info.realtime,
+                    Crypt: Cryptget,
+                    getTitle: function () { return document.title; }
+                };
+                var $templateButton = Cryptpad.createButton('template', true, templateObj);
+                $rightside.append($templateButton);
+            }
+
+            var $export = Cryptpad.createButton('export', true, {}, saveImage);
+            $rightside.append($export);
+
+            Cryptpad.createButton('savetodrive', true, {}, function () {})
+            .click(function () {
+                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
+                function (name) {
+                    if (name === null || !name.trim()) { return; }
+                    module.upload(name);
+                });
+            }).appendTo($rightside);
+
+            var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
+                if (err) { return; }
+                setEditable(false);
+                toolbar.failed();
+            });
+            $rightside.append($forget);
+
+            var editHash;
+
+            if (!readOnly) {
+                editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+                makeColorButton($rightside);
+            }
+            if (!readOnly) { Cryptpad.replaceHash(editHash); }
+        };
+
+        // used for debugging, feel free to remove
+        var Catch = function (f) {
+            return function () {
+                try {
+                    f();
+                } catch (e) {
+                    console.error(e);
+                }
+            };
+        };
+
+        var onRemote = config.onRemote = Catch(function () {
+            if (initializing) { return; }
+            var userDoc = module.realtime.getUserDoc();
+
+            Metadata.update(userDoc);
+            var json = JSON.parse(userDoc);
+            var remoteDoc = json.content;
+
+            // TODO update palette if it has changed
+
+            canvas.loadFromJSON(remoteDoc);
+            canvas.renderAll();
+
+            var content = canvas.toDatalessJSON();
+            if (content !== remoteDoc) { Cryptpad.notify(); }
+            if (readOnly) { setEditable(false); }
+        });
+        setEditable(false);
+
+        var stringifyInner = function (textValue) {
+            var obj = {
+                content: textValue,
+                metadata: {
+                    users: UserList.userData,
+                    palette: palette,
+                    defaultTitle: Title.defaultTitle,
+                    type: 'whiteboard',
+                }
+            };
+            if (!initializing) {
+                obj.metadata.title = Title.title;
+            }
+            // stringify the json and send it into chainpad
+            return JSONSortify(obj);
+        };
+
+
+        var onLocal = module.onLocal = config.onLocal = Catch(function () {
+            if (initializing) { return; }
+            if (readOnly) { return; }
+
+            var content = stringifyInner(canvas.toDatalessJSON());
+
+            module.patchText(content);
+        });
+
+        config.onReady = function (info) {
+            var realtime = module.realtime = info.realtime;
+            module.patchText = TextPatcher.create({
+                realtime: realtime
+            });
+
+            var isNew = false;
+            var userDoc = module.realtime.getUserDoc();
+            if (userDoc === "" || userDoc === "{}") { isNew = true; }
+            else {
+                var hjson = JSON.parse(userDoc);
+                if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
+                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
+                    Cryptpad.errorLoadingScreen(Messages.typeError);
+                    throw new Error(Messages.typeError);
+                }
+            }
+
+            Cryptpad.removeLoadingScreen();
+            setEditable(true);
+            initializing = false;
+            onRemote();
+
+            /*  TODO: restore palette from metadata.palette */
+
+            if (readOnly) { return; }
+            UserList.getLastName(toolbar.$userNameButton, isNew);
+        };
+
+        config.onAbort = function () {
+            setEditable(false);
+            toolbar.failed();
+            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+        };
+
+        // TODO onConnectionStateChange
+        config.onConnectionChange = function (info) {
+            setEditable(info.state);
+            toolbar.failed();
+            if (info.state) {
+                initializing = true;
+                toolbar.reconnecting(info.myId);
+                Cryptpad.findOKButton().click();
+            } else {
+                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+            }
+        };
+
+        module.rt = Realtime.start(config);
+
+        canvas.on('mouse:up', onLocal);
+
+        $('#clear').on('click', function () {
+            canvas.clear();
+            onLocal();
+        });
+
+        $('#save').on('click', function () {
+            saveImage();
+        });
+    };
+
+    Cryptpad.ready(function () {
+        andThen();
+        Cryptpad.reportAppUsage();
+    });
+    Cryptpad.onError(function (info) {
+        if (info) {
+            onConnectError();
+        }
+    });
+
+    });
+});
diff --git a/www/whiteboard/whiteboard.less b/www/oldwhiteboard/whiteboard.less
similarity index 100%
rename from www/whiteboard/whiteboard.less
rename to www/oldwhiteboard/whiteboard.less
diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index 85b1605b1..258f4f66a 100644
--- a/www/pad/app-pad.less
+++ b/www/pad/app-pad.less
@@ -1,11 +1,13 @@
 @import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
 
 .toolbar_main();
 .alertify_main();
 
 // body
 &.cp-app-pad {
+    .tokenfield_main();
     #cke_1_top {
         overflow: visible;
         padding: 0px;
@@ -38,6 +40,6 @@
         display:none !important;
     }
     &.cp-app-pad .cp-toolbar-userlist-drawer {
-      display:none;
+        display:none;
     }
 }
diff --git a/www/pad/inner.html b/www/pad/inner.html
index ad44c138f..03d635730 100644
--- a/www/pad/inner.html
+++ b/www/pad/inner.html
@@ -2,7 +2,7 @@
 <html class="cp-app-noscroll">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/pad/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
 </head>
 <body class="cp-app-pad">
     <textarea style="display:none" id="editor1" name="editor1"></textarea>
diff --git a/www/pad/inner.js b/www/pad/inner.js
index fde4a04ff..a3d9683e1 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -32,6 +32,7 @@ define([
     '/pad/links.js',
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
+    '/common/media-tag.js',
     '/api/config',
 
     '/bower_components/file-saver/FileSaver.min.js',
@@ -55,6 +56,7 @@ define([
     Links,
     nThen,
     SFCommon,
+    MediaTag,
     ApiConfig)
 {
     var saveAs = window.saveAs;
@@ -113,6 +115,15 @@ define([
         if (hj[1].type === '_moz') { hj[1].type = undefined; }
         return hj;
     };
+    var mediatagContentFilter = function (hj) {
+        if (hj[0] === 'MEDIA-TAG') { hj[2] = []; }
+        return hj;
+    };
+    var hjsonFilters = function (hj) {
+        brFilter(hj);
+        mediatagContentFilter(hj);
+        return hj;
+    };
 
     var onConnectError = function () {
         Cryptpad.errorLoadingScreen(Messages.websocketError);
@@ -124,11 +135,11 @@ define([
 
     var forbiddenTags = [
         'SCRIPT',
-        'IFRAME',
+        //'IFRAME',
         'OBJECT',
         'APPLET',
-        'VIDEO',
-        'AUDIO'
+        //'VIDEO',
+        //'AUDIO'
     ];
 
     var getHTML = function (inner) {
@@ -359,6 +370,46 @@ define([
 
         var DD = new DiffDom(mkDiffOptions(cursor, readOnly));
 
+        var mediaMap = {};
+        var restoreMediaTags = function (tempDom) {
+            var tags = tempDom.querySelectorAll('media-tag:empty');
+            Cryptpad.slice(tags).forEach(function (tag) {
+                var src = tag.getAttribute('src');
+                if (mediaMap[src]) {
+                    mediaMap[src].forEach(function (n) {
+                        tag.appendChild(n);
+                    });
+                }
+            });
+        };
+        var displayMediaTags = function (dom) {
+            setTimeout(function () { // Just in case
+                var tags = dom.querySelectorAll('media-tag:empty');
+                Cryptpad.slice(tags).forEach(function (el) {
+                    MediaTag(el);
+                    $(el).on('keydown', function (e) {
+                        if ([8,46].indexOf(e.which) !== -1) {
+                            $(el).remove();
+                            onLocal();
+                        }
+                    });
+                    var observer = new MutationObserver(function(mutations) {
+                        mutations.forEach(function(mutation) {
+                            if (mutation.type === 'childList') {
+                                var list_values = [].slice.call(el.children);
+                                mediaMap[el.getAttribute('src')] = list_values;
+                            }
+                        });
+                    });
+                    observer.observe(el, {
+                        attributes: false,
+                        childList: true,
+                        characterData: false
+                    });
+                });
+            });
+        };
+
         // apply patches, and try not to lose the cursor in the process!
         var applyHjson = function (shjson) {
             var userDocStateDom = hjsonToDom(JSON.parse(shjson));
@@ -368,8 +419,10 @@ define([
             } else if (readOnly) {
                 userDocStateDom.removeAttribute("contenteditable");
             }
+            restoreMediaTags(userDocStateDom);
             var patch = (DD).diff(inner, userDocStateDom);
             (DD).apply(inner, patch);
+            displayMediaTags(inner);
             if (readOnly) {
                 var $links = $(inner).find('a');
                 // off so that we don't end up with multiple identical handlers
@@ -378,7 +431,7 @@ define([
         };
 
         var stringifyDOM = module.stringifyDOM = function (dom) {
-            var hjson = Hyperjson.fromDOM(dom, isNotMagicLine, brFilter);
+            var hjson = Hyperjson.fromDOM(dom, isNotMagicLine, hjsonFilters);
             hjson[3] = {
                 metadata: metadataMgr.getMetadataLazy()
             };
@@ -508,7 +561,6 @@ define([
 
         realtimeOptions.onInit = function (info) {
             readOnly = metadataMgr.getPrivateData().readOnly;
-            console.log('onInit');
             var titleCfg = { getHeadingText: getHeadingText };
             Title = common.createTitle(titleCfg, realtimeOptions.onLocal);
             var configTb = {
@@ -617,11 +669,38 @@ define([
             };
             var $forgetPad = common.createButton('forget', true, {}, forgetCb);
             $rightside.append($forgetPad);
+
+            if (!readOnly) {
+                var fileDialogCfg = {
+                    onSelect: function (data) {
+                        if (data.type === 'file') {
+                            var mt = '<media-tag contenteditable="false" src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '" tabindex="1"></media-tag>';
+                            editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
+                            return;
+                        }
+                    }
+                };
+                common.initFilePicker(fileDialogCfg);
+                window.APP.$mediaTagButton = $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': 'cp-toolbar-rightside-button fa fa-picture-o',
+                    style: 'font-size: 17px'
+                }).click(function () {
+                    var pickerCfg = {
+                        types: ['file'],
+                        where: ['root']
+                    };
+                    common.openFilePicker(pickerCfg);
+                }).appendTo($rightside);
+
+
+                var $tags = common.createButton('hashtag', true);
+                $rightside.append($tags);
+            }
         };
 
         // this should only ever get called once, when the chain syncs
         realtimeOptions.onReady = function (info) {
-            console.log('onReady');
             if (!module.isMaximized) {
                 module.isMaximized = true;
                 $('iframe.cke_wysiwyg_frame').css('width', '');
@@ -644,10 +723,13 @@ define([
             if (shjson === '') { newPad = true; }
 
             if (!newPad) {
+                if (shjson[0] !== '[') {
+                    var errorText = Messages.typeError;
+                    Cryptpad.errorLoadingScreen(errorText);
+                    throw new Error(errorText);
+                }
                 applyHjson(shjson);
 
-                // Update the user list (metadata) from the hyperjson
-                // XXX Metadata.update(shjson);
                 var parsed = JSON.parse(shjson);
                 if (parsed[3] && parsed[3].metadata) {
                     metadataMgr.updateMetadata(parsed[3].metadata);
@@ -683,6 +765,20 @@ define([
             }
 
             onLocal();
+
+            var fmConfig = {
+                ckeditor: editor,
+                body: $('body'),
+                onUploaded: function (ev, data) {
+                    var parsed = Cryptpad.parsePadUrl(data.url);
+                    var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                    var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                    var mt = '<media-tag contenteditable="false" src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '" tabindex="1"></media-tag>';
+                    editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
+                }
+            };
+            window.APP.FM = common.createFileManager(fmConfig);
+
             editor.focus();
             if (newPad) {
                 cursor.setToEnd();
@@ -693,10 +789,8 @@ define([
 
         realtimeOptions.onConnectionChange = function (info) {
             setEditable(info.state);
-            //toolbar.failed(); TODO
             if (info.state) {
                 initializing = true;
-                //toolbar.reconnecting(info.myId); // TODO
                 Cryptpad.findOKButton().click();
             } else {
                 Cryptpad.alert(Messages.common_connectionLost, undefined, true);
@@ -713,6 +807,7 @@ define([
 
             // stringify the json and send it into chainpad
             var shjson = stringifyDOM(inner);
+            displayMediaTags(inner);
 
             module.patchText(shjson);
             if (module.realtime.getUserDoc() !== shjson) {
@@ -794,11 +889,17 @@ define([
             }
             // Used in ckeditor-config.js
             Ckeditor.CRYPTPAD_URLARGS = ApiConfig.requireConf.urlArgs;
+            Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
             module.ckeditor = editor = Ckeditor.replace('editor1', {
                 customConfig: '/customize/ckeditor-config.js',
             });
             editor.on('instanceReady', waitFor());
         }).nThen(function (/*waitFor*/) {
+            editor.plugins.mediatag.translations = {
+                title: Messages.pad_mediatagTitle,
+                width: Messages.pad_mediatagWidth,
+                height: Messages.pad_mediatagHeight
+            };
             /*if (Ckeditor.env.safari) {
                 var fixIframe = function () {
                     $('iframe.cke_wysiwyg_frame').height($('#cke_1_contents').height());
diff --git a/www/pad/links.js b/www/pad/links.js
index 4a2fc57d8..bc582f959 100644
--- a/www/pad/links.js
+++ b/www/pad/links.js
@@ -1,7 +1,6 @@
-define(['/common/cryptpad-common.js'], function (Cryptpad) {
+define(['/customize/messages.js'], function (Messages) {
     // Adds a context menu entry to open the selected link in a new tab.
     // See https://github.com/xwiki-contrib/application-ckeditor/commit/755d193497bf23ed874d874b4ae92fbee887fc10
-    var Messages = Cryptpad.Messages;
     return {
         addSupportForOpeningLinksInNewTab : function (Ckeditor) {
                 // Returns the DOM element of the active (currently focused) link. It has also support for linked image widgets.
diff --git a/www/pad/mediatag-plugin-dialog.js b/www/pad/mediatag-plugin-dialog.js
new file mode 100644
index 000000000..a1a4c986b
--- /dev/null
+++ b/www/pad/mediatag-plugin-dialog.js
@@ -0,0 +1,60 @@
+CKEDITOR.dialog.add('mediatag', function (editor) {
+    var Messages = editor.plugins.mediatag.translations;
+    return {
+        title: Messages.title,
+        minWidth: 400,
+        minHeight: 200,
+        contents: [
+            {
+                id: 'tab-basic',
+                label: Messages.title,
+                elements: [
+                    {
+                        type: 'text',
+                        id: 'width',
+                        label: Messages.width,
+                    },
+                    {
+                        type: 'text',
+                        id: 'height',
+                        label: Messages.height,
+                    }
+                ]
+            },
+        ],
+        onShow: function () {
+            var el = editor.plugins.mediatag.clicked;
+            var rect = el.getClientRect();
+            var dialog = this.parts.contents.$;
+            var inputs = dialog.querySelectorAll('input');
+            var wInput = inputs[0];
+            var hInput = inputs[1];
+            wInput.value = Math.round(rect.width);
+            hInput.value = Math.round(rect.height);
+        },
+        onOk: function() {
+            var dialog = this;
+            var el = editor.plugins.mediatag.clicked;
+            var dialog = this.parts.contents.$;
+            var inputs = dialog.querySelectorAll('input');
+            var wInput = inputs[0];
+            var hInput = inputs[1];
+
+            window.setTimeout(function () {
+                if (wInput.value === "") {
+                    el.removeAttribute('width');
+                    el.removeStyle('width');
+                } else {
+                    el.setSize('width', parseInt(wInput.value));
+                }
+                if (hInput.value === "") {
+                    el.removeAttribute('height');
+                    el.removeStyle('height');
+                } else {
+                    el.setSize('height', parseInt(hInput.value));
+                }
+                editor.fire( 'change' );
+            });
+        }
+    };
+});
diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js
new file mode 100644
index 000000000..c20066937
--- /dev/null
+++ b/www/pad/mediatag-plugin.js
@@ -0,0 +1,181 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview The Image plugin.
+ */
+
+( function() {
+
+    CKEDITOR.plugins.add( 'mediatag', {
+        requires: 'dialog',
+        //icons: 'image',
+        //hidpi: true,
+        onLoad: function () {
+
+            CKEDITOR.addCss(
+            'media-tag{' +
+                'display:inline-block;' +
+            '}' +
+            'media-tag.selected{' +
+                'border: 1px solid black;' +
+            '}' +
+            'media-tag iframe{' +
+                'border: 6px solid #eee;' +
+            '}' +
+            'media-tag img{' +
+                'vertical-align: top;' +
+            '}' +
+            'media-tag *{' +
+                'width:100%; height:100%;' +
+            '}');
+        },
+        init: function( editor ) {
+            var pluginName = 'mediatag';
+
+            // Register the dialog.
+            CKEDITOR.dialog.add( pluginName, this.path + 'mediatag-plugin-dialog.js' );
+
+            var allowed = 'media-tag[!data-crypto-key,!src,contenteditable,width,height]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
+                required = 'media-tag[data-crypto-key,src]';
+
+            // Register the command.
+            editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, {
+                allowedContent: allowed,
+                requiredContent: required,
+                contentTransformations: [
+                    [ 'media-tag{width}: sizeToStyle', 'media-tag[width]: sizeToAttribute' ],
+                    [ 'media-tag{float}: alignmentToStyle', 'media-tag[align]: alignmentToAttribute' ]
+                ]
+            } ) );
+
+            var isMediaTag = function (el) {
+                if (el.is('media-tag')) { return el; }
+                var mt = el.getParents().slice().filter(function (p) {
+                    return p.is('media-tag');
+                });
+                if (mt.length !== 1) { return; }
+                return mt[0];
+            };
+            editor.on('doubleclick', function (evt) {
+                var element = evt.data.element;
+                var mt = isMediaTag(element);
+                if (mt && !element.data('cke-realelement')) {
+                    editor.plugins.mediatag.clicked = mt;
+                    evt.data.dialog = 'mediatag';
+                }
+            });
+
+            // If the "contextmenu" plugin is loaded, register the listeners.
+            if (editor.contextMenu) {
+                editor.contextMenu.addListener(function (element) {
+                    if (getSelectedMediatag(editor, element)) {
+                        return { mediatag: CKEDITOR.TRISTATE_OFF };
+                    }
+                });
+            }
+        },
+        afterInit: function( editor ) {
+            // Customize the behavior of the alignment commands. (http://dev.ckeditor.com/ticket/7430)
+            setupAlignCommand('left');
+            setupAlignCommand('right');
+            setupAlignCommand('center');
+            setupAlignCommand('block');
+
+            function setupAlignCommand (value) {
+                var command = editor.getCommand('justify' + value);
+                if (command) {
+                    if (value === 'left' || value === 'right') {
+                        command.on('exec', function (evt) {
+                            var img = getSelectedMediatag(editor), align;
+                            if (img) {
+                                align = getMediatagAlignment(img);
+                                if (align === value) {
+                                    img.removeStyle('float');
+
+                                    // Remove "align" attribute when necessary.
+                                    if (value === getMediatagAlignment(img))
+                                        img.removeAttribute( 'align' );
+                                } else {
+                                    img.setStyle( 'float', value );
+                                }
+
+                                evt.cancel();
+                            }
+                        } );
+                    }
+
+                    command.on('refresh', function (evt) {
+                        var img = getSelectedMediatag(editor), align;
+                        if (img) {
+                            align = getMediatagAlignment(img);
+
+                            this.setState(
+                            (align === value) ? CKEDITOR.TRISTATE_ON : ( value === 'right' || value === 'left' ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
+
+                            evt.cancel();
+                        }
+                    } );
+                }
+            }
+        }
+    } );
+
+    function getSelectedMediatag (editor, element) {
+        if (!element) {
+            var sel = editor.getSelection();
+            element = sel.getSelectedElement();
+        }
+
+        if (element && element.is('media-tag') && !element.data('cke-realelement')
+            && !element.isReadOnly()) {
+            return element;
+        }
+    }
+
+    function getMediatagAlignment (element) {
+        var align = element.getStyle('float');
+
+        if (align === 'inherit' || align === 'none') {
+            align = 0;
+        }
+
+        if (!align) {
+            align = element.getAttribute('align');
+        }
+
+        return align;
+    }
+} )();
+
+/**
+ * Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.
+ *
+ *      config.image_prefillDimensions = false;
+ *
+ * @since 4.5
+ * @cfg {Boolean} [image_prefillDimensions=true]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Whether to remove links when emptying the link URL field in the Image dialog window.
+ *
+ *      config.image_removeLinkByEmptyURL = false;
+ *
+ * @cfg {Boolean} [image_removeLinkByEmptyURL=true]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.mediatag_removeLinkByEmptyURL = true;
+
+/**
+ * Padding text to set off the image in the preview area.
+ *
+ *      config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );
+ *
+ * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)]
+ * @member CKEDITOR.config
+ */
+
diff --git a/www/poll/poll.less b/www/poll/poll.less
index 3774e0fd0..814c1db1e 100644
--- a/www/poll/poll.less
+++ b/www/poll/poll.less
@@ -39,7 +39,7 @@ body {
     line-height: auto;
 }
 .cryptpad-toolbar {
-    display: inline-block;
+    display: block;
 }
 .realtime {
     display: block;
diff --git a/www/register/main.js b/www/register/main.js
index 7de37e8bf..1b7103cac 100644
--- a/www/register/main.js
+++ b/www/register/main.js
@@ -85,6 +85,8 @@ define([
             Cryptpad.whenRealtimeSyncs(result.realtime, function () {
                 Cryptpad.login(result.userHash, result.userName, function () {
                     registering = false;
+                    /*
+                    FIXME: migration and readme not working if not redirected to drive
                     if (sessionStorage.redirectTo) {
                         var h = sessionStorage.redirectTo;
                         var parser = document.createElement('a');
@@ -95,6 +97,7 @@ define([
                             return;
                         }
                     }
+                    */
                     window.location.href = '/drive/';
                 });
             });
diff --git a/www/settings/main.js b/www/settings/main.js
index a94cf7141..e2464acee 100644
--- a/www/settings/main.js
+++ b/www/settings/main.js
@@ -381,7 +381,7 @@ define([
                 if (!yes) { return; }
                 $spinner.show();
                 $ok.hide();
-                Merge.anonDriveIntoUser(obj.proxy, function () {
+                Merge.anonDriveIntoUser(obj, localStorage.FS_hash, function () {
                     $spinner.hide();
                     $ok.show();
                     Cryptpad.alert(Messages.settings_importDone);
diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less
index 0d54fa710..f6ebf8cf0 100644
--- a/www/slide/app-slide.less
+++ b/www/slide/app-slide.less
@@ -4,11 +4,13 @@
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) "../../customize/src/less2/include/mediatag.less";
+@import (once) '../../customize/src/less2/include/tokenfield.less';
 
 .mediatag_base();
 .toolbar_main();
 .fileupload_main();
 .alertify_main();
+.tokenfield_main();
 
 // body
 font-size: unset;
diff --git a/www/slide/inner.html b/www/slide/inner.html
index 0636ced8a..b7f831ccd 100644
--- a/www/slide/inner.html
+++ b/www/slide/inner.html
@@ -2,7 +2,7 @@
 <html class="cp-app-noscroll cp-app-print">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/slide/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/slide/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
     <style>
         .loading-hidden { display: none; }
         #editor1 { display: none; }
diff --git a/www/slide/inner.js b/www/slide/inner.js
index 8233f21f1..0efe35d1c 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -516,6 +516,9 @@ define([
                     };
                     common.openFilePicker(pickerCfg);
                 }).appendTo($rightside);
+
+                var $tags = common.createButton('hashtag', true);
+                $rightside.append($tags);
             }
 
             metadataMgr.onChange(function () {
@@ -552,7 +555,8 @@ define([
                     metadataMgr.updateMetadata(hjson.metadata);
                 }
                 if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
-                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'code')) {
+                    (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
+                     hjson.metadata.type !== 'slide')) {
                     var errorText = Messages.typeError;
                     Cryptpad.errorLoadingScreen(errorText);
                     throw new Error(errorText);
@@ -655,7 +659,7 @@ define([
                 }
             }
             Slide.update(remoteDoc);
-            if (oldDoc !== remoteDoc) { Cryptpad.notify(); }
+            if (oldDoc !== remoteDoc) { common.notify(); }
         };
 
         config.onAbort = function () {
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
new file mode 100644
index 000000000..848fd994c
--- /dev/null
+++ b/www/whiteboard/app-whiteboard.less
@@ -0,0 +1,144 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tools.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+
+// body
+&.cp-app-whiteboard {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+
+    .middle () {
+        position: relative;
+        vertical-align: middle;
+    }
+    .hidden {
+        display: none;
+    }
+
+    // created in the html
+    #cp-app-whiteboard-canvas-area {
+        flex: 1;
+        display: flex;
+    }
+    // created by fabricjs. styled so defaults don't break anything
+    .cp-app-whiteboard-canvas-container {
+        margin: auto;
+        background: white;
+        & > canvas {
+            border: 1px solid black;
+        }
+    }
+
+    .cp-app-whiteboard-unselectable {
+        .tools_unselectable();
+    }
+
+    // contains user tools
+    #cp-app-whiteboard-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: relative;
+        border-top: 1px solid black;
+        background: white;
+
+        padding: 1em;
+
+        & > * + * {
+            margin: 0;
+            margin-left: 1em;
+        }
+
+        #cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
+            .middle;
+        }
+        #cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
+            display: inline;
+            vertical-align: middle;
+        }
+        .cp-app-whiteboard-selected {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9001;
+
+            width: 100px;
+            height: 100px;
+        }
+
+        .cp-app-whiteboard-range-group {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            input[type="range"] {
+                background-color: inherit;
+            }
+
+            & > span {
+                cursor: default;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+        .cp-app-whiteboard-range-group:first-of-type {
+            margin-left: 2em;
+        }
+        .cp-app-whiteboard-range-group:last-of-type {
+            margin-right: 1em;
+        }
+    }
+
+    /* Colors */
+    #cp-app-whiteboard-colors {
+        .middle;
+        z-index: 100;
+        background: white;
+        display: flex;
+        justify-content: space-between;
+
+        padding: 1em;
+
+        span.cp-app-whiteboard-palette-color {
+            height: 4vw;
+            width: 4vw;
+            display: block;
+            margin: 5px;
+            border: 1px solid black;
+            vertical-align: top;
+            border-radius: 50%;
+            transition: transform 0.1s;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+
+    // used in the toolbar if supported
+    #cp-app-whiteboard-color-picker {
+        display: block;
+    }
+
+    // input[type=color] must exist in the dom to work correctly
+    // styled so that they don't break layouts
+
+    #cp-app-whiteboard-pickers {
+        visibility: hidden;
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: -5;
+    }
+}
+
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index a5794b8d6..e3f7eacc4 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -1,9 +1,38 @@
 <!DOCTYPE html>
-<html class="cp">
+<html>
 <head>
+    <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
 </head>
 <body>
-
+<iframe id="sbox-iframe">
diff --git a/www/whiteboard/inner.html b/www/whiteboard/inner.html
new file mode 100644
index 000000000..b2349ab88
--- /dev/null
+++ b/www/whiteboard/inner.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/whiteboard/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+    </style>
+</head>
+<body class="cp-app-whiteboard">
+
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
new file mode 100644
index 000000000..cd14ef9f3
--- /dev/null
+++ b/www/whiteboard/inner.js
@@ -0,0 +1,556 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    '/common/cryptpad-common.js',
+    '/common/cryptget.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/api/config',
+    '/common/common-realtime.js',
+    '/customize/pages.js',
+
+    '/customize/application_config.js',
+    '/common/common-thumbnail.js',
+    '/whiteboard/colors.js',
+
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+], function (
+    $,
+    Crypto,
+    TextPatcher,
+    Toolbar,
+    JSONSortify,
+    JsonOT,
+    Cryptpad,
+    Cryptget,
+    nThen,
+    SFCommon,
+    ApiConfig,
+    CommonRealtime,
+    Pages,
+    AppConfig,
+    Thumb,
+    Colors)
+{
+    var saveAs = window.saveAs;
+    var Messages = Cryptpad.Messages;
+
+    var APP = window.APP = {
+        Cryptpad: Cryptpad,
+        $: $
+    };
+    var Fabric = APP.Fabric = window.fabric;
+
+    var stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var toolbar;
+
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+
+    var andThen = function (common) {
+        var config = {};
+        /* Initialize Fabric */
+        var canvas = APP.canvas = new Fabric.Canvas('cp-app-whiteboard-canvas', {
+            containerClass: 'cp-app-whiteboard-canvas-container'
+        });
+        var $canvas = $('canvas');
+        var $controls = $('#cp-app-whiteboard-controls');
+        var $canvasContainer = $('canvas').parents('.cp-app-whiteboard-canvas-container');
+        var $pickers = $('#cp-app-whiteboard-pickers');
+        var $colors = $('#cp-app-whiteboard-colors');
+        var $cursors = $('#cp-app-whiteboard-cursors');
+        var $deleteButton = $('#cp-app-whiteboard-delete');
+        var $toggle = $('#cp-app-whiteboard-toggledraw');
+        var $width = $('#cp-app-whiteboard-width');
+        var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
+        var $opacity = $('#cp-app-whiteboard-opacity');
+        var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]');
+
+
+        // Brush
+
+        var readOnly = false;
+        var brush = {
+            color: '#000000',
+            opacity: 1
+        };
+
+        var createCursor = function () {
+            var w = canvas.freeDrawingBrush.width;
+            var c = canvas.freeDrawingBrush.color;
+            var size = w > 30 ? w+2 : w+32;
+            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
+            var $ccanvas = $cursors.find('canvas');
+            var ccanvas = $ccanvas[0];
+
+            var ctx = ccanvas.getContext('2d');
+            var centerX = size / 2;
+            var centerY = size / 2;
+            var radius = w/2;
+
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = c;
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = brush.color;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
+            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
+            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
+            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
+            ctx.strokeStyle = '#000000';
+            ctx.stroke();
+
+            var img = ccanvas.toDataURL("image/png");
+            $controls.find('.cp-app-whiteboard-selected > img').attr('src', img);
+            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
+        };
+
+        var updateBrushWidth = function () {
+            var val = $width.val();
+            canvas.freeDrawingBrush.width = Number(val);
+            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#cp-app-whiteboard-width-val').text(val + 'px');
+            createCursor();
+        };
+        updateBrushWidth();
+        $width.on('change', updateBrushWidth);
+
+        var updateBrushOpacity = function () {
+            var val = $opacity.val();
+            brush.opacity = Number(val);
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#cp-app-whiteboard-opacity-val').text((Number(val) * 100) + '%');
+            createCursor();
+        };
+        updateBrushOpacity();
+        $opacity.on('change', updateBrushOpacity);
+
+        var pickColor = function (current, cb) {
+            var $picker = $('<input>', {
+                type: 'color',
+                value: '#FFFFFF',
+                })
+            .on('change', function () {
+                var color = this.value;
+                cb(color);
+            }).appendTo($pickers);
+            setTimeout(function () {
+                $picker.val(current);
+                $picker.click();
+            });
+        };
+        var setColor = function (c) {
+            c = Colors.rgb2hex(c);
+            brush.color = c;
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            APP.$color.css({
+                'color': c,
+            });
+            createCursor();
+        };
+
+        var palette = AppConfig.whiteboardPalette || [
+            'red', 'blue', 'green', 'white', 'black', 'purple',
+            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
+        ];
+        $('.cp-app-whiteboard-palette-color').on('click', function () {
+            var color = $(this).css('background-color');
+            setColor(color);
+        });
+
+        APP.draw = true;
+        var toggleDrawMode = function () {
+            APP.draw = !APP.draw;
+            canvas.isDrawingMode = APP.draw;
+            $toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
+            if (APP.draw) { $deleteButton.hide(); }
+            else { $deleteButton.show(); }
+        };
+        $toggle.click(toggleDrawMode);
+
+        var deleteSelection = function () {
+            if (canvas.getActiveObject()) {
+                canvas.getActiveObject().remove();
+            }
+            if (canvas.getActiveGroup()) {
+                canvas.getActiveGroup()._objects.forEach(function (el) {
+                    el.remove();
+                });
+                canvas.discardActiveGroup();
+            }
+            canvas.renderAll();
+            config.onLocal();
+        };
+        $deleteButton.click(deleteSelection);
+        $(window).on('keyup', function (e) {
+            if (e.which === 46) { deleteSelection (); }
+        });
+
+        var setEditable = function (bool) {
+            if (readOnly && bool) { return; }
+            if (bool) { $controls.css('display', 'flex'); }
+            else { $controls.hide(); }
+
+            canvas.isDrawingMode = bool ? APP.draw : false;
+            if (!bool) {
+                canvas.deactivateAll();
+                canvas.renderAll();
+            }
+            canvas.forEachObject(function (object) {
+                object.selectable = bool;
+            });
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
+        };
+
+        var saveImage = APP.saveImage = function () {
+            var defaultName = "pretty-picture.png";
+            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
+                if (!(typeof(filename) === 'string' && filename)) { return; }
+                $canvas[0].toBlob(function (blob) {
+                    saveAs(blob, filename);
+                });
+            });
+        };
+
+        APP.FM = common.createFileManager({});
+        APP.upload = function (title) {
+            var canvas = $canvas[0];
+            var finish = function (thumb) {
+                canvas.toBlob(function (blob) {
+                    blob.name = title;
+                    APP.FM.handleFile(blob, void 0, thumb);
+                });
+            };
+
+            Thumb.fromCanvas(canvas, function (e, blob) {
+                // carry on even if you can't get a thumbnail
+                if (e) { console.error(e); }
+                finish(blob);
+            });
+        };
+
+        var initializing = true;
+        var $bar = $('#cp-toolbar');
+        var Title;
+        var cpNfInner;
+        var metadataMgr;
+
+        config = {
+            readOnly: readOnly,
+            transformFunction: JsonOT.validate,
+            // cryptpad debug logging (default is 1)
+            // logLevel: 0,
+            validateContent: function (content) {
+                try {
+                    JSON.parse(content);
+                    return true;
+                } catch (e) {
+                    console.log("Failed to parse, rejecting patch");
+                    return false;
+                }
+            }
+        };
+
+        var addColorToPalette = function (color, i) {
+            if (readOnly) { return; }
+            var $color = $('<span>', {
+                'class': 'cp-app-whiteboard-palette-color',
+            })
+            .css({
+                'background-color': color,
+            })
+            .click(function () {
+                var c = Colors.rgb2hex($color.css('background-color'));
+                setColor(c);
+            })
+            .on('dblclick', function (e) {
+                e.preventDefault();
+                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
+                    $color.css({
+                        'background-color': c,
+                    });
+                    palette.splice(i, 1, c);
+                    APP.updateLocalPalette(palette);
+                    setColor(c);
+                });
+            });
+
+            $colors.append($color);
+        };
+
+        var first = true;
+        var updatePalette = function (newPalette) {
+            if (first || stringify(palette) !== stringify(newPalette)) {
+                palette = newPalette;
+                $colors.html('<div class="hidden">&nbsp;</div>');
+                palette.forEach(addColorToPalette);
+                first = false;
+            }
+        };
+        var updateLocalPalette = APP.updateLocalPalette = function (newPalette) {
+            updatePalette(newPalette);
+            var metadata = JSON.parse(JSON.stringify(metadataMgr.getMetadata()));
+            metadata.palette = newPalette;
+            metadataMgr.updateMetadata(metadata);
+            config.onLocal();
+        };
+
+        var makeColorButton = function ($container) {
+            var $testColor = $('<input>', { type: 'color', value: '!' });
+
+            // if colors aren't supported, bail out
+            if ($testColor.attr('type') !== 'color' ||
+                $testColor.val() === '!') {
+                console.log("Colors aren't supported. Aborting");
+                return;
+            }
+
+            var $color = APP.$color = $('<button>', {
+                id: "cp-app-whiteboard-color-picker",
+                title: Messages.canvas_chooseColor,
+                'class': "fa fa-square cp-toolbar-rightside-button",
+            })
+            .on('click', function () {
+                pickColor($color.css('background-color'), function (color) {
+                    setColor(color);
+                });
+            });
+
+            setColor('#000');
+
+            $container.append($color);
+
+            return $color;
+        };
+
+        var stringifyInner = function (textValue) {
+            var obj = {
+                content: textValue,
+                metadata: metadataMgr.getMetadataLazy()
+            };
+            // stringify the json and send it into chainpad
+            return stringify(obj);
+        };
+
+        var onLocal = config.onLocal = function () {
+            if (initializing) { return; }
+            if (readOnly) { return; }
+
+            var content = stringifyInner(canvas.toDatalessJSON());
+
+            APP.patchText(content);
+        };
+
+        config.onInit = function (info) {
+            updateLocalPalette(palette);
+            readOnly = metadataMgr.getPrivateData().readOnly;
+
+            Title = common.createTitle({}, config.onLocal);
+
+            var configTb = {
+                displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
+                title: Title.getTitleConfig(),
+                metadataMgr: metadataMgr,
+                readOnly: readOnly,
+                realtime: info.realtime,
+                common: Cryptpad,
+                sfCommon: common,
+                $container: $bar,
+                $contentContainer: $('#cp-app-whiteboard-canvas-area')
+            };
+            toolbar = APP.toolbar = Toolbar.create(configTb);
+            Title.setToolbar(toolbar);
+
+            var $rightside = toolbar.$rightside;
+
+            /* save as template */
+            if (!metadataMgr.getPrivateData().isTemplate) {
+                var templateObj = {
+                    rt: info.realtime,
+                    getTitle: function () { return metadataMgr.getMetadata().title; }
+                };
+                var $templateButton = common.createButton('template', true, templateObj);
+                $rightside.append($templateButton);
+            }
+
+            /* add an export button */
+            var $export = common.createButton('export', true, {}, saveImage);
+            $rightside.append($export);
+
+            common.createButton('savetodrive', true, {}, function () {})
+            .click(function () {
+                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
+                function (name) {
+                    if (name === null || !name.trim()) { return; }
+                    APP.upload(name);
+                });
+            }).appendTo($rightside);
+
+            var $forget = common.createButton('forget', true, {}, function (err) {
+                if (err) { return; }
+                setEditable(false);
+            });
+            $rightside.append($forget);
+
+            if (!readOnly) {
+                makeColorButton($rightside);
+            }
+
+            metadataMgr.onChange(function () {
+                var md = metadataMgr.getMetadata();
+                if (md.palette) {
+                    updateLocalPalette(md.palette);
+                }
+            });
+        };
+
+        config.onReady = function (info) {
+            if (APP.realtime !== info.realtime) {
+                var realtime = APP.realtime = info.realtime;
+                APP.patchText = TextPatcher.create({
+                    realtime: realtime,
+                    //logging: true
+                });
+            }
+
+            var userDoc = APP.realtime.getUserDoc();
+            var isNew = false;
+            var newDoc = '';
+            if (userDoc === "" || userDoc === "{}") { isNew = true; }
+
+            if (userDoc !== "") {
+                var hjson = JSON.parse(userDoc);
+
+                if (hjson && hjson.metadata) {
+                    metadataMgr.updateMetadata(hjson.metadata);
+                }
+                if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
+                    (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
+                     hjson.metadata.type !== 'whiteboard')) {
+                    var errorText = Messages.typeError;
+                    Cryptpad.errorLoadingScreen(errorText);
+                    throw new Error(errorText);
+                }
+                newDoc = hjson.content;
+            } else {
+                Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
+            }
+            if (newDoc) {
+                canvas.loadFromJSON(newDoc);
+                canvas.renderAll();
+            }
+
+            setEditable(!readOnly);
+            initializing = false;
+            config.onLocal();
+            Cryptpad.removeLoadingScreen();
+            if (readOnly) { return; }
+            if (isNew) {
+                common.openTemplatePicker();
+            }
+        };
+
+        config.onRemote = function () {
+            if (initializing) { return; }
+            var userDoc = APP.realtime.getUserDoc();
+
+            var json = JSON.parse(userDoc);
+            var remoteDoc = json.content;
+
+            if (json.metadata) {
+                metadataMgr.updateMetadata(json.metadata);
+            }
+
+            // TODO update palette if it has changed
+
+            canvas.loadFromJSON(remoteDoc);
+            canvas.renderAll();
+
+            var content = canvas.toDatalessJSON();
+            if (content !== remoteDoc) { common.notify(); }
+            if (readOnly) { setEditable(false); }
+        };
+
+        config.onAbort = function () {
+            // inform of network disconnect
+            setEditable(false);
+            toolbar.failed();
+            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+        };
+
+        config.onConnectionChange = function (info) {
+            setEditable(info.state);
+            if (info.state) {
+                initializing = true;
+                Cryptpad.findOKButton().click();
+            } else {
+                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+            }
+        };
+
+        config.onError = onConnectError;
+
+        cpNfInner = common.startRealtime(config);
+        metadataMgr = cpNfInner.metadataMgr;
+
+        cpNfInner.onInfiniteSpinner(function () {
+            setEditable(false);
+            Cryptpad.confirm(Messages.realtime_unrecoverableError, function (yes) {
+                if (!yes) { return; }
+                common.gotoURL();
+            });
+        });
+
+        canvas.on('mouse:up', onLocal);
+
+        $('#cp-app-whiteboard-clear').on('click', function () {
+            canvas.clear();
+            onLocal();
+        });
+
+        $('#save').on('click', function () {
+            saveImage();
+        });
+
+        Cryptpad.onLogout(function () { setEditable(false); });
+    };
+
+    var main = function () {
+        var common;
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                Cryptpad.addLoadingScreen();
+                var $div = $('<div>').append(Pages['/whiteboard/']());
+                $('body').append($div.html());
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (/*waitFor*/) {
+            Cryptpad.onError(function (info) {
+                if (info && info.type === "store") {
+                    onConnectError();
+                }
+            });
+            andThen(common);
+        });
+    };
+    main();
+});
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index 17e929d9b..4c8a3887c 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -1,511 +1,41 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
 define([
-    'jquery',
+    '/bower_components/nthen/index.js',
     '/api/config',
-    '/bower_components/chainpad-netflux/chainpad-netflux.js',
-    '/bower_components/chainpad-crypto/crypto.js',
-    '/common/toolbar2.js',
-    '/bower_components/textpatcher/TextPatcher.amd.js',
-    'json.sortify',
-    '/bower_components/chainpad-json-validator/json-ot.js',
-    '/common/cryptpad-common.js',
-    '/common/cryptget.js',
-    '/whiteboard/colors.js',
-    '/customize/application_config.js',
-    '/common/common-thumbnail.js',
-    '/bower_components/secure-fabric.js/dist/fabric.min.js',
-    '/bower_components/file-saver/FileSaver.min.js',
+    'jquery',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js'
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
 
-    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'less!/customize/src/less/cryptpad.less',
-    'less!/whiteboard/whiteboard.less',
-    'less!/customize/src/less/toolbar.less',
-], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
-    var saveAs = window.saveAs;
-    var Messages = Cryptpad.Messages;
-
-    var module = window.APP = { $:$ };
-    var Fabric = module.Fabric = window.fabric;
-
-    $(function () {
-    Cryptpad.addLoadingScreen();
-    var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
-    };
-    var toolbar;
-
-    var secret = Cryptpad.getSecrets();
-    var readOnly = secret.keys && !secret.keys.editKeyStr;
-    if (!secret.keys) {
-        secret.keys = secret.key;
-    }
-
-    var andThen = function () {
-        /* Initialize Fabric */
-        var canvas = module.canvas = new Fabric.Canvas('canvas');
-        var $canvas = $('canvas');
-        var $controls = $('#controls');
-        var $canvasContainer = $('canvas').parents('.canvas-container');
-        var $pickers = $('#pickers');
-        var $colors = $('#colors');
-        var $cursors = $('#cursors');
-        var $deleteButton = $('#delete');
-
-        var brush = {
-            color: '#000000',
-            opacity: 1
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
         };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/whiteboard/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
 
-        var $toggle = $('#toggleDraw');
-        var $width = $('#width');
-        var $widthLabel = $('label[for="width"]');
-        var $opacity = $('#opacity');
-        var $opacityLabel = $('label[for="opacity"]');
-window.canvas = canvas;
-        var createCursor = function () {
-            var w = canvas.freeDrawingBrush.width;
-            var c = canvas.freeDrawingBrush.color;
-            var size = w > 30 ? w+2 : w+32;
-            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
-            var $ccanvas = $cursors.find('canvas');
-            var ccanvas = $ccanvas[0];
-
-            var ctx = ccanvas.getContext('2d');
-            var centerX = size / 2;
-            var centerY = size / 2;
-            var radius = w/2;
-
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
-            ctx.fillStyle = c;
-            ctx.fill();
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = brush.color;
-            ctx.stroke();
-
-            ctx.beginPath();
-            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
-            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
-            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
-            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
-            ctx.strokeStyle = '#000000';
-            ctx.stroke();
-
-            var img = ccanvas.toDataURL("image/png");
-            $controls.find('.selected > img').attr('src', img);
-            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
         };
-
-        var updateBrushWidth = function () {
-            var val = $width.val();
-            canvas.freeDrawingBrush.width = Number(val);
-            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
-            $('#width-val').text(val + 'px');
-            createCursor();
-        };
-        updateBrushWidth();
-
-        $width.on('change', updateBrushWidth);
-
-        var updateBrushOpacity = function () {
-            var val = $opacity.val();
-            brush.opacity = Number(val);
-            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
-            $('#opacity-val').text((Number(val) * 100) + '%');
-            createCursor();
-        };
-        updateBrushOpacity();
-
-        $opacity.on('change', updateBrushOpacity);
-
-        var pickColor = function (current, cb) {
-            var $picker = $('<input>', {
-                type: 'color',
-                value: '#FFFFFF',
-                })
-            // TODO confirm that this is safe to remove
-            //.css({ visibility: 'hidden' })
-            .on('change', function () {
-                var color = this.value;
-                cb(color);
-            }).appendTo($pickers);
-            setTimeout(function () {
-                $picker.val(current);
-                $picker.click();
-            });
-        };
-
-        var setColor = function (c) {
-            c = Colors.rgb2hex(c);
-            brush.color = c;
-            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            module.$color.css({
-                'color': c,
-            });
-            createCursor();
-        };
-
-
-        var palette = AppConfig.whiteboardPalette || [
-            'red', 'blue', 'green', 'white', 'black', 'purple',
-            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
-        ];
-
-        $('.palette-color').on('click', function () {
-            var color = $(this).css('background-color');
-            setColor(color);
-        });
-
-        module.draw = true;
-        var toggleDrawMode = function () {
-            module.draw = !module.draw;
-            canvas.isDrawingMode = module.draw;
-            $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
-            if (module.draw) { $deleteButton.hide(); }
-            else { $deleteButton.show(); }
-        };
-        $toggle.click(toggleDrawMode);
-
-        var deleteSelection = function () {
-            if (canvas.getActiveObject()) {
-                canvas.getActiveObject().remove();
-            }
-            if (canvas.getActiveGroup()) {
-                canvas.getActiveGroup()._objects.forEach(function (el) {
-                    el.remove();
-                });
-                canvas.discardActiveGroup();
-            }
-            canvas.renderAll();
-            module.onLocal();
-        };
-        $deleteButton.click(deleteSelection);
-        $(window).on('keyup', function (e) {
-            if (e.which === 46) { deleteSelection (); }
-        });
-
-        var setEditable = function (bool) {
-            if (readOnly && bool) { return; }
-            if (bool) { $controls.css('display', 'flex'); }
-            else { $controls.hide(); }
-
-            canvas.isDrawingMode = bool ? module.draw : false;
-            if (!bool) {
-                canvas.deactivateAll();
-                canvas.renderAll();
-            }
-            canvas.forEachObject(function (object) {
-                object.selectable = bool;
-            });
-            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
-        };
-
-        var saveImage = module.saveImage = function () {
-            var defaultName = "pretty-picture.png";
-            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
-                if (!(typeof(filename) === 'string' && filename)) { return; }
-                $canvas[0].toBlob(function (blob) {
-                    saveAs(blob, filename);
-                });
-            });
-        };
-
-        module.FM = Cryptpad.createFileManager({});
-        module.upload = function (title) {
-            var canvas = $canvas[0];
-            var finish = function (thumb) {
-                canvas.toBlob(function (blob) {
-                    blob.name = title;
-                    module.FM.handleFile(blob, void 0, thumb);
-                });
-            };
-
-            Thumb.fromCanvas(canvas, function (e, blob) {
-                // carry on even if you can't get a thumbnail
-                if (e) { console.error(e); }
-                finish(blob);
-            });
-        };
-
-        var initializing = true;
-
-        var $bar = $('#toolbar');
-
-        var Title;
-        var UserList;
-        var Metadata;
-
-        var config = module.config = {
-            initialState: '{}',
-            websocketURL: Cryptpad.getWebsocketURL(),
-            validateKey: secret.keys.validateKey,
-            readOnly: readOnly,
-            channel: secret.channel,
-            crypto: Crypto.createEncryptor(secret.keys),
-            transformFunction: JsonOT.transform,
-        };
-
-        var addColorToPalette = function (color, i) {
-            if (readOnly) { return; }
-            var $color = $('<span>', {
-                'class': 'palette-color',
-            })
-            .css({
-                'background-color': color,
-            })
-            .click(function () {
-                var c = Colors.rgb2hex($color.css('background-color'));
-                setColor(c);
-            })
-            .on('dblclick', function (e) {
-                e.preventDefault();
-                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
-                    $color.css({
-                        'background-color': c,
-                    });
-                    palette.splice(i, 1, c);
-                    config.onLocal();
-                    setColor(c);
-                });
-            });
-
-            $colors.append($color);
-        };
-
-        var metadataCfg = {};
-        var updatePalette = metadataCfg.updatePalette = function (newPalette) {
-            palette = newPalette;
-            $colors.html('<div class="hidden">&nbsp;</div>');
-            palette.forEach(addColorToPalette);
-        };
-        updatePalette(palette);
-
-        var makeColorButton = function ($container) {
-            var $testColor = $('<input>', { type: 'color', value: '!' });
-
-            // if colors aren't supported, bail out
-            if ($testColor.attr('type') !== 'color' ||
-                $testColor.val() === '!') {
-                console.log("Colors aren't supported. Aborting");
-                return;
-            }
-
-            var $color = module.$color = $('<button>', {
-                id: "color-picker",
-                title: Messages.canvas_chooseColor,
-                'class': "fa fa-square rightside-button",
-            })
-            .on('click', function () {
-                pickColor($color.css('background-color'), function (color) {
-                    setColor(color);
-                });
-            });
-
-            setColor('#000');
-
-            $container.append($color);
-
-            return $color;
-        };
-
-        config.onInit = function (info) {
-            UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
-
-            Title = Cryptpad.createTitle({}, config.onLocal, Cryptpad);
-
-            Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
-
-            var configTb = {
-                displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
-                userList: UserList.getToolbarConfig(),
-                share: {
-                    secret: secret,
-                    channel: info.channel
-                },
-                title: Title.getTitleConfig(),
-                common: Cryptpad,
-                readOnly: readOnly,
-                ifrw: window,
-                realtime: info.realtime,
-                network: info.network,
-                $container: $bar,
-                $contentContainer: $('#canvas-area')
-            };
-
-            toolbar = module.toolbar = Toolbar.create(configTb);
-
-            Title.setToolbar(toolbar);
-
-            var $rightside = toolbar.$rightside;
-
-            /* save as template */
-            if (!Cryptpad.isTemplate(window.location.href)) {
-                var templateObj = {
-                    rt: info.realtime,
-                    Crypt: Cryptget,
-                    getTitle: function () { return document.title; }
-                };
-                var $templateButton = Cryptpad.createButton('template', true, templateObj);
-                $rightside.append($templateButton);
-            }
-
-            var $export = Cryptpad.createButton('export', true, {}, saveImage);
-            $rightside.append($export);
-
-            Cryptpad.createButton('savetodrive', true, {}, function () {})
-            .click(function () {
-                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
-                function (name) {
-                    if (name === null || !name.trim()) { return; }
-                    module.upload(name);
-                });
-            }).appendTo($rightside);
-
-            var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
-                if (err) { return; }
-                setEditable(false);
-                toolbar.failed();
-            });
-            $rightside.append($forget);
-
-            var editHash;
-
-            if (!readOnly) {
-                editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
-                makeColorButton($rightside);
-            }
-            if (!readOnly) { Cryptpad.replaceHash(editHash); }
-        };
-
-        // used for debugging, feel free to remove
-        var Catch = function (f) {
-            return function () {
-                try {
-                    f();
-                } catch (e) {
-                    console.error(e);
-                }
-            };
-        };
-
-        var onRemote = config.onRemote = Catch(function () {
-            if (initializing) { return; }
-            var userDoc = module.realtime.getUserDoc();
-
-            Metadata.update(userDoc);
-            var json = JSON.parse(userDoc);
-            var remoteDoc = json.content;
-
-            // TODO update palette if it has changed
-
-            canvas.loadFromJSON(remoteDoc);
-            canvas.renderAll();
-
-            var content = canvas.toDatalessJSON();
-            if (content !== remoteDoc) { Cryptpad.notify(); }
-            if (readOnly) { setEditable(false); }
-        });
-        setEditable(false);
-
-        var stringifyInner = function (textValue) {
-            var obj = {
-                content: textValue,
-                metadata: {
-                    users: UserList.userData,
-                    palette: palette,
-                    defaultTitle: Title.defaultTitle,
-                    type: 'whiteboard',
-                }
-            };
-            if (!initializing) {
-                obj.metadata.title = Title.title;
-            }
-            // stringify the json and send it into chainpad
-            return JSONSortify(obj);
-        };
-
-
-        var onLocal = module.onLocal = config.onLocal = Catch(function () {
-            if (initializing) { return; }
-            if (readOnly) { return; }
-
-            var content = stringifyInner(canvas.toDatalessJSON());
-
-            module.patchText(content);
-        });
-
-        config.onReady = function (info) {
-            var realtime = module.realtime = info.realtime;
-            module.patchText = TextPatcher.create({
-                realtime: realtime
-            });
-
-            var isNew = false;
-            var userDoc = module.realtime.getUserDoc();
-            if (userDoc === "" || userDoc === "{}") { isNew = true; }
-            else {
-                var hjson = JSON.parse(userDoc);
-                if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
-                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
-                    Cryptpad.errorLoadingScreen(Messages.typeError);
-                    throw new Error(Messages.typeError);
-                }
-            }
-
-            Cryptpad.removeLoadingScreen();
-            setEditable(true);
-            initializing = false;
-            onRemote();
-
-            /*  TODO: restore palette from metadata.palette */
-
-            if (readOnly) { return; }
-            UserList.getLastName(toolbar.$userNameButton, isNew);
-        };
-
-        config.onAbort = function () {
-            setEditable(false);
-            toolbar.failed();
-            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
-        };
-
-        // TODO onConnectionStateChange
-        config.onConnectionChange = function (info) {
-            setEditable(info.state);
-            toolbar.failed();
-            if (info.state) {
-                initializing = true;
-                toolbar.reconnecting(info.myId);
-                Cryptpad.findOKButton().click();
-            } else {
-                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
-            }
-        };
-
-        module.rt = Realtime.start(config);
-
-        canvas.on('mouse:up', onLocal);
-
-        $('#clear').on('click', function () {
-            canvas.clear();
-            onLocal();
-        });
-
-        $('#save').on('click', function () {
-            saveImage();
-        });
-    };
-
-    Cryptpad.ready(function () {
-        andThen();
-        Cryptpad.reportAppUsage();
-    });
-    Cryptpad.onError(function (info) {
-        if (info) {
-            onConnectError();
-        }
-    });
-
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        SFCommonO.start();
     });
 });