<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>visIdeal</title>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
      #key {
        position: absolute;
        margin-left: 20px;
        width: 100px;
        height: 100px;
        background-color: #eee;
      }
      #key .text {
        margin-top: 10px;
        clear: right;
      }
      #key .section {
        clear: both;
        margin-bottom: 10px;
        margin-top: 10px;
        width: 100%;
      }
      .key {
        margin-left: 10px;
        margin-right: 10px;
        /* margin-top: 10px; */
        /* margin-bottom: 30px; */
        float: left;
        width: 20px;
        height: 20px;
      }

      #xkey {
        background-color: green;
      }
      #ykey {
        background-color: red;
      }
      #zkey {
        background-color: blue;
      }
    </style>
    <script>
      //global variables
      //for some reason visArray is every monomial in R/I
      data = visArray;
      dataGenz = newVisArray;
    </script>
  </head>
  <body>
    <div id="side">
      <h2>&#8202;&#8202;Menu</h2>
      <div class="list-group" id="menuList"></div>
      <a id="idealGens" href="#" class="list-group-item">Ideal Generators</a>
      <div id="key">
        <div class="section">
          <div class="key" id="xkey"></div>
          <div class="text">XXX axis</div>
        </div>
        <div class="section">
          <div class="key" id="ykey"></div>
          <div class="text">YYY axis</div>
        </div>
        <div class="section">
          <div class="key" id="zkey"></div>
          <div class="text">ZZZ axis</div>
        </div>
      </div>

      <!-- we can put these options in later
            <a id="exportTikz" href="#" class="list-group-item">Generate TikZ code</a>
            <a id="endSession" href="#" class="list-group-item">End session</a>            
            -->
    </div>

    <script src="js/visCommon.js"></script>
    <script src="js/visIdeal3d.js"></script>
  </body>
</html>
