<html>
  <head>
    <link rel="stylesheet" type="text/css" href="image.css">
    <script src="image.js"></script>
    <script>
      window.onload = function () {
        var bodyTag = document.getElementById('imageDiv');
        window.image = new Image(221, 381, bodyTag);
      }
    </script>
  </head>
  <body>
    <div id="imageDiv"></div>
    <p>
    <form onsubmit="window.image.addBarEl('BobId', 'Bob Letterbacher', 1904, 1980, 'blue', 0);" action="javascript:void(0);">
      <input type="submit" value="Add Bar" />
    </form>
  </body>
</html>

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="image.css">
    <script src="image.js"></script>
    <script>
      window.onload = function () {
        var imageParentEl = document.getElementById('imageDiv');
        window.image = new Image(221, 381, imageParentEl);

        var curColIdx = 0
        addBarFormEl = document.getElementById('addBarForm');
        addBarFormEl.onsubmit = function () {
          var name = addBarFormEl.figureName.value;
          var startYr = parseInt(addBarFormEl.startYr.value);
          var endYrStr = addBarFormEl.endYr.value;
          var endYr = null;
          if (endYrStr != "") {
            endYr = parseInt(endYrStr);
          }
          window.image.addBarEl('el' + curColIdx, name, startYr, endYr, 'lightblue', curColIdx);
          curColIdx++;
        };
      };
    </script>
  </head>
  <body>
    <div id="imageDiv"></div>
    <br />
    <form id="addBarForm" action="javascript:void(0);">
      Name: <input id="figureName" type="text" />
      <br />
      Start Year: <input id="startYr" type="text" />
      <br />
      End Year: <input id="endYr" type="text" />
      <br />
      <input type="submit" value="Add Bar" />
    </form>
  </body>
</html>

Allow the user to specify all properties when creating a new historical figure bar.
Allow the user to specify all properties when creating a new historical
figure bar.
