<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>SNAP Robot Arm Demo</title>
    <script type="text/javascript" src="{{ static_url('jquery-1.6.2.min.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('jquery-ui-1.8.16.custom.min.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('main.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('Highcharts/js/highcharts.js') }}"></script>
  </head>
  
  <body>
    <img src="{{ static_url('Header1.png') }}" style="width:100%;" />

    <div id="monitor">
      <div id="light_plot" style="width: 500px; height: 250px; margin: 0 auto; float:left;">Light Plot</div>
      <div id="game_timer" style="background-color:LightGrey; solid;width:40%;float:right;font-family:'Lucida Console', Monaco, monospace;font-size:200%">
        <p>Elapsed:  00:00:00</p>
      </div>
    </div>

    <div id="control_region" style="position:absolute; top:350px; left:0px">
      <!-- Note: Image overlay technique is "relative div contains absolute image" -->
      <div style="position:relative; top:0px; left:0px">
        <img src="{{ static_url('ArmImage.png') }}" style="position:absolute; width:900px; height:800px;" />
      </div>
      <div id="grip_1" style="position:relative; top:290px; left:0px">
        <img src="{{ static_url('OpenArrow.png') }}" style="position:absolute; width:100px; height:100px" />
      </div>
      <div id="grip_2" style="position:relative; top:290px; left:0px">
        <img src="{{ static_url('CloseArrow.png') }}" style="position:absolute; width:100px; height:100px" />
      </div>
      <div id="wrist_1" style="position:relative; top:60px; left:200px">
        <img src="{{ static_url('UpArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="wrist_2" style="position:relative; top:180px; left:200px">
        <img src="{{ static_url('DownArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="elbow_1" style="position:relative; top:50px; left:460px">
        <img src="{{ static_url('UpArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="elbow_2" style="position:relative; top:150px; left:460px">
        <img src="{{ static_url('DownArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="shoulder_1" style="position:relative; top:250px; left:500px">
        <img src="{{ static_url('UpArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="shoulder_2" style="position:relative; top:350px; left:500px">
        <img src="{{ static_url('DownArrow.png') }}" style="position:absolute; width:80px; height:100px" />
      </div>
      <div id="base_1" style="position:relative; top:430px; left:170px">
        <img src="{{ static_url('CwArrow.png') }}" style="position:absolute; width:150px; height:150px" />
      </div>
      <div id="base_2" style="position:relative; top:470px; left:170px">
        <img src="{{ static_url('CcwArrow.png') }}" style="position:absolute; width:150px; height:150px" />
      </div>

    </div>
  
  </body</html>
