From be715f3f63d0313bb3c0a6c1c279c783cb6e7e08 Mon Sep 17 00:00:00 2001
From: Will Scullin <scullin@scullinsteel.com>
Date: Tue, 12 Mar 2019 21:11:00 -0700
Subject: [PATCH] Remove jQuery and jQuery UI dependencies.

---
 apple2js.html         | 402 ++++++++++++++++++++++++----------------
 apple2jse.html        | 398 ++++++++++++++++++++++++----------------
 css/apple2.css        | 119 +++++++++++-
 js/cards/disk2.js     |   2 +
 js/main2.js           | 406 ++++++++++++++++------------------------
 js/main2e.js          | 417 ++++++++++++++++--------------------------
 js/ui/drive_lights.js |  34 ++++
 js/ui/gamepad.js      |   3 +-
 js/ui/printer.js      |  13 +-
 js/ui/tape.js         |   2 +
 package-lock.json     |   5 +
 package.json          |   3 +
 12 files changed, 975 insertions(+), 829 deletions(-)
 create mode 100644 js/ui/drive_lights.js

diff --git a/apple2js.html b/apple2js.html
index d300a66..92f7a4d 100644
--- a/apple2js.html
+++ b/apple2js.html
@@ -27,26 +27,8 @@
 <link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
 <link rel="shortcut icon" href="img/logoicon.png" />
 <link rel="stylesheet" type="text/css" href="css/apple2.css" />
-<link rel="stylesheet" type="text/css"
-      href="//code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css" />
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
 
-<!-- white text in controls -->
-<style type="text/css">
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-  color: white;
-}
-.ui-state-default .ui-icon {
-  background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
-}
-</style>
-
-<!-- jQuery -->
-<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
-</script>
-<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js">
-</script>
-
 <!-- Disk Index -->
 <script type="text/javascript" src="json/disks/index.js"></script>
 
@@ -55,12 +37,8 @@
       ondragover="handleDragOver(0, event)"
       ondrop="handleDrop(0, event)"
       ondragend="handleDragEnd(0, event)">
-  <div id="fb-root"></div>
   <div style="margin: auto; width: 614px">
     <div id="header">
-      <a href="//www.w3.org/html/logo/" target="_blank">
-        <img src="//www.w3.org/html/logo/badge/html5-badge-h-solo.png" style="float: right" />
-      </a>
       <a href="about.html" target="_blank">
         <img src="img/badge.png" id="badge" />
       </a>
@@ -75,7 +53,7 @@
       <div style="float: left; width: 50%"
            ondragover="handleDragOver(1, event)"
            ondrop="handleDrop(1, event)"
-           ondragend="handleDragEnd(2, event)">
+           ondragend="handleDragEnd(1, event)">
         <button id="diskload1" class="diskload" title="Load Disk"
                 onclick="openLoad(1, event);">
           <i class="fas fa-folder-open"></i>
@@ -112,14 +90,14 @@
       <button id="toggle-sound" onclick="toggleSound()" title="Toggle Sound">
         <i class="fas fa-volume-off"></i>
       </button>
-      <button id="toggle-printer" onclick="$('#printer').dialog('open')" title="Toggle Printer">
+      <button id="toggle-printer" onclick="openPrinterModal()" title="Toggle Printer">
         <i class="fas fa-print"></i>
       </button>
       <div style="float: right">
-        <a class="button" href="about.html" target="_blank" title="About">
+        <button onclick="window.open('about.html', 'blank')" title="About">
           <i class="fas fa-info"></i>
-        </a>
-        <button onclick="$('#options').dialog('open')" title="Options">
+        </button>
+        <button onclick="openOptions()" title="Options">
           <i class="fas fa-cog"></i>
         </button>
       </div>
@@ -143,151 +121,263 @@
             <label for="text_input">Text Input</label>
             <textarea rows="10" style="width: 99%" id="text_input"></textarea>
           <br />
-          <button onclick="io.setKeyBuffer($('#text_input').val())">
+          <button onclick="io.setKeyBuffer(document.querySelector('#text_input').innerText)">
             Send
           </button>
           <input type="checkbox" id="buffering" />
           <label for="buffering">Buffer</label>
           <button style="float: right"
-                  onclick="$('#keyboard').show(); $('#textarea').hide()">
+                  onclick="document.querySelector('#keyboard').style.display = 'block'; document.querySelector('#textarea').style.display = 'none'">
             Keyboard
           </button>
         </div>
       </div>
     </div>
-  <div id="loading" title="Loading" style="display: none">
-    Loading...
   </div>
-  <div id="options" title="Options" style="display: none">
-    <h3>Type</h3>
-    <ul>
-      <li>
-        <select id="computer_type2" value="apple2plus" onchange="updateCPU()">
-          <option value="apple2plus">Apple ][+</option>
-          <option value="apple2">Autostart Apple ][</option>
-          <option value="original">Apple ][</option>
-          <option value="apple2j">Apple ][j+</option>
-          <option value="apple2lc">Apple ][+ (lowercase font)</option>
-          <option value="apple2pig">Apple ][+ (pig font)</option>
-        </select>
-      </li>
-      <li>
-        <i>* Reload page to take effect</i>
-      </li>
-    </ul>
-    <h3>CPU</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
-        <label for="accelerator_toggle">
-          Accelerated CPU
-        </label>
-      </li>
-    </ul>
-    <h3>Joystick</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="disable_mouse"
-               onclick="updateJoystick()" />
-        <label for="disable_mouse">
-          Disable Mouse Joystick
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="flip_x"
-               onclick="updateJoystick()" />
-        <label for="flip_x">
-          Flip X-Axis
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="flip_y"
-               onclick="updateJoystick()" />
-        <label for="flip_y">
-          Flip Y-Axis
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="swap_x_y"
-               onclick="updateJoystick()" />
-        <label for="swap_x_y">
-          Swap X-Y Axis
-        </label>
-      </li>
-    </ul>
-    <h3>Monitor</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="green_screen"
-               onclick="updateScreen()" />
-        <label for="green_screen">
-          Green Screen
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="show_scanlines"
-               onclick="updateScreen()" />
-        <label for="show_scanlines">
-          Show Scanlines
-        </label>
-      </li>
-    </ul>
-    <h3>Sound</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="enable_sound"
-               onclick="updateSound()" checked="checked" />
-        <label for="enable_sound">
-          Enable (Experimental)
-        </label>
-      </li>
-    </ul>
-  </div>
-  <div id="save" title="Save Disk" style="display: none">
-    <form action="#" onsubmit="return false;">
-      <b>Save to Browser</b>
-      <br /><br />
-      Save Name: <input type="text" name="name" id="save_name"
-                  style="width: 200px" />
-    </form>
-    <hr />
-    <div>
-      <b>Download to Local Disk</b>
-      <br /><br />
-      <a id="local_save_link" class="button">Download</a>
+
+  <div class="modal" id="loading-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Loading" >
+        <header class="modal__header">
+          <span id="loading-modal-title">
+            Loading...
+          </span>
+        </header>
+      </div>
     </div>
   </div>
-  <div id="manage" title="Manage Disks" style="display: none">
+
+  <div class="modal" id="options-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Options">
+        <header class="modal__header">
+          <span id="options-modal-title">
+            Options
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="options-modal-content">
+          <h3>Type</h3>
+          <ul>
+            <li>
+              <select id="computer_type2" value="apple2plus" onchange="updateCPU()">
+                <option value="apple2plus">Apple ][+</option>
+                <option value="apple2">Autostart Apple ][</option>
+                <option value="original">Apple ][</option>
+                <option value="apple2j">Apple ][j+</option>
+                <option value="apple2lc">Apple ][+ (lowercase font)</option>
+                <option value="apple2pig">Apple ][+ (pig font)</option>
+              </select>
+            </li>
+            <li>
+              <i>* Reload page to take effect</i>
+            </li>
+          </ul>
+          <h3>CPU</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
+              <label for="accelerator_toggle">
+                Accelerated CPU
+              </label>
+            </li>
+          </ul>
+          <h3>Joystick</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="disable_mouse"
+                    onclick="updateJoystick()" />
+              <label for="disable_mouse">
+                Disable Mouse Joystick
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="flip_x"
+                    onclick="updateJoystick()" />
+              <label for="flip_x">
+                Flip X-Axis
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="flip_y"
+                    onclick="updateJoystick()" />
+              <label for="flip_y">
+                Flip Y-Axis
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="swap_x_y"
+                    onclick="updateJoystick()" />
+              <label for="swap_x_y">
+                Swap X-Y Axis
+              </label>
+            </li>
+          </ul>
+          <h3>Monitor</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="green_screen"
+                    onclick="updateScreen()" />
+              <label for="green_screen">
+                Green Screen
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="show_scanlines"
+                    onclick="updateScreen()" />
+              <label for="show_scanlines">
+                Show Scanlines
+              </label>
+            </li>
+          </ul>
+          <h3>Sound</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="enable_sound"
+                    onclick="updateSound()" checked="checked" />
+              <label for="enable_sound">
+                Enable (Experimental)
+              </label>
+            </li>
+          </ul>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
+        </footer>
+      </div>
+    </div>
   </div>
-  <div id="http_load" title="Load URL" style="display: none">
-    <form action="#">
-      <input type="text" id="http_url" style="width: 500px"/>
-    </form>
+
+  <div class="modal" id="save-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Save Disk">
+        <header class="modal__header">
+          <span id="save-modal-title">
+            Save Disk
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="save-modal-content">
+          <form action="#" onsubmit="return false;">
+            <b>Save to Browser</b>
+            <br /><br />
+            Save Name: <input type="text" name="name" id="save_name"
+                        style="width: 200px" />
+          </form>
+          <hr />
+          <div>
+            <b>Download to Local Disk</b>
+            <br /><br />
+            <a id="local_save_link" class="button">Download</a>
+          </div>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" onclick="doSave()" aria-label="Save disk locally">Save</button>
+        </footer>
+      </div>
+    </div>
   </div>
-  <div id="load" title="Load Disk" style="display: none">
-    <table>
-      <tr>
-        <td>
-          <select id="category_select" multiple="multiple"
-                  class="ui-widget ui-state-default"
-                  onchange="selectCategory(event)" >
-          </select>
-        </td>
-        <td>
-          <select id="disk_select" multiple="multiple"
-                  class="ui-widget ui-state-default"
-                  onchange="selectDisk(event)"
-                  ondblclick="clickDisk(event)">
-          </select>
-        </td>
-      </tr>
-    </table>
-    <form action="#">
-      <input type="file" id="local_file" />
-    </form>
+
+  <div class="modal" id="manage-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="manage-modal-title">
+            Manage Local Saves
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="manage-modal-content">
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
+        </footer>
+      </div>
+    </div>
   </div>
-  <div id="printer" title="Printer" style="display: none">
-    <div class="paper">
+
+  <div class="modal" id="http-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="http-modal-title">
+            Load URL
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="http-modal-content">
+          <form action="#">
+            <input type="text" id="http_url" style="width: 500px"/>
+          </form>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="load-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="load-modal-title">
+            Load Disk
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="load-modal-content">
+          <table>
+            <tr>
+              <td>
+                <select id="category_select" multiple="multiple"
+                        class="ui-widget ui-state-default"
+                        onchange="selectCategory(event)" >
+                </select>
+              </td>
+              <td>
+                <select id="disk_select" multiple="multiple"
+                        class="ui-widget ui-state-default"
+                        onchange="selectDisk(event)"
+                        ondblclick="clickDisk(event)">
+                </select>
+              </td>
+            </tr>
+          </table>
+          <form action="#">
+            <input type="file" id="local_file" />
+          </form>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Cancel</button>
+          <button class="modal__btn" onclick="doLoad()" aria-label="Open the selected disk">Open</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="printer-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Printer">
+        <header class="modal__header">
+          <span class="modal__title" id="printer-modal-title">
+              Printer
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="printer-modal-content">
+          <div class="paper"></div>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
+        </footer>
+      </div>
     </div>
   </div>
   <script src="dist/main2.js"></script>
diff --git a/apple2jse.html b/apple2jse.html
index 7efbe0b..f12a1c7 100644
--- a/apple2jse.html
+++ b/apple2jse.html
@@ -27,26 +27,8 @@
 <link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
 <link rel="shortcut icon" href="img/logoicon.png" />
 <link rel="stylesheet" type="text/css" href="css/apple2.css" />
-<link rel="stylesheet" type="text/css"
-      href="//code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css" />
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
 
-<!-- white text in controls -->
-<style type="text/css">
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-  color: white;
-}
-.ui-state-default .ui-icon {
-  background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
-}
-</style>
-
-<!-- jQuery -->
-<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
-</script>
-<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js">
-</script>
-
 <!-- Disk Index -->
 <script type="text/javascript" src="json/disks/index.js"></script>
 
