gszauer/UI.js

## index.hml
<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta charset="utf-8">
        <title>WebFS Sample</title>
        <meta name="description" content="WebFS Sample">
        <script type="text/javascript" src="WebFS.js"></script>
        <script type="text/javascript" src="UI.js"></script>
        <link rel="stylesheet" href="WebFS.css" />

        <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAvW8cAP///wCjoJ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREQAAAAAiIiIiAAAAACIiIiIAAAAAIiIiIgAAAAAiIiIiAAAAACIiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAMzMzAAAAAAAzMAMAAAAAADMwAwAAAAAAMzADAAAAAAAAAAAAAAAAAAAAAAAAD//wAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADABwAAwA8AAP//AAD//wAA" rel="icon" type="image/x-icon" />
    </head>
    <body onload="init();">
       <div id="container">
            <div id="modal">
                <div id="textwindow">
                    <div id="text-title">Window Title</div>
                    <div id="text-body"><input type="text" id="text-input"></div>
                    <div id="text-footer">
                        <input class="modal-button" type="button" id="text-submit" value="Submit">
                        <input class="modal-button" type="button" id="text-cancel" value="Cancel">
                    </div>
                </div>
            </div>
            <div id="files">
                <div id="actions">
                    <a href="#" onclick="return false;" id="size">Disk size: 20 MiB</a>
                </div>
                <div id="directories">
                    <!--li class="folder">
                        <div class="folder-header">
                            <a href="#" class="folder-name">(root)</a> <a href="#" class="newfile" onclick="CreateNewFile();return false;">[f]</a> <a href="#" class="newfolder">[d]</a> <a href="#" class="del">[-]</a>
                        </div>
                    <ul class="content">
                        <li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>
                        <li class="file"><a href="#" class="file-name">test2.txt</a><a href="#" class="file-remove">[-]</a></li>
                        <li class="file"><a href="#" class="file-name">test3.txt</a><a href="#" class="file-remove">[-]</a></li>
                    </ul>
                    </li-->
                </div>
            </div>
            <div id="content">
                <div>The dom display sucks. Elements are there but get cut off :(</div>
            </div>
       </div>
    </body>
</html>

## UI.js
function UpdateMetaData(WebFS, info) {
    let infoDiv = document.getElementById('size');
    //let location = window.location.href;

    let location = (new URL(window.location.href));
    let target = "filesystem:" + location.protocol;
    if (target.endsWith(":")) {
        target += "//";
    }
    else {
        target += "://";
    }

    var matches = window.location.href.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
    var domain = matches && matches[1];
    if (domain != null) {
        target += domain;
    }
    target += "/";

    if (WebFS.StorageType == PERSISTENT) {
        target += "persistent/"
    }
    else {
        target += "temporary/"
    }

    infoDiv.innerHTML = info;
    infoDiv.href = target;
}

function ShowTextModal(modalTitle, submitCallbck, cancelCallback) {
    const modalDiv = document.getElementById('modal');

    let textInput = document.getElementById('text-input');
    textInput.value = "";

    let submitButton = document.getElementById('text-submit');
    let cancelButton = document.getElementById('text-cancel');

    let titleText = document.getElementById('text-title');
    titleText.innerHTML = modalTitle;

    if (!submitButton.hasOwnProperty('UI_Callbacks')) {
        submitButton.UI_Callbacks = [];
    }

    if (!cancelButton.hasOwnProperty('UI_Callbacks')) {
        cancelButton.UI_Callbacks = [];
    }

    let OnSubmit = function() {
        if (submitCallbck != null) {
            submitCallbck(textInput.value);
        }
    }

    let OnCancel = function() {
        if (cancelCallback != null) {
            cancelCallback();
        }
    }

    submitButton.UI_Callbacks.push(OnSubmit);
    cancelButton.UI_Callbacks.push(OnCancel);

    submitButton.addEventListener('click', OnSubmit, false);
    cancelButton.addEventListener('click', OnCancel, false);

    modalDiv.style.display = "block";
}

function HideTextModal() {
    const modalDiv = document.getElementById('modal');
    modalDiv.style.display = "none";

    let submitButton = document.getElementById('text-submit');
    let cancelButton = document.getElementById('text-cancel');

    if (submitButton.hasOwnProperty('UI_Callbacks')) {
        while (submitButton.UI_Callbacks.length > 0) {
            let callback = submitButton.UI_Callbacks.pop();
            submitButton.removeEventListener('click', callback, false);
        }
    }
    submitButton.UI_Callbacks = [];

    if (cancelButton.hasOwnProperty('UI_Callbacks')) {
        while (cancelButton.UI_Callbacks.length > 0) {
            let callback = cancelButton.UI_Callbacks.pop();
            cancelButton.removeEventListener('click', callback, false);
        }
    }
    cancelButton.UI_Callbacks = [];
}

function SynchronizeFileList(WebFS) {
    { // Clear existing DOM
        let directories = document.getElementById("directories");
        let child = directories.lastElementChild;
        while (child) {
            directories.removeChild(child);
            child = directories.lastElementChild;
        }
    }

    let obj_map = {};
    let to_process = [];

    let index = WebFS.Index;
    let iter = index;

    while (iter != null) {
        // Create HTML element for current iterator
        let htmlElement = null;
        if(iter.isFile) {
            // <li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>

            let li = document.createElement("div");
            li.classList.add('file');

            let a_name = document.createElement("a");
            a_name.classList.add('file-name');
            a_name.innerHTML = iter.name;

            let indent = -1;
            let _i = iter;
            do {
                indent += 1;
                _i = _i.parent;
            } while (_i != null);
            a_name.style.paddingLeft = "" + (12 * indent) + "px";

            let max_width = 300 - (12 * indent) - 30 - 5;
            a_name.style.maxWidth = "" + max_width + "px";

            let a_del = document.createElement("a");
            a_del.classList.add('file-remove');
            a_del.innerHTML = "[-]";

            let remove_me = iter;
            a_del.addEventListener('click', function() {
                WebFS.Rm(remove_me.path, function(_path, _object, _success) {
                    SynchronizeFileList(WebFS);
                });
            }, false);

            li.appendChild(a_name);
            li.appendChild(a_del);

            obj_map[iter.path] = li;
            htmlElement = li;
        }
        else {
            /*<li class="folder">
                <div class="folder-header">
                    <a href="#" class="folder-name">(root)</a> <a href="#" class="newfile">[f]</a> <a href="#" class="newfolder">[d]</a> <a href="#" class="del">[-]</a>
                </div>
                <ul class="content">
                    <li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>
                    <li class="file"><a href="#" class="file-name">test2.txt</a><a href="#" class="file-remove">[-]</a></li>
                    <li class="file"><a href="#" class="file-name">test3.txt</a><a href="#" class="file-remove">[-]</a></li>
                </ul>
            </li>*/

            let li = document.createElement("div");
            li.classList.add('folder');

            let div = document.createElement("div");
            div.classList.add('folder-header');

            let a_name = document.createElement("a");
            a_name.classList.add('folder-name');

            if (iter.parent == null) {
                a_name.innerHTML = "(root)";
            }
            else {
                a_name.innerHTML = iter.name;
            }

            let indent = -1;
            let _i = iter;
            do {
                indent += 1;
                _i = _i.parent;
            } while (_i != null);
            a_name.style.paddingLeft = "" + (12 * indent) + "px";

            let max_width = 300 - (12 * indent) - 30 - 5;
            a_name.style.maxWidth = "" + max_width + "px";

            let a_file = document.createElement("a");
            a_file.classList.add('newfile');
            a_file.innerHTML = '[f]';

            let filePath = "" + iter.path;
            if (!filePath.endsWith("/")) {
                filePath += "/";
            }

            a_file.addEventListener('click', function() {
                ShowTextModal("Create new file", function(fileName) {
                    filePath += fileName;

                    WebFS.Touch(filePath, function(_path, _object, _success) {
                        SynchronizeFileList(WebFS);
                        HideTextModal();
                    });
                }, function() {
                    HideTextModal();
                });
            }, false);


            let a_dir = document.createElement("a");
            a_dir.classList.add('newfolder');
            a_dir.innerHTML = '[d]';

            filePath = "" + iter.path;
            if (!filePath.endsWith("/")) {
                filePath += "/";
            }

            a_dir.addEventListener('click', function() {
                ShowTextModal("Create new directory", function(fileName) {
                    filePath += fileName;

                    WebFS.MkDir(filePath, function(_path, _object, _success) {
                        SynchronizeFileList(WebFS);
                        HideTextModal();
                    });
                }, function() {
                    HideTextModal();
                });
            }, false);

            let a_del = document.createElement("a");
            a_del.classList.add('del');
            a_del.innerHTML = '[-]';

            let remove_me = iter;
            a_del.addEventListener('click', function() {
                if (remove_me.parent == null) {
                    WebFS.Format(function(_path, _object, _success) {
                        SynchronizeFileList(WebFS);
                    });
                }
                else {
                    WebFS.Rm(remove_me.path, function(_path, _object, _success) {
                        SynchronizeFileList(WebFS);
                    });
                }
            }, false);

            div.appendChild(a_name);
            div.appendChild(a_file);
            div.appendChild(a_dir);
            div.appendChild(a_del);

            let ul = document.createElement("div");
            ul.classList.add('content');

            li.appendChild(div);
            li.appendChild(ul);

            obj_map[iter.path] = ul;
            htmlElement = li;
        }

        // Append HTML element to parent
        let appendTo = document.getElementById('directories');
        if (iter.parent != null) {
            appendTo = obj_map[iter.parent.path];
        }
        appendTo.appendChild(htmlElement);

        // Record all children to be processed
        if (iter.children != null) {
            for (let i = 0; i < iter.children.length; ++i) {
                to_process.push(iter.children[i]);
            }
        }

        // Move on to next iteration
        iter = null;
        if (to_process.length > 0) {
            iter = to_process.pop();
        }
    }
}

function UI_TestModal() {
    ShowTextModal("What's your name?",
        function(string) {
            console.log("on submit: " + string);
            HideTextModal();
        },
        function() {
            console.log("on cacnel");
            HideTextModal();
        }
    );
}

## WebFS.css
* {
    border: 0px;
    padding: 0px;
    margin: 0px;
    color: rgb(220, 220, 220);
    text-decoration: none;
    font-size: 14px;
    font-family: monospace;
}

html, body {
    min-height: 100% !important;
    min-width: 100% !important;
    height: 100%;
    width: 100%;

    background-color: rgb(0, 0, 0);
    color: rgb(220, 220, 220);
}

#modal {
    display: none;
    position:fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(20, 20, 20, 0.8);
}

