PMA.UI Documentation by Pathomation

components/js/tree.js

import { Resources } from '../../resources/resources';
import { SessionLogin } from './sessionlogin';
import { checkBrowserCompatibility } from '../../view/helpers';
import { Events, ApiMethods, callApiMethod, getThumbnailUrl } from './components';
import $ from 'jquery';
import { createTree } from 'jquery.fancytree/dist/modules/jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.dnd5';
import 'jquery.fancytree/dist/skin-win8/ui.fancytree.min.css';
import 'font-awesome/css/font-awesome.css';

let PmaStartUrl = "http://127.0.0.1:54001/";
/**
* Represents a UI component that shows a tree view that allows browsing through the directories and slides from multiple PMA.core servers. This component uses {@link https://github.com/mar10/fancytree|fancytree} under the hood.
* @param  {Context} context
* @param  {object} options - Configuration options
* @param  {Tree~server[]} options.servers An array of servers to show files from
* @param {string|HTMLElement} options.element - The element that hosts the tree view. It can be either a valid CSS selector or an HTMLElement instance.
* @param  {function} [options.renderNode] - Allows tweaking after node state was rendered
* @param  {Tree~rootDirSortCb} [options.rootDirSortCb] - Function that sorts an array of directories
* @param  {boolean} [options.checkboxes=false] - Allows multi selection of files with checkboxes
* @param  {boolean} [options.autoDetectPmaStart=false] - Whether the tree should try to connect to a PMA.core lite server
* @param  {boolean} [options.autoExpandNodes=false] - Whether the tree should expand nodes on single click
* @param  {boolean} [options.preview=false] - Whether the tree should show a popover preview of slides
* @param  {boolean} [options.search=false] - Whether the tree should show a textbox for enabling search
* @fires PMA.UI.Components.Events#SlideSelected
* @fires PMA.UI.Components.Events#DirectorySelected
* @fires PMA.UI.Components.Events#ServerSelected
* @fires PMA.UI.Components.Events#MultiSelectionChanged
* @fires PMA.UI.Components.Events#TreeNodeDoubleClicked
* @fires PMA.UI.Components.Events#ServerExpanded
* @fires PMA.UI.Components.Events#DirectoryExpanded
* @fires PMA.UI.Components.Events#SearchFinished
* @fires PMA.UI.Components.Events#SearchFailed
* @tutorial 04-tree
*/
export class Tree {
    /**
     * Holds information about a PMA.core server
     * @typedef {Object} Tree~server
     * @property {string} name - The display name of the server
     * @property {string} url - The url of the server
     * @property {string} [path] - An optional path of a folder in the server to show
     * @property {boolean} [showFiles=true] - Whether or not to display slides along with directories
     */

    /**
     * Function that sorts an array of directories
     * @callback Tree~rootDirSortCb
     * @param {String[]} directories
     * @returns {String[]}
     */

    /**
    * Function that gets called when an attempt to add a server completes.
    * @callback Tree~addServerCallback
    * @param {boolean} success - Whether the server was successfully added or not
    */

