<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
     body {
       border: 0;
       margin: 30px;
       font-family: monospace;
       font-size: 14px;
     }
     hr {
       border-top: #ccc solid 1px;
       height: 0;
       margin: 10px 0 10px 0;
     }
     div {
       border: 0;
       padding: 0;
       margin: 0;
     }
     p, pre {
       margin: 0;
       padding: 0;
       line-height: 20px;
     }
     .switch {
       margin: 0 13px 0 0;
       padding: 0;
     }
     .comments {
       font-size: 11px;
       color: #666;
       line-height: 14px;
     }
    </style>
  </head>
  <body>
    <h2>Text-mode Altair 8800 simulator</h2>

    <hr>

    <p>
      <input type="button" value="POWER ON" onclick="powerOn();">
      <input type="button" value="POWER OFF" onclick="powerOff();">&nbsp;
      <input type="button" value="RUN" onclick="run();">
      <input type="button" value="STOP" onclick="stop();">
      <input type="button" value="SINGLE STEP" onclick="singleStep();">
    </p>
    <p>
      <input type="button" value="EXAMINE" onclick="examine();">
      <input type="button" value="EXAMINE NEXT" onclick="examineNext();">&nbsp;
      <input type="button" value="DEPOSIT" onclick="deposit();">
      <input type="button" value="DEPOSIT NEXT" onclick="depositNext();">&nbsp;
      <input type="button" value="RESET" onclick="reset();">
      <input type="button" value="CLR" disabled>
    </p>
    <p>
      <input type="button" value="PROTECT" disabled>
      <input type="button" value="UNPROTECT" disabled>
      <input type="button" value="AUX" disabled>
      <input type="button" value="AUX" disabled>
    </p>

    <hr>

    <p>
      <input id="data" type="text" size="60">&nbsp;
      <input type="button" value="LOAD DATA" onclick="loadData();">
    </p>
    <pre class="comments">