#textwindow {
    position:relative;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top:  -100px;
    width: 400px;
    overflow: hidden;
    height: 200px;
    background-color: rgb(60, 60, 60);
}

#text-input {
    position: relative;
    top: 20px;
    left: 50%;
    width: 300px;
    height: 40px;
    margin-left: -150px;
    background-color: rgb(40, 40, 40);
    border-color: black;
}

#text-title {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 24px;
    background-color: rgb(40, 40, 40);
}

#text-body {
    width: 100%;
    height: 80px;
    background-color: rgb(60, 60, 60);
}

#text-footer {
    width: 90%;
    height: 80px;
    background-color: rgb(60, 60, 60);
}

.modal-button {
    width: 100px;
    height: 30px;
    background-color: rgb(50, 50, 50);
    border-color: black;
    border-width: 1px;
    float: right;
    margin: 10px;
}

#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(60, 60, 60);
}

#files {
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    height: 100%;
    background-color: rgb(40, 40, 40);
}

.folder {
    width: 100%;
}

.folder-header {
    float: left;
    width: 100%;
    height: 22px;
}

.folder-collapse {
    display: block;
    float: left;
    margin-right: 10px;

    width: 22px;
    height: 22px;
}

.del,
.newfolder,
.newfile {
    display: block;
    float: right;
    margin-left: 5px;

    width: 25px;
    height: 22px;
}

.newfile {
    margin-right: 5px;
}

.content {
    width: 100%;
    height: 100%;
}

.file {
    float: left;
    height: 22px;
    width: 100%;
}

.file-name,
.folder-name {
    display: block;
    float: left;
    height: 22px;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
}

.file-remove {
    display: block;
    float: right;

    height: 22px;
    width: 25px;
    text-indent: 0px;
    margin-right: 5px;
}

#directories {
    height: 100%;
    display: block;
    width: 100%;
}

#actions {
    padding: 5px;
    margin-bottom: 10px;
    height: 20px;

    font-family: monospace;

    background-color: rgb(30, 30, 30);
}

## WebFS.js
// https://jenkov.com/tutorials/html5/file-api.html
// https://docs.pega.com/sites/default/files/mobileclient/7312/api/client_api/container_example_file_api.html

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;

