<!--
----------------------------------------------------------------
 Copyright (C) 2019 Alex Beharrell

 This file is part of penguinTrace.

 penguinTrace is free software: you can redistribute it and/or
 modify it under the terms of the GNU Affero General Public
 License as published by the Free Software Foundation, either
 version 3 of the License, or any later version.

 penguinTrace is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public
 License along with penguinTrace. If not, see
 <https://www.gnu.org/licenses/>.
----------------------------------------------------------------

penguinTrace Extra Information
-->
<html>
  <head>
    <link rel="stylesheet" href="css/penguintrace.css" />
    <script src="js/lib/jquery_3.3.1.min.js"></script>
    <script type="text/javascript">
      var tabs = ['registers', 'variables', 'memory'];

      function doLoad()
      {
        tabs.forEach(function (elem) {
          $('#'+elem+'-button').click(function() {
            $('.active').removeClass('active');
            $('#'+elem+'-button').addClass('active');
            tabs.forEach(function (e) {
              if (e == elem)
              {
                $('#'+e+'-tab').removeClass('hidden');
              }
              else
              {
                $('#'+e+'-tab').addClass('hidden');
              }
            });
          });
          console.log(elem);
        });
      }
    </script>
    <title>penguinTrace</title>
  </head>
  <body>
    <div id="header-container">
      <div id="header-popup">
        machine state
      </div>
    </div>
    <div id="controls-container">
      <ul>
        <li id="registers-button" class="active first">Registers</li>
        <li id="variables-button">Variables</li>
        <li id="memory-button">stack</li>
      </ul>
      <div style="clear: both"></div>
    </div>
    <div id="content-container">
      <div id="registers-tab">
        <table id="registers-table">
          <thead>
            <tr>
              <th class="first-row">Reg</th>
              <th>Hex</th>
              <th>decimal</th>
            </tr>
          </thead>
          <tbody id="registers-tbody">
          </tbody>
        </table>
      </div>
      <div id="variables-tab" class="hidden">
        <table id="variables-table">
          <thead>
            <tr>
              <th class="first-row">Variable</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody id="variables-tbody">
          </tbody>
        </table>
      </div>
      <div id="memory-tab" class="hidden">
        <b>Stack</b><br />
        <table id="memory-table">
          <tbody id="memory-tbody">
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>