    constructor(context, options) {
        if (!checkBrowserCompatibility()) {
            return;
        }

        this.element = options.element;
        if (typeof options.element == "string") {
            var el = document.querySelector(options.element);
            if (!el) {
                console.error("Invalid selector for element");
            }
            else {
                this.element = el;
            }
        }

        this.context = context;
        this.servers = options.servers || [];
        var _this = this;

        this.navigating = false;
        this.lastNavigatePathRequest = null;

        this.autoExpand = options.autoExpandNodes === true;
        this.checkboxes = options.checkboxes === true;
        this.lastSearchResults = {};
        this.listeners = {};
        this.listeners[Events.DirectorySelected] = [];
        this.listeners[Events.SlideSelected] = [];
        this.listeners[Events.ServerSelected] = [];
        this.listeners[Events.MultiSelectionChanged] = [];
        this.listeners[Events.TreeNodeDoubleClicked] = [];
        this.listeners[Events.ServerExpanded] = [];
        this.listeners[Events.DirectoryExpanded] = [];
        this.listeners[Events.SearchFinished] = [];
        this.listeners[Events.SearchFailed] = [];

        this.lastSearchHash = 0;
        this.previewEnabled = false;

        if (typeof options.rootDirSortCb === "function") {
            this.rootDirSortCb = options.rootDirSortCb;
        }

        var sourceData = [];
        for (var i = 0; i < this.servers.length; i++) {
            sourceData.push({
                title: this.servers[i].name,
                serverNode: true,
                key: this.servers[i].url,
                serverIndex: i,
                extraClasses: "server",
                dirPath: (this.servers[i].path ? this.servers[i].path : "/"),
                lazy: true,
                unselectableStatus: false,
                unselectable: true,
                selected: false,
                checkbox: false
            });

            // try get version for each server
            this.context.getVersionInfo(this.servers[i].url, serverVersionResult.bind(this, this.servers[i]));
        }

        var searchBox = null;
        if (options.search === true) {
            var cls = options.searchClass ? options.searchClass : 'pma-ui-tree-search-box';
            searchBox = $("<input type='text' class='" + cls + "' placeholder='" + Resources.translate("Search") + "'/><hr />").appendTo(this.element);
        }

        this.fancytree = createTree(this.element, {
            keyPathSeparator: "?",
            checkbox: options.checkboxes === true,
            extensions: ["dnd5", /*"glyph", "wide"*/],
            dnd5: {
                dragStart: function (node, data) {
                    // Called when user starts dragging `node`.
                    // This method MUST be defined to enable dragging for tree nodes.
                    //
                    // We can
                    //   Add or modify the drag data using `data.dataTransfer.setData()`
                    //   Return false to cancel dragging of `node`.

                    // For example:
                    //    if( data.originalEvent.shiftKey ) ...          
                    //    if( node.isFolder() ) { return false; }
                    if (node.data.dirPath && !node.data.serverNode) {
                        node.data.dragging = true;
                        if (node.isActive) {
                            node.setActive(false);
                        }

                        data.dataTransfer.setData("text", JSON.stringify({
                            serverUrl: node.data.serverUrl,
                            path: node.data.dirPath,
                            isFolder: node.isFolder()
                        }));

                        return true;
                    }

                    return false;
                },
                dragEnd: function (node, data) {
                    node.data.dragging = false;
                }
            },
            //glyph: glyph_opts,
            selectMode: 3,
            toggleEffect: { options: { direction: "left" }, duration: 400 },
            // toggleEffect: false,
            wide: {
                iconWidth: "1em", // Adjust this if @fancy-icon-width != "16px"
                iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
                levelOfs: "1.5em" // Adjust this if ul padding != "16px"
            },
            icon: function (event, data) {
                if (data.node.key === "_searchResults") {
                    if (data.node.data.searching) {
                        return "fa fa-spinner fa-spin";
                    }
                    else {
                        return "fa fa-search";
                    }
                }
                else if (data.node.data.serverNode === true) {
                    return "server";
                }
                else if (data.node.data.rootDir === true) {
                    return "rootdir";
                }
                else if (!data.node.isFolder()) {
                    return "image";
                }
            },
            renderNode: (typeof options.renderNode === "function" ? options.renderNode : null),
            source: sourceData,
            lazyLoad: loadNode.bind(this),
            activate: function (event, data) {
                // A node was activated:
                var node = data.node;
                if (node.key == "_searchResults" && _this.autoExpand === true) {
                    node.setExpanded(true);
                }

                setTimeout(function () {
                    if (node.data && node.data.dragging === true) {
                        event.preventDefault();
                        return;
                    }

                    if (node.data.serverNode === true) {
                        _this.fireEvent(Events.ServerSelected, { serverUrl: _this.servers[node.data.serverIndex].url });
                        return;
                    }

                    if (node.data.dirPath !== "/") {
                        if (node.isFolder()) {
                            if (_this.autoExpand === true) {
                                node.setExpanded(true);
                            }

                            _this.fireEvent(Events.DirectorySelected, { serverUrl: _this.servers[node.data.serverIndex].url, path: node.data.dirPath });
                        }
                        else {
                            if (_this.servers[node.data.serverIndex]) {
                                _this.fireEvent(Events.SlideSelected, { serverUrl: _this.servers[node.data.serverIndex].url, path: node.data.dirPath });
                            }
                        }
                    }
                    else if (_this.autoExpand === true) {
                        node.setExpanded(true);
                    }
                }, 300);
            },
            select: function (event, data) {
                var n = data.tree.getSelectedNodes();
                var selectionArray = [];

                if (n && n.length > 0) {
                    for (var i = 0; i < n.length; i++) {
                        if (!(n[i] === null || n[i].data.serverNode === true || n[i].data.rootDir === true || n[i].isFolder())) {
                            selectionArray.push({ serverUrl: _this.servers[n[i].data.serverIndex].url, path: n[i].data.dirPath });
                        }
                    }
                }

                _this.fireEvent(Events.MultiSelectionChanged, selectionArray);
            },
            expand: function (event, data) {
                var node = data.node;
                setTimeout(function () {
                    if (node.data.serverNode === true) {
                        _this.fireEvent(Events.ServerExpanded, { serverUrl: _this.servers[node.data.serverIndex].url });
                        return;
                    }
                    else if (node.data.dirPath !== "/") {
                        if (node.isFolder()) {
                            _this.fireEvent(Events.DirectoryExpanded, { serverUrl: _this.servers[node.data.serverIndex].url, path: node.data.dirPath });
                            return;
                        }
                    }
                }, 300);
            },
            dblclick: function (event, data) {
                var node = data.node;
                _this.fireEvent(Events.TreeNodeDoubleClicked,
                    {
                        serverUrl: _this.servers[node.data.serverIndex].url,
                        path: node.data.dirPath,
                        isSlide: !(node.data.serverNode === true || node.data.rootDir === true || node.isFolder())
                    });
            }
        });

        if (options.preview === true) {
            enablePreview.call(this, this.fancytree);
        }

        if (options.autoDetectPmaStart === true) {
            this.addPmaStartServer();
        }

        if (options.search === true) {
            $(this.element).find(".ui-fancytree").addClass("ui-fancytree-search");
        }

        // this.fancytree = $.ui.fancytree.getTree(this.element);

        var self = this;
        var searchTimeout = null;
        var t = this.fancytree;
        if (searchBox) {
            searchBox.on('input propertychange paste', function () {
                var val = $(this).val();
                if (val && val.length > 3) {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(function () {
                        startSearch.call(self, val);
                    }, 500);
                }
                else {
                    var n = t.getNodeByKey("_searchResults");
                    if (n) {
                        n.remove();
                    }
                }
            });
        }
    }