// OnSuccess(FileSystem, SizeInBytes)
// OnError(ErrorString);
function InitFileSystem(InitFsType, InitFsSize, InitFsOnSuccess, InitFsOnFailure) {
    let result = {};
    result.ready = false;
    result.fs = null;

    const OnFsError = function(e) {
        let errorString = "File System Error: " + e.name + "\n\t" + e;
        console.error(errorString);
        alert(errorString);
        if (InitFsOnFailure) {
            InitFsOnFailure(errorString);
        }
    }

    const RequestStorage = function(type, bytes, OnSuccess, OnError) {
        const CreateFileSystem = function(bytesGranted) {
            const RequestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
            RequestFileSystem(type, bytesGranted, function(fs) {
                if (OnSuccess) {
                    OnSuccess(type, fs, bytesGranted);
                }
            }, OnError);
        }

        if (navigator && navigator.webkitPersistentStorage) {
            if (type == PERSISTENT) {
                navigator.webkitPersistentStorage.requestQuota(bytes, CreateFileSystem, OnError);
            }
            else {
                navigator.webkitTemporaryStorage.requestQuota(bytes, CreateFileSystem, OnError);
            }
        }
        else if (window.webkitStorageInfo) {
            window.webkitStorageInfo.requestQuota(type, bytes, CreateFileSystem, OnError);
        }
        else {
            OnFsError("Request Storage, no request API available");
        }
    }

    const CreateStorageObject = function(type, fs, bytes) {
        let FileSystem = fs;
        FileSystem.Index = null;
        FileSystem.IsIndexing = function() { return true; };
        FileSystem.StorageType = type;
        FileSystem.StorageSize = bytes;

        FileSystem.FindIndexObjectByPath = function(path) {
            if (path == "" || path == "/") {
                return FileSystem.Index;
            }
            let explodedPath = path.split('/');
            let iter = FileSystem.Index;

            if (explodedPath[0] == "" || explodedPath[0] == "/") {
                explodedPath.shift();
            }

            for (let i = 0; i < explodedPath.length; ++i) {
                let found = false;
                for (let j = 0; j < iter.children.length; ++j) {
                    if (iter.children[j].name == explodedPath[i]) {
                        iter = iter.children[j];
                        found = true;
                        break;
                    }
                }
                if (!found) {
                    iter = null;
                    break;
                }
            }

            return iter;
        }

        FileSystem.Format = function(callback) {
            FileSystem.Index.children = []; // Abandon FS

            let dirReader = FileSystem.Index.jsDirectoryEntry.createReader();
            let rootContent = [];
            let processed = 0;

            const ReadEntries = function(callback) {
                dirReader.readEntries(
                    function(results) {
                        // If no more results are returned, we're done.
                        if (!results.length) {
                            for (let i = 0; i < rootContent.length; ++i) {
                                if (!rootContent[i].isFile) {
                                    rootContent[i].removeRecursively(
                                        function() {
                                            processed += 1;
                                            if (processed == rootContent.length) {
                                                callback("/", null, true);
                                            }
                                        },
                                        function(e) {
                                            processed += 1;
                                            if (callback) {
                                                callback("/", null, false);
                                            }
                                        }
                                    );
                                }
                                else {
                                    rootContent[i].remove(
                                        function() {
                                            processed += 1;
                                            if (processed == rootContent.length) {
                                                callback("/", null, true);
                                            }
                                        },
                                        function(e) {
                                            processed += 1;
                                            if (callback) {
                                                callback("/", null, false);
                                            }
                                        }
                                    );
                                }
                            }
                        } else {
                            for (let i = 0; i < results.length; ++i) {
                                rootContent.push(results[i]);
                            }
                            ReadEntries(callback);
                        }
                    },
                    function(e) {
                        if (callback) {
                            callback("/", null, false);
                        }
                    }
                );
            };

            ReadEntries(callback);
        }

        FileSystem.MkDir = function(path, callback) {
            let explodedPath = path.split('/');
            let directoryName = explodedPath.pop();
            let parentDir = explodedPath.join('/');

            FileSystem.root.getDirectory(parentDir, {}, function(dirEnt){
                FileSystem.root.getDirectory(path, {create:true, exclusive: true}, function(de){
                    let new_obj = {};

                    new_obj.isFile = false;
                    new_obj.isDirectory = true;

                    new_obj.path = de.fullPath;
                    new_obj.name = de.name;

                    new_obj.parent = FileSystem.FindIndexObjectByPath(parentDir);;
                    new_obj.children = [];

                    new_obj.jsDirectoryEntry = de;
                    new_obj.jsFileEntry = null;

                    new_obj.parent.children.push(new_obj);

                    if (callback != null) {
                        callback(path, de, true);
                    }
                }, function(e) {
                    OnFsError(e);
                    if (callback != null) {
                        callback(path, null, false);
                    }
                });
            }, function(e) {
                OnFsError(e);
                if (callback != null) {
                    callback(path, null, false);
                }
            });
        }

        FileSystem.MkFile = function(path, callback) {
            let explodedPath = path.split('/');
            let fileName = explodedPath.pop();
            let parentDir = explodedPath.join('/');

            FileSystem.root.getDirectory(parentDir, {}, function(dirEnt){
                FileSystem.root.getFile(path, {create:true, exclusive: true}, function(de) {
                    let new_obj = {};

                    new_obj.isFile = true;
                    new_obj.isDirectory = false;

                    new_obj.path = de.fullPath;
                    new_obj.name = de.name;

                    new_obj.parent = FileSystem.FindIndexObjectByPath(parentDir);
                    new_obj.children = null;

                    new_obj.jsDirectoryEntry = null;
                    new_obj.jsFileEntry = de;

                    new_obj.parent.children.push(new_obj);

                    if (callback != null) {
                        callback(path, de, true);
                    }
                }, function(e) {
                    OnFsError(e);
                    if (callback != null) {
                        callback(path, null, false);
                    }
                });
            }, function(e) {
                OnFsError(e);
                if (callback != null) {
                    callback(path, null, false);
                }
            });
        }

        FileSystem.RmDir = function(path, callback) {
            FileSystem.root.getDirectory(path, {}, function(dirEntry) {
                dirEntry.removeRecursively(function(){
                    let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);
                    if (RemoveIndexObject.parent != null) {
                        for (let i = 0; i < RemoveIndexObject.parent.children.length; ++i) {
                            if (RemoveIndexObject.parent.children[i].path == path) {
                                RemoveIndexObject.parent.children.splice(i, 1);
                                break;
                            }
                        }
                    }
                    if (callback != null) {
                        callback(path, null, true);
                    }
                },
                function(e) {
                    OnFsError(e);
                    if (callback != null) {
                        callback(path, null, false);
                    }
                });
            }, function(e) {
                OnFsError(e);
                if (callback != null) {
                    callback(path, null, false);
                }
            });
        }

        FileSystem.RmFile = function(path, callback) {
            FileSystem.root.getFile(path, {}, function(fileEntry) {
                fileEntry.remove(function() {
                    let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);
                    if (RemoveIndexObject.parent != null) {
                        for (let i = 0; i < RemoveIndexObject.parent.children.length; ++i) {
                            if (RemoveIndexObject.parent.children[i].path == path) {
                                RemoveIndexObject.parent.children.splice(i, 1);
                                break;
                            }
                        }
                    }
                    if (callback != null) {
                        callback(path, null, true);
                    }
                }, function(e) {
                    OnFsError(e);
                    if (callback != null) {
                        callback(path, null, false);
                    }
                });
            }, function(e) {
                OnFsError(e);
                if (callback != null) {
                    callback(path, null, false);
                }
            });
        }

        FileSystem.Touch = FileSystem.MkFile;

        FileSystem.Rm = function(path, callback) {
            let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);

            if (RemoveIndexObject == null) {
                FileSystem.RmDir(path, function(rmPath, rmObject, rmResult) {
                    if (rmResult == false) {
                        FileSystem.RmFile(path, function(fPath, fObject, fResult) {
                            if (fResult == false) {
                                if (callback != null) {
                                    callback(path, null, false);
                                }
                            }
                            else {
                                if (callback != null) {
                                    callback(path, null, true);
                                }
                            }
                        });
                    }
                    else {
                        if (callback != null) {
                            callback(path, null, true);
                        }
                    }
                });
            }
            else {
                if (RemoveIndexObject.isFile) {
                    FileSystem.RmFile(path, function(fPath, fObject, fResult) {
                        if (fResult == false) {
                            if (callback != null) {
                                callback(path, null, false);
                            }
                        }
                        else {
                            if (callback != null) {
                                callback(path, null, true);
                            }
                        }
                    });
                }
                else {
                    FileSystem.RmDir(path, function(fPath, fObject, fResult) {
                        if (fResult == false) {
                            if (callback != null) {
                                callback(path, null, false);
                            }
                        }
                        else {
                            if (callback != null) {
                                callback(path, null, true);
                            }
                        }
                    });
                }
            }
        }

        FileSystem.IndexFilesystem = function(callback) {
            let index = {
                isFile: false,
                jsFileEntry: null,

                isDirectory: true,
                jsDirectoryEntry: FileSystem.root,

                path: "/",
                name: "",

                parent: null,
                children: [],
            };

            let callbackCount = 0;

            let readEntries = function(indexObject, recursive_index) {
                callbackCount += 1;
                let dirReader = indexObject.jsDirectoryEntry.createReader();
                let _readEntries = function(indexObject, recursive_index) {
                    dirReader.readEntries(function(results) {
                        if (!results.length) { // If no more results are returned, we're done.
                            callbackCount -= 1;

                            if (callbackCount == 0) {
                                if (callback != null) {
                                    callback("::FileSystem.Index", index, true);
                                }
                            }
                        } else { // Add results to list & recurse

                            // Loop trough result and make a new entry for each
                            for (let i = 0; i < results.length; ++i) {
                                let new_obj = {};

                                new_obj.isFile = results[i].isFile;
                                new_obj.isDirectory = results[i].isDirectory;

                                new_obj.path = results[i].fullPath;
                                new_obj.name = results[i].name;

                                new_obj.parent = indexObject;
                                new_obj.children = null;

                                new_obj.jsDirectoryEntry = null;
                                new_obj.jsFileEntry = results[i];
                                if (new_obj.isDirectory) {
                                    new_obj.jsDirectoryEntry = results[i];
                                    new_obj.jsFileEntry = null;
                                    new_obj.children = [];
                                }

                                if (indexObject.children == null) {
                                    console.warn("index object children is null: " + indexObject.path + ", " + indexObject.name);
                                }

                                if (new_obj.parent == null) {
                                    indexObject.children.push(new_obj);
                                }
                                else {
                                    new_obj.parent.children.push(new_obj);
                                }
                                if (new_obj.isDirectory) {
                                    recursive_index(new_obj);
                                }
                            }

                            _readEntries(indexObject, recursive_index);
                        }

                    },
                    function(e) {
                        callbackCount -= 1;
                        OnFsError(e);
                        if (callback != null) {
                            callback("::FileSystem.Index", null, false);
                        }
                    });
                }
                _readEntries(indexObject, recursive_index);
            };

            let recursive_index = function(indexObject) {
                if (indexObject.isDirectory) {
                    readEntries(indexObject, recursive_index);
                }
            }

            recursive_index(index);
            FileSystem.Index = index;
            FileSystem.IsIndexing = function() {
                if (callbackCount < 0) {
                    OnFsError("Negative callback count");
                }
                return callbackCount == 0;
            };


        }

        return FileSystem;
    }

    if (InitFsType == PERSISTENT) {
        RequestStorage(PERSISTENT, InitFsSize,
            function(type, fs, size) {
                console.log("Persistent storage created (" + size + " bytes).");
                let FileSystem = CreateStorageObject(type, fs, size);

                FileSystem.IndexFilesystem(function(path, obj, stat) {
                    result.fs = FileSystem;
                    result.ready = true;
                    if (InitFsOnSuccess) {
                        InitFsOnSuccess(FileSystem);
                    }
                });
            },
            function(e) {
                console.error("Could not create persistent file system (" + InitFsSize + " bytes). Falling back to temp.");
                RequestStorage(TEMPORARY, InitFsSize,
                    function(type, fs, size) {
                        console.log("Temporary (fallback) storage created (" + size + " bytes).");
                        let FileSystem = CreateStorageObject(type, fs, size);

                        FileSystem.IndexFilesystem(function(path, obj, stat) {
                            result.fs = FileSystem;
                            result.ready = true;
                            if (InitFsOnSuccess) {
                                InitFsOnSuccess(FileSystem);
                            }
                        });
                    },
                OnFsError);
            }
        );
    }
    else {
        RequestStorage(TEMPORARY, InitFsSize,
            function(type, fs, size) {
                console.log("Temporary storage created (" + size + " bytes).");
                let FileSystem = CreateStorageObject(type, fs, size);

                FileSystem.IndexFilesystem(function(path, obj, stat) {
                    result.fs = FileSystem;
                    result.ready = true;
                    if (InitFsOnSuccess) {
                        InitFsOnSuccess(FileSystem);
                    }
                });
            },
        OnFsError);
    }

    return result;
}

