{
  "name": "Graphing Calculator",
  "icon": "\u{1F4C8}\uFE0E",
  "desc": "A graphing calculator with many useful tools.",
  "id": "graph-calc",
  "globalID": "GopalOS.GraphingCalculator",
  "defaultRelease": "beta",
  "releases": {
    "beta": {
      "version": "v1.1.0-beta.14",
      "app-files": {
        "graph-calc": {
          type: "pgm",
          content: function() {
            if (document.getElementById("app_graph-calc_window")) {
              document.getElementById("app_graph-calc_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/graph-calc/window"));
              getRef("/apps/graph-calc/load")();
            }
            focusWin(document.getElementById("app_graph-calc_window"));
            regTbarIcon("/apps/graph-calc/graph-calc", "app_graph-calc_window", "\u{1F4C8}\uFE0E");
            refreshWindows();
          }
        },
        "dims": {
          type: "var",
          content: [1000, 1000]
        },
        "origin": {
          type: "var",
          content: [500, 500]
        },
        "px-per-unit": {
          type: "var",
          content: 50
        },
        "load": {
          type: "js",
          content: function() {
            getRef("/apps/graph-calc/init")();
          }
        },
        "init": {
          type: "js",
          content: function() {
            let [cWidth, cHeight] = getRef("/apps/graph-calc/dims");
            let [originX, originY] = getRef("/apps/graph-calc/origin");
            let pxPerUnit = getRef("/apps/graph-calc/px-per-unit");
            let ctx = document.getElementById("app_graph-calc_canvas").getContext("2d");
            
            ctx.clearRect(0, 0, cWidth, cHeight);
            ctx.strokeStyle = "#DDD";
            ctx.lineWidth = 1;
            let gridItvl = 1;
            for (let i = 1; i < (cWidth / pxPerUnit); i++) {
              let gridline = new Path2D();
              gridline.moveTo(originX - (i * pxPerUnit * gridItvl), 0);
              gridline.lineTo(originX - (i * pxPerUnit * gridItvl), cHeight);
              gridline.moveTo(originX + (i * pxPerUnit * gridItvl), 0);
              gridline.lineTo(originX + (i * pxPerUnit * gridItvl), cHeight);
              ctx.stroke(gridline);
            }
            for (let i = 1; i < (cHeight / pxPerUnit); i++) {
              let gridline = new Path2D();
              gridline.moveTo(0, originY - (i * pxPerUnit * gridItvl));
              gridline.lineTo(cWidth, originY - (i * pxPerUnit * gridItvl));
              gridline.moveTo(0, originY + (i * pxPerUnit * gridItvl));
              gridline.lineTo(cWidth, originY + (i * pxPerUnit * gridItvl));
              ctx.stroke(gridline);
            }
            
            ctx.strokeStyle = "#000";
            ctx.lineWidth = 2;
            let axes = new Path2D();
            axes.moveTo(0, cHeight - originY);
            axes.lineTo(cWidth, cHeight - originY);
            axes.moveTo(originX, 0);
            axes.lineTo(originX, cHeight);
            ctx.stroke(axes);
          }
        },
        "conv-coords": {
          type: "js",
          content: function(coords) {
            let [cWidth, cHeight] = getRef("/apps/graph-calc/dims");
            let [originX, originY] = getRef("/apps/graph-calc/origin");
            let pxPerUnit = getRef("/apps/graph-calc/px-per-unit");
            return [
              coords[0] * pxPerUnit + originX - 1,
              cHeight - (coords[1] * pxPerUnit + originY - 1)
            ];
          }
        },
        "graph": {
          type: "js",
          content: function(funcArr, domain = null, type = "func") {
            let [cWidth, cHeight] = getRef("/apps/graph-calc/dims");
            let [originX, originY] = getRef("/apps/graph-calc/origin");
            let pxPerUnit = getRef("/apps/graph-calc/px-per-unit");
            let ctx = document.getElementById("app_graph-calc_canvas").getContext("2d");
            
            ctx.fillStyle = "#1E90FF";
            
            if (type == "parm") {
              let x, y;
              eval(`x = function(t) {with (Math) {return (${funcArr[0]});}};`);
              eval(`y = function(t) {with (Math) {return (${funcArr[1]});}};`);
              for (let i = domain[0]; i <= domain[1]; i += (1 / 500)) {
                ctx.fillRect(
                  ...getRef("/apps/graph-calc/conv-coords")([x(i), y(i)]),
                  2,
                  2
                );
              }
            }
            else if (type == "polr") {
              let r, theta;
              eval(`r = function(t) {with (Math) {return (${funcArr[0]});}};`);
              eval(`theta = function(t) {with (Math) {return (${funcArr[1]});}};`);
              for (let i = domain[0]; i <= domain[1]; i += (1 / 500)) {
                ctx.fillRect(
                  ...getRef("/apps/graph-calc/conv-coords")([r(i) * Math.cos(theta(i)), r(i) * Math.sin(theta(i))]),
                  2,
                  2
                );
              }
            }
            else {
              let f;
              eval(`f = function(x) {with (Math) {return (${funcArr[0]});}};`);
              for (let i = -100; i <= 100; i += (1 / 500)) {
                ctx.fillRect(
                  ...getRef("/apps/graph-calc/conv-coords")([i, f(i)]),
                  2,
                  2
                );
              }
            }
          }
        },
        "graph-all": {
          type: "js",
          content: function() {
            getRef("/apps/graph-calc/init")();
            for (let i = 0; i < document.getElementById("app_graph-calc_sidebar").children.length - 1; i++) {
              document.getElementById("app_graph-calc_sidebar").children[i].classList.remove("app_graph-calc_item-invalid");
              let inputs = [...document.getElementById("app_graph-calc_sidebar").children[i].getElementsByClassName("app_graph-calc_item-input")].map(elem => elem.value);
              try {
                if (document.getElementById("app_graph-calc_sidebar").children[i].getAttribute("data-functype") == "parm") {
                  getRef("/apps/graph-calc/graph")([inputs[0], inputs[1]], [Number(inputs[2]), Number(inputs[3])], "parm");
                }
                else if (document.getElementById("app_graph-calc_sidebar").children[i].getAttribute("data-functype") == "polr") {
                  getRef("/apps/graph-calc/graph")([inputs[0], inputs[1]], [Number(inputs[2]), Number(inputs[3])], "polr");
                }
                else {
                  getRef("/apps/graph-calc/graph")([inputs[0]]);
                }
              }
              catch(err) {
                document.getElementById("app_graph-calc_sidebar").children[i].classList.add("app_graph-calc_item-invalid");
              }
            }
          }
        },
        "clear-all": {
          type: "js",
          content: function() {
            document.getElementById("app_graph-calc_sidebar").innerHTML = `<div class="app_graph-calc_item" onclick="getRef('/apps/graph-calc/select-func')(1);">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>1</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>
      <div id="app_graph-calc_add-item" class="app_graph-calc_item" style="font-size: 20px; text-align: center;" onclick="getRef('/apps/graph-calc/add-item')();">&#x2E3B; + &#x2E3B;</div>`;
            getRef('/apps/graph-calc/init')();
          }
        },
        "select-func": {
          type: "js",
          content: function(funcNum) {
            for (let i = 0; i < document.getElementById("app_graph-calc_sidebar").children.length - 1; i++) {
              document.getElementById("app_graph-calc_sidebar").children[i].classList.remove("app_graph-calc_item-selected");
            }
            document.getElementById("app_graph-calc_sidebar").children[funcNum - 1].classList.add("app_graph-calc_item-selected");
            
            let func = document.getElementById("app_graph-calc_sidebar").children[funcNum - 1].getElementsByClassName("app_graph-calc_item-input")[0].value;
            document.getElementById("app_graph-calc_fn").innerHTML = `&#x0192;<sub>${funcNum}</sub>&emsp;<span style="font-size: 24px;">${escapeHTML(func)}</span>`;
          }
        },
        "add-item": {
          type: "js",
          content: function(type = "fn") {
            let currNum = document.getElementById("app_graph-calc_sidebar").children.length - 1;
            
            if (type == "parm") {
              document.getElementById("app_graph-calc_add-item").insertAdjacentHTML("beforebegin", `<div class="app_graph-calc_item" data-functype="parm" onclick="getRef('/apps/graph-calc/select-func')(${currNum + 1});">
        <span class="app_graph-calc_item-symbol">&#x1D493;<sub>${currNum + 1}</sub></span>
        <br>
        <span>x = </span><input type="text" spellcheck="false" class="app_graph-calc_item-input">
        <br>
        <span>y = </span><input type="text" spellcheck="false" class="app_graph-calc_item-input">
        <br>
        <input type="number" spellcheck="false" class="app_graph-calc_item-input" style="width: 50px; text-align: right;"><span>&nbsp;&le; t &le;&nbsp;</span><input type="number" spellcheck="false" class="app_graph-calc_item-input" style="width: 50px;">
      </div>`);
            }
            
            else if (type == "polr") {
              document.getElementById("app_graph-calc_add-item").insertAdjacentHTML("beforebegin", `<div class="app_graph-calc_item" data-functype="polr" onclick="getRef('/apps/graph-calc/select-func')(${currNum + 1});">
        <span class="app_graph-calc_item-symbol">&#x1D493;<sub>${currNum + 1}</sub></span>
        <br>
        <span>r = </span><input type="text" spellcheck="false" class="app_graph-calc_item-input">
        <br>
        <span>&theta; = </span><input type="text" spellcheck="false" class="app_graph-calc_item-input">
        <br>
        <input type="number" spellcheck="false" class="app_graph-calc_item-input" style="width: 50px; text-align: right;"><span>&nbsp;&le; t &le;&nbsp;</span><input type="number" spellcheck="false" class="app_graph-calc_item-input" style="width: 50px;">
      </div>`);
            }
            
            else {
              document.getElementById("app_graph-calc_add-item").insertAdjacentHTML("beforebegin", `<div class="app_graph-calc_item" data-functype="fn" onclick="getRef('/apps/graph-calc/select-func')(${currNum + 1});">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>${currNum + 1}</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>`);
            }
          }
        },
        "toggle-details": {
          type: "js",
          content: function() {
            document.getElementById("app_graph-calc_details").classList.toggle("app_graph-calc_details-open");
            document.getElementById("app_graph-calc_details-tab").classList.toggle("app_graph-calc_details-tab-open");
          }
        },
        "open": {
          type: "js",
          content: function() {
            alert("Opening unfinished");
          }
        },
        "save": {
          type: "js",
          content: function() {
            let fname = prompt('Enter file path to save to, not including file extension (e.g. /home/documents/mygraph):');
            filename = String(fname).trim();
            if (fname == null || filename == "") {
              return;
            }
            else {
              alert("Saving unfinished");
            }
          }
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_graph-calc_window" style="top: 60px; left: 60px;">
  <div class="window-title">Graphing Calculator</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" style="font-family: 'Cambria Math', 'Cambria', 'Segoe UI', 'Arial', sans-serif; overflow: hidden; float: left;">
    <div class="menubar">
      <button id="app_graph-calc_filebtn" class="noborder popup-btn" data-popup-id="app_graph-calc_file">File</button>
      <button id="app_graph-calc_helpbtn" class="noborder popup-btn" data-popup-id="app_graph-calc_help">Help</button>
    </div>
    <div id="app_graph-calc_file" class="popup-menu" data-popup-origin-id="app_graph-calc_filebtn" style="position: absolute; top: 26px; left: 0;">
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/graph-all')();">Graph All</div>
      <div class="popup-menu-item" onclick="if (confirm('Are you sure you want to clear all functions? This cannot be undone.')) {getRef('/apps/graph-calc/clear-all')();}">Clear All</div>
      <div class="popup-menu-item popup-menu-item-submenu popup-btn" data-popup-id="app_graph-calc_file-additem">Add Function</div>
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/open')();">Open&hellip;</div>
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/save')();">Save&hellip;</div>
      <div class="popup-menu-item" onclick="document.getElementById('app_graph-calc_window').querySelector('.window-control-close').click();">Exit</div>
    </div>
    <div id="app_graph-calc_help" class="popup-menu" data-popup-origin-id="app_graph-calc_helpbtn" style="position: absolute; top: 26px; left: 60px;">
      <div class="popup-menu-item" onclick="msgbox('Version: ' + os.apps['graph-calc'].version, 'Graphing Calculator');">About</div>
    </div>
    <div id="app_graph-calc_file-additem" class="popup-menu" style="position: absolute; top: 84px; left: 202px;">
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/add-item')('fn');">Normal<span style="color: #AAA;">&nbsp;&#x0192;(x)</span></div>
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/add-item')('parm');">Parametric Cartesian<span style="color: #AAA;">&nbsp;&#x1D493;(x, y)</span></div>
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/add-item')('polr');">Parametric Polar<span style="color: #AAA;">&nbsp;&#x1D493;(r, &theta;)</span></div>
    </div>
    <div id="app_graph-calc_sidebar">
      <div class="app_graph-calc_item" onclick="getRef('/apps/graph-calc/select-func')(1);">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>1</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>
      <div id="app_graph-calc_add-item" class="app_graph-calc_item" style="font-size: 20px; text-align: center;" onclick="getRef('/apps/graph-calc/add-item')();">&#x2E3B; + &#x2E3B;</div>
    </div>
    <div id="app_graph-calc_viewer" class="noborder">
      <canvas id="app_graph-calc_canvas" width="1000" height="1000"></canvas>
    </div>
    <div id="app_graph-calc_details">
      <div id="app_graph-calc_fn" style="font-size: 30px;">&#x0192;<sub>1</sub>&emsp;<span style="font-size: 24px;">--</span></div>
    </div>
    <div id="app_graph-calc_details-tab" onclick="getRef('/apps/graph-calc/toggle-details')();">
      <span>&#xFE3D;</span>
    </div>
    <div id="app_graph-calc_statbar">Ready</div>
  </div>
  <style>
  #app_graph-calc_viewer {
    position: absolute;
    top: 26px;
    left: 200px;
    width: calc(100% - 200px);
    height: calc(100% - 50px);
    resize: none;
    padding: 0;
    overflow: auto;
  }
  #app_graph-calc_sidebar {
    background: #CCC;
    position: absolute;
    top: 26px;
    left: 0;
    width: 200px;
    height: calc(100% - 47px);
    border: none;
    resize: none;
    overflow: hidden scroll;
    scrollbar-width: thin;
  }
  .app_graph-calc_item {
    display: block;
    padding: 5px;
    background: #CCC;
    color: #000;
    font-size: 14px;
    border-left: 2px solid transparent;
  }
  .app_graph-calc_item-invalid {
    border-left: 2px solid #C00;
  }
  .app_graph-calc_item-invalid .app_graph-calc_item-symbol {
    color: #C00;
  }
  .app_graph-calc_item-selected {
    background: #BBB;
    border-left: 2px solid #1E90FF;
  }
  .app_graph-calc_item-selected .app_graph-calc_item-symbol {
    color: #1E90FF;
  }
  .app_graph-calc_item:hover {
    background: #BBB;
  }
  .app_graph-calc_item:active {
    background: #AAA;
  }
  .app_graph-calc_item-symbol {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    padding: 5px;
  }
  .app_graph-calc_item-input {
    background: transparent;
    border: none !important;
    padding: 0;
    width: 135px;
    font: 16px "Cambria Math", "Segoe UI", sans-serif;
  }
  #app_graph-calc_canvas {
    width: 400px;
    height: 400px;
    border: 1px solid #EEE;
    margin-left: 10px;
  }
  #app_graph-calc_details-tab {
    width: 40px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 5px;
    background: #FFF;
    border-color: #AAA #AAA #FFF #AAA;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    text-align: center;
    transition: transform 500ms;
    z-index: 1;
  }
  #app_graph-calc_details-tab.app_graph-calc_details-tab-open {
    transform: translate(0, -200px);
    transition: transform 500ms;
  }
  #app_graph-calc_details-tab span {
    display: inline-block;
    transform: translate(0, -3px) rotate(0deg);
    transition: transform 500ms;
  }
  #app_graph-calc_details-tab.app_graph-calc_details-tab-open span {
    transform: translate(0, 1px) rotate(180deg);
    transition: transform 500ms;
  }
  #app_graph-calc_details {
    position: absolute;
    bottom: 21px;
    right: 0;
    width: 479px;
    height: 200px;
    background: #FFF;
    color: #000;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #AAA;
    transform: translate(0, 201px);
    transition: transform 500ms;
  }
  #app_graph-calc_details.app_graph-calc_details-open {
    transform: translate(0, 0);
    transition: transform 500ms;
  }
  .dark-theme #app_graph-calc_sidebar {
    background: #2A2A2A;
  }
  .dark-theme .app_graph-calc_item-symbol {
    color: #FFF;
  }
  .dark-theme .app_graph-calc_item {
    background: #2A2A2A;
    color: #FFF;
  }
  .dark-theme .app_graph-calc_item-invalid {
    border-left: 2px solid #F00;
  }
  .dark-theme .app_graph-calc_item-invalid .app_graph-calc_item-symbol {
    color: #F00;
  }
  .dark-theme .app_graph-calc_item-selected {
    background: #3A3A3A;
    border-left: 2px solid #1E90FF;
  }
  .dark-theme .app_graph-calc_item-selected .app_graph-calc_item-symbol {
    color: #1E90FF;
  }
  .dark-theme .app_graph-calc_item-input {
    background: transparent;
  }
  .dark-theme .app_graph-calc_item:hover {
    background: #3A3A3A;
  }
  .dark-theme .app_graph-calc_item:active {
    background: #4A4A4A;
  }
  .dark-theme #app_graph-calc_details {
    background: #444;
    color: #FFF;
  }
  .dark-theme #app_graph-calc_details-tab {
    background: #444;
    border-color: #AAA #AAA #444 #AAA;
  }
  .dark-theme #app_graph-calc_canvas {
    border: 1px solid #777;
  }
  #app_graph-calc_statbar {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2px;
    width: calc(100% - 4px);
    background: #EEE;
    font-size: 14px;
  }
  .dark-theme #app_graph-calc_statbar {
    background: #444;
    color: #FFF;
  }
  </style>
  </div>`
        }
      }
    },
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    "stable": {
      "version": "v1.0.0",
      "app-files": {
        "graph-calc": {
          type: "pgm",
          content: function() {
            if (document.getElementById("app_graph-calc_window")) {
              document.getElementById("app_graph-calc_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/graph-calc/window"));
              getRef("/apps/graph-calc/load")();
            }
            focusWin(document.getElementById("app_graph-calc_window"));
            regTbarIcon("/apps/graph-calc/graph-calc", "app_graph-calc_window", "\u{1F4C8}\uFE0E");
            refreshWindows();
          }
        },
        "dims": {
          type: "var",
          content: [1000, 1000]
        },
        "origin": {
          type: "var",
          content: [500, 500]
        },
        "px-per-unit": {
          type: "var",
          content: 50
        },
        "load": {
          type: "js",
          content: function() {
            getRef("/apps/graph-calc/init")();
          }
        },
        "init": {
          type: "js",
          content: function() {
            let [cWidth, cHeight] = getRef("/apps/graph-calc/dims");
            let [originX, originY] = getRef("/apps/graph-calc/origin");
            let pxPerUnit = getRef("/apps/graph-calc/px-per-unit");
            let ctx = document.getElementById("app_graph-calc_canvas").getContext("2d");
            
            ctx.clearRect(0, 0, cWidth, cHeight);
            ctx.strokeStyle = "#DDD";
            ctx.lineWidth = 1;
            let gridItvl = 1;
            for (let i = 1; i < (cWidth / pxPerUnit); i++) {
              let gridline = new Path2D();
              gridline.moveTo(originX - (i * pxPerUnit * gridItvl), 0);
              gridline.lineTo(originX - (i * pxPerUnit * gridItvl), cHeight);
              gridline.moveTo(originX + (i * pxPerUnit * gridItvl), 0);
              gridline.lineTo(originX + (i * pxPerUnit * gridItvl), cHeight);
              ctx.stroke(gridline);
            }
            for (let i = 1; i < (cHeight / pxPerUnit); i++) {
              let gridline = new Path2D();
              gridline.moveTo(0, originY - (i * pxPerUnit * gridItvl));
              gridline.lineTo(cWidth, originY - (i * pxPerUnit * gridItvl));
              gridline.moveTo(0, originY + (i * pxPerUnit * gridItvl));
              gridline.lineTo(cWidth, originY + (i * pxPerUnit * gridItvl));
              ctx.stroke(gridline);
            }
            
            ctx.strokeStyle = "#000";
            ctx.lineWidth = 2;
            let axes = new Path2D();
            axes.moveTo(0, cHeight - originY);
            axes.lineTo(cWidth, cHeight - originY);
            axes.moveTo(originX, 0);
            axes.lineTo(originX, cHeight);
            ctx.stroke(axes);
          }
        },
        "graph": {
          type: "js",
          content: function(funcStr) {
            let [cWidth, cHeight] = getRef("/apps/graph-calc/dims");
            let [originX, originY] = getRef("/apps/graph-calc/origin");
            let pxPerUnit = getRef("/apps/graph-calc/px-per-unit");
            let ctx = document.getElementById("app_graph-calc_canvas").getContext("2d");
            
            let f;
            ctx.fillStyle = "#1E90FF";
            eval(`f = function(x) {with (Math) {return (${funcStr});}};`);
            for (let i = 0; i <= 200; i += (1 / 100)) {
              ctx.fillRect(
                ((-100 + i) * pxPerUnit) + originX - 1,
                cHeight - ((f(-100 + i) * pxPerUnit) + originY - 1),
                2,
                2
              );
            }
          }
        },
        "graph-all": {
          type: "js",
          content: function() {
            getRef("/apps/graph-calc/init")();
            for (let i = 0; i < document.getElementById("app_graph-calc_sidebar").children.length - 1; i++) {
              document.getElementById("app_graph-calc_sidebar").children[i].classList.remove("app_graph-calc_item-invalid");
              try {
                getRef("/apps/graph-calc/graph")(document.getElementById("app_graph-calc_sidebar").children[i].getElementsByClassName("app_graph-calc_item-input")[0].value);
              }
              catch(err) {
                document.getElementById("app_graph-calc_sidebar").children[i].classList.add("app_graph-calc_item-invalid");
              }
            }
          }
        },
        "clear-all": {
          type: "js",
          content: function() {
            document.getElementById("app_graph-calc_sidebar").innerHTML = `<div class="app_graph-calc_item" onclick="getRef('/apps/graph-calc/select-func')(1);">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>1</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>
      <div id="app_graph-calc_add-item" class="app_graph-calc_item" style="font-size: 20px; text-align: center;" onclick="getRef('/apps/graph-calc/add-item')();">&#x2E3B; + &#x2E3B;</div>`;
            getRef('/apps/graph-calc/init')();
          }
        },
        "select-func": {
          type: "js",
          content: function(funcNum) {
            for (let i = 0; i < document.getElementById("app_graph-calc_sidebar").children.length - 1; i++) {
              document.getElementById("app_graph-calc_sidebar").children[i].classList.remove("app_graph-calc_item-selected");
            }
            document.getElementById("app_graph-calc_sidebar").children[funcNum - 1].classList.add("app_graph-calc_item-selected");
            
            let func = document.getElementById("app_graph-calc_sidebar").children[funcNum - 1].getElementsByClassName("app_graph-calc_item-input")[0].value;
            document.getElementById("app_graph-calc_fn").innerHTML = `&#x0192;<sub>${funcNum}</sub>&emsp;<span style="font-size: 24px;">${escapeHTML(func)}</span>`;
          }
        },
        "add-item": {
          type: "js",
          content: function() {
            let currNum = document.getElementById("app_graph-calc_sidebar").children.length - 1;
          document.getElementById("app_graph-calc_add-item").insertAdjacentHTML("beforebegin", `<div class="app_graph-calc_item" onclick="getRef('/apps/graph-calc/select-func')(${currNum + 1});">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>${currNum + 1}</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>`);
          }
        },
        "toggle-details": {
          type: "js",
          content: function() {
            document.getElementById("app_graph-calc_details").classList.toggle("app_graph-calc_details-open");
            document.getElementById("app_graph-calc_details-tab").classList.toggle("app_graph-calc_details-tab-open");
          }
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_graph-calc_window" style="top: 60px; left: 60px;">
  <div class="window-title">Graphing Calculator</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" style="font-family: 'Cambria Math', 'Cambria', 'Segoe UI', 'Arial', sans-serif; overflow: hidden; float: left;">
    <div class="menubar">
      <button id="app_graph-calc_filebtn" class="noborder popup-btn" data-popup-id="app_graph-calc_file">File</button>
      <button id="app_graph-calc_helpbtn" class="noborder popup-btn" data-popup-id="app_graph-calc_help">Help</button>
    </div>
    <div id="app_graph-calc_file" class="popup-menu" data-popup-origin-id="app_graph-calc_filebtn" style="position: absolute; top: 26px; left: 0;">
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/graph-all')();">Graph All</div>
      <div class="popup-menu-item" onclick="getRef('/apps/graph-calc/clear-all')();">Clear All</div>
      <div class="popup-menu-item" onclick="document.getElementById('app_graph-calc_window').querySelector('.window-control-close').click();">Exit</div>
    </div>
    <div id="app_graph-calc_help" class="popup-menu" data-popup-origin-id="app_graph-calc_helpbtn" style="position: absolute; top: 26px; left: 60px;">
      <div class="popup-menu-item" onclick="msgbox('Version: ' + os.apps['graph-calc'].version, 'Graphing Calculator');">About</div>
    </div>
    <div id="app_graph-calc_sidebar">
      <div class="app_graph-calc_item" onclick="getRef('/apps/graph-calc/select-func')(1);">
        <span class="app_graph-calc_item-symbol">&#x0192;<sub>1</sub></span>
        <input type="text" spellcheck="false" class="app_graph-calc_item-input">
      </div>
      <div id="app_graph-calc_add-item" class="app_graph-calc_item" style="font-size: 20px; text-align: center;" onclick="getRef('/apps/graph-calc/add-item')();">&#x2E3B; + &#x2E3B;</div>
    </div>
    <div id="app_graph-calc_viewer" class="noborder">
      <canvas id="app_graph-calc_canvas" width="1000" height="1000"></canvas>
    </div>
    <div id="app_graph-calc_details">
      <div id="app_graph-calc_fn" style="font-size: 30px;">&#x0192;<sub>1</sub>&emsp;<span style="font-size: 24px;">--</span></div>
    </div>
    <div id="app_graph-calc_details-tab" onclick="getRef('/apps/graph-calc/toggle-details')();">
      <span>&#xFE3D;</span>
    </div>
    <div id="app_graph-calc_statbar">Ready</div>
  </div>
  <style>
  #app_graph-calc_viewer {
    position: absolute;
    top: 26px;
    left: 200px;
    width: calc(100% - 200px);
    height: calc(100% - 50px);
    resize: none;
    padding: 0;
    overflow: auto;
  }
  #app_graph-calc_sidebar {
    background: #CCC;
    position: absolute;
    top: 26px;
    left: 0;
    width: 200px;
    height: calc(100% - 47px);
    border: none;
    resize: none;
    overflow: hidden scroll;
    scrollbar-width: thin;
  }
  .app_graph-calc_item {
    display: block;
    padding: 5px;
    background: #CCC;
    color: #000;
    font-size: 14px;
    border-left: 2px solid transparent;
  }
  .app_graph-calc_item-invalid {
    border-left: 2px solid #C00;
  }
  .app_graph-calc_item-invalid .app_graph-calc_item-symbol {
    color: #C00;
  }
  .app_graph-calc_item-selected {
    background: #BBB;
    border-left: 2px solid #1E90FF;
  }
  .app_graph-calc_item-selected .app_graph-calc_item-symbol {
    color: #1E90FF;
  }
  .app_graph-calc_item:hover {
    background: #BBB;
  }
  .app_graph-calc_item:active {
    background: #AAA;
  }
  .app_graph-calc_item-symbol {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    padding: 5px;
  }
  .app_graph-calc_item-input {
    background: transparent;
    border: none !important;
    padding: 0;
    width: 135px;
    font: 16px "Cambria Math", "Segoe UI", sans-serif;
  }
  #app_graph-calc_canvas {
    width: 400px;
    height: 400px;
    border: 1px solid #EEE;
    margin-left: 10px;
  }
  #app_graph-calc_details-tab {
    width: 40px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 5px;
    background: #FFF;
    border-color: #AAA #AAA #FFF #AAA;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    text-align: center;
    transition: transform 500ms;
    z-index: 1;
  }
  #app_graph-calc_details-tab.app_graph-calc_details-tab-open {
    transform: translate(0, -200px);
    transition: transform 500ms;
  }
  #app_graph-calc_details-tab span {
    display: inline-block;
    transform: translate(0, -3px) rotate(0deg);
    transition: transform 500ms;
  }
  #app_graph-calc_details-tab.app_graph-calc_details-tab-open span {
    transform: translate(0, 1px) rotate(180deg);
    transition: transform 500ms;
  }
  #app_graph-calc_details {
    position: absolute;
    bottom: 21px;
    right: 0;
    width: 479px;
    height: 200px;
    background: #FFF;
    color: #000;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #AAA;
    transform: translate(0, 201px);
    transition: transform 500ms;
  }
  #app_graph-calc_details.app_graph-calc_details-open {
    transform: translate(0, 0);
    transition: transform 500ms;
  }
  .dark-theme #app_graph-calc_sidebar {
    background: #2A2A2A;
  }
  .dark-theme .app_graph-calc_item-symbol {
    color: #FFF;
  }
  .dark-theme .app_graph-calc_item {
    background: #2A2A2A;
    color: #FFF;
  }
  .dark-theme .app_graph-calc_item-invalid {
    border-left: 2px solid #F00;
  }
  .dark-theme .app_graph-calc_item-invalid .app_graph-calc_item-symbol {
    color: #F00;
  }
  .dark-theme .app_graph-calc_item-selected {
    background: #3A3A3A;
    border-left: 2px solid #1E90FF;
  }
  .dark-theme .app_graph-calc_item-selected .app_graph-calc_item-symbol {
    color: #1E90FF;
  }
  .dark-theme .app_graph-calc_item-input {
    background: transparent;
  }
  .dark-theme .app_graph-calc_item:hover {
    background: #3A3A3A;
  }
  .dark-theme .app_graph-calc_item:active {
    background: #4A4A4A;
  }
  .dark-theme #app_graph-calc_details {
    background: #444;
    color: #FFF;
  }
  .dark-theme #app_graph-calc_details-tab {
    background: #444;
    border-color: #AAA #AAA #444 #AAA;
  }
  .dark-theme #app_graph-calc_canvas {
    border: 1px solid #777;
  }
  #app_graph-calc_statbar {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2px;
    width: calc(100% - 4px);
    background: #EEE;
    font-size: 14px;
  }
  .dark-theme #app_graph-calc_statbar {
    background: #444;
    color: #FFF;
  }
  </style>
  </div>`
        }
      }
    }
  }
}