    /**
     * Toggle the live preview on/off
     * @param {boolean} enable 
     */
    togglePreview(enable) {
        if (enable && !this.previewEnabled) {
            enablePreview.call(this, $(this.element));
        }
        else if (!enable && this.previewEnabled) {
            disablePreview.call(this, $(this.element));
        }
    };

    /**
     * Adds a new server to the tree
     * @param  {Tree~server} server A server object
     */
    addServer(server) {
        if (server) {
            this.servers.push(server);

            var serverInfo = {
                title: this.servers[this.servers.length - 1].name,
                serverNode: true,
                key: this.servers[this.servers.length - 1].url,
                serverIndex: this.servers.length - 1,
                extraClasses: "server",
                dirPath: (this.servers[this.servers.length - 1].path ? this.servers[this.servers.length - 1].path : "/"),
                lazy: true,
                unselectableStatus: false,
                unselectable: true,
                selected: false,
                checkbox: false
            };

            // try get version for server
            this.context.getVersionInfo(server.url, serverVersionResult.bind(this, server));
            this.fancytree.getRootNode().addChildren(serverInfo);
        }
    };

    /**
     * Removes a server from the tree
     * @param {number} index The index of the server to remove
     */
    removeServer(index) {
        var children = this.fancytree.getRootNode().getChildren();
        if (children && children.length && index >= 0 && index < children.length) {
            if (children[index].data) {
                this.servers.splice(children[index].data.serverIndex, 1);
            }

            children[index].remove();
        }
        else {
            console.error("No children found or index out of range");
        }
    };