function init() {
    let requestedSize = 1024 * 1024 * 20; // 20 MiB

    InitFileSystem(PERSISTENT, requestedSize,
        function (FileSystem) {
            UpdateMetaData(FileSystem, "Disk size: " + Math.floor(FileSystem.StorageSize / 1024 / 1024) + " MiB");
            SynchronizeFileList(FileSystem);
        },
        function(Error) {
            console.error(Error);
        }
    );
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta charset="utf-8">
	<title>WebFS Sample</title>
	<meta name="description" content="WebFS Sample">
	<script type="text/javascript" src="WebFS.js"></script>
	<script type="text/javascript" src="UI.js"></script>
	<link rel="stylesheet" href="WebFS.css" />

	<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAvW8cAP///wCjoJ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREQAAAAAiIiIiAAAAACIiIiIAAAAAIiIiIgAAAAAiIiIiAAAAACIiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAMzMzAAAAAAAzMAMAAAAAADMwAwAAAAAAMzADAAAAAAAAAAAAAAAAAAAAAAAAD//wAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADABwAAwA8AAP//AAD//wAA" rel="icon" type="image/x-icon" />
	</head>
	<body onload="init();">
	<div id="container">
	<div id="modal">
	<div id="textwindow">
	<div id="text-title">Window Title</div>
	<div id="text-body"><input type="text" id="text-input"></div>
	<div id="text-footer">
	<input class="modal-button" type="button" id="text-submit" value="Submit">
	<input class="modal-button" type="button" id="text-cancel" value="Cancel">
	</div>
	</div>
	</div>
	<div id="files">
	<div id="actions">
	<a href="#" onclick="return false;" id="size">Disk size: 20 MiB</a>
	</div>
	<div id="directories">
	<!--li class="folder">
	<div class="folder-header">
	<a href="#" class="folder-name">(root)</a> <a href="#" class="newfile" onclick="CreateNewFile();return false;">[f]</a> <a href="#" class="newfolder">[d]</a> <a href="#" class="del">[-]</a>
	</div>
	<ul class="content">
	<li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>
	<li class="file"><a href="#" class="file-name">test2.txt</a><a href="#" class="file-remove">[-]</a></li>
	<li class="file"><a href="#" class="file-name">test3.txt</a><a href="#" class="file-remove">[-]</a></li>
	</ul>
	</li-->
	</div>
	</div>
	<div id="content">
	<div>The dom display sucks. Elements are there but get cut off :(</div>
	</div>
	</div>
	</body>
	</html>
	function UpdateMetaData(WebFS, info) {
	let infoDiv = document.getElementById('size');
	//let location = window.location.href;

	let location = (new URL(window.location.href));
	let target = "filesystem:" + location.protocol;
	if (target.endsWith(":")) {
	target += "//";
	}
	else {
	target += "://";
	}

	var matches = window.location.href.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]\|$)/i);
	var domain = matches && matches[1];
	if (domain != null) {
	target += domain;
	}
	target += "/";

	if (WebFS.StorageType == PERSISTENT) {
	target += "persistent/"
	}
	else {
	target += "temporary/"
	}

	infoDiv.innerHTML = info;
	infoDiv.href = target;
	}

	function ShowTextModal(modalTitle, submitCallbck, cancelCallback) {
	const modalDiv = document.getElementById('modal');

	let textInput = document.getElementById('text-input');
	textInput.value = "";

	let submitButton = document.getElementById('text-submit');
	let cancelButton = document.getElementById('text-cancel');

	let titleText = document.getElementById('text-title');
	titleText.innerHTML = modalTitle;

	if (!submitButton.hasOwnProperty('UI_Callbacks')) {
	submitButton.UI_Callbacks = [];
	}

	if (!cancelButton.hasOwnProperty('UI_Callbacks')) {
	cancelButton.UI_Callbacks = [];
	}

	let OnSubmit = function() {
	if (submitCallbck != null) {
	submitCallbck(textInput.value);
	}
	}

	let OnCancel = function() {
	if (cancelCallback != null) {
	cancelCallback();
	}
	}

	submitButton.UI_Callbacks.push(OnSubmit);
	cancelButton.UI_Callbacks.push(OnCancel);

	submitButton.addEventListener('click', OnSubmit, false);
	cancelButton.addEventListener('click', OnCancel, false);

	modalDiv.style.display = "block";
	}

	function HideTextModal() {
	const modalDiv = document.getElementById('modal');
	modalDiv.style.display = "none";

	let submitButton = document.getElementById('text-submit');
	let cancelButton = document.getElementById('text-cancel');

	if (submitButton.hasOwnProperty('UI_Callbacks')) {
	while (submitButton.UI_Callbacks.length > 0) {
	let callback = submitButton.UI_Callbacks.pop();
	submitButton.removeEventListener('click', callback, false);
	}
	}
	submitButton.UI_Callbacks = [];

	if (cancelButton.hasOwnProperty('UI_Callbacks')) {
	while (cancelButton.UI_Callbacks.length > 0) {
	let callback = cancelButton.UI_Callbacks.pop();
	cancelButton.removeEventListener('click', callback, false);
	}
	}
	cancelButton.UI_Callbacks = [];
	}

	function SynchronizeFileList(WebFS) {
	{ // Clear existing DOM
	let directories = document.getElementById("directories");
	let child = directories.lastElementChild;
	while (child) {
	directories.removeChild(child);
	child = directories.lastElementChild;
	}
	}

	let obj_map = {};
	let to_process = [];

	let index = WebFS.Index;
	let iter = index;

	while (iter != null) {
	// Create HTML element for current iterator
	let htmlElement = null;
	if(iter.isFile) {
	// <li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>

	let li = document.createElement("div");
	li.classList.add('file');

	let a_name = document.createElement("a");
	a_name.classList.add('file-name');
	a_name.innerHTML = iter.name;

	let indent = -1;
	let _i = iter;
	do {
	indent += 1;
	_i = _i.parent;
	} while (_i != null);
	a_name.style.paddingLeft = "" + (12 * indent) + "px";

	let max_width = 300 - (12 * indent) - 30 - 5;
	a_name.style.maxWidth = "" + max_width + "px";

	let a_del = document.createElement("a");
	a_del.classList.add('file-remove');
	a_del.innerHTML = "[-]";

	let remove_me = iter;
	a_del.addEventListener('click', function() {
	WebFS.Rm(remove_me.path, function(_path, _object, _success) {
	SynchronizeFileList(WebFS);
	});
	}, false);

	li.appendChild(a_name);
	li.appendChild(a_del);

	obj_map[iter.path] = li;
	htmlElement = li;
	}
	else {
	/*<li class="folder">
	<div class="folder-header">
	<a href="#" class="folder-name">(root)</a> <a href="#" class="newfile">[f]</a> <a href="#" class="newfolder">[d]</a> <a href="#" class="del">[-]</a>
	</div>
	<ul class="content">
	<li class="file"><a href="#" class="file-name">test1.txt</a><a href="#" class="file-remove">[-]</a></li>
	<li class="file"><a href="#" class="file-name">test2.txt</a><a href="#" class="file-remove">[-]</a></li>
	<li class="file"><a href="#" class="file-name">test3.txt</a><a href="#" class="file-remove">[-]</a></li>
	</ul>
	</li>*/

	let li = document.createElement("div");
	li.classList.add('folder');

	let div = document.createElement("div");
	div.classList.add('folder-header');

	let a_name = document.createElement("a");
	a_name.classList.add('folder-name');

	if (iter.parent == null) {
	a_name.innerHTML = "(root)";
	}
	else {
	a_name.innerHTML = iter.name;
	}

	let indent = -1;
	let _i = iter;
	do {
	indent += 1;
	_i = _i.parent;
	} while (_i != null);
	a_name.style.paddingLeft = "" + (12 * indent) + "px";

	let max_width = 300 - (12 * indent) - 30 - 5;
	a_name.style.maxWidth = "" + max_width + "px";

	let a_file = document.createElement("a");
	a_file.classList.add('newfile');
	a_file.innerHTML = '[f]';

	let filePath = "" + iter.path;
	if (!filePath.endsWith("/")) {
	filePath += "/";
	}

	a_file.addEventListener('click', function() {
	ShowTextModal("Create new file", function(fileName) {
	filePath += fileName;

	WebFS.Touch(filePath, function(_path, _object, _success) {
	SynchronizeFileList(WebFS);
	HideTextModal();
	});
	}, function() {
	HideTextModal();
	});
	}, false);


	let a_dir = document.createElement("a");
	a_dir.classList.add('newfolder');
	a_dir.innerHTML = '[d]';

	filePath = "" + iter.path;
	if (!filePath.endsWith("/")) {
	filePath += "/";
	}

	a_dir.addEventListener('click', function() {
	ShowTextModal("Create new directory", function(fileName) {
	filePath += fileName;

	WebFS.MkDir(filePath, function(_path, _object, _success) {
	SynchronizeFileList(WebFS);
	HideTextModal();
	});
	}, function() {
	HideTextModal();
	});
	}, false);

	let a_del = document.createElement("a");
	a_del.classList.add('del');
	a_del.innerHTML = '[-]';

	let remove_me = iter;
	a_del.addEventListener('click', function() {
	if (remove_me.parent == null) {
	WebFS.Format(function(_path, _object, _success) {
	SynchronizeFileList(WebFS);
	});
	}
	else {
	WebFS.Rm(remove_me.path, function(_path, _object, _success) {
	SynchronizeFileList(WebFS);
	});
	}
	}, false);

	div.appendChild(a_name);
	div.appendChild(a_file);
	div.appendChild(a_dir);
	div.appendChild(a_del);

	let ul = document.createElement("div");
	ul.classList.add('content');

	li.appendChild(div);
	li.appendChild(ul);

	obj_map[iter.path] = ul;
	htmlElement = li;
	}

	// Append HTML element to parent
	let appendTo = document.getElementById('directories');
	if (iter.parent != null) {
	appendTo = obj_map[iter.parent.path];
	}
	appendTo.appendChild(htmlElement);

	// Record all children to be processed
	if (iter.children != null) {
	for (let i = 0; i < iter.children.length; ++i) {
	to_process.push(iter.children[i]);
	}
	}

	// Move on to next iteration
	iter = null;
	if (to_process.length > 0) {
	iter = to_process.pop();
	}
	}
	}

	function UI_TestModal() {
	ShowTextModal("What's your name?",
	function(string) {
	console.log("on submit: " + string);
	HideTextModal();
	},
	function() {
	console.log("on cacnel");
	HideTextModal();
	}
	);
	}
	* {
	border: 0px;
	padding: 0px;
	margin: 0px;
	color: rgb(220, 220, 220);
	text-decoration: none;
	font-size: 14px;
	font-family: monospace;
	}

	html, body {
	min-height: 100% !important;
	min-width: 100% !important;
	height: 100%;
	width: 100%;

	background-color: rgb(0, 0, 0);
	color: rgb(220, 220, 220);
	}

	#modal {
	display: none;
	position:fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(20, 20, 20, 0.8);
	}

	#textwindow {
	position:relative;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -100px;
	width: 400px;
	overflow: hidden;
	height: 200px;
	background-color: rgb(60, 60, 60);
	}

	#text-input {
	position: relative;
	top: 20px;
	left: 50%;
	width: 300px;
	height: 40px;
	margin-left: -150px;
	background-color: rgb(40, 40, 40);
	border-color: black;
	}

	#text-title {
	width: 100%;
	height: 40px;
	padding-left: 10px;
	padding-top: 10px;
	font-size: 24px;
	background-color: rgb(40, 40, 40);
	}

	#text-body {
	width: 100%;
	height: 80px;
	background-color: rgb(60, 60, 60);
	}

	#text-footer {
	width: 90%;
	height: 80px;
	background-color: rgb(60, 60, 60);
	}

	.modal-button {
	width: 100px;
	height: 30px;
	background-color: rgb(50, 50, 50);
	border-color: black;
	border-width: 1px;
	float: right;
	margin: 10px;
	}

	#container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(60, 60, 60);
	}

	#files {
	max-width: 300px;
	min-width: 300px;
	width: 300px;
	height: 100%;
	background-color: rgb(40, 40, 40);
	}

	.folder {
	width: 100%;
	}

	.folder-header {
	float: left;
	width: 100%;
	height: 22px;
	}

	.folder-collapse {
	display: block;
	float: left;
	margin-right: 10px;

	width: 22px;
	height: 22px;
	}

	.del,
	.newfolder,
	.newfile {
	display: block;
	float: right;
	margin-left: 5px;

	width: 25px;
	height: 22px;
	}

	.newfile {
	margin-right: 5px;
	}

	.content {
	width: 100%;
	height: 100%;
	}

	.file {
	float: left;
	height: 22px;
	width: 100%;
	}

	.file-name,
	.folder-name {
	display: block;
	float: left;
	height: 22px;
	width: auto;
	overflow: hidden;
	white-space: nowrap;
	}

	.file-remove {
	display: block;
	float: right;

	height: 22px;
	width: 25px;
	text-indent: 0px;
	margin-right: 5px;
	}

	#directories {
	height: 100%;
	display: block;
	width: 100%;
	}

	#actions {
	padding: 5px;
	margin-bottom: 10px;
	height: 20px;

	font-family: monospace;

	background-color: rgb(30, 30, 30);
	}
	// https://jenkov.com/tutorials/html5/file-api.html
	// https://docs.pega.com/sites/default/files/mobileclient/7312/api/client_api/container_example_file_api.html

	window.requestFileSystem = window.requestFileSystem \|\| window.webkitRequestFileSystem;
	window.directoryEntry = window.directoryEntry \|\| window.webkitDirectoryEntry;

	// OnSuccess(FileSystem, SizeInBytes)
	// OnError(ErrorString);
	function InitFileSystem(InitFsType, InitFsSize, InitFsOnSuccess, InitFsOnFailure) {
	let result = {};
	result.ready = false;
	result.fs = null;

	const OnFsError = function(e) {
	let errorString = "File System Error: " + e.name + "\n\t" + e;
	console.error(errorString);
	alert(errorString);
	if (InitFsOnFailure) {
	InitFsOnFailure(errorString);
	}
	}

	const RequestStorage = function(type, bytes, OnSuccess, OnError) {
	const CreateFileSystem = function(bytesGranted) {
	const RequestFileSystem = window.requestFileSystem \|\| window.webkitRequestFileSystem;
	RequestFileSystem(type, bytesGranted, function(fs) {
	if (OnSuccess) {
	OnSuccess(type, fs, bytesGranted);
	}
	}, OnError);
	}

	if (navigator && navigator.webkitPersistentStorage) {
	if (type == PERSISTENT) {
	navigator.webkitPersistentStorage.requestQuota(bytes, CreateFileSystem, OnError);
	}
	else {
	navigator.webkitTemporaryStorage.requestQuota(bytes, CreateFileSystem, OnError);
	}
	}
	else if (window.webkitStorageInfo) {
	window.webkitStorageInfo.requestQuota(type, bytes, CreateFileSystem, OnError);
	}
	else {
	OnFsError("Request Storage, no request API available");
	}
	}

	const CreateStorageObject = function(type, fs, bytes) {
	let FileSystem = fs;
	FileSystem.Index = null;
	FileSystem.IsIndexing = function() { return true; };
	FileSystem.StorageType = type;
	FileSystem.StorageSize = bytes;

	FileSystem.FindIndexObjectByPath = function(path) {
	if (path == "" \|\| path == "/") {
	return FileSystem.Index;
	}
	let explodedPath = path.split('/');
	let iter = FileSystem.Index;

	if (explodedPath[0] == "" \|\| explodedPath[0] == "/") {
	explodedPath.shift();
	}

	for (let i = 0; i < explodedPath.length; ++i) {
	let found = false;
	for (let j = 0; j < iter.children.length; ++j) {
	if (iter.children[j].name == explodedPath[i]) {
	iter = iter.children[j];
	found = true;
	break;
	}
	}
	if (!found) {
	iter = null;
	break;
	}
	}

	return iter;
	}

	FileSystem.Format = function(callback) {
	FileSystem.Index.children = []; // Abandon FS

	let dirReader = FileSystem.Index.jsDirectoryEntry.createReader();
	let rootContent = [];
	let processed = 0;

	const ReadEntries = function(callback) {
	dirReader.readEntries(
	function(results) {
	// If no more results are returned, we're done.
	if (!results.length) {
	for (let i = 0; i < rootContent.length; ++i) {
	if (!rootContent[i].isFile) {
	rootContent[i].removeRecursively(
	function() {
	processed += 1;
	if (processed == rootContent.length) {
	callback("/", null, true);
	}
	},
	function(e) {
	processed += 1;
	if (callback) {
	callback("/", null, false);
	}
	}
	);
	}
	else {
	rootContent[i].remove(
	function() {
	processed += 1;
	if (processed == rootContent.length) {
	callback("/", null, true);
	}
	},
	function(e) {
	processed += 1;
	if (callback) {
	callback("/", null, false);
	}
	}
	);
	}
	}
	} else {
	for (let i = 0; i < results.length; ++i) {
	rootContent.push(results[i]);
	}
	ReadEntries(callback);
	}
	},
	function(e) {
	if (callback) {
	callback("/", null, false);
	}
	}
	);
	};

	ReadEntries(callback);
	}

	FileSystem.MkDir = function(path, callback) {
	let explodedPath = path.split('/');
	let directoryName = explodedPath.pop();
	let parentDir = explodedPath.join('/');

	FileSystem.root.getDirectory(parentDir, {}, function(dirEnt){
	FileSystem.root.getDirectory(path, {create:true, exclusive: true}, function(de){
	let new_obj = {};

	new_obj.isFile = false;
	new_obj.isDirectory = true;

	new_obj.path = de.fullPath;
	new_obj.name = de.name;

	new_obj.parent = FileSystem.FindIndexObjectByPath(parentDir);;
	new_obj.children = [];

	new_obj.jsDirectoryEntry = de;
	new_obj.jsFileEntry = null;

	new_obj.parent.children.push(new_obj);

	if (callback != null) {
	callback(path, de, true);
	}
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}

	FileSystem.MkFile = function(path, callback) {
	let explodedPath = path.split('/');
	let fileName = explodedPath.pop();
	let parentDir = explodedPath.join('/');

	FileSystem.root.getDirectory(parentDir, {}, function(dirEnt){
	FileSystem.root.getFile(path, {create:true, exclusive: true}, function(de) {
	let new_obj = {};

	new_obj.isFile = true;
	new_obj.isDirectory = false;

	new_obj.path = de.fullPath;
	new_obj.name = de.name;

	new_obj.parent = FileSystem.FindIndexObjectByPath(parentDir);
	new_obj.children = null;

	new_obj.jsDirectoryEntry = null;
	new_obj.jsFileEntry = de;

	new_obj.parent.children.push(new_obj);

	if (callback != null) {
	callback(path, de, true);
	}
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}

	FileSystem.RmDir = function(path, callback) {
	FileSystem.root.getDirectory(path, {}, function(dirEntry) {
	dirEntry.removeRecursively(function(){
	let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);
	if (RemoveIndexObject.parent != null) {
	for (let i = 0; i < RemoveIndexObject.parent.children.length; ++i) {
	if (RemoveIndexObject.parent.children[i].path == path) {
	RemoveIndexObject.parent.children.splice(i, 1);
	break;
	}
	}
	}
	if (callback != null) {
	callback(path, null, true);
	}
	},
	function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}

	FileSystem.RmFile = function(path, callback) {
	FileSystem.root.getFile(path, {}, function(fileEntry) {
	fileEntry.remove(function() {
	let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);
	if (RemoveIndexObject.parent != null) {
	for (let i = 0; i < RemoveIndexObject.parent.children.length; ++i) {
	if (RemoveIndexObject.parent.children[i].path == path) {
	RemoveIndexObject.parent.children.splice(i, 1);
	break;
	}
	}
	}
	if (callback != null) {
	callback(path, null, true);
	}
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}, function(e) {
	OnFsError(e);
	if (callback != null) {
	callback(path, null, false);
	}
	});
	}

	FileSystem.Touch = FileSystem.MkFile;

	FileSystem.Rm = function(path, callback) {
	let RemoveIndexObject = FileSystem.FindIndexObjectByPath(path);

	if (RemoveIndexObject == null) {
	FileSystem.RmDir(path, function(rmPath, rmObject, rmResult) {
	if (rmResult == false) {
	FileSystem.RmFile(path, function(fPath, fObject, fResult) {
	if (fResult == false) {
	if (callback != null) {
	callback(path, null, false);
	}
	}
	else {
	if (callback != null) {
	callback(path, null, true);
	}
	}
	});
	}
	else {
	if (callback != null) {
	callback(path, null, true);
	}
	}
	});
	}
	else {
	if (RemoveIndexObject.isFile) {
	FileSystem.RmFile(path, function(fPath, fObject, fResult) {
	if (fResult == false) {
	if (callback != null) {
	callback(path, null, false);
	}
	}
	else {
	if (callback != null) {
	callback(path, null, true);
	}
	}
	});
	}
	else {
	FileSystem.RmDir(path, function(fPath, fObject, fResult) {
	if (fResult == false) {
	if (callback != null) {
	callback(path, null, false);
	}
	}
	else {
	if (callback != null) {
	callback(path, null, true);
	}
	}
	});
	}
	}
	}

	FileSystem.IndexFilesystem = function(callback) {
	let index = {
	isFile: false,
	jsFileEntry: null,

	isDirectory: true,
	jsDirectoryEntry: FileSystem.root,

	path: "/",
	name: "",

	parent: null,
	children: [],
	};

	let callbackCount = 0;

	let readEntries = function(indexObject, recursive_index) {
	callbackCount += 1;
	let dirReader = indexObject.jsDirectoryEntry.createReader();
	let _readEntries = function(indexObject, recursive_index) {
	dirReader.readEntries(function(results) {
	if (!results.length) { // If no more results are returned, we're done.
	callbackCount -= 1;

	if (callbackCount == 0) {
	if (callback != null) {
	callback("::FileSystem.Index", index, true);
	}
	}
	} else { // Add results to list & recurse

	// Loop trough result and make a new entry for each
	for (let i = 0; i < results.length; ++i) {
	let new_obj = {};

	new_obj.isFile = results[i].isFile;
	new_obj.isDirectory = results[i].isDirectory;

	new_obj.path = results[i].fullPath;
	new_obj.name = results[i].name;

	new_obj.parent = indexObject;
	new_obj.children = null;

	new_obj.jsDirectoryEntry = null;
	new_obj.jsFileEntry = results[i];
	if (new_obj.isDirectory) {
	new_obj.jsDirectoryEntry = results[i];
	new_obj.jsFileEntry = null;
	new_obj.children = [];
	}

	if (indexObject.children == null) {
	console.warn("index object children is null: " + indexObject.path + ", " + indexObject.name);
	}

	if (new_obj.parent == null) {
	indexObject.children.push(new_obj);
	}
	else {
	new_obj.parent.children.push(new_obj);
	}
	if (new_obj.isDirectory) {
	recursive_index(new_obj);
	}
	}

	_readEntries(indexObject, recursive_index);
	}

	},
	function(e) {
	callbackCount -= 1;
	OnFsError(e);
	if (callback != null) {
	callback("::FileSystem.Index", null, false);
	}
	});
	}
	_readEntries(indexObject, recursive_index);
	};

	let recursive_index = function(indexObject) {
	if (indexObject.isDirectory) {
	readEntries(indexObject, recursive_index);
	}
	}

	recursive_index(index);
	FileSystem.Index = index;
	FileSystem.IsIndexing = function() {
	if (callbackCount < 0) {
	OnFsError("Negative callback count");
	}
	return callbackCount == 0;
	};


	}

	return FileSystem;
	}

	if (InitFsType == PERSISTENT) {
	RequestStorage(PERSISTENT, InitFsSize,
	function(type, fs, size) {
	console.log("Persistent storage created (" + size + " bytes).");
	let FileSystem = CreateStorageObject(type, fs, size);

	FileSystem.IndexFilesystem(function(path, obj, stat) {
	result.fs = FileSystem;
	result.ready = true;
	if (InitFsOnSuccess) {
	InitFsOnSuccess(FileSystem);
	}
	});
	},
	function(e) {
	console.error("Could not create persistent file system (" + InitFsSize + " bytes). Falling back to temp.");
	RequestStorage(TEMPORARY, InitFsSize,
	function(type, fs, size) {
	console.log("Temporary (fallback) storage created (" + size + " bytes).");
	let FileSystem = CreateStorageObject(type, fs, size);

	FileSystem.IndexFilesystem(function(path, obj, stat) {
	result.fs = FileSystem;
	result.ready = true;
	if (InitFsOnSuccess) {
	InitFsOnSuccess(FileSystem);
	}
	});
	},
	OnFsError);
	}
	);
	}
	else {
	RequestStorage(TEMPORARY, InitFsSize,
	function(type, fs, size) {
	console.log("Temporary storage created (" + size + " bytes).");
	let FileSystem = CreateStorageObject(type, fs, size);

	FileSystem.IndexFilesystem(function(path, obj, stat) {
	result.fs = FileSystem;
	result.ready = true;
	if (InitFsOnSuccess) {
	InitFsOnSuccess(FileSystem);
	}
	});
	},
	OnFsError);
	}

	return result;
	}

	function init() {
	let requestedSize = 1024 * 1024 * 20; // 20 MiB

	InitFileSystem(PERSISTENT, requestedSize,
	function (FileSystem) {
	UpdateMetaData(FileSystem, "Disk size: " + Math.floor(FileSystem.StorageSize / 1024 / 1024) + " MiB");
	SynchronizeFileList(FileSystem);
	},
	function(Error) {
	console.error(Error);
	}
	);
	}