{
  "name": "File Manager",
  "icon": "\u{1F4C1}\uFE0E",
  "desc": "The GopalOS file manager. This application is usually included with GopalOS.",
  "id": "file-manager",
  "defaultRelease": "stable",
  "releases": {
    "stable": {
      "version": "v3.4.3",
      "app-files": {
        "file-manager": {
          type: "pgm",
          content() {
            if (document.getElementById("app_file-manager_window")) {
              document.getElementById("app_file-manager_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/file-manager/window"));
              getRef("/apps/file-manager/load")();
            }
            focusWin(document.getElementById("app_file-manager_window"));
            regTbarIcon("/apps/file-manager/file-manager", "app_file-manager_window", getRef("/apps/file-manager/icon"));
            refreshWindows();
          }
        },
        "icon": {
          type: "var",
          content: "\u{1F4C1}\uFE0E"
        },
        "load": {
          type: "js",
          content() {
            document.getElementById("app_file-manager_content").innerHTML = "";
            document.getElementById("app_file-manager_bar").value = getRef("/apps/file-manager/working-dir");
            for (let i of Object.keys(getRef(getRef("/apps/file-manager/working-dir"))).sort()) {
              if (getRef(getRef("/apps/file-manager/working-dir"))[i].type == "dir") {
                document.getElementById("app_file-manager_content").insertAdjacentHTML("beforeend", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/handler')(this.getElementsByTagName('span')[0].innerHTML);"><img src="${getIcon("dir")}" class="app_file-manager_item-icon"><span>${i}</span>/${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">Folder</span>" : ""}</div>`);
              }
              else {}
            }
            for (let i of Object.keys(getRef(getRef("/apps/file-manager/working-dir"))).sort()) {
              if (getRef(getRef("/apps/file-manager/working-dir"))[i].type == "dir") {}
              else {
                document.getElementById("app_file-manager_content").insertAdjacentHTML("beforeend", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/handler')(this.getElementsByTagName('span')[0].innerHTML);"><img src="${getIcon(getRef(getRef("/apps/file-manager/working-dir"))[i].type)}" class="app_file-manager_item-icon"><span>${i}.${getRef(getRef("/apps/file-manager/working-dir"))[i].type ? getRef(getRef("/apps/file-manager/working-dir"))[i].type : "file"}</span>${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">" + getType(getRef(getRef("/apps/file-manager/working-dir"))[i].type) + "</span>" : ""}</div>`);
              }
            }
            if (getRef("/apps/file-manager/working-dir") == "/") {}
            else {
              document.getElementById("app_file-manager_content").insertAdjacentHTML("afterbegin", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/parent-dir')();"><img src="${getIcon("parent-dir")}" class="app_file-manager_item-icon"><span>../</span>${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">Up one level</span>" : ""}</div>`);
            }
            document.getElementById("app_file-manager_listview").classList.remove("popup-menu-item-selected");
            document.getElementById("app_file-manager_detailsview").classList.remove("popup-menu-item-selected");
            document.getElementById("app_file-manager_tileview").classList.remove("popup-menu-item-selected");
            document.getElementById(`app_file-manager_${getRef("/apps/file-manager/view")}view`).classList.add("popup-menu-item-selected");
          }
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_file-manager_window" style="top: 100px; left: 100px;">
<div class="window-title">File Manager</div>
<div class="window-controls">
  <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
  <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
  <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
</div>
<div class="window-content">
  <input type="text" id="app_file-manager_bar" onblur="this.value = getRef('/apps/file-manager/working-dir');" value="/" readonly>
  <div id="app_file-manager_addfile" class="popup-btn" data-popup-id="app_file-manager_newfile">&#x00B7;&#x00B7;&#x00B7;</div>
  <div id="app_file-manager_newfile" class="popup-menu" data-popup-origin-id="app_file-manager_addfile" style="position: absolute; right: 39px; top: 35px;">
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/create-file')();">New File...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/create-folder')();">New Folder...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/load')();">Refresh</div>
    <hr>
    <div class="popup-menu-item popup-menu-item-selected" id="app_file-manager_listview" onclick="writeRef('/apps/file-manager/view', 'list'); document.getElementById('app_file-manager_detailsview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_tileview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">List view</div>
    <div class="popup-menu-item" id="app_file-manager_detailsview" onclick="writeRef('/apps/file-manager/view', 'details'); document.getElementById('app_file-manager_listview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_tileview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">Details view</div>
    <div class="popup-menu-item" id="app_file-manager_tileview" onclick="writeRef('/apps/file-manager/view', 'tile'); document.getElementById('app_file-manager_listview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_detailsview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">Tile view</div>
    <hr>
    <div class="popup-menu-item" onclick="getRef(prompt('Enter absolute path to program (e.g. /apps/settings/settings.pgm):'))();">Run program...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/settings/settings')();">Settings</div>
  </div>
  <div id="app_file-manager_reload" onclick="getRef('/apps/file-manager/load')();">&#x21BB;</div>
  <div id="app_file-manager_content"></div>
</div>
<style>
#app_file-manager_bar {
  width: calc(100% - 85px);
  height: 30px;
  border-radius: 0;
  padding: 5px;
  font: 15px "Consolas", monospace;
}
#app_file-manager_reload, #app_file-manager_addfile {
  background: #EEE;
  border: none;
  border-radius: 2px;
  font: 20px "Segoe UI", "Arial", sans-serif !important;
  line-height: 28px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
#app_file-manager_reload:hover, #app_file-manager_addfile:hover {
  background: #DDD;
}
#app_file-manager_reload:active, #app_file-manager_addfile:active {
  background: #CCC;
}
#app_file-manager_content {
  height: calc(100% - 44px);
  overflow: auto;
}
.app_file-manager_item {
  background: #FFF;
  color: #000;
  border-bottom: 1px solid #EEE;
  padding: 10px;
  font: 20px "Consolas", monospace;
  cursor: default;
}
.app_file-manager_item:hover {
  background: #EEE;
}
.app_file-manager_item:active {
  background: #CCC;
}
.app_file-manager_tile {
  display: inline-block;
  background: #FFF;
  color: #000;
  border: 1px solid #EEE;
  min-width: 100px;
  min-height: 100px;
  padding: 10px;
  margin: 10px;
  font: 20px "Consolas", monospace;
  text-align: center;
  cursor: default;
}
.app_file-manager_tile:hover {
  background: #EEE;
}
.app_file-manager_tile:active {
  background: #CCC;
}
.app_file-manager_details {
  font: 16px "Consolas", monospace;
  height: 25px;
  line-height: 25px;
}
.app_file-manager_details:hover {
  background: #EEE;
}
.app_file-manager_details:active {
  background: #CCC;
}
.app_file-manager_item-icon {
  width: 20px;
  height: 20px;
  transform: translate(0, 5px);
  margin-right: 10px;
}
.app_file-manager_tile .app_file-manager_item-icon {
  display: block;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  transform: translate(50%);
}
.app_file-manager_details .app_file-manager_item-icon {
  width: 16px;
  height: 16px;
  transform: translate(5px, 3px);
}
.dark-theme #app_file-manager_window .window-content {
  background: #333;
  color: #FFF;
}
.dark-theme #app_file-manager_reload, .dark-theme #app_file-manager_addfile {
  background: #555;
}
.dark-theme #app_file-manager_reload:hover, .dark-theme #app_file-manager_addfile:hover {
  background: #808080;
}
.dark-theme #app_file-manager_reload:active, .dark-theme #app_file-manager_addfile:active {
  background: #AAA;
}
.dark-theme .app_file-manager_item {
  background: #333;
  color: #FFF;
  border-bottom: 1px solid #808080;
}
.dark-theme .app_file-manager_item:hover {
  background: #444;
}
.dark-theme .app_file-manager_item:active {
  background: #808080;
}
.dark-theme .app_file-manager_tile {
  background: #333;
  color: #FFF;
  border: 1px solid #808080;
}
.dark-theme .app_file-manager_tile:hover {
  background: #444;
}
.dark-theme .app_file-manager_tile:active {
  background: #808080;
}
.dark-theme .app_file-manager_details:hover {
  background: #444;
}
.dark-theme .app_file-manager_details:active {
  background: #808080;
}
</style>
</div>`
        },
        "handler": {
          type: "js", 
          content(file, absolute = false) {
            /*console.group("Handled file");
            console.info(file, absolute);
            console.info(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`);
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true));
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type);
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "var");
            console.groupEnd();*/
            if (getRef("/apps/file-manager/working-dir") == "/") {
              if (getRef(`/${file.replace(/\//, "")}`, true) && getRef(`/${file.replace(/\//, "")}`, true).type == "dir") {
                writeRef("/apps/file-manager/working-dir", `${getRef("/apps/file-manager/working-dir")}${file.replace(/\//, "")}`);
                getRef("/apps/file-manager/load")();
              }
              else {}
            }
            else {}
            if (file == "/") {
              writeRef("/apps/file-manager/working-dir", "/");
              getRef("/apps/file-manager/load")();
            }
            else if (absolute == true && getRef(file, true) && getRef(file, true).type == "dir") {
              writeRef("/apps/file-manager/working-dir", file);
              getRef("/apps/file-manager/load")();
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "var") {
              msgbox(`Value:<br><br>${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "json") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(JSON.stringify(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`), null, 2))}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "txt") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre-wrap;">${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "css") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre-wrap;">${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "js") {
              msgbox(`JavaScript content:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`).toString())}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "html") {
              msgbox(`HTML code:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`).toString())}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "pgm") {
              getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)();
            }
            else if (getRef("/apps/file-manager/working-dir") != "/") {
              if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "dir") {
                writeRef("/apps/file-manager/working-dir", `${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`);
                getRef("/apps/file-manager/load")();
              }
              else {}
            }
            /*if (!getRef("/apps/file-manager/supported-filetypes").includes(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type) && getRef("/apps/file-manager/working-dir") != "/") {
              msgbox("<b>File type not supported</b><br>GopalOS cannot open this file.", "Error");
            }
            else {}*/
            document.getElementById("app_file-manager_bar").value = getRef("/apps/file-manager/working-dir");
          }
        },
        "parent-dir": {
          type: "js",
          content() {
            if (getRef("/apps/file-manager/working-dir").replace(/\/[^/]*$/, "") == "") {
              getRef("/apps/file-manager/handler")("/");
            }
            else {
              getRef("/apps/file-manager/handler")(getRef("/apps/file-manager/working-dir").replace(/\/[^/]*$/, ""), true);/*TODO*/
            }
          }
        },
        "working-dir": {
          type: "var",
          content: "/"
        },
        "supported-filetypes": {
          type: "var",
          content: [
            "pgm",
            "js",
            "json",
            "txt",
            "var"
          ]
        },
        "view": {
          type: "var",
          content: "list"
        },
        "create-file": {
          type: "js",
          content() {
            let name = prompt("Enter file name and extension separated by a period (e.g. my-text-file.txt):\n\nWARNING: Do not use spaces, periods, or slashes. To prevent critical system errors, please stick to letters, numbers, hyphens, and underscores. It is HIGHLY RECOMMENDED (but not required) that you use an all-lowercase name (however the extension MUST be lowercase).");
            if (!name || name.trim() == "") {}
            else if (["apps", "home", "system"].includes(name)) {msgbox("ERROR: Reserved name.", "File Manager");}
            else {
              let nameArr = name.split(".");
              createRef(`${getRef("/apps/file-manager/working-dir")}/${nameArr[0]}`, nameArr[1]);
              getRef("/apps/file-manager/load")();
            }
          }
        },
        "create-folder": {
          type: "js",
          content() {
            let name = prompt("Enter folder name:\n\nWARNING: Do not use spaces, periods, or slashes. To prevent critical system errors, please stick to letters, numbers, hyphens, and underscores. It is HIGHLY RECOMMENDED (but not required) that you use an all-lowercase name.");
            if (!name || name.trim() == "") {}
            else if (["apps", "home", "system"].includes(name)) {msgbox("ERROR: Reserved name.", "File Manager");}
            else {
              createRef(`${getRef("/apps/file-manager/working-dir")}/${name}`, "dir");
              getRef("/apps/file-manager/load")();
            }
          }
        }
      }
    },
    "beta": {
      "version": "v4.0.0-beta.6",
      "app-files": {
        "file-manager": {
          type: "pgm",
          content() {
            if (document.getElementById("app_file-manager_window")) {
              document.getElementById("app_file-manager_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/file-manager/window"));
              getRef("/apps/file-manager/load")();
            }
            focusWin(document.getElementById("app_file-manager_window"));
            regTbarIcon("/apps/file-manager/file-manager", "app_file-manager_window", getRef("/apps/file-manager/icon"));
            refreshWindows();
          }
        },
        "icon": {
          type: "var",
          content: "\u{1F4C1}\uFE0E"
        },
        "load": {
          type: "js",
          content() {
            document.getElementById("app_file-manager_content").innerHTML = "";
            document.getElementById("app_file-manager_bar").value = getRef("/apps/file-manager/working-dir");
            for (let i of Object.keys(getRef(getRef("/apps/file-manager/working-dir"))).sort()) {
              if (getRef(getRef("/apps/file-manager/working-dir"))[i].type == "dir") {
                document.getElementById("app_file-manager_content").insertAdjacentHTML("beforeend", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/handler')(this.getElementsByTagName('span')[0].innerHTML);"><img src="${getIcon("dir")}" class="app_file-manager_item-icon"><span>${i}</span>/${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">Folder</span>" : ""}</div>`);
              }
              else {}
            }
            for (let i of Object.keys(getRef(getRef("/apps/file-manager/working-dir"))).sort()) {
              if (getRef(getRef("/apps/file-manager/working-dir"))[i].type == "dir") {}
              else {
                document.getElementById("app_file-manager_content").insertAdjacentHTML("beforeend", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/handler')(this.getElementsByTagName('span')[0].innerHTML);"><img src="${getIcon(getRef(getRef("/apps/file-manager/working-dir"))[i].type)}" class="app_file-manager_item-icon"><span>${i}.${getRef(getRef("/apps/file-manager/working-dir"))[i].type ? getRef(getRef("/apps/file-manager/working-dir"))[i].type : "file"}</span>${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">" + getType(getRef(getRef("/apps/file-manager/working-dir"))[i].type) + "</span>" : ""}</div>`);
              }
            }
            if (getRef("/apps/file-manager/working-dir") == "/") {}
            else {
              document.getElementById("app_file-manager_content").insertAdjacentHTML("afterbegin", `<div class="${getRef("/apps/file-manager/view") == "list" ? "app_file-manager_item" : `app_file-manager_${getRef("/apps/file-manager/view")}`}" onclick="getRef('/apps/file-manager/parent-dir')();"><img src="${getIcon("parent-dir")}" class="app_file-manager_item-icon"><span>../</span>${getRef("/apps/file-manager/view") == "details" ? "<span style=\"float: right; color: #AAA; margin-right: 5px; \">Up one level</span>" : ""}</div>`);
            }
            document.getElementById("app_file-manager_listview").classList.remove("popup-menu-item-selected");
            document.getElementById("app_file-manager_detailsview").classList.remove("popup-menu-item-selected");
            document.getElementById("app_file-manager_tileview").classList.remove("popup-menu-item-selected");
            document.getElementById(`app_file-manager_${getRef("/apps/file-manager/view")}view`).classList.add("popup-menu-item-selected");
          }
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_file-manager_window" style="top: 100px; left: 100px;">
<div class="window-title">File Manager</div>
<div class="window-controls">
  <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
  <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
  <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
</div>
<div class="window-content">
  <input type="text" id="app_file-manager_bar" onblur="this.value = getRef('/apps/file-manager/working-dir');" value="/" readonly>
  <div id="app_file-manager_addfile" class="popup-btn" data-popup-id="app_file-manager_newfile">&#x00B7;&#x00B7;&#x00B7;</div>
  <div id="app_file-manager_newfile" class="popup-menu" data-popup-origin-id="app_file-manager_addfile" style="position: absolute; right: 39px; top: 35px;">
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/create-file')();">New File...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/create-folder')();">New Folder...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/file-manager/load')();">Refresh</div>
    <hr>
    <div class="popup-menu-item popup-menu-item-selected" id="app_file-manager_listview" onclick="writeRef('/apps/file-manager/view', 'list'); document.getElementById('app_file-manager_detailsview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_tileview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">List view</div>
    <div class="popup-menu-item" id="app_file-manager_detailsview" onclick="writeRef('/apps/file-manager/view', 'details'); document.getElementById('app_file-manager_listview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_tileview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">Details view</div>
    <div class="popup-menu-item" id="app_file-manager_tileview" onclick="writeRef('/apps/file-manager/view', 'tile'); document.getElementById('app_file-manager_listview').classList.remove('popup-menu-item-selected'); document.getElementById('app_file-manager_detailsview').classList.remove('popup-menu-item-selected'); this.classList.add('popup-menu-item-selected'); getRef('/apps/file-manager/load')();">Tile view</div>
    <hr>
    <div class="popup-menu-item" onclick="getRef(prompt('Enter absolute path to program (e.g. /apps/settings/settings.pgm):'))();">Run program...</div>
    <div class="popup-menu-item" onclick="getRef('/apps/settings/settings')();">Settings</div>
  </div>
  <div id="app_file-manager_reload" onclick="getRef('/apps/file-manager/load')();">&#x21BB;</div>
  <div id="app_file-manager_sidebar">
    <div class="app_file-manager_sidebar-heading">Personal Files</div>
    <div onclick="writeRef('/apps/file-manager/working-dir', '/home/documents'); getRef('/apps/file-manager/load')();">&#x1F5CE;&nbsp;Documents</div>
    <div onclick="writeRef('/apps/file-manager/working-dir', '/home/pictures'); getRef('/apps/file-manager/load')();">&#x1F5CE;&nbsp;Pictures</div>
    <div class="app_file-manager_sidebar-heading">System & App Files</div>
    <div onclick="writeRef('/apps/file-manager/working-dir', '/system'); getRef('/apps/file-manager/load')();">&#x1F5CE;&nbsp;System Dir</div>
    <div onclick="writeRef('/apps/file-manager/working-dir', '/home/appdata'); getRef('/apps/file-manager/load')();">&#x1F5CE;&nbsp;App Data</div>
  </div>
  <div id="app_file-manager_content"></div>
</div>
<style>
#app_file-manager_bar {
  width: calc(100% - 85px);
  height: 30px;
  border-radius: 0;
  padding: 5px;
  font: 15px "Consolas", monospace;
}
#app_file-manager_reload, #app_file-manager_addfile {
  background: #EEE;
  border: none;
  border-radius: 2px;
  font: 20px "Segoe UI", "Arial", sans-serif !important;
  line-height: 28px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
#app_file-manager_reload:hover, #app_file-manager_addfile:hover {
  background: #DDD;
}
#app_file-manager_reload:active, #app_file-manager_addfile:active {
  background: #CCC;
}
#app_file-manager_content {
  width: calc(100% - 151px);
  height: calc(100% - 44px);
  margin-left: 151px;
  overflow: auto;
}
#app_file-manager_sidebar {
  width: 150px;
  background: #FFF;
  border-right: 1px solid #AAA;
  height: calc(100% - 44px);
  float: left;
}
#app_file-manager_sidebar div:not(.app_file-manager_sidebar-heading) {
  width: 140px;
  height: 30px;
  font: 15px "Segoe UI", "Arial", sans-serif;
  background: #FFF;
  line-height: 30px;
  padding-left: 10px;
}
#app_file-manager_sidebar div:not(.app_file-manager_sidebar-heading):hover {
  background: #EEE;
}
#app_file-manager_sidebar div:not(.app_file-manager_sidebar-heading):active {
  background: #CCC;
}
.app_file-manager_sidebar-heading {
  width: 140px;
  height: 30px;
  font: bold 15px "Segoe UI", "Arial", sans-serif;
  background: #FFF;
  line-height: 30px;
  padding-left: 10px;
}
.app_file-manager_item {
  background: #FFF;
  color: #000;
  border-bottom: 1px solid #EEE;
  padding: 10px;
  font: 20px "Consolas", monospace;
  cursor: default;
}
.app_file-manager_item:hover {
  background: #EEE;
}
.app_file-manager_item:active {
  background: #CCC;
}
.app_file-manager_tile {
  display: inline-block;
  background: #FFF;
  color: #000;
  border: 1px solid #EEE;
  min-width: 100px;
  min-height: 100px;
  padding: 10px;
  margin: 10px;
  font: 20px "Consolas", monospace;
  text-align: center;
  cursor: default;
}
.app_file-manager_tile:hover {
  background: #EEE;
}
.app_file-manager_tile:active {
  background: #CCC;
}
.app_file-manager_details {
  font: 16px "Consolas", monospace;
  height: 25px;
  line-height: 25px;
}
.app_file-manager_details:hover {
  background: #EEE;
}
.app_file-manager_details:active {
  background: #CCC;
}
.app_file-manager_item-icon {
  width: 20px;
  height: 20px;
  transform: translate(0, 5px);
  margin-right: 10px;
}
.app_file-manager_tile .app_file-manager_item-icon {
  display: block;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  transform: translate(50%);
}
.app_file-manager_details .app_file-manager_item-icon {
  width: 16px;
  height: 16px;
  transform: translate(5px, 3px);
}
.dark-theme #app_file-manager_window .window-content {
  background: #333;
  color: #FFF;
}
.dark-theme #app_file-manager_reload, .dark-theme #app_file-manager_addfile {
  background: #555;
}
.dark-theme #app_file-manager_reload:hover, .dark-theme #app_file-manager_addfile:hover {
  background: #808080;
}
.dark-theme #app_file-manager_reload:active, .dark-theme #app_file-manager_addfile:active {
  background: #AAA;
}
.dark-theme .app_file-manager_item {
  background: #333;
  color: #FFF;
  border-bottom: 1px solid #808080;
}
.dark-theme .app_file-manager_item:hover {
  background: #444;
}
.dark-theme .app_file-manager_item:active {
  background: #808080;
}
.dark-theme .app_file-manager_tile {
  background: #333;
  color: #FFF;
  border: 1px solid #808080;
}
.dark-theme .app_file-manager_tile:hover {
  background: #444;
}
.dark-theme .app_file-manager_tile:active {
  background: #808080;
}
.dark-theme .app_file-manager_details:hover {
  background: #444;
}
.dark-theme .app_file-manager_details:active {
  background: #808080;
}
</style>
</div>`
        },
        "handler": {
          type: "js", 
          content(file, absolute = false) {
            /*console.group("Handled file");
            console.info(file, absolute);
            console.info(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`);
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true));
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type);
            console.info(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "var");
            console.groupEnd();*/
            if (getRef("/apps/file-manager/working-dir") == "/") {
              if (getRef(`/${file.replace(/\//, "")}`, true) && getRef(`/${file.replace(/\//, "")}`, true).type == "dir") {
                writeRef("/apps/file-manager/working-dir", `${getRef("/apps/file-manager/working-dir")}${file.replace(/\//, "")}`);
                getRef("/apps/file-manager/load")();
              }
              else {}
            }
            else {}
            if (file == "/") {
              writeRef("/apps/file-manager/working-dir", "/");
              getRef("/apps/file-manager/load")();
            }
            else if (absolute == true && getRef(file, true) && getRef(file, true).type == "dir") {
              writeRef("/apps/file-manager/working-dir", file);
              getRef("/apps/file-manager/load")();
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "var") {
              msgbox(`Value:<br><br>${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "json") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(JSON.stringify(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`), null, 2))}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "txt") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre-wrap;">${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "css") {
              msgbox(`Value:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre-wrap;">${getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "js") {
              msgbox(`JavaScript content:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`).toString())}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "html") {
              msgbox(`HTML code:<br><br><div style="font: 15px 'Consolas', monospace; white-space: pre;">${escapeHTML(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`).toString())}</div>`);
            }
            else if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "pgm") {
              getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`)();
            }
            else if (getRef("/apps/file-manager/working-dir") != "/") {
              if (getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true) && getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type == "dir") {
                writeRef("/apps/file-manager/working-dir", `${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`);
                getRef("/apps/file-manager/load")();
              }
              else {}
            }
            /*if (!getRef("/apps/file-manager/supported-filetypes").includes(getRef(`${getRef("/apps/file-manager/working-dir")}/${file.replace(/\//, "")}`, true).type) && getRef("/apps/file-manager/working-dir") != "/") {
              msgbox("<b>File type not supported</b><br>GopalOS cannot open this file.", "Error");
            }
            else {}*/
            document.getElementById("app_file-manager_bar").value = getRef("/apps/file-manager/working-dir");
          }
        },
        "parent-dir": {
          type: "js",
          content() {
            if (getRef("/apps/file-manager/working-dir").replace(/\/[^/]*$/, "") == "") {
              getRef("/apps/file-manager/handler")("/");
            }
            else {
              getRef("/apps/file-manager/handler")(getRef("/apps/file-manager/working-dir").replace(/\/[^/]*$/, ""), true);/*TODO*/
            }
          }
        },
        "working-dir": {
          type: "var",
          content: "/"
        },
        "supported-filetypes": {
          type: "var",
          content: [
            "pgm",
            "js",
            "json",
            "txt",
            "var"
          ]
        },
        "view": {
          type: "var",
          content: "list"
        },
        "create-file": {
          type: "js",
          content() {
            let name = prompt("Enter file name and extension separated by a period (e.g. my-text-file.txt):\n\nWARNING: Do not use spaces, periods, or slashes. To prevent critical system errors, please stick to letters, numbers, hyphens, and underscores. It is HIGHLY RECOMMENDED (but not required) that you use an all-lowercase name (however the extension MUST be lowercase).");
            if (!name || name.trim() == "") {}
            else if (["apps", "home", "system"].includes(name)) {msgbox("ERROR: Reserved name.", "File Manager");}
            else {
              let nameArr = name.split(".");
              createRef(`${getRef("/apps/file-manager/working-dir")}/${nameArr[0]}`, nameArr[1]);
              getRef("/apps/file-manager/load")();
            }
          }
        },
        "create-folder": {
          type: "js",
          content() {
            let name = prompt("Enter folder name:\n\nWARNING: Do not use spaces, periods, or slashes. To prevent critical system errors, please stick to letters, numbers, hyphens, and underscores. It is HIGHLY RECOMMENDED (but not required) that you use an all-lowercase name.");
            if (!name || name.trim() == "") {}
            else if (["apps", "home", "system"].includes(name)) {msgbox("ERROR: Reserved name.", "File Manager");}
            else {
              createRef(`${getRef("/apps/file-manager/working-dir")}/${name}`, "dir");
              getRef("/apps/file-manager/load")();
            }
          }
        }
      }
    }
  }
}