    /**
     * Removes a Pma.start server if it exists
     */
    removePmaStartServer() {
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].key == PmaStartUrl) {
                this.removeServer(children[i].data.serverIndex);
            }
        }
    };

    /**
     * Add a pma.start server if available
     * @param {Tree~addServerCallback} callback - The function to call when the attempt to add server completes
     */
    addPmaStartServer(callback) {
        // This function adds a SessionLogin provider to the context as many times as it is called. 
        // This needs fixing
        var _this = this;
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].key == PmaStartUrl) {
                return;
            }
        }

        callApiMethod({
            method: ApiMethods.GetVersionInfo,
            httpMethod: "GET",
            data: { rnd: Math.random() },
            serverUrl: PmaStartUrl,
            success: function () {
                var sl = new SessionLogin(_this.context, [{ serverUrl: PmaStartUrl, sessionId: "pma.core.lite" }]);
                _this.addServer({ name: Resources.translate("Computer"), url: PmaStartUrl });
                if (typeof callback === "function") {
                    callback.call(this, true);
                }
            },
            failure: function () {
                if (typeof callback === "function") {
                    callback.call(this, false);
                }
            }
        });
    };

    /**
     * Returns the list of servers currently under the tree view
     * @returns {Tree~server[]}
     */
    getServers() {
        return this.servers;
    };

    /**
     * Gets the currently selected slide or null
     * @returns {Tree~server}
     */
    getSelectedSlide() {
        var n = this.fancytree.getActiveNode();
        if (n === null || n.data.serverNode === true || n.data.rootDir === true || n.isFolder()) {
            return null;
        }

        return { server: this.servers[n.data.serverIndex].url, path: n.data.dirPath };
    };

    /**
     * Gets the currently selected directory or null
     * @returns {Tree~server}
     */
    getSelectedDirectory() {
        var n = this.fancytree.getActiveNode();
        if (n !== null && (n.data.rootDir === true || n.isFolder())) {
            return { server: this.servers[n.data.serverIndex].url, path: n.data.dirPath };
        }

        return null;
    };

    /**
     * Gets an array with the checked slides or an empty array
     * @returns {Tree~server[]}
     */
    getMultiSelection() {
        var n = this.fancytree.getSelectedNodes();
        var selectionArray = [];
        if (n && n.length > 0) {
            for (var i = 0; i < n.length; i++) {
                if (!(n[i] === null || n[i].data.serverNode === true || n[i].data.rootDir === true || n[i].isFolder())) {
                    selectionArray.push({ serverUrl: this.servers[n[i].data.serverIndex].url, path: n[i].data.dirPath });
                }
            }
        }

        return selectionArray;
    };

    /**
     * Clears the selected nodes in the tree view
     */
    clearMultiSelection() {
        this.fancytree.selectAll(false);
    };

    /**
     * Navigates to a path in the tree
     * @param {string} path - The virtual path to navigate to. The server part of the path should be the server NAME(not the server url)
     */
    navigateTo(path) {
        // fancy tree needs a path separated with options.keyPathSeparator 
        //  ex. ?key1?key2?key3
        var self = this;
        if (self.navigating) {
            self.lastNavigatePathRequest = path;
            return;
        }

        self.navigating = true;

        var tree = this.fancytree;
        var key = virtualPathToTreePath.call(this, path, tree);

        return tree.loadKeyPath(key, function (node, status) {
            if (status === "ok") {
                node.setActive();
                node.scrollIntoView();
                self.navigating = false;
            }
        }).done(function () {
            self.navigating = false;

            if (self.lastNavigatePathRequest) {
                var p = self.lastNavigatePathRequest;
                self.lastNavigatePathRequest = null;
                self.navigateTo(p);
            }
        });
    };

    /**
     * Refreshes a node in the tree specified by the path (server or directory)
     * @param {string} path - The virtual path to refresh. The server part of the path should be the server NAME(not the server url)
     */
    refresh(path) {
        var tree = this.fancytree;
        var key = virtualPathToTreePath.call(this, path, tree);

        return tree.loadKeyPath(key, function (node, status) {
            if (status === "ok") {
                node.resetLazy();
            }
        });
    };

    /**
     * Returns the last search results, grouped by the server name
     * @return {Object.<string, string[]>} The object containing the result for each server available
     */
    getSearchResults() {
        return this.lastSearchResults;
    };

    /**  
     * Clears any search results for this tree
    */
    clearSearchResults() {
        var tree = this.fancytree;
        var n = tree.getNodeByKey("_searchResults");
        if (n) {
            n.remove();
        }
    };

    /**
     * Searches for files matching the specified value, and appends them to the tree. Use {@link PMA.UI.Components.Tree#getSearchResults} to get the search results
     * @param {string} value - The value to search for
     * @fires PMA.UI.Components.Events#SearchFinished
     */
    search(value) {
        this.clearSearchResults();
        return startSearch.call(this, value);
    };

    /**
     * Attaches an event listener
     * @param {PMA.UI.Components.Events} eventName - The name of the event to listen to
     * @param {function} callback - The function to call when the event occurs
     */
    listen(eventName, callback) {
        if (!this.listeners.hasOwnProperty(eventName)) {
            console.error(eventName + " is not a valid event");
        }

        this.listeners[eventName].push(callback);
    };

    // fires an event
    fireEvent(eventName, eventArgs) {
        if (!this.listeners.hasOwnProperty(eventName)) {
            console.error(eventName + " does not exist");
            return;
        }

        for (var i = 0, max = this.listeners[eventName].length; i < max; i++) {
            this.listeners[eventName][i].call(this, eventArgs);
        }
    };

    /**
     * Gets a value indicating whether files are shown for a specified server
     * @param {string} serverUrl - A server url to show/hide files for
     */
    getFilesVisibility(serverUrl) {
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].key == serverUrl) {
                for (var j = 0; j < this.servers.length; j++) {
                    if (this.servers[j].url == children[i].key) {
                        return this.servers[j].showFiles;
                    }
                }
            }
        }
    };

    /**
     * Shows or hides the files of a specified server
     * @param {string} serverUrl - A server url to show/hide files for
     * @param {boolean} visible - Whether to show or hide files for the specific server
     */
    setFilesVisibility(serverUrl, visible) {
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].key == serverUrl) {
                for (var j = 0; j < this.servers.length; j++) {
                    if (this.servers[j].url == children[i].key) {
                        this.servers[j].showFiles = visible;
                    }
                }

                children[i].resetLazy();
            }
        }
    };

    /**
     * Resets the state of all servers, collapses all visible folder, and resets the lazy load state
     */
    collapseAll() {
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            // children[i].setExpanded(false);
            children[i].resetLazy();
        }
    };

    /**
     * Resets the state of a specified server, collapses all visible folder, resets the lazy load state and invalidates the session 
     */
    signOut(serverUrl) {
        var children = this.fancytree.getRootNode().getChildren();
        for (var i = 0; i < children.length; i++) {
            if (children[i].key == serverUrl) {
                children[i].resetLazy();
                this.context.deAuthenticate(serverUrl);
            }
        }
    };

}


