cryptpad/www/drive/inner.js

define([
    'jquery',
    '/common/toolbar3.js',
    'json.sortify',
    '/common/common-util.js',
    '/common/common-hash.js',
    '/common/common-ui-elements.js',
    '/common/common-interface.js',
    '/common/common-constants.js',
    '/common/common-feedback.js',
    '/bower_components/nthen/index.js',
    '/common/sframe-common.js',
    '/common/common-realtime.js',
    '/common/hyperscript.js',
    '/common/proxy-manager.js',
    '/customize/application_config.js',
    '/bower_components/chainpad-listmap/chainpad-listmap.js',
    '/customize/messages.js',

    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
    'less!/drive/app-drive.less',
], function (
    $,
    Toolbar,
    JSONSortify,
    Util,
    Hash,
    UIElements,
    UI,
    Constants,
    Feedback,
    nThen,
    SFCommon,
    CommonRealtime,
    h,
    ProxyManager,
    AppConfig,
    Listmap,
    Messages)
{
    var APP = window.APP = {
        editable: false,
        mobile: function () { return $('body').width() <= 600; }, // Menu and content area are not inline-block anymore for mobiles
        isMac: navigator.platform === "MacIntel"
    };

    var stringify = function (obj) {
        return JSONSortify(obj);
    };

    var E_OVER_LIMIT = 'E_OVER_LIMIT';

    var ROOT = "root";
    var ROOT_NAME = Messages.fm_rootName;
    var SEARCH = "search";
    var SEARCH_NAME = Messages.fm_searchName;
    var TRASH = "trash";
    var TRASH_NAME = Messages.fm_trashName;
    var FILES_DATA = Constants.storageKey;
    var FILES_DATA_NAME = Messages.fm_filesDataName;
    var TEMPLATE = "template";
    var TEMPLATE_NAME = Messages.fm_templateName;
    var RECENT = "recent";
    var RECENT_NAME = Messages.fm_recentPadsName;
    var OWNED = "owned";
    var OWNED_NAME = Messages.fm_ownedPadsName;
    var TAGS = "tags";
    var TAGS_NAME = Messages.fm_tagsName;

    // Icons
    var faFolder = 'fa-folder';
    var faFolderOpen = 'fa-folder-open';
    var faSharedFolder = 'fa-users';
    var faReadOnly = 'fa-eye';
    var faRename = 'fa-pencil';
    var faTrash = 'fa-trash';
    var faDelete = 'fa-eraser';
    var faProperties = 'fa-database';
    var faTags = 'fa-hashtag';
    var faEmpty = 'fa-trash-o';
    var faRestore = 'fa-repeat';
    var faShowParent = 'fa-location-arrow';
    var $folderIcon = $('<span>', {
        "class": faFolder + " fa 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": faFolderOpen + " fa cp-app-drive-icon-folder"});
    //var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
    var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
    var $sharedFolderIcon = $('<span>', {"class": faSharedFolder + " fa cp-app-drive-icon-folder"});
    //var $sharedFolderOpenedIcon = $sharedFolderIcon.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 " + faTrash});
    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 " + faReadOnly});
    var $ownedIcon = $('<span>', {"class": "fa fa-id-card-o"});
    var $ownerIcon = $('<span>', {"class": "fa fa-id-card"});
    var $tagsIcon = $('<span>', {"class": "fa " + faTags});

    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 = UI.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);
        }
    };

    var history = {
        isHistoryMode: false,
    };

    var copyObjectValue = function (objRef, objToCopy) {
        for (var k in objRef) { delete objRef[k]; }
        $.extend(true, objRef, objToCopy);
    };
    var updateSharedFolders = function (sframeChan, manager, drive, folders, cb) {
        if (!drive || !drive.sharedFolders) {
            return void cb();
        }
        var oldIds = Object.keys(folders);
        nThen(function (waitFor) {
            Object.keys(drive.sharedFolders).forEach(function (fId) {
                sframeChan.query('Q_DRIVE_GETOBJECT', {
                    sharedFolder: fId
                }, waitFor(function (err, newObj) {
                    folders[fId] = folders[fId] || {};
                    copyObjectValue(folders[fId], newObj);
                    if (manager && oldIds.indexOf(fId) === -1) {
                        manager.addProxy(fId, folders[fId]);
                    }
                }));
            });
        }).nThen(function () {
            cb();
        });
    };
    var updateObject = function (sframeChan, obj, cb) {
        sframeChan.query('Q_DRIVE_GETOBJECT', null, function (err, newObj) {
            copyObjectValue(obj, newObj);
            cb();
        });
    };

    var createContextMenu = function () {
        var menu = h('div.cp-app-drive-context.dropdown.cp-unselectable', [
            h('ul.dropdown-menu', {
                'role': 'menu',
                'aria-labelledby': 'dropdownMenu',
                'style': 'display:block;position:static;margin-bottom:5px;'
            }, [
                h('li', h('a.cp-app-drive-context-open.dropdown-item', {
                    'tabindex': '-1',
                    'data-icon': faFolderOpen,
                }, Messages.fc_open)),
                h('li', h('a.cp-app-drive-context-openro.dropdown-item', {
                    'tabindex': '-1',
                    'data-icon': faReadOnly,
                }, Messages.fc_open_ro)),
                h('li', h('a.cp-app-drive-context-openparent.dropdown-item', {
                    'tabindex': '-1',
                    'data-icon': faShowParent,
                }, Messages.fm_openParent)),
                h('li', h('a.cp-app-drive-context-newfolder.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faFolder,
                }, Messages.fc_newfolder)),
                h('li', h('a.cp-app-drive-context-newsharedfolder.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faSharedFolder,
                }, Messages.fc_newsharedfolder)),
                h('li', h('a.cp-app-drive-context-hashtag.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faTags,
                }, Messages.fc_hashtag)),
                h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': AppConfig.applicationsIcon.pad,
                    'data-type': 'pad'
                }, Messages.button_newpad)),
                h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': AppConfig.applicationsIcon.code,
                    'data-type': 'code'
                }, Messages.button_newcode)),
                h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': AppConfig.applicationsIcon.slide,
                    'data-type': 'slide'
                }, Messages.button_newslide)),
                h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': AppConfig.applicationsIcon.poll,
                    'data-type': 'poll'
                }, Messages.button_newpoll)),
                h('li', h('a.cp-app-drive-context-newdoc.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': AppConfig.applicationsIcon.whiteboard,
                    'data-type': 'whiteboard'
                }, Messages.button_newwhiteboard)),
                h('li', h('a.cp-app-drive-context-empty.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faEmpty,
                }, Messages.fc_empty)),
                h('li', h('a.cp-app-drive-context-restore.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faRestore,
                }, Messages.fc_restore)),
                h('li', h('a.cp-app-drive-context-rename.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faRename,
                }, Messages.fc_rename)),
                h('li', h('a.cp-app-drive-context-delete.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faTrash,
                }, Messages.fc_delete)),
                h('li', h('a.cp-app-drive-context-deleteowned.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faDelete,
                }, Messages.fc_delete_owned)),
                h('li', h('a.cp-app-drive-context-remove.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faDelete,
                }, Messages.fc_remove)),
                h('li', h('a.cp-app-drive-context-removesf.dropdown-item.cp-app-drive-context-editable', {
                    'tabindex': '-1',
                    'data-icon': faDelete,
                }, Messages.fc_remove_sharedfolder)),
                h('li', h('a.cp-app-drive-context-properties.dropdown-item', {
                    'tabindex': '-1',
                    'data-icon': faProperties,
                }, Messages.fc_prop)),
            ])
        ]);
        return $(menu);
    };

    var andThen = function (common, proxy, folders) {
        var files = proxy.drive;
        var metadataMgr = common.getMetadataMgr();
        var sframeChan = common.getSframeChannel();
        var priv = metadataMgr.getPrivateData();
        var user = metadataMgr.getUserData();
        var edPublic = priv.edPublic;

        APP.origin = priv.origin;
        config.loggedIn = APP.loggedIn;
        config.sframeChan = sframeChan;

        var manager = ProxyManager.createInner(files, sframeChan, config);

        Object.keys(folders).forEach(function (id) {
            var f = folders[id];
            manager.addProxy(id, f);
        });

        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 = createContextMenu().appendTo($appContainer);

        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
        var currentPath = APP.currentPath = getLastOpenedFolder();

        // Categories dislayed in the menu
        var displayedCategories = [ROOT, TRASH, SEARCH, RECENT];

        // PCS enabled: display owned pads
        if (AppConfig.displayCreationScreen) { displayedCategories.push(OWNED); }
        // Templates enabled: display template category
        if (AppConfig.enableTemplates) { displayedCategories.push(TEMPLATE); }
        // Tags used: display Tags category
        if (Object.keys(manager.getTagsList()).length) { displayedCategories.push(TAGS); }

        var virtualCategories = [SEARCH, RECENT, OWNED, TAGS];

        if (!APP.loggedIn) {
            displayedCategories = [FILES_DATA];
            currentPath = [FILES_DATA];
            $tree.hide();
            if (Object.keys(files.root).length && !proxy.anonymousAlert) {
                var msg = common.fixLinks($('<div>').html(Messages.fm_alert_anonymous));
                UI.alert(msg);
                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; }

            // 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;
            }

            // Ctrl+A select all
            if (e.which === 65 && (e.ctrlKey || (e.metaKey && APP.isMac))) {
                $content.find('.cp-app-drive-element:not(.cp-app-drive-element-selected)')
                    .addClass('cp-app-drive-element-selected');
                return;
            }

            // [Left, Up, Right, Down]
            if ([37, 38, 39, 40].indexOf(e.which) === -1) { return; }
            e.preventDefault();

            var click = function (el) {
                if (!el) { return; }
                APP.onElementClick(ev, $(el));
            };

            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');
                manager.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) {
                console.error("Unable to format that string to a date with .toLocaleString", sDate, e);
            }
            return ret;
        };

        var openFile = function (el, href) {
            if (!href) {
                var data = manager.getFileData(el);
                if (!data || (!data.href && !data.roHref)) {
                    return void logError("Missing data for the file", el, data);
                }
                href = data.href || data.roHref;
            }
            window.open(APP.origin + href);
        };

        var refresh = APP.refresh = function () {
            APP.displayDirectory(currentPath);
        };

        var getFileNameExtension = function (name) {
            var matched = /\.[^\. ]+$/.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 = manager.find(path);
                var name = manager.isFile(el) ? manager.getTitle(el)  : path[path.length - 1];
                if (manager.isSharedFolder(el)) {
                    name = manager.getSharedFolderData(el).title;
                }
                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) {
                    e.stopPropagation();
                    if (e.which === 13) {
                        removeInput(true);
                        manager.rename(path, $input.val(), refresh);
                        return;
                    }
                    if (e.which === 27) {
                        removeInput(true);
                    }
                }).on('keypress', function (e) { e.stopPropagation(); });
                //$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 (type, paths) {
            if (!paths || paths.length === 0) { logError('no paths'); }

            $contextMenu.find('li').hide();

            var show = [];
            var filter;

            if (type === "content") {
                // Return true in filter to hide
                filter = function ($el, className) {
                    if (className === 'newfolder') { return; }
                    if (className === 'newsharedfolder') {
                        // Hide the new shared folder menu if we're already in a shared folder
                        return manager.isInSharedFolder(currentPath);
                    }
                    return AppConfig.availablePadTypes.indexOf($el.attr('data-type')) === -1;
                };
            } else {
                // In case of multiple selection, we must hide the option if at least one element
                // is not compatible
                var containsFolder = false;
                var hide = [];
                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('delete');
                        hide.push('rename');
                    }
                    if (!$element.is('.cp-app-drive-element-owned')) {
                        hide.push('deleteowned');
                    }
                    if ($element.is('.cp-app-drive-element-notrash')) {
                        // We can't delete elements in virtual categories
                        hide.push('delete');
                    } else {
                        // We can only open parent in virtual categories
                        hide.push('openparent');
                    }
                    if ($element.is('.cp-app-drive-element-file')) {
                        // No folder in files
                        hide.push('newfolder');
                        if ($element.is('.cp-app-drive-element-readonly')) {
                            hide.push('open'); // Remove open 'edit' mode
                        } else if ($element.is('.cp-app-drive-element-noreadonly')) {
                            hide.push('openro'); // Remove open 'view' mode
                        }
                    } else if ($element.is('.cp-app-drive-element-sharedf')) {
                        if (containsFolder) {
                            // More than 1 folder selected: cannot create a new subfolder
                            hide.push('newfolder');
                        }
                        containsFolder = true;
                        hide.push('openro');
                        hide.push('hashtag');
                        hide.push('delete');
                        //hide.push('deleteowned');
                    } else { // it's a folder
                        if (containsFolder) {
                            // More than 1 folder selected: cannot create a new subfolder
                            hide.push('newfolder');
                        }
                        containsFolder = true;
                        hide.push('openro');
                        hide.push('properties');
                        hide.push('hashtag');
                    }
                    // If we're in the trash, hide restore and properties for non-root elements
                    if (type === "trash" && path && path.length > 4) {
                        hide.push('restore');
                        hide.push('properties');
                    }
                    // If we're not in the trash nor in a shared folder, hide "remove"
                    if (!manager.isInSharedFolder(path)
                            && !$element.is('.cp-app-drive-element-sharedf')) {
                        hide.push('removesf');
                    } else if (type === "tree") {
                        hide.push('delete');
                        // Don't hide the deleteowned link if the element is a shared folder and
                        // it is owned
                        if (manager.isInSharedFolder(path) ||
                                !$element.is('.cp-app-drive-element-owned')) {
                            hide.push('deleteowned');
                        } else {
                            // This is a shared folder and it is owned
                            hide.push('removesf');
                        }
                    }
                });
                if (paths.length > 1) {
                    hide.push('restore');
                    hide.push('properties');
                    hide.push('rename');
                    hide.push('openparent');
                    hide.push('hashtag');
                }
                if (containsFolder && paths.length > 1) {
                    // Cannot open multiple folders
                    hide.push('open');
                }

                filter = function ($el, className) {
                    if (hide.indexOf(className) !== -1) { return true; }
                };
            }

            switch(type) {
                case 'content':
                    show = ['newfolder', 'newsharedfolder', 'newdoc'];
                    break;
                case 'tree':
                    show = ['open', 'openro', 'rename', 'delete', 'deleteowned', 'removesf',
                            'newfolder', 'properties', 'hashtag'];
                    break;
                case 'default':
                    show = ['open', 'openro', 'openparent', 'delete', 'deleteowned', 'properties', 'hashtag'];
                    break;
                case 'trashtree': {
                    show = ['empty'];
                    break;
                }
                case 'trash': {
                    show = ['remove', 'restore', 'properties'];
                }
            }

            var filtered = [];
            show.forEach(function (className) {
                var $el = $contextMenu.find('.cp-app-drive-context-' + className);
                if (!APP.editable && $el.is('.cp-app-drive-context-editable')) { return; }
                if (filter($el, className)) { return; }
                $el.parent('li').show();
                filtered.push('.cp-app-drive-context-' + className);
            });
            return filtered;
        };

        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 (manager.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 menuType = $element.data('context');
            if (!menuType) { return; }
            //var actions = [];
            var toShow = filterContextMenu(menuType, paths);
            var $actions = $contextMenu.find('a');
            $contextMenu.data('paths', paths);
            $actions = $actions.filter(function (i, el) {
                return toShow.some(function (className) { return $(el).is(className); });
            });
            $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());
                }
                $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) {
            var $menu = $contextMenu;
            $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 (type) {
            return function (e) {
                APP.hideMenu();
                e.stopPropagation();

                var paths;
                if (type === 'content') {
                    paths = [{path: $(e.target).closest('#' + FOLDER_CONTENT_ID).data('path')}];
                    if (!paths) { return; }
                    removeSelected();
                } else {
                    var $element = findDataHolder($(e.target));

                    if (type === 'trash' && !$element.data('path')) { return; }

                    if (!$element.length) {
                        logError("Unable to locate the .element tag", e.target);
                        log(Messages.fm_contextMenuError);
                        return false;
                    }

                    if (!$element.hasClass('cp-app-drive-element-selected')) {
                        onElementClick(undefined, $element);
                    }

                    paths = getSelectedPaths($element);
                }

                $contextMenu.attr('data-menu-type', type);

                filterContextMenu(type, paths);

                displayMenu(e);

                if ($contextMenu.find('li:visible').length === 0) {
                    debug("No visible element in the context menu. Abort.");
                    $contextMenu.hide();
                    return true;
                }

                $contextMenu.data('paths', paths);
                return false;
            };
        };

        var getElementName = function (path) {
            var file = manager.find(path);
            if (!file) { return; }
            if (manager.isSharedFolder(file)) {
                return manager.getSharedFolderData(file).title;
            }
            return manager.getTitle(file);
        };
        // manager.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 () {
                manager.move(paths, newPath, cb);
            };
            // Cancel drag&drop from TRASH to TRASH
            if (manager.isPathIn(newPath, [TRASH]) && paths.length && paths[0][0] === TRASH) {
                return;
            }
            andThenMove();
        };
        // Delete paths from the drive and/or shared folders (without moving them to the trash)
        var deletePaths = function (paths, pathsList) {
            pathsList = pathsList || [];
            if (paths) {
                paths.forEach(function (p) { pathsList.push(p.path); });
            }
            var msg = Messages._getKey("fm_removeSeveralPermanentlyDialog", [pathsList.length]);
            if (pathsList.length === 1) {
                msg = Messages.fm_removePermanentlyDialog;
            }
            UI.confirm(msg, function(res) {
                $(window).focus();
                if (!res) { return; }
                manager.delete(pathsList, refresh);
            });
        };
        // 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 = manager.find(ePath);
                        if (!val) { return; } // Error? A ".selected" element is 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 = manager.find(path);
                if (!val) { return; } // The element is not in the object
                paths = [{
                    path: path,
                    value: {
                        name: getElementName(path),
                        el: val
                    }
                }];
            }
            var data = {
                'path': paths
            };
            ev.dataTransfer.setData("text", stringify(data));
        };

        var findDropPath = function (target) {
            var $target = $(target);
            var $el = findDataHolder($target);
            var newPath = $el.data('path');
            var dropEl = newPath && manager.find(newPath);
            if (newPath && manager.isSharedFolder(dropEl)) {
                newPath.push(manager.user.userObject.ROOT);
            } else if ((!newPath || manager.isFile(dropEl))
                    && $target.parents('#cp-app-drive-content')) {
                newPath = currentPath;
            }
            return newPath;
        };
        var onFileDrop = APP.onFileDrop = function (file, e) {
            var ev = {
                target: e.target,
                path: findDropPath(e.target)
            };
            APP.FM.onFileDrop(file, ev);
        };
        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; }
            // A moved element should be removed from its previous location
            var movedPaths = [];
            var sharedF = false;
            oldPaths.forEach(function (p) {
                movedPaths.push(p.path);
                if (!sharedF && manager.isInSharedFolder(p.path)) {
                    sharedF = true;
                }
            });

            var newPath = findDropPath(ev.target);
            if (!newPath) { return; }
            if (sharedF && manager.isPathIn(newPath, [TRASH])) {
                deletePaths(null, movedPaths);
                return;
            }
            if (movedPaths && movedPaths.length) {
                moveElements(movedPaths, newPath, null, 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('cp-app-drive-element-droppable');
            });
            $element.on('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                counter--;
                if (counter <= 0) {
                    counter = 0;
                    $element.removeClass('cp-app-drive-element-droppable');
                }
            });
        };
        addDragAndDropHandlers($content, null, true, true);

        // In list mode, display metadata from the filesData object
        var _addOwnership = function ($span, $state, data) {
            if (data.owners && data.owners.indexOf(edPublic) !== -1) {
                var $owned = $ownedIcon.clone().appendTo($state);
                $owned.attr('title', Messages.fm_padIsOwned);
                $span.addClass('cp-app-drive-element-owned');
            } else if (data.owners && data.owners.length) {
                var $owner = $ownerIcon.clone().appendTo($state);
                $owner.attr('title', Messages.fm_padIsOwnedOther);
            }
        };
        var addFileData = function (element, $span) {
            if (!manager.isFile(element)) { return; }

            var data = manager.getFileData(element);
            var href = data.href || data.roHref;
            if (!data) { return void logError("No data for the file", element); }

            var hrefData = Hash.parsePadUrl(href);
            if (hrefData.type) {
                $span.addClass('cp-border-color-'+hrefData.type);
            }

            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]));
            }
            _addOwnership($span, $state, data);

            var name = manager.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.append($name);
            $span.append($state);
            $span.attr('title', name);

            var type = Messages.type[hrefData.type] || hrefData.type;
            common.displayThumbnail(href || data.roHref, data.channel, data.password, $span, function ($thumb) {
                // Called only if the thumbnail exists
                // Remove the .hide() added by displayThumnail() because it hides the icon in
                // list mode too
                $span.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
                $thumb.addClass('cp-app-drive-element-grid')
                    .addClass('cp-app-drive-element-thumbnail');
            });
            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).append($adate).append($cdate);
        };

        var addFolderData = function (element, key, $span) {
            if (!element || !manager.isFolder(element)) { return; }
            // The element with the class '.name' is underlined when the 'li' is hovered
            var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
            if (manager.isSharedFolder(element)) {
                var data = manager.getSharedFolderData(element);
                key = data && data.title ? data.title : key;
                element = manager.folders[element].proxy[manager.user.userObject.ROOT];
                $span.addClass('cp-app-drive-element-sharedf');
                _addOwnership($span, $state, data);
            }

            var sf = manager.hasSubfolder(element);
            var files = manager.hasFile(element);
            var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(key);
            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.attr('title', key);
            $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 = manager.getFileData(id);
            return UI.getFileIcon(data);
        };
        var getIcon = UI.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 = manager.find(newPath);
            var isSharedFolder = manager.isSharedFolder(element);

            var $icon = !isFolder ? getFileIcon(element) : undefined;
            var ro = manager.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 (isSharedFolder) {
                liClass = 'cp-app-drive-element-folder cp-app-drive-element';
                $icon = $sharedFolderIcon.clone();
            } else if (isFolder) {
                liClass = 'cp-app-drive-element-folder cp-app-drive-element';
                $icon = manager.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);
                }
            }
            $element.prepend($icon).dblclick(function () {
                if (isFolder) {
                    APP.displayDirectory(newPath);
                    return;
                }
                if (isTrash) { return; }
                openFile(root[key]);
            });
            if (isFolder) {
                addFolderData(element, key, $element);
            } else {
                addFileData(element, $element);
            }
            $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(openContextMenu('tree'));
                $element.data('context', 'tree');
            } else {
                $element.contextmenu(openContextMenu('trash'));
                $element.data('context', 'trash');
            }
            var isNewFolder = APP.newFolder && manager.comparePath(newPath, APP.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;
                case OWNED: pName = OWNED_NAME; break;
                case TAGS: pName = TAGS_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 = manager.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 : manager.find(path);
            path = path[0] === SEARCH ? path.slice(0,1) : path;

            var skipNext = false; // When encountering a shared folder, skip a key in the path
            path.forEach(function (p, idx) {
                if (skipNext) { skipNext = false; return; }
                if (isTrash && [2,3].indexOf(idx) !== -1) { return; }

                var name = p;

                var currentEl = manager.find(path.slice(0, idx+1));
                if (manager.isSharedFolder(currentEl)) {
                    name = manager.getSharedFolderData(currentEl).title;
                    skipNext = true;
                }

                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 && manager.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;
                case OWNED:
                    msg = Messages.fm_info_owned;
                    break;
                case TAGS:
                    break;
                default:
                    msg = undefined;
            }
            if (!APP.loggedIn) {
                msg = Messages.fm_info_anonymous;
                return $(common.fixLinks($box.html(msg)));
            }
            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');
                Feedback.send('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');
                Feedback.send('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 () {
                UI.confirm(Messages.fm_emptyTrashDialog, function(res) {
                    if (!res) { return; }
                    manager.emptyTrash(refresh);
                });
            });
            $container.append($button);
        };

        // Get the upload options
        var addSharedFolderModal = function (cb) {
            var createHelper = function (href, text) {
                var q = h('a.fa.fa-question-circle', {
                    style: 'text-decoration: none !important;',
                    title: text,
                    href: APP.origin + href,
                    target: "_blank",
                    'data-tippy-placement': "right"
                });
                return q;
            };

            // Ask for name, password and owner
            var content = h('div', [
                h('h4', Messages.sharedFolders_create),
                h('label', {for: 'cp-app-drive-sf-name'}, Messages.sharedFolders_create_name),
                h('input#cp-app-drive-sf-name', {type: 'text', placeholder: Messages.fm_newFolder}),
                //h('label', {for: 'cp-app-drive-sf-password'}, Messages.sharedFolders_create_password),
                //UI.passwordInput({id: 'cp-app-drive-sf-password'}),
                h('span', {
                    style: 'display:flex;align-items:center;justify-content:space-between'
                }, [
                    UI.createCheckbox('cp-app-drive-sf-owned', Messages.sharedFolders_create_owned, true),
                    createHelper('/faq.html#keywords-owned', Messages.creation_owned1) // TODO
                ]),
            ]);

            UI.confirm(content, function (yes) {
                if (!yes) { return void cb(); }

                // Get the values
                var newName = $(content).find('#cp-app-drive-sf-name').val();
                //var password = $(content).find('#cp-app-drive-sf-password').val() || undefined;
                var password;
                var owned = $(content).find('#cp-app-drive-sf-owned').is(':checked');

                cb({
                    name: newName,
                    password: password,
                    owned: owned
                });
            });
        };

        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 (!APP.loggedIn && 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 UI.alert(Messages.pinLimitDrive, null, true);
                        }
                        return void UI.alert(Messages.fm_error_cantPin);
                    }
                    APP.newFolder = info.newPath;
                    refresh();
                };
                $block.find('a.cp-app-drive-new-folder, li.cp-app-drive-new-folder')
                    .click(function () {
                    manager.addFolder(currentPath, null, onCreated);
                });
                if (!manager.isInSharedFolder(currentPath)) {
                    $block.find('a.cp-app-drive-new-shared-folder, li.cp-app-drive-new-shared-folder')
                        .click(function () {
                        addSharedFolderModal(function (obj) {
                            if (!obj) { return; }
                            manager.addSharedFolder(currentPath, obj, refresh);
                        });
                    });
                }
                $block.find('a.cp-app-drive-new-upload, li.cp-app-drive-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],
                            path: findDropPath($content[0])
                        };
                        APP.FM.handleFile(file, ev);
                    });
                    $input.click();
                });
            }
            $block.find('a.cp-app-drive-new-doc, li.cp-app-drive-new-doc')
                .click(function () {
                var type = $(this).attr('data-type') || 'pad';
                var path = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
                common.sessionStorage.put(Constants.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 (!manager.isPathIn(currentPath, [ROOT, 'hrefArray'])) { return; }

            // Create dropdown
            var options = [];
            if (isInRoot) {
                options.push({
                    tag: 'a',
                    attributes: {'class': 'cp-app-drive-new-folder'},
                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
                });
                if (!manager.isInSharedFolder(currentPath)) {
                    options.push({
                        tag: 'a',
                        attributes: {'class': 'cp-app-drive-new-shared-folder'},
                        content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_sharedFolder
                    });
                }
                options.push({tag: 'hr'});
                options.push({
                    tag: 'a',
                    attributes: {'class': 'cp-app-drive-new-upload'},
                    content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
                });
                options.push({tag: 'hr'});
            }
            getNewPadTypes().forEach(function (type) {
                var attributes = {
                    'class': 'cp-app-drive-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',
                common: common
            };
            var $block = UIElements.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 createShareButton = function (id, $container) {
            var $shareBlock = $('<button>', {
                'class': 'fa fa-shhare-alt cp-toolbar-share-button',
                title: Messages.shareButton
            });
            var data = manager.getSharedFolderData(id);
            var parsed = Hash.parsePadUrl(data.href);
            if (!parsed || !parsed.hash) { return void console.error("Invalid href: "+data.href); }
            var modal = UIElements.createSFShareModal({
                origin: APP.origin,
                pathname: "/drive/",
                hashes: {
                    editHash: parsed.hash
                }
            });
            $shareBlock.click(function () {
                UI.openCustomModal(modal);
            });
            $container.append($shareBlock);
        };

        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)) {
                        var nValue = c.replace(/cp-app-drive-element-/, '');
                        if (value === nValue) { descValue = descValue ? false : true; }
                        else {
                            // atime and ctime should be ordered in a desc order at the first click
                            value = nValue;
                            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 = 'cp-app-drive-element-' + APP.store[SORT_FILE_BY]; }
            if (classSorted) {
                $list.find('.' + classSorted).addClass('cp-app-drive-sort-active').prepend($icon);
            }
        };
        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);
            $fihElement.append($fhAdate).append($fhCdate);
            addFileSortIcon($fihElement);
            return $fihElement;
        };

        var sortElements = function (folder, path, oldkeys, prop, asc, useId) {
            var root = path && manager.find(path);
            var test = folder ? manager.isFolder : manager.isFile;
            var keys = oldkeys.filter(function (e) {
                return useId ? test(e) : (path && test(root[e]));
            });
            if (keys.length < 2) { return keys; }
            var mult = asc ? 1 : -1;
            var getProp = function (el, prop) {
                if (folder && root[el] && manager.isSharedFolder(root[el])) {
                    var title = manager.getSharedFolderData(root[el]).title || el;
                    return title.toLowerCase();
                } else if (folder) {
                    return el.toLowerCase();
                }
                var id = useId ? el : root[el];
                var data = manager.getFileData(id);
                if (!data) { return ''; }
                if (prop === 'type') {
                    var hrefData = Hash.parsePadUrl(data.href || data.roHref);
                    return hrefData.type;
                }
                if (prop === 'atime' || prop === 'ctime') {
                    return new Date(data[prop]);
                }
                return (manager.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 ? manager.isFolder : manager.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 = manager.getFileData(element);
                    if (!e) {
                        e = {
                            href : el,
                            title : Messages.fm_noname,
                            atime : 0,
                            ctime : 0
                        };
                    }
                    if (prop === 'type') {
                        var hrefData = Hash.parsePadUrl(e.href || e.roHref);
                        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));
                // Shared Folder
                if (!manager.isInSharedFolder(currentPath)) {
                    var $element3 = $('<li>', {
                        'class': 'cp-app-drive-new-shared-folder cp-app-drive-element-row ' +
                                 'cp-app-drive-element-grid'
                    }).prepend($folderIcon.clone()).appendTo($container);
                    $element3.append($('<span>', { 'class': 'cp-app-drive-new-name' })
                        .text(Messages.fm_sharedFolder));
                }
                // 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 = UIElements.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);
            if (APP.$burnThisDrive) {
                $rightside.append(APP.$burnThisDrive);
            }
            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 = manager.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 = manager.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-file 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);
                    }
                }
                $element.prepend($icon).dblclick(function () {
                    openFile(id);
                });
                addFileData(id, $element);
                var path = [rootName, idx];
                $element.data('path', path);
                $element.click(function(e) {
                    e.stopPropagation();
                    onElementClick(e, $element, path);
                });
                $element.contextmenu(openContextMenu('default'));
                $element.data('context', 'default');
                if (draggable) {
                    addDragAndDropHandlers($element, path, false, false);
                }
                $container.append($element);
            });
            createGhostIcon($container);
        };

        var displayAllFiles = function ($container) {
            if (AppConfig.disableAnonymousStore && !APP.loggedIn) {
                $container.append(Messages.anonymousStoreDisabled);
                return;
            }
            var allfiles = files[FILES_DATA];
            if (allfiles.length === 0) { return; }
            var $fileHeader = getFileListHeader(false);
            $container.append($fileHeader);
            var keys = manager.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 = manager.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 
                });
                $element.prepend($icon).dblclick(function () {
                    openFile(id);
                });
                addFileData(id, $element);
                $element.data('path', [FILES_DATA, id]);
                $element.data('element', id);
                $element.click(function(e) {
                    e.stopPropagation();
                    onElementClick(e, $element);
                });
                $element.contextmenu(openContextMenu('default'));
                $element.data('context', 'default');
                $container.append($element);
            });
            createGhostIcon($container);
        };

        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 (!manager.isFile(el.element) && !manager.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 (manager.hasSubfolder(root, true)) { $list.append($folderHeader); }
            sortedFolders.forEach(function (f) {
                var $element = createElement([TRASH], f.spath, root, true);
                $list.append($element);
            });
            if (manager.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 = manager.search(value);
            filesList.forEach(function (r) {
                r.paths.forEach(function (path) {
                    var href = r.data.href;
                    var parsed = Hash.parsePadUrl(href);
                    var $table = $('<table>');
                    var $icon = $('<td>', {'rowspan': '3', 'class': 'cp-app-drive-search-icon'})
                        .append(getFileIcon(r.id));
                    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 (manager.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 (manager.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);

                    $('<a>').text(Messages.fc_prop).click(function () {
                        APP.getProperties(r.id, function (e, $prop) {
                            if (e) { return void logError(e); }
                            UI.alert($prop[0], undefined, true);
                        });
                    }).appendTo($openDir);

                    // 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 = manager.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 = manager.findFile(id);
                if (!paths.length) { return; }
                var path = paths[0];
                if (manager.isPathIn(path, [TRASH])) { return; }
                // Display the pad
                var file = manager.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 = manager.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-notrash cp-app-drive-element-file cp-app-drive-element-row' + roClass,
                });
                $element.prepend($icon).dblclick(function () {
                    openFile(id);
                });
                addFileData(id, $element);
                $element.data('path', path);
                $element.click(function(e) {
                    e.stopPropagation();
                    onElementClick(e, $element, path);
                });
                $element.contextmenu(openContextMenu('default'));
                $element.data('context', 'default');
                /*if (draggable) {
                    addDragAndDropHandlers($element, path, false, false);
                }*/
                $list.append($element);
                i++;
            });
        };

        // Owned pads category
        var displayOwned = function ($container) {
            var list = manager.getOwnedPads(edPublic);
            if (list.length === 0) { return; }
            var $fileHeader = getFileListHeader(false);
            $container.append($fileHeader);
            var sortedFiles = sortElements(false, false, list, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
            sortedFiles.forEach(function (id) {
                var paths = manager.findFile(id);
                if (!paths.length) { return; }
                var path = paths[0];
                var $icon = getFileIcon(id);
                var ro = manager.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-notrash ' +
                             'cp-app-drive-element-file cp-app-drive-element-row' + roClass
                });
                $element.prepend($icon).dblclick(function () {
                    openFile(id);
                });
                addFileData(id, $element);
                $element.data('path', path);
                $element.data('element', id);
                $element.click(function(e) {
                    e.stopPropagation();
                    onElementClick(e, $element);
                });
                $element.contextmenu(openContextMenu('default'));
                $element.data('context', 'default');
                $container.append($element);
            });
        };

        // Tags category
        var displayTags = function ($container) {
            var list = manager.getTagsList();
            if (Object.keys(list).length === 0) { return; }
            var sortedTags = Object.keys(list);
            sortedTags.sort(function (a, b) {
                return list[b] - list[a];
            });
            var lines = [
                h('tr', [
                    h('th', Messages.fm_tags_name),
                    h('th', Messages.fm_tags_used)
                ])
            ];
            sortedTags.forEach(function (tag) {
                var tagLink = h('a', { href: '#' }, '#' + tag);
                $(tagLink).click(function () {
                    if (displayedCategories.indexOf(SEARCH) !== -1) {
                        APP.Search.$input.val('#' + tag).keyup();
                    }
                });
                lines.push(h('tr', [
                    h('td', tagLink),
                    h('td.cp-app-drive-tags-used', list[tag])
                ]));
            });
            $(h('li.cp-app-drive-tags-list', h('table', lines))).appendTo($container);
        };

        // Display the selected directory into the content part (rightside)
        // NOTE: Elements in the trash are not using the same storage structure as the others
        var _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.fm_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 = manager.isPathIn(path, [ROOT]);
            var inTrash = manager.isPathIn(path, [TRASH]);
            var isTrashRoot = manager.comparePath(path, [TRASH]);
            var isTemplate = manager.comparePath(path, [TEMPLATE]);
            var isAllFiles = manager.comparePath(path, [FILES_DATA]);
            var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
            var isSearch = path[0] === SEARCH;
            var isTags = path[0] === TAGS;

            var root = isVirtual ? undefined : manager.find(path);
            if (manager.isSharedFolder(root)) {
                path.push(manager.user.userObject.ROOT);
                root = manager.find(path);
                if (!root) { return; }
            }
            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();
            }

            setLastOpenedFolder(path);

            var $toolbar = createToolbar(path);
            var $info = createInfoBox(path);

            var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
            $dirContent.data('path', path);
            if (!isSearch && !isTags) {
                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'));
            var sfId = manager.isInSharedFolder(currentPath);
            if (sfId) {
                createShareButton(sfId, $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 (path[0] === RECENT) {
                displayRecent($list);
            } else if (path[0] === OWNED) {
                displayOwned($list);
            } else if (isTags) {
                displayTags($list);
            } else {
                $dirContent.contextmenu(openContextMenu('content'));
                if (manager.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 (manager.isFile(root[key])) { return; }
                    var $element = createElement(path, key, root, true);
                    $element.appendTo($list);
                });
                if (manager.hasFile(root)) { $list.append($fileHeader); }
                // display files
                sortedFiles.forEach(function (key) {
                    if (manager.isFolder(root[key])) { return; }
                    var $element = createElement(path, key, root, false);
                    $element.appendTo($list);
                });

                if (!inTrash) { 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 displayDirectory = APP.displayDirectory = function (path, force) {
            if (history.isHistoryMode) {
                return void _displayDirectory(path, force);
            }
            updateObject(sframeChan, proxy, function () {
                copyObjectValue(files, proxy.drive);
                updateSharedFolders(sframeChan, manager, files, folders, function () {
                    _displayDirectory(path, force);
                });
            });
        };

        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 (manager.isSubpath(currentPath, path)) {
                            displayDirectory(path);
                        }
                    }
                });
                if (wasFolderOpened(path) ||
                        (manager.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 = manager.find(path);

            // don't try to display what doesn't exist
            if (!root) { return; }

            // Display the root element in the tree
            var displayingRoot = manager.comparePath([ROOT], path);
            if (displayingRoot) {
                var isRootOpened = manager.comparePath([ROOT], currentPath);
                var $rootIcon = manager.isFolderEmpty(files[ROOT]) ?
                    (isRootOpened ? $folderOpenedEmptyIcon : $folderEmptyIcon) :
                    (isRootOpened ? $folderOpenedIcon : $folderIcon);
                var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, true, isRootOpened);
                if (!manager.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(openContextMenu('tree'));
                $('<ul>', {'class': 'cp-app-drive-tree-docs'})
                    .append($rootElement).appendTo($container);
                $container = $rootElement;
            } else if (manager.isFolderEmpty(root)) { return; }

            // Display root content
            var $list = $('<ul>').appendTo($container);
            var keys = Object.keys(root).sort(function (a, b) {
                var newA = manager.isSharedFolder(root[a]) ?
                            manager.getSharedFolderData(root[a]).title : a;
                var newB = manager.isSharedFolder(root[b]) ?
                            manager.getSharedFolderData(root[b]).title : b;
                return newA < newB ? -1 :
                        (newA === newB ? 0 : 1);
            });
            keys.forEach(function (key) {
                // Do not display files in the menu
                if (!manager.isFolder(root[key])) { return; }
                var newPath = path.slice();
                newPath.push(key);
                var isSharedFolder = manager.isSharedFolder(root[key]);
                var $icon, isCurrentFolder, subfolder;
                if (isSharedFolder) {
                    var fId = root[key];
                    // Fix path
                    newPath.push(manager.user.userObject.ROOT);
                    isCurrentFolder = manager.comparePath(newPath, currentPath);
                    // Subfolders?
                    var newRoot = manager.folders[fId].proxy[manager.user.userObject.ROOT];
                    subfolder = manager.hasSubfolder(newRoot);
                    // Fix name
                    key = manager.getSharedFolderData(fId).title;
                    // Fix icon
                    $icon = $sharedFolderIcon;
                } else {
                    var isEmpty = manager.isFolderEmpty(root[key]);
                    subfolder = manager.hasSubfolder(root[key]);
                    isCurrentFolder = manager.comparePath(newPath, currentPath);
                    $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(openContextMenu('tree'));
                if (isSharedFolder) {
                    $element.find('>.cp-app-drive-element-row')
                        .addClass('cp-app-drive-element-sharedf');
                }
                createTree($element, newPath);
            });
        };

        var createTrash = function ($container, path) {
            var $icon = manager.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
            var isOpened = manager.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(openContextMenu('trashtree'));
            var $trashList = $('<ul>', { 'class': 'cp-app-drive-tree-category' })
                .append($trashElement);
            $container.append($trashList);
        };

        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 = APP.Search.$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 (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
                    return;
                }
                if (e.which === 27) {
                    $input.val('');
                    setSearchCursor(0);
                    if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
                    else { displayDirectory([ROOT]); }
                    return;
                }
                if (APP.mobile()) { return; }
                search.to = window.setTimeout(function () {
                    if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
                    var newLocation = [SEARCH, $input.val()];
                    setSearchCursor();
                    if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
                }, 500);
            }).appendTo($div);
            $searchIcon.clone().appendTo($div);
            if (isInSearch) { $input.val(currentPath[1] || ''); }
            $container.append($div);
        };

        var categories = {};
        categories[FILES_DATA] = {
            name: FILES_DATA_NAME,
            $icon: $unsortedIcon
        };
        categories[TEMPLATE] = {
            name: TEMPLATE_NAME,
            droppable: true,
            $icon: $templateIcon
        };
        categories[RECENT] = {
            name: RECENT_NAME,
            $icon: $recentIcon
        };
        categories[OWNED] = {
            name: OWNED_NAME,
            $icon: $ownedIcon
        };
        categories[TAGS] = {
            name: TAGS_NAME,
            $icon: $tagsIcon
        };
        var createCategory = function ($container, cat) {
            var options = categories[cat];
            var $icon = options.$icon.clone();
            var isOpened = manager.comparePath([cat], currentPath);
            var $element = createTreeElement(options.name, $icon, [cat], options.draggable, options.droppable, false, isOpened);
            $element.addClass('cp-app-drive-tree-root');
            var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
            $container.append($list);
        };

        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(TAGS) !== -1) { createCategory($div, TAGS); }
            if (displayedCategories.indexOf(RECENT) !== -1) { createCategory($div, RECENT); }
            if (displayedCategories.indexOf(OWNED) !== -1) { createCategory($div, OWNED); }
            if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
            if (displayedCategories.indexOf(TEMPLATE) !== -1) { createCategory($div, TEMPLATE); }
            if (displayedCategories.indexOf(FILES_DATA) !== -1) { createCategory($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();
        };

        // 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 = APP.getProperties = function (el, cb) {
            if (!manager.isFile(el) && !manager.isSharedFolder(el)) {
                return void cb('NOT_FILE');
            }
            //var ro = manager.isReadOnlyFile(el);
            var base = APP.origin;
            var data;
            if (manager.isSharedFolder(el)) {
                data = JSON.parse(JSON.stringify(manager.getSharedFolderData(el)));
            } else {
                data = JSON.parse(JSON.stringify(manager.getFileData(el)));
            }
            if (!data || !(data.href || data.roHref)) { return void cb('INVALID_FILE'); }

            if (data.href) {
                data.href = base + data.href;
            }
            if (data.roHref) {
                data.roHref = base + data.roHref;
            }

            if (manager.isSharedFolder(el)) {
                delete data.roHref;
            }

            UIElements.getProperties(common, data, cb);
        };

        if (!APP.loggedIn) {
            $contextMenu.find('.cp-app-drive-context-delete').text(Messages.fc_remove)
                .attr('data-icon', 'fa-eraser');
        }
        var deleteOwnedPaths = function (paths, pathsList) {
            pathsList = pathsList || [];
            if (paths) {
                paths.forEach(function (p) { pathsList.push(p.path); });
            }
            var msgD = pathsList.length === 1 ? Messages.fm_deleteOwnedPad :
                                                Messages.fm_deleteOwnedPads;
            UI.confirm(msgD, function(res) {
                $(window).focus();
                if (!res) { return; }
                manager.delete(pathsList, refresh);
            });
        };
        $contextMenu.on("click", "a", function(e) {
            e.stopPropagation();
            var paths = $contextMenu.data('paths');
            var pathsList = [];
            var type = $contextMenu.attr('data-menu-type');

            var el;
            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-rename")) {
                if (paths.length !== 1) { return; }
                displayRenameInput(paths[0].element, paths[0].path);
            }
            else if($(this).hasClass("cp-app-drive-context-delete")) {
                if (!APP.loggedIn) {
                    return void deletePaths(paths);
                }
                paths.forEach(function (p) { pathsList.push(p.path); });
                moveElements(pathsList, [TRASH], false, refresh);
            }
            else if ($(this).hasClass('cp-app-drive-context-deleteowned')) {
                deleteOwnedPaths(paths);
            }
            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 = manager.find(p.path);
                    var href;
                    if (manager.isPathIn(p.path, [FILES_DATA])) {
                        href = el.roHref;
                    } else {
                        if (!el || manager.isFolder(el)) { return; }
                        var data = manager.getFileData(el);
                        href = data.roHref;
                    }
                    openFile(null, href);
                });
            }
            else if ($(this).hasClass('cp-app-drive-context-newfolder')) {
                if (paths.length !== 1) { return; }
                var onFolderCreated = function (err, info) {
                    if (err) { return void logError(err); }
                    APP.newFolder = info.newPath;
                    APP.displayDirectory(paths[0].path);
                };
                manager.addFolder(paths[0].path, null, onFolderCreated);
            }
            else if ($(this).hasClass('cp-app-drive-context-newsharedfolder')) {
                if (paths.length !== 1) { return; }
                addSharedFolderModal(function (obj) {
                    if (!obj) { return; }
                    manager.addSharedFolder(paths[0].path, obj, refresh);
                });
            }
            else if ($(this).hasClass("cp-app-drive-context-newdoc")) {
                var ntype = $(this).data('type') || 'pad';
                var path2 = manager.isPathIn(currentPath, [TRASH]) ? '' : currentPath;
                common.sessionStorage.put(Constants.newPadPathKey, path2, function () {
                    common.openURL('/' + ntype + '/');
                });
            }
            else if ($(this).hasClass("cp-app-drive-context-properties")) {
                if (type === 'trash') {
                    var pPath = paths[0].path;
                    if (paths.length !== 1 || pPath.length !== 4) { return; }
                    var element = manager.find(pPath.slice(0,3)); // element containing the oldpath
                    var sPath = stringifyPath(element.path);
                    UI.alert('<strong>' + Messages.fm_originalPath + "</strong>:<br>" + sPath, undefined, true);
                    return;
                }
                if (paths.length !== 1) { return; }
                el = manager.find(paths[0].path);
                getProperties(el, function (e, $prop) {
                    if (e) { return void logError(e); }
                    UI.alert($prop[0], undefined, true);
                });
            }
            else if ($(this).hasClass("cp-app-drive-context-hashtag")) {
                if (paths.length !== 1) { return; }
                el = manager.find(paths[0].path);
                var data = manager.getFileData(el);
                if (!data) { return void console.error("Expected to find a file"); }
                var href = data.href || data.roHref;
                common.updateTags(href);
            }
            else if ($(this).hasClass("cp-app-drive-context-empty")) {
                if (paths.length !== 1 || !paths[0].element
                    || !manager.comparePath(paths[0].path, [TRASH])) {
                    log(Messages.fm_forbidden);
                    return;
                }
                UI.confirm(Messages.fm_emptyTrashDialog, function(res) {
                    if (!res) { return; }
                    manager.emptyTrash(refresh);
                });
            }
            else if ($(this).hasClass("cp-app-drive-context-remove")) {
                return void deletePaths(paths);
            }
            else if ($(this).hasClass("cp-app-drive-context-removesf")) {
                return void deletePaths(paths);
            }
            else if ($(this).hasClass("cp-app-drive-context-restore")) {
                if (paths.length !== 1) { return; }
                var restorePath = paths[0].path;
                var restoreName = paths[0].path[paths[0].path.length - 1];
                if (restorePath.length === 4) {
                    var rEl = manager.find(restorePath);
                    if (manager.isFile(rEl)) {
                        restoreName = manager.getTitle(rEl);
                    } else {
                        restoreName = restorePath[1];
                    }
                }
                UI.confirm(Messages._getKey("fm_restoreDialog", [restoreName]), function(res) {
                    if (!res) { return; }
                    manager.restore(restorePath, refresh);
                });
            }
            else if ($(this).hasClass("cp-app-drive-context-openparent")) {
                if (paths.length !== 1) { return; }
                var parentPath = paths[0].path.slice();
                if (manager.isInTrashRoot(parentPath)) { parentPath = [TRASH]; }
                else { parentPath.pop(); }
                el = manager.find(paths[0].path);
                APP.selectedFiles = [el];
                APP.displayDirectory(parentPath);
            }
            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 (manager.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 = manager.isPathIn(currentPath, [TRASH]);
                $selected.each(function (idx, elmt) {
                    if (!$(elmt).data('path')) { return; }
                    paths.push($(elmt).data('path'));
                });
                if (!paths.length) { return; }
                // If we are in the trash or anon pad or if we are holding the "shift" key,
                // delete permanently
                // Or if we are in a shared folder
                if (!APP.loggedIn || isTrash || manager.isInSharedFolder(currentPath)
                        || e.shiftKey) {
                    deletePaths(null, paths);
                    return;
                }
                // else move to trash
                moveElements(paths, [TRASH], false, refresh);
                return;
            }
        });
        var isCharacterKey = function (e) {
            return e.which === "undefined" /* IE */ ||
                    (e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey);
        };
        $appContainer.on('keypress', function (e) {
            var $searchBar = $tree.find('#cp-app-drive-tree-search-input');
            if ($searchBar.is(':focus')) { return; }
            if (isCharacterKey(e)) {
                $searchBar.focus();
                e.preventDefault();
                return;
            }
        });
        $appContainer.contextmenu(function () {
            APP.hideMenu();
            return false;
        });

        var onRefresh = {
            refresh: function() {
                if (onRefresh.to) {
                    window.clearTimeout(onRefresh.to);
                }
                onRefresh.to = window.setTimeout(refresh, 500);
            }
        };

        sframeChan.on('EV_DRIVE_CHANGE', function (data) {
            if (history.isHistoryMode) { return; }

            var path = data.path.slice();
            var originalPath = data.path.slice();

            // Fix the path if this is about a shared folder
            if (data.id && manager.folders[data.id]) {
                var uoPath = manager.getUserObjectPath(manager.folders[data.id].userObject);
                if (uoPath) {
                    Array.prototype.unshift.apply(path, uoPath);
                    path.unshift('drive');
                }
            }

            if (path[0] !== 'drive') { return false; }
            path = path.slice(1);
            if (originalPath[0] === 'drive') { originalPath = originalPath.slice(1); }

            var cPath = currentPath.slice();
            if (originalPath.length && originalPath[0] === FILES_DATA) {
                onRefresh.refresh();
            } else if ((manager.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
                    (path.length >= cPath.length && manager.isSubpath(path, cPath))) {
                // Reload after a few ms to make sure all the change events have been received
                onRefresh.refresh();
            } else {
                APP.resetTree();
            }
            return false;
        });
        sframeChan.on('EV_DRIVE_REMOVE', function (data) {
            if (history.isHistoryMode) { return; }

            var path = data.path.slice();

            // Fix the path if this is about a shared folder
            if (data.id && manager.folders[data.id]) {
                var uoPath = manager.getUserObjectPath(manager.folders[data.id].userObject);
                if (uoPath) {
                    Array.prototype.unshift.apply(path, uoPath);
                    path.unshift('drive');
                }
            }

            if (path[0] !== 'drive') { return false; }
            path = path.slice(1);

            var cPath = currentPath.slice();
            if ((manager.isPathIn(cPath, ['hrefArray', TRASH]) && cPath[0] === path[0]) ||
                    (path.length >= cPath.length && manager.isSubpath(path, cPath))) {
                // Reload after a few to make sure all the change events have been received
                onRefresh.refresh();
            } else {
                APP.resetTree();
            }
            return false;
        });

        history.onEnterHistory = function (obj) {
            copyObjectValue(files, obj.drive);
            appStatus.isReady = true;
            refresh();
        };
        history.onLeaveHistory = function () {
            copyObjectValue(files, proxy.drive);
            refresh();
        };

        var fmConfig = {
            noHandlers: true,
            onUploaded: function () {
                refresh();
            },
            body: $('body')
        };
        APP.FM = common.createFileManager(fmConfig);

        refresh();
        UI.removeLoadingScreen();

        sframeChan.query('Q_DRIVE_GETDELETED', null, function (err, data) {
            var ids = manager.findChannels(data);
            var titles = [];
            ids.forEach(function (id) {
                var title = manager.getTitle(id);
                titles.push(title);
                var paths = manager.findFile(id);
                manager.delete(paths, refresh);
            });
            if (!titles.length) { return; }
            UI.log(Messages._getKey('fm_deletedPads', [titles.join(', ')]));
        });
    };

    var setHistory = function (bool, update) {
        history.isHistoryMode = bool;
        setEditable(!bool);
        if (!bool && update) {
            history.onLeaveHistory();
        }
    };

    var main = function () {
        var common;
        var proxy = {};
        var folders = {};
        var readOnly;

        nThen(function (waitFor) {
            $(waitFor(function () {
                UI.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 = APP.readOnly = metadataMgr.getPrivateData().readOnly;
                    privReady();
                }
            });
        }).nThen(function (waitFor) {
            APP.loggedIn = common.isLoggedIn();
            APP.SFCommon = common;
            if (!APP.loggedIn) { Feedback.send('ANONYMOUS_DRIVE'); }
            APP.$body = $('body');
            APP.$bar = $('#cp-toolbar');

            common.setTabTitle(Messages.type.drive);

            /*var listmapConfig = {
                data: {},
                common: common,
                logging: false
            };*/

            var sframeChan = common.getSframeChannel();
            updateObject(sframeChan, proxy, waitFor(function () {
                updateSharedFolders(sframeChan, null, proxy.drive, folders, waitFor());
            }));
        }).nThen(function () {
            var sframeChan = common.getSframeChannel();
            var metadataMgr = common.getMetadataMgr();
            var configTb = {
                displayed: ['useradmin', 'pageTitle', 'newpad', 'limit'],
                pageTitle: Messages.type.drive,
                metadataMgr: metadataMgr,
                readOnly: readOnly,
                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 */
            if (APP.loggedIn) {
                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;
                    sframeChan.query("Q_DRIVE_RESTORE", history.currentObj.drive, function () {});
                },
                onRemote: function () {},
                setHistory: setHistory,
                applyVal: function (val) {
                    var obj = JSON.parse(val || '{}');
                    history.currentObj = obj;
                    history.onEnterHistory(obj);
                },
                $toolbar: APP.$bar,
            };

            // Add a "Burn this drive" button
            if (!APP.loggedIn) {
                APP.$burnThisDrive = common.createButton(null, true).click(function () {
                    UI.confirm(Messages.fm_burnThisDrive, function (yes) {
                        if (!yes) { return; }
                        common.getSframeChannel().event('EV_BURN_ANON_DRIVE');
                    }, null, true);
                }).attr('title', Messages.fm_burnThisDriveButton)
                  .removeClass('fa-question')
                  .addClass('fa-ban');
            }

            metadataMgr.onChange(function () {
                var name = metadataMgr.getUserData().name || Messages.anonymous;
                APP.$displayName.text(name);
            });

            $('body').css('display', '');
            APP.files = proxy;
            if (!proxy.drive || typeof(proxy.drive) !== 'object') {
                throw new Error("Corrupted drive");
            }
            andThen(common, proxy, folders);

            var onDisconnect = APP.onDisconnect = function (noAlert) {
                setEditable(false);
                if (APP.refresh) { APP.refresh(); }
                APP.toolbar.failed();
                if (!noAlert) { UI.alert(Messages.common_connectionLost, undefined, true); }
            };
            var onReconnect = function (info) {
                setEditable(true);
                if (APP.refresh) { APP.refresh(); }
                APP.toolbar.reconnecting(info.myId);
                UI.findOKButton().click();
            };

            sframeChan.on('EV_DRIVE_LOG', function (msg) {
                UI.log(msg);
            });
            sframeChan.on('EV_NETWORK_DISCONNECT', function () {
                onDisconnect();
            });
            sframeChan.on('EV_NETWORK_RECONNECT', function (data) {
                // data.myId;
                onReconnect(data);
            });
            common.onLogout(function () { setEditable(false); });
        });
    };
    main();
});