@@ -57,9 +39,6 @@
       ondragend="handleDragEnd(0, event)">
   <div class="outer">
     <div id="header">
-      <a href="//www.w3.org/html/logo/" target="_blank">
-        <img src="//www.w3.org/html/logo/badge/html5-badge-h-solo.png" style="float: right" />
-      </a>
       <a href="about.html" target="_blank">
         <img src="img/badge2e.png" id="badge" />
       </a>
@@ -114,14 +93,14 @@
         <button id="toggle-sound" onclick="toggleSound()">
           <i class="fas fa-volume-off"></i>
         </button>
-        <button id="toggle-printer" onclick="$('#printer').dialog('open')" title="Toggle Printer">
+        <button id="toggle-printer" onclick="openPrinterModal()" title="Toggle Printer">
           <i class="fas fa-print"></i>
         </button>
         <div style="float: right">
-          <a class="button" href="about.html" target="_blank" title="About">
+          <button onclick="window.open('about.html', 'blank')" title="About">
             <i class="fas fa-info"></i>
-          </a>
-          <button onclick="$('#options').dialog('open')">
+          </button>
+          <button onclick="openOptions()">
             <i class="fas fa-cog"></i>
           </button>
         </div>
@@ -134,138 +113,249 @@
       <div id="keyboard"></div>
     </div>
   </div>
-  <div id="loading" title="Loading" style="display: none">
-    Loading...
-  </div>
-  <div id="options" title="Options" style="display: none">
-    <h3>Type</h3>
-    <ul>
-      <li>
-        <select id="computer_type2e" value="apple2enh" onchange="updateCPU()">
-          <option value="apple2enh">Enhanced Apple //e</option>
-          <option value="apple2e">Apple //e</option>
-          <option value="apple2rm">Enhanced Apple //e (Reactive Micro)</option>
-        </select>
-      </li>
-      <li>
-        <i>* Reload page to take effect</i>
-      </li>
-    </ul>
-    <h3>CPU</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
-        <label for="accelerator_toggle">
-          Accelerated CPU
-        </label>
-      </li>
-    </ul>
-    <h3>Joystick</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="disable_mouse"
-               onclick="updateJoystick()" />
-        <label for="disable_mouse">
-          Disable Mouse Joystick
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="flip_x"
-               onclick="updateJoystick()" />
-        <label for="flip_x">
-          Flip X-Axis
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="flip_y"
-               onclick="updateJoystick()" />
-        <label for="flip_y">
-          Flip Y-Axis
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="swap_x_y"
-               onclick="updateJoystick()" />
-        <label for="swap_x_y">
-          Swap X-Y Axis
-        </label>
-      </li>
-    </ul>
-    <h3>Monitor</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="green_screen"
-               onclick="updateScreen()" />
-        <label for="green_screen">
-          Green Screen
-        </label>
-      </li>
-      <li>
-        <input type="checkbox" id="show_scanlines"
-               onclick="updateScreen()" />
-        <label for="show_scanlines">
-          Show Scanlines
-        </label>
-      </li>
-    </ul>
-    <h3>Sound</h3>
-    <ul>
-      <li>
-        <input type="checkbox" id="enable_sound"
-               onclick="updateSound()" checked="checked" />
-        <label for="enable_sound">
-          Enable (Experimental)
-        </label>
-      </li>
-    </ul>
-  </div>
-  <div id="save" title="Save Disk" style="display: none">
-    <form action="#" onsubmit="return false;">
-      <b>Save to Browser</b>
-      <br /><br />
-      Save Name: <input type="text" name="name" id="save_name"
-                  style="width: 200px" />
-    </form>
-    <hr />
-    <div>
-      <b>Download to Local Disk</b>
-      <br /><br />
-      <a id="local_save_link" class="button">Download</a>
+
+  <div class="modal" id="loading-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Loading" >
+        <header class="modal__header">
+          <span id="loading-modal-title">
+            Loading...
+          </span>
+        </header>
+      </div>
     </div>
   </div>
-  <div id="manage" title="Manage Disks" style="display: none">
-  </div>
-  <div id="http_load" title="Load URL" style="display: none">
-    <form action="#">
-      <input type="text" id="http_url" style="width: 500px"/>
-    </form>
-  </div>
-  <div id="load" title="Load Disk" style="display: none">
-    <table>
-      <tr>
-        <td>
-          <select id="category_select" multiple="multiple"
-                  class="ui-widget ui-state-default"
-                  onchange="selectCategory(event)" >
-          </select>
-        </td>
-        <td>
-          <select id="disk_select" multiple="multiple"
-                  class="ui-widget ui-state-default"
-                  onchange="selectDisk(event)"
-                  ondblclick="clickDisk(event)">
-          </select>
-        </td>
-      </tr>
-    </table>
-    <form action="#">
-      <input type="file" id="local_file" />
-    </form>
-  </div>
-  <div id="printer" title="Printer" style="display: none">
-    <div class="paper">
+
+  <div class="modal" id="options-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Options">
+        <header class="modal__header">
+          <span id="options-modal-title">
+            Options
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="options-modal-content">
+          <h3>Type</h3>
+          <ul>
+            <li>
+                <select id="computer_type2e" value="apple2enh" onchange="updateCPU()">
+                  <option value="apple2enh">Enhanced Apple //e</option>
+                  <option value="apple2e">Apple //e</option>
+                  <option value="apple2rm">Enhanced Apple //e (Reactive Micro)</option>
+                </select>
+            </li>
+            <li>
+              <i>* Reload page to take effect</i>
+            </li>
+          </ul>
+          <h3>CPU</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
+              <label for="accelerator_toggle">
+                Accelerated CPU
+              </label>
+            </li>
+          </ul>
+          <h3>Joystick</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="disable_mouse"
+                    onclick="updateJoystick()" />
+              <label for="disable_mouse">
+                Disable Mouse Joystick
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="flip_x"
+                    onclick="updateJoystick()" />
+              <label for="flip_x">
+                Flip X-Axis
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="flip_y"
+                    onclick="updateJoystick()" />
+              <label for="flip_y">
+                Flip Y-Axis
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="swap_x_y"
+                    onclick="updateJoystick()" />
+              <label for="swap_x_y">
+                Swap X-Y Axis
+              </label>
+            </li>
+          </ul>
+          <h3>Monitor</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="green_screen"
+                    onclick="updateScreen()" />
+              <label for="green_screen">
+                Green Screen
+              </label>
+            </li>
+            <li>
+              <input type="checkbox" id="show_scanlines"
+                    onclick="updateScreen()" />
+              <label for="show_scanlines">
+                Show Scanlines
+              </label>
+            </li>
+          </ul>
+          <h3>Sound</h3>
+          <ul>
+            <li>
+              <input type="checkbox" id="enable_sound"
+                    onclick="updateSound()" checked="checked" />
+              <label for="enable_sound">
+                Enable (Experimental)
+              </label>
+            </li>
+          </ul>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
+        </footer>
+      </div>
     </div>
   </div>