function loadNode(event, data) {
    var dfd = new $.Deferred();
    data.result = dfd.promise();

    var node = data.node;
    var path = node.data.dirPath === "/" ? "" : node.data.dirPath;
    var _this = this;

    // if the directories to be loaded are root directories or sub directories
    var isRootDir = node.data.dirPath === "/";

    this.context.getDirectories(_this.servers[node.data.serverIndex].url, path,
        function (sessionId, directories) {
            if (_this.rootDirSortCb && path === "") {
                directories = _this.rootDirSortCb(directories);
            }

            var result = [];
            for (var i = 0; i < directories.length; i++) {
                result.push({
                    title: directories[i].split('/').pop(),
                    lazy: true,
                    serverIndex: node.data.serverIndex,
                    serverUrl: _this.servers[node.data.serverIndex].url,
                    dirPath: directories[i],
                    key: directories[i],
                    folder: true,
                    rootDir: isRootDir,
                    extraClasses: isRootDir ? "rootdir" : "subdir",
                    // unselectableStatus: true,
                    checkbox: _this.checkboxes
                });
            }

            if (_this.servers[node.data.serverIndex].showFiles !== false && path && path !== "") {
                _this.context.getSlides(
                    {
                        serverUrl: _this.servers[node.data.serverIndex].url,
                        path: path,
                        success: function (sessionId, files) {
                            for (var i = 0; i < files.length; i++) {
                                result.push({
                                    title: files[i].split('/').pop(),
                                    lazy: false,
                                    serverIndex: node.data.serverIndex,
                                    dirPath: files[i],
                                    serverUrl: _this.servers[node.data.serverIndex].url,
                                    key: files[i],
                                    folder: false,
                                    extraClasses: "slide"
                                });
                            }

                            dfd.resolve(result);
                        },
                        failure: function (error) {
                            dfd.reject(error.Message ? error.Message : Resources.translate("Error loading files"));
                        }
                    });
            }
            else {
                dfd.resolve(result);
            }
        },
        function (error) {
            dfd.reject(error.Message ? error.Message : Resources.translate("Error loading directories"));
        });
}