Examples - binary data of some tiny programs:
db ff d3 ff c3 00 00       // Switch echo between A2 and A1.
3e 8c d3 ff 0f c3 02 00    // Pattern shift.</pre>

    <hr>

    <p>LEDs: <!-- &#x25cf; - on. &#x25cb; - off. -->
      <div id="status-leds">
        <p>
          INTE&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          PROT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          MEMR&nbsp;<span id="memr-led" class="led">&#x25cb;</span>&nbsp;
          INP&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          MI&nbsp;<span id="mi-led" class="led">&#x25cb;</span>&nbsp;
          OUT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          HLTA&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          STACK&nbsp;<span class="led">&#x25cb;</span>&nbsp;
          WO&nbsp;<span id="wo-led" class="led">&#x25cb;</span>&nbsp;
          INT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
        </p>
      </div>

      <div id="wait-leds">
        <p>
          WAIT&nbsp;<span id="wait-led" class="led">&#x25cb;</span>&nbsp;
          HLDA&nbsp;<span class="led">&#x25cb;</span>&nbsp;
        </p>
      </div>

      <div id="data-leds">
        <p>
          D7&nbsp;D6&nbsp;D5&nbsp;D4&nbsp;D3&nbsp;D2&nbsp;D1&nbsp;D0<br>
          <span id="d7" class="led">&#x25cb;</span>&nbsp;
          <span id="d6" class="led">&#x25cb;</span>&nbsp;
          <span id="d5" class="led">&#x25cb;</span>&nbsp;
          <span id="d4" class="led">&#x25cb;</span>&nbsp;
          <span id="d3" class="led">&#x25cb;</span>&nbsp;
          <span id="d2" class="led">&#x25cb;</span>&nbsp;
          <span id="d1" class="led">&#x25cb;</span>&nbsp;
          <span id="d0" class="led">&#x25cb;</span>&nbsp;
        </p>
      </div>
      <div id="address-leds">
        <p>
          A15&nbsp;A14&nbsp;A13&nbsp;A12&nbsp;A11&nbsp;A10&nbsp;A9&nbsp;&nbsp;A8&nbsp;&nbsp;A7&nbsp;&nbsp;A6&nbsp;&nbsp;A5&nbsp;&nbsp;A4&nbsp;&nbsp;A3&nbsp;&nbsp;A2&nbsp;&nbsp;A1&nbsp;&nbsp;A0<br>
          <span id="a15" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a14" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a13" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a12" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a11" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a10" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a9" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a8" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a7" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a6" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a5" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a4" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a3" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a2" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a1" class="led">&#x25cb;</span>&nbsp;&nbsp;
          <span id="a0" class="led">&#x25cb;</span>&nbsp;&nbsp;
        </p>
      </div>

      <div id="switches">
        <p>
          <input type="checkbox" id="s15" class="switch" value="">
          <input type="checkbox" id="s14" class="switch" value="">
          <input type="checkbox" id="s13" class="switch" value="">
          <input type="checkbox" id="s12" class="switch" value="">
          <input type="checkbox" id="s11" class="switch" value="">
          <input type="checkbox" id="s10" class="switch" value="">
          <input type="checkbox" id="s9" class="switch" value="">
          <input type="checkbox" id="s8" class="switch" value="">
          <input type="checkbox" id="s7" class="switch" value="">
          <input type="checkbox" id="s6" class="switch" value="">
          <input type="checkbox" id="s5" class="switch" value="">
          <input type="checkbox" id="s4" class="switch" value="">
          <input type="checkbox" id="s3" class="switch" value="">
          <input type="checkbox" id="s2" class="switch" value="">
          <input type="checkbox" id="s1" class="switch" value="">
          <input type="checkbox" id="s0" class="switch" value="">
        </p>
      </div>

    </p>

    <hr>

    <p>CPU dump:
      <div id="cpu"></div>
    </p>

    <hr>

    <p>Memory dump:
      <div id="mem"></div>
    </p>

    <script src="js/8080.js"></script>
    <script src="js/sim8800.js"></script>
    <script>
     function setAddressLedsCallback(bits) {
       for (let i = 0; i < bits.length; i++) {
         var ledElem = document.getElementById('a' + i);
         ledElem.innerHTML = bits[i] ? '&#x25cf' : '&#x25cb';
       }
     }

     function setDataLedsCallback(bits) {
       for (let i = 0; i < bits.length; i++) {
         var ledElem = document.getElementById('d' + i);
         ledElem.innerHTML = bits[i] ? '&#x25cf' : '&#x25cb';
       }
     }

     function setWaitLedCallback(isRunning) {
       var ledElem = document.getElementById('wait-led');
       ledElem.innerHTML = isRunning ? '&#x25cb' : '&#x25cf';
     }

     function setStatusLedsCallback(isPoweredOn) {
       var ledElems = [
         document.getElementById('memr-led'),
         document.getElementById('mi-led'),
         document.getElementById('wo-led')
       ];
       for (let i = 0; i < ledElems.length; i++) {
         ledElems[i].innerHTML = isPoweredOn ? '&#x25cf' : '&#x25cb';
       }
     }

     function dumpCpuCallback(dumpHtml) {
       var dumpCpuElem = document.getElementById('cpu');
       dumpCpuElem.innerHTML = dumpHtml;
     }

     function dumpMemCallback(dumpHtml) {
       var dumpMemElem = document.getElementById('mem');
       dumpMemElem.innerHTML = dumpHtml;
     }

     function getInputAddressCallback() {
       var word = 0;
       for (let i = 0; i < 16; i++) {
         var switchElem = document.getElementById('s' + i);
         if (switchElem.checked) {
           word |= 1 << i;
         }
       }
       return word;
     }

     var sim = new Sim8800(256, 1000000,
                           setAddressLedsCallback, setDataLedsCallback,
                           setWaitLedCallback, setStatusLedsCallback,
                           getInputAddressCallback,
                           dumpCpuCallback, dumpMemCallback);

     function powerOn() {
       sim.powerOn();
     }

     function powerOff() {
       sim.powerOff();
     }

     function reset() {
       sim.reset();
     }

     function loadData() {
       var data = document.getElementById("data").value;
       sim.loadDataAsHexString(0, data);
     }

     function run() {
       sim.start();
     }

     function singleStep() {
       sim.step(1);
     }

     function stop() {
       sim.stop();
     }

     function examine() {
       sim.examine();
     }

     function examineNext() {
       sim.examineNext();
     }

     function deposit() {
       sim.deposit();
     }

     function depositNext() {
       sim.depositNext();
     }
    </script>
  </body>
</html>