-  <script type="text/javascript" src="dist/main2e.js"></script>
+
+  <div class="modal" id="save-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Save Disk">
+        <header class="modal__header">
+          <span id="save-modal-title">
+            Save Disk
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="save-modal-content">
+          <form action="#" onsubmit="return false;">
+            <b>Save to Browser</b>
+            <br /><br />
+            Save Name: <input type="text" name="name" id="save_name"
+                        style="width: 200px" />
+          </form>
+          <hr />
+          <div>
+            <b>Download to Local Disk</b>
+            <br /><br />
+            <a id="local_save_link" class="button">Download</a>
+          </div>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" onclick="doSave()" aria-label="Save disk locally">Save</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="manage-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="manage-modal-title">
+            Manage Local Saves
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="manage-modal-content">
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="http-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="http-modal-title">
+            Load URL
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="http-modal-content">
+          <form action="#">
+            <input type="text" id="http_url" style="width: 500px"/>
+          </form>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">OK</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="load-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Load Disk">
+        <header class="modal__header">
+          <span class="modal__title" id="load-modal-title">
+            Load Disk
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="load-modal-content">
+          <table>
+            <tr>
+              <td>
+                <select id="category_select" multiple="multiple"
+                        class="ui-widget ui-state-default"
+                        onchange="selectCategory(event)" >
+                </select>
+              </td>
+              <td>
+                <select id="disk_select" multiple="multiple"
+                        class="ui-widget ui-state-default"
+                        onchange="selectDisk(event)"
+                        ondblclick="clickDisk(event)">
+                </select>
+              </td>
+            </tr>
+          </table>
+          <form action="#">
+            <input type="file" id="local_file" />
+          </form>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Cancel</button>
+          <button class="modal__btn" onclick="doLoad()" aria-label="Open the selected disk">Open</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal" id="printer-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="Printer">
+        <header class="modal__header">
+          <span class="modal__title" id="printer-modal-title">
+              Printer
+          </span>
+          <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+          </button>
+        </header>
+        <main class="modal__content" id="printer-modal-content">
+          <div class="paper"></div>
+        </main>
+        <footer class="modal__footer">
+          <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
+        </footer>
+      </div>
+    </div>
+  </div>
+  <script src="dist/main2e.js"></script>
 </body>
 </html>
diff --git a/css/apple2.css b/css/apple2.css
index 4a96f47..b6ec873 100644
--- a/css/apple2.css
+++ b/css/apple2.css
@@ -216,11 +216,104 @@ canvas {
     color: #000;
 }
 
-#load select {
+#load-modal select {
     width: 250px;
     height: 300px;
 }
 
+.modal {
+    display: none;
+}
+
+.modal.is-open {
+    display: block;
+}
+
+.modal__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal__container {
+    background-color: #c4c1a0;
+    padding: 10px;
+    max-height: 100vh;
+    border-radius: 4px;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.modal__header {
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+    align-items: center;
+    background: #44372C;
+    color: #fff;
+    padding: 5px 11px;
+    border: 1px outset #66594E;
+    border-radius: 3px;
+}
+
+.modal__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 1.25;
+    color: #fff;
+    box-sizing: border-box;
+}
+
+.modal__close, .modal__close:active, .modal__close:hover {
+    background: transparent;
+    padding: 3px;
+}
+
+.modal__header .modal__close:before {
+    content: "\2715";
+}
+
+.modal__content {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    line-height: 1.5;
+    color: #000;
+}
+
+.modal__footer {
+    text-align: right;
+}
+
+button {
+    background: #44372C;
+    color: #fff;
+    padding: 5px 11px;
+    border: 1px outset #66594E;
+    border-radius: 3px;
+}
+
+button:hover {
+    background-color: #55473D;
+    border: 1px outset #66594E;
+}
+
+button:active {
+    background-color: #22150A;
+    border: 1px outset #44372C;
+}
+
+button:focus {
+    outline: none;
+}
+
 #keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -472,7 +565,7 @@ canvas {
   width: 100%;
 }
 
-.standalone #header, .standalone #social {
+.standalone #header {
     display: none;
 }
 
@@ -480,11 +573,25 @@ canvas {
     font-family: courier;
 }
 
-#options {
-  line-height: 1.75em;
-  height: auto !important;
+#options-modal {
+    width: 300px;
+    font-size: 11px;
+    line-height: 1.75em;
 }
 
-#options li {
+#options-modal h3 {
+    font-size: 13px;
+}
+
+#options-modal li {
     list-style-type: none;
 }
+
+.paper {
+    width: 640px;
+    height: 480px;
+    overflow: auto;
+    background-color: white;
+    color: black;
+    font-family: monospace;
+}
diff --git a/js/cards/disk2.js b/js/cards/disk2.js
index 44124d6..27d3f78 100644
--- a/js/cards/disk2.js
+++ b/js/cards/disk2.js
@@ -12,6 +12,8 @@
 import { base64_decode, base64_encode } from '../base64';
 import { bytify, debug } from '../util';
 
+export const DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
+
 export default function DiskII(io, slot, callbacks)
 {
     slot = slot || 6;
diff --git a/js/main2.js b/js/main2.js
index c220099..6b8806b 100644
--- a/js/main2.js
+++ b/js/main2.js
@@ -1,3 +1,5 @@
+import MicroModal from 'micromodal';
+
 import Apple2IO from './apple2io';
 import ApplesoftDump from './applesoft/decompiler';
 import { HiresPage, LoresPage, VideoModes } from './canvas';
@@ -7,12 +9,13 @@ import RAM from './ram';
 import { debug, gup, hup } from './util';
 
 import Audio from './ui/audio';
+import DriveLights from './ui/drive_lights';
 import { gamepad, configGamepad, initGamepad, processGamepad } from './ui/gamepad';
 import KeyBoard from './ui/keyboard';
 import Printer from './ui/printer';
-import Tape from './ui/tape';
+import Tape, { TAPE_TYPES } from './ui/tape';
 
-import DiskII from './cards/disk2';
+import DiskII, { DISK_TYPES } from './cards/disk2';
 import LanguageCard from './cards/langcard';
 import Parallel from './cards/parallel';
 import RAMFactor from './cards/ramfactor';
@@ -46,86 +49,11 @@ var TRACE = false;
 var MAX_TRACE = 256;
 var trace = [];
 
-/*
- * Page viewer
- */
-
-/*
-function PageDebug(page)
-{
-    var _page = page;
-
-    function _init() {
-        var r, c;
-        var row = $('<tr />').appendTo('#page' + toHex(_page));
-        $('<th>\\</th>').appendTo(row);
-        for (c = 0; c < 16; c++) {
-            $('<th>' + toHex(c) + '</th>').appendTo(row);
-        }
-        for (r = 0; r < 16; r++) {
-            row = $('<tr />').appendTo('#page' + toHex(_page));
-            $('<th>' + toHex(r * 16) + '</th>').appendTo(row);
-            for (c = 0; c < 16; c++) {
-                $('<td>--</td>').appendTo(row).attr('id', 'page' + toHex(_page) + '-' + toHex(r * 16 + c));
-            }
-        }
-    }
-
-    _init();
-
-    return {
-        start: function() { return _page; },
-        end: function() { return _page; },
-        read: null,
-        write: function(page, off, val) {
-            $('#page' + toHex(page) + '-' + toHex(off)).text(toHex(val));
-        }
-    };
-}
-*/
-
 var disk_categories = {'Local Saves': []};
 var disk_sets = {};
 var disk_cur_name = [];
 var disk_cur_cat = [];
 
-function DriveLights()
-{
-    return {
-        driveLight: function(drive, on) {
-            $('#disk' + drive).css('background-image',
-                on ? 'url(css/red-on-16.png)' :
-                    'url(css/red-off-16.png)');
-        },
-        dirty: function() {
-            // $('#disksave' + drive).button('option', 'disabled', !dirty);
-        },
-        label: function(drive, label) {
-            if (label) {
-                $('#disklabel' + drive).text(label);
-            }
-            return $('#disklabel' + drive).text();
-        },
-        getState: function() {
-            return {
-                disks: [
-                    this.label(1),
-                    this.label(2)
-                ]
-            };
-        },
-        setState: function(state) {
-            if (state && state.disks) {
-                this.label(1, state.disks[0].label);
-                this.label(2, state.disks[1].label);
-            }
-        }
-    };
-}
-
-var DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
-var TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
-
 var _currentDrive = 1;
 
 window.openLoad = function(drive, event)
@@ -135,9 +63,10 @@ window.openLoad = function(drive, event)
         openLoadHTTP(drive);
     } else {
         if (disk_cur_cat[drive]) {
-            $('#category_select').val(disk_cur_cat[drive]).change();
+            document.querySelector('#category_select').value = disk_cur_cat[drive];
+            window.selectCategory();
         }
-        $('#load').dialog('open');
+        MicroModal.show('load-modal');
     }
 };
 