function searchResultsSuccess(searchNode, serverIndex, searchHash, sessionId, results) {
    if (this.lastSearchHash !== searchHash) {
        return;
    }

    this.lastSearchResults[this.servers[serverIndex].name] = results;

    var searchServerNode = searchNode.addChildren({
        title: this.servers[serverIndex].name,
        serverNode: true,
        key: "_searchServer_" + this.servers[serverIndex].url,
        serverIndex: serverIndex,
        dirPath: (this.servers[serverIndex].path ? this.servers[serverIndex].path : "/"),
        lazy: false,
        unselectableStatus: false,
        unselectable: true,
        selected: false,
        checkbox: false,
        resultCount: results.length
    });

    var tree = $(this.element).fancytree("getTree");
    for (var r = 0; r < results.length; r++) {
        var parts = results[r].split('/');

        var thispart = "";
        var currentLevel = searchServerNode;
        for (var i = 0; i < parts.length; i++) {
            thispart += i > 0 ? "/" + parts[i] : parts[i];

            var n = tree.getNodeByKey("_searchResult_" + thispart, currentLevel);
            if (n == null) {
                currentLevel = currentLevel.addChildren({
                    title: thispart.split("/").pop(),
                    lazy: false,
                    serverIndex: serverIndex,
                    dirPath: thispart,
                    key: "_searchResult_" + thispart,
                    folder: i < parts.length - 1,
                    rootDir: i == 0,
                    extraClasses: i == 0 ? "rootdir" : "subdir",
                    checkbox: this.checkboxes,
                    resultCount: 1
                });
            }
            else {
                currentLevel = n;
                n.data.resultCount += 1;
            }
        }
    }

    searchNode.data.resultCount += results.length;

    searchNode.visit(function (n) {
        if (n == searchNode) {
            n.setTitle(Resources.translate("Search results for \"{pattern}\" ({count})", { pattern: searchNode.data.pattern, count: n.data.resultCount }));
        }
        else if ((n.isFolder() || n.data.serverNode) && n == searchServerNode) {
            n.setTitle(n.title + " (" + n.data.resultCount + ")");
        }

    }, true);

    searchNode.data.serverDone++;
    if (searchNode.data.serverDone >= searchNode.data.serversSearched) {
        searchNode.data.searching = false;
        searchNode.renderTitle();
    }

    searchNode.makeVisible();
    searchNode.setExpanded(true);

    this.fireEvent(Events.SearchFinished, this.lastSearchResults);
}

function searchResultError(searchNode, serverIndex, searchHash) {
    if (this.lastSearchHash !== searchHash) {
        return;
    }

    searchNode.data.serverDone++;
    if (searchNode.data.serverDone >= searchNode.data.serversSearched) {
        searchNode.data.searching = false;
        searchNode.renderTitle();
    }

    this.fireEvent(Events.SearchFailed, this.servers[serverIndex]);
}

function serverVersionResult(server, version) {
    server.version = version;
}

function startSearch(pattern) {
    this.lastSearchResults = {};
    var searchResultsNode = $(this.element).fancytree("getTree").getNodeByKey("_searchResults");
    if (searchResultsNode == null) {
        var searchResultsNodeInfo = {
            title: Resources.translate("Search results for \"{pattern}\"", { pattern: pattern }),
            key: "_searchResults",
            lazy: false,
            selected: false,
            checkbox: false,
            resultCount: 0,
            searching: true,
            serverDone: 0,
            serversSearched: 0,
            pattern: pattern
        };

        searchResultsNode = this.fancytree.getRootNode().addChildren(searchResultsNodeInfo);
    }
    else {
        searchResultsNode.resultCount = 0;
        searchResultsNode.removeChildren();
        searchResultsNode.data.searching = true;
        searchResultsNode.data.serverDone = 0;
        searchResultsNode.data.serversSearched = 0;
        searchResultsNode.data.pattern = pattern;
        searchResultsNode.renderTitle();
    }

    searchResultsNode.makeVisible();
    searchResultsNode.setExpanded(true);

    var self = this;
    this.lastSearchHash = Math.random();
    for (var i = 0; i < this.servers.length; i++) {
        if (!this.servers[i].version || this.servers[i].version.substring(0, "1.".length) === "1.") {
            continue;
        }

        searchResultsNode.data.serversSearched++;
        this.context.queryFilename(
            this.servers[i].url,
            "",
            pattern,
            searchResultsSuccess.bind(self, searchResultsNode, i, this.lastSearchHash),
            searchResultError.bind(self, searchResultsNode, i, this.lastSearchHash)
        );
    }
}

/**
 * Converts a virtual path to a key used internaly by the tree component to locate any node
 * @param {string} path - The virtual path to convert. The server part should be the NAME of the server (not the url)
 * @param {Object} tree - The instance of the fancytree
 * @returns {string} The key to the node
 */
function virtualPathToTreePath(path, tree) {
    var parts = path.split("/").filter(function (e) { return e != null && e != ""; });
    var initialPath = "";

    if (parts.length > 0) {
        // find server url as first part of path
        for (var i = 0; i < this.servers.length; i++) {
            if (this.servers[i].name.toLowerCase() == parts[0].toLowerCase()) {
                parts[0] = this.servers[i].url;
                initialPath = this.servers[i].path ? this.servers[i].path : "";
                break;
            }
        }

        if (initialPath) {
            parts[1] = initialPath + "/" + parts[1];
        }

        for (i = 2; i < parts.length; i++) {
            parts[i] = parts[i - 1] + "/" + parts[i];
        }
    }

    parts = parts.join(tree.options.keyPathSeparator);

    return parts;
}

function disablePreview(tree) {
    if (this.previewEnabled) {
        $(this.element).off("mouseenter", "span.fancytree-title");
        $(this.element).off("mouseleave", "span.fancytree-title");
        $(this.element).off("mousemove", "span.fancytree-title");

        $("#fancytree-preview").remove();
        this.previewEnabled = false;
    }
}

function enablePreview(tree) {
    if (!this.previewEnabled) {
        var xOffset = 100, yOffset = -30;
        var hoverTimeout = null;
        var _this = this;

        $(this.element).on("mouseenter", "span.fancytree-title", function (event) {
            // Add a hover handler to all node titles (using event delegation)
            var node = $.ui.fancytree.getNode(event);
            if (!(node === null || node.data.serverNode === true || node.data.rootDir === true || node.isFolder()) && node.data.serverIndex !== undefined) {
                var serverUrl = _this.servers[node.data.serverIndex].url;

                var f = function () {
                    _this.context.getSession(serverUrl, function (sessionId) {
                        var tUrl = getThumbnailUrl(serverUrl, sessionId, node.data.dirPath, 0, 150, 0);
                        var el = $("#fancytree-preview");
                        if (el.length > 0) {
                            el.remove();
                        }

                        el = $("<p id='fancytree-preview' class='fancytree-preview'><i class='fa fa-spinner fa-spin'></i><img/></p>").appendTo("body");
                        el.css("position", "absolute")
                            .css("top", (event.pageY + yOffset) + "px")
                            .css("left", (event.pageX + xOffset) + "px")
                            .fadeIn("fast");

                        el.find("img").bind("load", function () {
                            el.find("i").remove();
                        }).attr("src", tUrl);

                    });
                };

                hoverTimeout = setTimeout(f, 250);
            }
        });

        $(this.element).on("mouseleave", "span.fancytree-title", function (event) {
            $("#fancytree-preview").remove();
            if (hoverTimeout) {
                clearTimeout(hoverTimeout);
                hoverTimeout = null;
            }
        });

        $(this.element).on("mousemove", "span.fancytree-title", function (event) {
            var el = $("#fancytree-preview");
            if (el.length > 0) {
                el.css("top", (event.pageY + yOffset) + "px")
                    .css("left", (event.pageX + xOffset) + "px");
            }
        });

        this.previewEnabled = true;
    }
}