@@ -147,17 +76,17 @@ window.openSave = function(drive, event)
 
     var mimetype = 'application/octet-stream';
     var data = disk2.getBinary(drive);
-    var a = $('#local_save_link');
+    var a = document.querySelector('#local_save_link');
 
     var blob = new Blob([data], { 'type': mimetype });
-    a.attr('href', window.URL.createObjectURL(blob));
-    a.attr('download', drivelights.label(drive) + '.dsk');
+    a.href = window.URL.createObjectURL(blob);
+    a.download = drivelights.label(drive) + '.dsk';
 
     if (event.metaKey) {
         dumpDisk(drive);
     } else {
-        $('#save_name').val(drivelights.label(drive));
-        $('#save').dialog('open');
+        document.querySelector('#save_name').value = drivelights.label(drive);
+        MicroModal.show('save-modal');
     }
 };
 
@@ -213,32 +142,29 @@ var loading = false;
 
 function loadAjax(drive, url) {
     loading = true;
-    $('#loading').dialog('open');
+    MicroModal.show('loading-modal');
 
-    $.ajax({
-        url: url,
-        dataType: 'json',
-        modifiedSince: true,
-        error: function(xhr, status, error) {
-            alert(error || status);
-            $('#loading').dialog('close');
-            loading = false;
-        },
-        success: function(data) {
-            if (data.type == 'binary') {
-                loadBinary(drive, data);
-            } else if ($.inArray(data.type, DISK_TYPES) >= 0) {
-                loadDisk(drive, data);
-            }
-            initGamepad(data.gamepad);
-            $('#loading').dialog('close');
-            loading = false;
+    fetch(url).then(function(response) {
+        return response.json();
+    }).then(function(data) {
+        if (data.type == 'binary') {
+            loadBinary(drive, data);
+        } else if (DISK_TYPES.includes(data.type)) {
+            loadDisk(drive, data);
         }
+        initGamepad(data.gamepad);
+        MicroModal.close('loading-modal');
+        loading = false;
+    }).catch(function(error) {
+        window.alert(error || status);
+        MicroModal.close('loading-modal');
+        loading = false;
     });
 }
 
-function doLoad() {
-    var urls = $('#disk_select').val(), url;
+window.doLoad = function doLoad() {
+    MicroModal.close('load-modal');
+    var urls = document.querySelector('#disk_select').value, url;
     if (urls && urls.length) {
         if (typeof(urls) == 'string') {
             url = urls;
@@ -247,12 +173,12 @@ function doLoad() {
         }
     }
 
-    var files = $('#local_file').prop('files');
+    var files = document.querySelector('#local_file').files;
     if (files.length == 1) {
         doLoadLocal(_currentDrive, files[0]);
     } else if (url) {
         var filename;
-        $('#load').dialog('close');
+        MicroModal.close('load-modal');
         if (url.substr(0,6) == 'local:') {
             filename = url.substr(6);
             if (filename == '__manage') {
@@ -270,16 +196,15 @@ function doLoad() {
             var parts = document.location.hash.split('|');
             parts[_currentDrive - 1] = filename;
             document.location.hash = parts.join('|');
-            loadAjax(_currentDrive, url);
         }
     }
-}
+};
 
-function doSave() {
-    var name = $('#save_name').val();
+window.doSave = function doSave() {
+    var name = document.querySelector('#save_name').value;
     saveLocalStorage(_currentDrive, name);
-    $('#save').dialog('close');
-}
+    MicroModal.close('save-modal');
+};
 
 window.doDelete = function(name) {
     if (window.confirm('Delete ' + name + '?')) {
@@ -290,15 +215,15 @@ window.doDelete = function(name) {
 function doLoadLocal(drive, file) {
     var parts = file.name.split('.');
     var ext = parts[parts.length - 1].toLowerCase();
-    if ($.inArray(ext, DISK_TYPES) >= 0) {
+    if (DISK_TYPES.includes(ext)) {
         doLoadLocalDisk(drive, file);
     } else if ($.inArray(ext, TAPE_TYPES) >= 0) {
         tape.doLoadLocalTape(file, function() {
-            $('#load').dialog('close');
+            MicroModal.close('load-modal');
         });
     } else {
         window.alert('Unknown file type: ' + ext);
-        $('#load').dialog('close');
+        MicroModal.close('load-modal');
     }
 }
 
@@ -310,7 +235,7 @@ function doLoadLocalDisk(drive, file) {
         var name = parts.join('.');
         if (disk2.setBinary(drive, name, ext, this.result)) {
             drivelights.label(drive, name);
-            $('#load').dialog('close');
+            MicroModal.close('load-modal');
             initGamepad();
         }
     };
@@ -318,7 +243,7 @@ function doLoadLocalDisk(drive, file) {
 }
 
 function doLoadHTTP(drive, _url) {
-    var url = _url || $('#http_url').val();
+    var url = _url || document.querySelector('#http_url').value;
     if (url) {
         var req = new XMLHttpRequest();
         req.open('GET', url, true);
@@ -332,7 +257,7 @@ function doLoadHTTP(drive, _url) {
             var name = decodeURIComponent(fileParts.join('.'));
             if (disk2.setBinary(drive, name, ext, req.response)) {
                 drivelights.label(drive, name);
-                $('#http_load').dialog('close');
+                MicroModal.close('http-modal');
                 initGamepad();
             }
         };
@@ -342,11 +267,11 @@ function doLoadHTTP(drive, _url) {
 
 function openLoadHTTP(drive) {
     _currentDrive = parseInt(drive, 10);
-    $('#http_load').dialog('open');
+    MicroModal.show('http-modal');
 }
 
 function openManage() {
-    $('#manage').dialog('open');
+    MicroModal.show('manage-modal');
 }
 
 var prefs = new Prefs();
@@ -423,7 +348,7 @@ var io = new Apple2IO(cpu, vm);
 var keyboard = new KeyBoard(cpu, io);
 var audio = new Audio(io);
 var tape = new Tape(io);
-var printer = new Printer($('#printer .paper'));
+var printer = new Printer('#printer-modal .paper');
 
 var lc = new LanguageCard(io, 0, rom);
 var parallel = new Parallel(io, 1, printer);
@@ -460,11 +385,11 @@ function updateKHz() {
     if (window.showFPS) {
         delta = renderedFrames - lastFrames;
         var fps = parseInt(delta/(ms/1000), 10);
-        $('#khz').text( fps + 'fps');
+        document.querySelector('#khz').innerText = fps + 'fps';
     } else {
         delta = cycles - lastCycles;
         var khz = parseInt(delta/ms);
-        $('#khz').text( khz + 'KHz');
+        document.querySelector('#khz').innerText = khz + 'KHz';
     }
 
     startTime = now;
@@ -473,13 +398,15 @@ function updateKHz() {
 }
 
 window.updateSound = function updateSound() {
-    var on = $('#enable_sound').prop('checked');
-    var label = $('#toggle-sound i');
+    var on = document.querySelector('#enable_sound').checked;
+    var label = document.querySelector('#toggle-sound i');
     audio.enable(on);
     if (on) {
-        label.removeClass('fa-volume-off').addClass('fa-volume-up');
+        label.classList.remove('fa-volume-off');
+        label.classList.add('fa-volume-up');
     } else {
-        label.removeClass('fa-volume-up').addClass('fa-volume-off');
+        label.classList.remove('fa-volume-up');
+        label.classList.add('fa-volume-off');
     }
 };
 
@@ -518,7 +445,7 @@ var accelerated = false;
 
 window.updateCPU = function updateCPU()
 {
-    accelerated = $('#accelerator_toggle').prop('checked');
+    accelerated = document.querySelector('#accelerator_toggle').checked;
     kHz = accelerated ? 4092 : 1023;
     io.updateHz(kHz * 1000);
     if (runTimer) {
@@ -686,29 +613,31 @@ function loadBinary(bin) {
 }
 
 window.selectCategory = function() {
-    $('#disk_select').empty();
-    var cat = disk_categories[$('#category_select').val()];
+    document.querySelector('#disk_select').innerHTML = '';
+    var cat = disk_categories[document.querySelector('#category_select').value];
     if (cat) {
         for (var idx = 0; idx < cat.length; idx++) {
             var file = cat[idx], name = file.name;
             if (file.disk) {
                 name += ' - ' + file.disk;
             }
-            var option = $('<option />').val(file.filename).text(name)
-                .appendTo('#disk_select');
+            var option = document.createElement('option');
+            option.value = file.filename;
+            option.innerText = name;
+            document.querySelector('#disk_select').append(option);
             if (disk_cur_name[_currentDrive] == name) {
-                option.attr('selected', 'selected');
+                option.selected = true;
             }
         }
     }
 };
 
 window.selectDisk = function() {
-    $('#local_file').val('');
+    document.querySelector('#local_file').value = '';
 };
 
 window.clickDisk = function() {
-    doLoad();
+    window.doLoad();
 };
 
 function loadDisk(drive, disk) {
@@ -742,7 +671,7 @@ function updateLocalStorage() {
     }
 
     cat = disk_categories['Local Saves'] = [];
-    $('#manage').empty();
+    document.querySelector('#manage-modal-content').innerHTML = '';
 
     names.forEach(function(name) {
         cat.push({
@@ -750,13 +679,12 @@ function updateLocalStorage() {
             'name': name,
             'filename': 'local:' + name
         });
-        $('#manage').append(
+        document.querySelector('#manage-modal-content').innerHTML =
             '<span class="local_save">' +
             name +
             ' <a href="#" onclick="doDelete(\'' +
             name +
-            '\')">Delete</a><br /></span>'
-        );
+            '\')">Delete</a><br /></span>';
     });
     cat.push({
         'category': 'Local Saves',
@@ -832,9 +760,17 @@ function _keydown(evt) {
     }
     if (evt.keyCode === 112) { // F1 - Reset
         cpu.reset();
+        evt.preventDefault(); // prevent launching help
     } else if (evt.keyCode === 113) { // F2 - Full Screen
         var elem = document.getElementById('screen');
-        if (document.webkitCancelFullScreen) {
+        if (evt.shiftKey) { // Full window, but not full screen
+            document.querySelector('#display').classList.toggle('zoomwindow');
+            document.querySelector('#display > div').classList.toggle('overscan', 'flexbox-centering');
+            document.querySelector('#screen').classList.toggle('maxhw');
+            document.querySelector('#header').classList.toggle('hidden');
+            document.querySelector('.inset').classList.toggle('hidden');
+            document.querySelector('#reset').classList.toggle('hidden');
+        } else if (document.webkitCancelFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
             } else {
@@ -876,8 +812,8 @@ function _keyup(evt) {
 }
 
 window.updateScreen = function updateScreen() {
-    var green = $('#green_screen').prop('checked');
-    var scanlines = $('#show_scanlines').prop('checked');
+    var green = document.querySelector('#green_screen').checked;
+    var scanlines = document.querySelector('#show_scanlines').checked;
 
     vm.green(green);
     vm.scanlines(scanlines);
@@ -889,10 +825,10 @@ var flipY = false;
 var swapXY = false;
 
 window.updateJoystick = function() {
-    disableMouseJoystick = $('#disable_mouse').prop('checked');
-    flipX = $('#flip_x').prop('checked');
-    flipY = $('#flip_y').prop('checked');
-    swapXY = $('#swap_x_y').prop('checked');
+    disableMouseJoystick = document.querySelector('#disable_mouse').checked;
+    flipX = document.querySelector('#flip_x').checked;
+    flipY = document.querySelector('#flip_y').checked;
+    swapXY = document.querySelector('#swap_x_y').checked;
     configGamepad(flipX, flipY);
 
     if (disableMouseJoystick) {
@@ -907,10 +843,10 @@ function _mousemove(evt) {
         return;
     }
 
-    var s = $('#screen');
-    var offset = s.offset();
-    var x = (evt.pageX - offset.left) / s.width(),
-        y = (evt.pageY - offset.top) / s.height(),
+    var s = document.querySelector('#screen');
+    var offset = { top: s.clientTop, left: s.clientLeft };
+    var x = (evt.pageX - offset.left) / s.clientWidth,
+        y = (evt.pageY - offset.top) / s.clientHeight,
         z = x;
 
     if (swapXY) {
@@ -923,79 +859,87 @@ function _mousemove(evt) {
 }
 
 window.pauseRun = function() {
-    var label = $('#pause-run i');
+    var label = document.querySelector('#pause-run i');
     if (paused) {
         run();
-        label.removeClass('fa-play').addClass('fa-pause');
+        label.classList.remove('fa-play');
+        label.classList.add('fa-pause');
     } else {
         stop();
-        label.removeClass('fa-pause').addClass('fa-play');
+        label.classList.remove('fa-pause');
+        label.classList.add('fa-play');
     }
     paused = !paused;
 };
 
 window.toggleSound = function() {
-    var enableSound = $('#enable_sound');
-    enableSound.prop('checked', !enableSound.prop('checked'));
+    var enableSound = document.querySelector('#enable_sound');
+    enableSound.checked = !enableSound.checked;
     window.updateSound();
 };
 
-$(function() {
-    hashtag = document.location.hash;
+window.openOptions = function () {
+    MicroModal.show('options-modal');
+};
 
-    $('button,input[type=button],a.button').button().focus(function() {
-        // Crazy hack required by Chrome
-        var self = this;
-        window.setTimeout(function() {
-            self.blur();
-        }, 1);
-    });
+window.openPrinterModal = function () {
+    MicroModal.show('printer-modal');
+};
+
+MicroModal.init();
+
+document.addEventListener('DOMContentLoaded', function() {
+    hashtag = document.location.hash;
 
     /*
      * Input Handling
      */
 
-    $(window)
-        .keydown(_keydown)
-        .keyup(_keyup)
-        .mousedown(function() { audio.autoStart(); });
+    window.addEventListener('keydown', _keydown);
+    window.addEventListener('keyup', _keyup);
+    window.addEventListener('mousedown', function() { audio.autoStart(); });
 
-    $('canvas')
-        .mousedown(function(evt) {
+    document.querySelectorAll('canvas').forEach(function(canvas) {
+        canvas.addEventListener('mousedown', function(evt) {
             if (!gamepad) {
                 io.buttonDown(evt.which == 1 ? 0 : 1);
             }
             evt.preventDefault();
-        })
-        .mouseup(function(evt) {
+        });
+        canvas.addEventListener('mouseup', function(evt) {
             if (!gamepad) {
                 io.buttonUp(evt.which == 1 ? 0 : 1);
             }
-        })
-        .bind('contextmenu', function(evt) { evt.preventDefault(); });
+        });
+    });
 
-    $('body').mousemove(_mousemove);
+    document.body.addEventListener('mousemove', _mousemove);
 
-    $('input,textarea')
-        .focus(function() { focused = true; })
-        .blur(function() { focused = false; });
+    document.querySelectorAll('input,textarea').forEach(function(input) {
+        input.addEventListener('input', function() { focused = true; });
+        input.addEventListener('blur', function() { focused = false; });
+    });
 
     keyboard.create('#keyboard');
 
     if (prefs.havePrefs()) {
-        $('#options input[type=checkbox]').each(function() {
-            var val = prefs.readPref(this.id);
-            if (val)
-                this.checked = JSON.parse(val);
-        }).change(function() {
-            prefs.writePref(this.id, JSON.stringify(this.checked));
+        document.querySelectorAll('#options-modal input[type=checkbox]').forEach(function(el) {
+            var val = prefs.readPref(el.id);
+            if (val) {
+                el.checked = JSON.parse(val);
+            }
+            el.addEventListener('change', function() {
+                prefs.writePref(el.id, JSON.stringify(el.checked));
+            });
         });
-        $('#options select').each(function() {
-            var val = prefs.readPref(this.id);
-            if (val)
-                this.value = val;
-        }).change(function() {
-            prefs.writePref(this.id, this.value);
+        document.querySelectorAll('#options-modal select').forEach(function(el) {
+            var val = prefs.readPref(el.id);
+            if (val) {
+                el.value = val;
+            }
+            el.addEventListener('change', function() {
+                prefs.writePref(el.id, el.value);
+            });
         });
     }
 
@@ -1005,54 +949,12 @@ $(function() {
     window.updateScreen();
     window.updateCPU();
 
-    var cancel = function() { $(this).dialog('close'); };
-    $('#loading').dialog({ autoOpen: false, modal: true });
-    $('#options').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Close': cancel }
-    });
-    $('#load').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 540,
-        buttons: {'Cancel': cancel, 'Load': doLoad }
-    });
-    $('#save').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Cancel': cancel, 'Save': doSave }
-    });
-    $('#manage').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Close': cancel }
-    });
-    $('#printer').dialog({
-        autoOpen: false,
-        modal: true,
-        resizeable: false,
-        width: 570,
-        buttons: {
-            'Clear': printer.clear,
-            'Close': cancel
-        }
-    });
-    $('#http_load').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 530,
-        buttons: {'Cancel': cancel, 'OK': doLoadHTTP }
-    });
-
     if (window.localStorage !== undefined) {
-        $('.disksave').show();
+        document.querySelectorAll('.disksave').forEach(function (el) { el.style.display = 'inline-block';});
     }
 
     var oldcat = '';
+    var option;
     for (var idx = 0; idx < window.disk_index.length; idx++) {
         var file = window.disk_index[idx];
         var cat = file.category;
@@ -1061,7 +963,11 @@ $(function() {
             continue;
         }
         if (cat != oldcat) {
-            $('<option />').val(cat).text(cat).appendTo('#category_select');
+            option = document.createElement('option');
+            option.value = cat;
+            option.innerText = cat;
+            document.querySelector('#category_select').append(option);
+
             disk_categories[cat] = [];
             oldcat = cat;
         }
@@ -1073,7 +979,9 @@ $(function() {
             disk_sets[name].push(file);
         }
     }
-    $('<option/>').text('Local Saves').appendTo('#category_select');
+    option = document.createElement('option');
+    option.innerText = 'Local Saves';
+    document.querySelector('#category_select').append(option);
 
     updateLocalStorage();
     initGamepad();
@@ -1085,23 +993,21 @@ $(function() {
         processHash(hash);
     }
 
-    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
-        $('select').removeAttr('multiple').css('height', 'auto');
-    }
-
     if (navigator.standalone) {
-        $('body').addClass('standalone');
+        document.body.classList.add('standalone');
     }
 
-    $('.key-REPT').click(function() {
-        $('#keyboard').hide();
-        $('#textarea').show();
-        $('#text_input').focus();
+    var reptKey = document.querySelector('.key-REPT');
+    reptKey.addEventListener('click', function() {
+        document.querySelector('#keyboard').style.display = 'none';
+        document.querySelector('#textarea').style.display = 'block';
+        document.querySelector.focus();
     });
-    $('#text_input').keydown(function() {
-        focused = $('#buffering').prop('checked');
-    }).keyup(function() {
-        focused = $('#buffering').prop('checked');
+    document.querySelector('#text_input').addEventListener('keydown', function() {
+        focused = document.querySelector('#buffering').checked;
+    });
+    document.querySelector('#text_input').addEventListener('keyup', function() {
+        focused = document.querySelector('#buffering').checked;
     });
 
     run();
diff --git a/js/main2e.js b/js/main2e.js
index 4eda2f1..a7d4193 100644
--- a/js/main2e.js
+++ b/js/main2e.js
@@ -1,3 +1,5 @@
+import MicroModal from 'micromodal';
+
 import Apple2IO from './apple2io';
 import ApplesoftDump from './applesoft/decompiler';
 import { HiresPage, LoresPage, VideoModes } from './canvas';
@@ -7,12 +9,13 @@ import Prefs from './prefs';
 import { debug, gup, hup } from './util';
 
 import Audio from './ui/audio';
+import DriveLights from './ui/drive_lights';
 import { gamepad, configGamepad, initGamepad, processGamepad } from './ui/gamepad';
 import KeyBoard from './ui/keyboard';
 import Printer from './ui/printer';
-import Tape from './ui/tape';
+import Tape, { TAPE_TYPES } from './ui/tape';
 
-import DiskII from './cards/disk2';
+import DiskII, { DISK_TYPES } from './cards/disk2';
 import Parallel from './cards/parallel';
 import RAMFactor from './cards/ramfactor';
 import Thunderclock from './cards/thunderclock';
@@ -41,86 +44,11 @@ var TRACE = false;
 var MAX_TRACE = 256;
 var trace = [];
 
-/*
- * Page viewer
- */
-
-/*
-function PageDebug(page)
-{
-    var _page = page;
-
-    function _init() {
-        var r, c;
-        var row = $('<tr />').appendTo('#page' + toHex(_page));
-        $('<th>\\</th>').appendTo(row);
-        for (c = 0; c < 16; c++) {
-            $('<th>' + toHex(c) + '</th>').appendTo(row);
-        }
-        for (r = 0; r < 16; r++) {
-            row = $('<tr />').appendTo('#page' + toHex(_page));
-            $('<th>' + toHex(r * 16) + '</th>').appendTo(row);
-            for (c = 0; c < 16; c++) {
-                $('<td>--</td>').appendTo(row).attr('id', 'page' + toHex(_page) + '-' + toHex(r * 16 + c));
-            }
-        }
-    }
-
-    _init();
-
-    return {
-        start: function() { return _page; },
-        end: function() { return _page; },
-        read: null,
-        write: function(page, off, val) {
-            $('#page' + toHex(page) + '-' + toHex(off)).text(toHex(val));
-        }
-    };
-}
-*/
-
 var disk_categories = {'Local Saves': []};
 var disk_sets = {};
 var disk_cur_name = [];
 var disk_cur_cat = [];
 
-function DriveLights()
-{
-    return {
-        driveLight: function(drive, on) {
-            $('#disk' + drive).css('background-image',
-                on ? 'url(css/red-on-16.png)' :
-                    'url(css/red-off-16.png)');
-        },
-        dirty: function() {
-            // $('#disksave' + drive).button('option', 'disabled', !dirty);
-        },
-        label: function(drive, label) {
-            if (label) {
-                $('#disklabel' + drive).text(label);
-            }
-            return $('#disklabel' + drive).text();
-        },
-        getState: function() {
-            return {
-                disks: [
-                    this.label(1),
-                    this.label(2)
-                ]
-            };
-        },
-        setState: function(state) {
-            if (state && state.disks) {
-                this.label(1, state.disks[0].label);
-                this.label(2, state.disks[1].label);
-            }
-        }
-    };
-}
-
-var DISK_TYPES = ['dsk','d13','do','po','raw','nib','2mg'];
-var TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
-
 var _currentDrive = 1;
 
 window.openLoad = function(drive, event)
@@ -130,9 +58,10 @@ window.openLoad = function(drive, event)
         openLoadHTTP(drive);
     } else {
         if (disk_cur_cat[drive]) {
-            $('#category_select').val(disk_cur_cat[drive]).change();
+            document.querySelector('#category_select').value = disk_cur_cat[drive];
+            window.selectCategory();
         }
-        $('#load').dialog('open');
+        MicroModal.show('load-modal');
     }
 };
 
@@ -142,17 +71,17 @@ window.openSave = function(drive, event)
 
     var mimetype = 'application/octet-stream';
     var data = disk2.getBinary(drive);
-    var a = $('#local_save_link');
+    var a = document.querySelector('#local_save_link');
 
     var blob = new Blob([data], { 'type': mimetype });
-    a.attr('href', window.URL.createObjectURL(blob));
-    a.attr('download', drivelights.label(drive) + '.dsk');
+    a.href = window.URL.createObjectURL(blob);
+    a.download = drivelights.label(drive) + '.dsk';
 
     if (event.metaKey) {
         dumpDisk(drive);
     } else {
-        $('#save_name').val(drivelights.label(drive));
-        $('#save').dialog('open');
+        document.querySelector('#save_name').value = drivelights.label(drive);
+        MicroModal.show('save-modal');
     }
 };
 
@@ -191,6 +120,16 @@ window.handleDrop = function(drive, event) {
     } else if (dt.files.length == 2) {
         doLoadLocal(1, dt.files[0]);
         doLoadLocal(2, dt.files[1]);
+    } else {
+        for (var idx = 0; idx < dt.items.length; idx++) {
+            if (dt.items[idx].type === 'text/uri-list') {
+                dt.items[idx].getAsString(function(url) {
+                    var parts = document.location.hash.split('|');
+                    parts[drive - 1] = url;
+                    document.location.hash = parts.join('|');
+                });
+            }
+        }
     }
 };
 
@@ -198,32 +137,29 @@ var loading = false;
 
 function loadAjax(drive, url) {
     loading = true;
-    $('#loading').dialog('open');
+    MicroModal.show('loading-modal');
 
-    $.ajax({
-        url: url,
-        dataType: 'json',
-        modifiedSince: true,
-        error: function(xhr, status, error) {
-            alert(error || status);
-            $('#loading').dialog('close');
-            loading = false;
-        },
-        success: function(data) {
-            if (data.type == 'binary') {
-                loadBinary(drive, data);
-            } else if ($.inArray(data.type, DISK_TYPES) >= 0) {
-                loadDisk(drive, data);
-            }
-            initGamepad(data.gamepad);
-            $('#loading').dialog('close');
-            loading = false;
+    fetch(url).then(function(response) {
+        return response.json();
+    }).then(function(data) {
+        if (data.type == 'binary') {
+            loadBinary(drive, data);
+        } else if (DISK_TYPES.includes(data.type)) {
+            loadDisk(drive, data);
         }
+        initGamepad(data.gamepad);
+        MicroModal.close('loading-modal');
+        loading = false;
+    }).catch(function(error) {
+        window.alert(error || status);
+        MicroModal.close('loading-modal');
+        loading = false;
     });
 }
 
-function doLoad() {
-    var urls = $('#disk_select').val(), url;
+window.doLoad = function doLoad() {
+    MicroModal.close('load-modal');
+    var urls = document.querySelector('#disk_select').value, url;
     if (urls && urls.length) {
         if (typeof(urls) == 'string') {
             url = urls;
@@ -232,12 +168,12 @@ function doLoad() {
         }
     }
 
-    var files = $('#local_file').prop('files');
+    var files = document.querySelector('#local_file').files;
     if (files.length == 1) {
         doLoadLocal(_currentDrive, files[0]);
     } else if (url) {
         var filename;
-        $('#load').dialog('close');
+        MicroModal.close('load-modal');
         if (url.substr(0,6) == 'local:') {
             filename = url.substr(6);
             if (filename == '__manage') {
@@ -255,16 +191,15 @@ function doLoad() {
             var parts = document.location.hash.split('|');
             parts[_currentDrive - 1] = filename;
             document.location.hash = parts.join('|');
-            loadAjax(_currentDrive, url);
         }
     }
-}
+};
 
-function doSave() {
-    var name = $('#save_name').val();
+window.doSave = function doSave() {
+    var name = document.querySelector('#save_name').value;
     saveLocalStorage(_currentDrive, name);
-    $('#save').dialog('close');
-}
+    MicroModal.close('save-modal');
+};
 
 window.doDelete = function(name) {
     if (window.confirm('Delete ' + name + '?')) {
@@ -275,15 +210,15 @@ window.doDelete = function(name) {
 function doLoadLocal(drive, file) {
     var parts = file.name.split('.');
     var ext = parts[parts.length - 1].toLowerCase();
-    if ($.inArray(ext, DISK_TYPES) >= 0) {
+    if (DISK_TYPES.includes(ext)) {
         doLoadLocalDisk(drive, file);
     } else if ($.inArray(ext, TAPE_TYPES) >= 0) {
         tape.doLoadLocalTape(file, function() {
-            $('#load').dialog('close');
+            MicroModal.close('load-modal');
         });
     } else {
         window.alert('Unknown file type: ' + ext);
-        $('#load').dialog('close');
+        MicroModal.close('load-modal');
     }
 }
 
@@ -295,7 +230,7 @@ function doLoadLocalDisk(drive, file) {
         var name = parts.join('.');
         if (disk2.setBinary(drive, name, ext, this.result)) {
             drivelights.label(drive, name);
-            $('#load').dialog('close');
+            MicroModal.close('load-modal');
             initGamepad();
         }
     };
@@ -303,7 +238,7 @@ function doLoadLocalDisk(drive, file) {
 }
 
 function doLoadHTTP(drive, _url) {
-    var url = _url || $('#http_url').val();
+    var url = _url || document.querySelector('#http_url').value;
     if (url) {
         var req = new XMLHttpRequest();
         req.open('GET', url, true);
@@ -317,7 +252,7 @@ function doLoadHTTP(drive, _url) {
             var name = decodeURIComponent(fileParts.join('.'));
             if (disk2.setBinary(drive, name, ext, req.response)) {
                 drivelights.label(drive, name);
-                $('#http_load').dialog('close');
+                MicroModal.close('http-modal');
                 initGamepad();
             }
         };
@@ -327,11 +262,11 @@ function doLoadHTTP(drive, _url) {
 
 function openLoadHTTP(drive) {
     _currentDrive = parseInt(drive, 10);
-    $('#http_load').dialog('open');
+    MicroModal.show('http-modal');
 }
 
 function openManage() {
-    $('#manage').dialog('open');
+    MicroModal.show('manage-modal');
 }
 
 var prefs = new Prefs();
@@ -397,7 +332,7 @@ var io = new Apple2IO(cpu, vm);
 var keyboard = new KeyBoard(cpu, io, true);
 var audio = new Audio(io);
 var tape = new Tape(io);
-var printer = new Printer($('#printer .paper'));
+var printer = new Printer('#printer-modal .paper');
 
 var mmu = new MMU(cpu, vm, gr, gr2, hgr, hgr2, io, rom);
 
@@ -424,11 +359,11 @@ function updateKHz() {
     if (window.showFPS) {
         delta = renderedFrames - lastFrames;
         var fps = parseInt(delta/(ms/1000), 10);
-        $('#khz').text( fps + 'fps');
+        document.querySelector('#khz').innerText = fps + 'fps';
     } else {
         delta = cycles - lastCycles;
         var khz = parseInt(delta/ms);
-        $('#khz').text( khz + 'KHz');
+        document.querySelector('#khz').innerText = khz + 'KHz';
     }
 
     startTime = now;
@@ -436,14 +371,16 @@ function updateKHz() {
     lastFrames = renderedFrames;
 }
 
-window.updateSound = function() {
-    var on = $('#enable_sound').prop('checked');
-    var label = $('#toggle-sound i');
+window.updateSound = function updateSound() {
+    var on = document.querySelector('#enable_sound').checked;
+    var label = document.querySelector('#toggle-sound i');
     audio.enable(on);
     if (on) {
-        label.removeClass('fa-volume-off').addClass('fa-volume-up');
+        label.classList.remove('fa-volume-off');
+        label.classList.add('fa-volume-up');
     } else {
-        label.removeClass('fa-volume-up').addClass('fa-volume-off');
+        label.classList.remove('fa-volume-up');
+        label.classList.add('fa-volume-off');
     }
 };
 
@@ -480,9 +417,9 @@ window.step = function()
 
 var accelerated = false;
 
-window.updateCPU = function()
+window.updateCPU = function updateCPU()
 {
-    accelerated = $('#accelerator_toggle').prop('checked');
+    accelerated = document.querySelector('#accelerator_toggle').checked;
     kHz = accelerated ? 4092 : 1023;
     io.updateHz(kHz * 1000);
     if (runTimer) {
@@ -510,7 +447,6 @@ function run(pc) {
     var now, last = Date.now();
     var runFn = function() {
         now = Date.now();
-        renderedFrames++;
 
         var step = (now - last) * kHz, stepMax = kHz * ival;
         last = now;
@@ -543,7 +479,9 @@ function run(pc) {
             } else {
                 cpu.stepCycles(step);
             }
-            vm.blit();
+	    if (vm.blit()) {
+		renderedFrames++;
+	    }
             io.tick();
         }
 
@@ -635,29 +573,31 @@ function loadBinary(bin) {
 }
 
 window.selectCategory = function() {
-    $('#disk_select').empty();
-    var cat = disk_categories[$('#category_select').val()];
+    document.querySelector('#disk_select').innerHTML = '';
+    var cat = disk_categories[document.querySelector('#category_select').value];
     if (cat) {
         for (var idx = 0; idx < cat.length; idx++) {
             var file = cat[idx], name = file.name;
             if (file.disk) {
                 name += ' - ' + file.disk;
             }
-            var option = $('<option />').val(file.filename).text(name)
-                .appendTo('#disk_select');
+            var option = document.createElement('option');
+            option.value = file.filename;
+            option.innerText = name;
+            document.querySelector('#disk_select').append(option);
             if (disk_cur_name[_currentDrive] == name) {
-                option.attr('selected', 'selected');
+                option.selected = true;
             }
         }
     }
 };
 
 window.selectDisk = function() {
-    $('#local_file').val('');
+    document.querySelector('#local_file').value = '';
 };
 
 window.clickDisk = function() {
-    doLoad();
+    window.doLoad();
 };
 
 function loadDisk(drive, disk) {
@@ -691,7 +631,7 @@ function updateLocalStorage() {
     }
 
     cat = disk_categories['Local Saves'] = [];
-    $('#manage').empty();
+    document.querySelector('#manage-modal-content').innerHTML = '';
 
     names.forEach(function(name) {
         cat.push({
@@ -699,13 +639,12 @@ function updateLocalStorage() {
             'name': name,
             'filename': 'local:' + name
         });
-        $('#manage').append(
+        document.querySelector('#manage-modal-content').innerHTML =
             '<span class="local_save">' +
             name +
             ' <a href="#" onclick="doDelete(\'' +
             name +
-            '\')">Delete</a><br /></span>'
-        );
+            '\')">Delete</a><br /></span>';
     });
     cat.push({
         'category': 'Local Saves',
@@ -773,9 +712,7 @@ function processHash(hash) {
 window.reset = keyboard.reset;
 
 function _keydown(evt) {
-    audio.autoStart();
-
-    if (!focused) {
+    if (!focused && (!evt.metaKey || evt.ctrlKey)) {
         evt.preventDefault();
 
         var key = keyboard.mapKeyEvent(evt);
@@ -789,14 +726,12 @@ function _keydown(evt) {
     } else if (evt.keyCode === 113) { // F2 - Full Screen
         var elem = document.getElementById('screen');
         if (evt.shiftKey) { // Full window, but not full screen
-            $('#display').toggleClass('zoomwindow');
-            $('#display > div')
-                .toggleClass('overscan')
-                .toggleClass('flexbox-centering');
-            $('#screen').toggleClass('maxhw');
-            $('#header').toggleClass('hidden');
-            $('.inset').toggleClass('hidden');
-            $('#reset').toggleClass('hidden');
+            document.querySelector('#display').classList.toggle('zoomwindow');
+            document.querySelector('#display > div').classList.toggle('overscan', 'flexbox-centering');
+            document.querySelector('#screen').classList.toggle('maxhw');
+            document.querySelector('#header').classList.toggle('hidden');
+            document.querySelector('.inset').classList.toggle('hidden');
+            document.querySelector('#reset').classList.toggle('hidden');
         } else if (document.webkitCancelFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
@@ -854,9 +789,9 @@ function _keyup(evt) {
     }
 }
 
-window.updateScreen = function() {
-    var green = $('#green_screen').prop('checked');
-    var scanlines = $('#show_scanlines').prop('checked');
+window.updateScreen = function updateScreen() {
+    var green = document.querySelector('#green_screen').checked;
+    var scanlines = document.querySelector('#show_scanlines').checked;
 
     vm.green(green);
     vm.scanlines(scanlines);
@@ -868,10 +803,10 @@ var flipY = false;
 var swapXY = false;
 
 window.updateJoystick = function() {
-    disableMouseJoystick = $('#disable_mouse').prop('checked');
-    flipX = $('#flip_x').prop('checked');
-    flipY = $('#flip_y').prop('checked');
-    swapXY = $('#swap_x_y').prop('checked');
+    disableMouseJoystick = document.querySelector('#disable_mouse').checked;
+    flipX = document.querySelector('#flip_x').checked;
+    flipY = document.querySelector('#flip_y').checked;
+    swapXY = document.querySelector('#swap_x_y').checked;
     configGamepad(flipX, flipY);
 
     if (disableMouseJoystick) {
@@ -886,10 +821,10 @@ function _mousemove(evt) {
         return;
     }
 
-    var s = $('#screen');
-    var offset = s.offset();
-    var x = (evt.pageX - offset.left) / s.width(),
-        y = (evt.pageY - offset.top) / s.height(),
+    var s = document.querySelector('#screen');
+    var offset = { top: s.clientTop, left: s.clientLeft };
+    var x = (evt.pageX - offset.left) / s.clientWidth,
+        y = (evt.pageY - offset.top) / s.clientHeight,
         z = x;
 
     if (swapXY) {
@@ -902,79 +837,87 @@ function _mousemove(evt) {
 }
 
 window.pauseRun = function() {
-    var label = $('#pause-run i');
+    var label = document.querySelector('#pause-run i');
     if (paused) {
         run();
-        label.removeClass('fa-play').addClass('fa-pause');
+        label.classList.remove('fa-play');
+        label.classList.add('fa-pause');
     } else {
         stop();
-        label.removeClass('fa-pause').addClass('fa-play');
+        label.classList.remove('fa-pause');
+        label.classList.add('fa-play');
     }
     paused = !paused;
 };
 
 window.toggleSound = function() {
-    var enableSound = $('#enable_sound');
-    enableSound.prop('checked', !enableSound.prop('checked'));
+    var enableSound = document.querySelector('#enable_sound');
+    enableSound.checked = !enableSound.checked;
     window.updateSound();
 };
 
-$(function() {
-    hashtag = document.location.hash;
+window.openOptions = function () {
+    MicroModal.show('options-modal');
+};
 
-    $('button,input[type=button],a.button').button().focus(function() {
-        // Crazy hack required by Chrome
-        var self = this;
-        window.setTimeout(function() {
-            self.blur();
-        }, 1);
-    });
+window.openPrinterModal = function () {
+    MicroModal.show('printer-modal');
+};
+
+MicroModal.init();
+
+document.addEventListener('DOMContentLoaded', function() {
+    hashtag = document.location.hash;
 
     /*
      * Input Handling
      */
 
-    $(window)
-        .keydown(_keydown)
-        .keyup(_keyup)
-        .mousedown(function() { audio.autoStart(); });
+    window.addEventListener('keydown', _keydown);
+    window.addEventListener('keyup', _keyup);
+    window.addEventListener('mousedown', function() { audio.autoStart(); });
 
-    $('canvas')
-        .mousedown(function(evt) {
+    document.querySelectorAll('canvas').forEach(function(canvas) {
+        canvas.addEventListener('mousedown', function(evt) {
             if (!gamepad) {
                 io.buttonDown(evt.which == 1 ? 0 : 1);
             }
             evt.preventDefault();
-        })
-        .mouseup(function(evt) {
+        });
+        canvas.addEventListener('mouseup', function(evt) {
             if (!gamepad) {
                 io.buttonUp(evt.which == 1 ? 0 : 1);
             }
-        })
-        .bind('contextmenu', function(evt) { evt.preventDefault(); });
+        });
+    });
 
-    $('body').mousemove(_mousemove);
+    document.body.addEventListener('mousemove', _mousemove);
 
-    $('input,textarea')
-        .focus(function() { focused = true; })
-        .blur(function() { focused = false; });
+    document.querySelectorAll('input,textarea').forEach(function(input) {
+        input.addEventListener('input', function() { focused = true; });
+        input.addEventListener('blur', function() { focused = false; });
+    });
 
     keyboard.create('#keyboard');
 
     if (prefs.havePrefs()) {
-        $('#options input[type=checkbox]').each(function() {
-            var val = prefs.readPref(this.id);
-            if (val)
-                this.checked = JSON.parse(val);
-        }).change(function() {
-            prefs.writePref(this.id, JSON.stringify(this.checked));
+        document.querySelectorAll('#options-modal input[type=checkbox]').forEach(function(el) {
+            var val = prefs.readPref(el.id);
+            if (val) {
+                el.checked = JSON.parse(val);
+            }
+            el.addEventListener('change', function() {
+                prefs.writePref(el.id, JSON.stringify(el.checked));
+            });
         });
-        $('#options select').each(function() {
-            var val = prefs.readPref(this.id);
-            if (val)
-                this.value = val;
-        }).change(function() {
-            prefs.writePref(this.id, this.value);
+        document.querySelectorAll('#options-modal select').forEach(function(el) {
+            var val = prefs.readPref(el.id);
+            if (val) {
+                el.value = val;
+            }
+            el.addEventListener('change', function() {
+                prefs.writePref(el.id, el.value);
+            });
         });
     }
 
@@ -984,60 +927,22 @@ $(function() {
     window.updateScreen();
     window.updateCPU();
 
-    var cancel = function() { $(this).dialog('close'); };
-    $('#loading').dialog({ autoOpen: false, modal: true });
-    $('#options').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Close': cancel }
-    });
-    $('#load').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 540,
-        buttons: {'Cancel': cancel, 'Load': doLoad }
-    });
-    $('#save').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Cancel': cancel, 'Save': doSave }
-    });
-    $('#manage').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 320,
-        buttons: {'Close': cancel }
-    });
-    $('#printer').dialog({
-        autoOpen: false,
-        modal: true,
-        resizeable: false,
-        width: 570,
-        buttons: {
-            'Clear': printer.clear,
-            'Close': cancel
-        }
-    });
-    $('#http_load').dialog({
-        autoOpen: false,
-        modal: true,
-        width: 530,
-        buttons: {'Cancel': cancel, 'OK': doLoadHTTP }
-    });
-
     if (window.localStorage !== undefined) {
-        $('.disksave').show();
+        document.querySelectorAll('.disksave').forEach(function (el) { el.style.display = 'inline-block';});
     }
 
     var oldcat = '';
+    var option;
     for (var idx = 0; idx < window.disk_index.length; idx++) {
         var file = window.disk_index[idx];
         var cat = file.category;
         var name = file.name, disk = file.disk;
         if (cat != oldcat) {
-            $('<option />').val(cat).text(cat).appendTo('#category_select');
+            option = document.createElement('option');
+            option.value = cat;
+            option.innerText = cat;
+            document.querySelector('#category_select').append(option);
+
             disk_categories[cat] = [];
             oldcat = cat;
         }
@@ -1049,7 +954,9 @@ $(function() {
             disk_sets[name].push(file);
         }
     }
-    $('<option/>').text('Local Saves').appendTo('#category_select');
+    option = document.createElement('option');
+    option.innerText = 'Local Saves';
+    document.querySelector('#category_select').append(option);
 
     updateLocalStorage();
     initGamepad();
@@ -1061,12 +968,8 @@ $(function() {
         processHash(hash);
     }
 
-    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
-        $('select').removeAttr('multiple').css('height', 'auto');
-    }
-
     if (navigator.standalone) {
-        $('body').addClass('standalone');
+        document.body.classList.add('standalone');
     }
 
     run();
diff --git a/js/ui/drive_lights.js b/js/ui/drive_lights.js
new file mode 100644
index 0000000..ecb0f07c
--- /dev/null
+++ b/js/ui/drive_lights.js
@@ -0,0 +1,34 @@
+export default function DriveLights()
+{
+    return {
+        driveLight: function(drive, on) {
+            var disk = document.querySelector('#disk' + drive);
+            disk.style.backgroundImage =
+                on ? 'url(css/red-on-16.png)' :
+                    'url(css/red-off-16.png)';
+        },
+        dirty: function() {
+            // document.querySelector('#disksave' + drive).disabled = !dirty;
+        },
+        label: function(drive, label) {
+            if (label) {
+                document.querySelector('#disklabel' + drive).innerText = label;
+            }
+            return document.querySelector('#disklabel' + drive).innerText;
+        },
+        getState: function() {
+            return {
+                disks: [
+                    this.label(1),
+                    this.label(2)
+                ]
+            };
+        },
+        setState: function(state) {
+            if (state && state.disks) {
+                this.label(1, state.disks[0].label);
+                this.label(2, state.disks[1].label);
+            }
+        }
+    };
+}
diff --git a/js/ui/gamepad.js b/js/ui/gamepad.js
index 5a90d17..132b14d 100644
--- a/js/ui/gamepad.js
+++ b/js/ui/gamepad.js
@@ -106,7 +106,8 @@ export function initGamepad(data) {
         gamepadMap[idx] = undefined;
     }
     var map = data || DEFAULT_GAMEPAD;
-    $.each(map, function(key, val) {
+    Object.keys(map).forEach(function(key) {
+        var val = map[key];
         if (typeof val == 'string') {
             val = val.charCodeAt(0);
         } else {
diff --git a/js/ui/printer.js b/js/ui/printer.js
index 722a286..e7c890c 100644
--- a/js/ui/printer.js
+++ b/js/ui/printer.js
@@ -9,12 +9,15 @@
  * implied warranty.
  */
 
-export default function Printer(paper) {
-    var _lineBuffer;
+export default function Printer(el) {
+    var paper = document.querySelector(el);
+    var _lineBuffer = '';
     var _line;
 
     function newLine() {
-        _line = $('<div>').addClass('line').text(_lineBuffer);
+        _line = document.createElement('div');
+        _line.classList.add('line');
+        _line.innerText = _lineBuffer;
         paper.append(_line);
         _lineBuffer = '';
     }
@@ -39,7 +42,7 @@ export default function Printer(paper) {
                     _lineBuffer += c;
                 }
             }
-            _line.text(_lineBuffer);
+            _line.innerText = _lineBuffer;
         },
 
         clear: function() {
@@ -49,7 +52,7 @@ export default function Printer(paper) {
         },
 
         hasPrintout: function() {
-            return paper.text().length();
+            return paper.text.length;
         }
     };
 }
diff --git a/js/ui/tape.js b/js/ui/tape.js
index 60fe97d..669f962 100644
--- a/js/ui/tape.js
+++ b/js/ui/tape.js
@@ -12,6 +12,8 @@
 
 import { debug } from '../util';
 
+export const TAPE_TYPES = ['wav','aiff','aif','mp3','m4a'];
+
 export default function Tape(io) {
     var AudioContext = window.AudioContext || window.webkitAudioContext;
 
diff --git a/package-lock.json b/package-lock.json
index 07db1a7..21fa294 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3515,6 +3515,11 @@
         "to-regex": "^3.0.2"
       }
     },
+    "micromodal": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.3.2.tgz",
+      "integrity": "sha512-xRON1OqD9G8FfI1qShYTtJZaN77x03QR2UnkpL7H17877lATNJoV8XHR+nrnc2FqgXqjFdaYJYidbfISecMlNQ=="
+    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
diff --git a/package.json b/package.json
index f929714..d5e85aa 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,8 @@
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "micromodal": "^0.3.2"
   }
 }