<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Plot</title>
<link rel="stylesheet" type="text/css" href="plotStyle.css">
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css">
<script src="modernizr.js"></script>
<script type="text/javascript" src="plotController-min.js"></script>
<script type="text/javascript" src="getTickParams-min.js"></script>
<script type="text/javascript" src="obtainPlotDefinition-min.js"></script>
<script type="text/javascript" src="drawPlot-min.js"></script>
<script type="text/javascript" src="makeNewPlot-min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.js"></script>
<script src="html5jtabs.js"></script>
</head>

<body>

<div contextmenu="plotContentMenu">
<menu type="context" id="plotContentMenu">
  <menuitem id="contextMI" label="Hide plot controls" onclick="handleContextMenu()">
  </menuitem>
</menu>
<script>
   function handleContextMenu() {
      var menuItem = document.getElementById("contextMI");
      if (menuItem.label == "Hide plot controls")
      {
         document.getElementById("plotControlDiv").className="hidden";
         menuItem.label="Show plot controls";
      }
      else
      {
         document.getElementById("plotControlDiv").className="visible";
         menuItem.label="Hide plot controls";
      }
   }
</script>
<canvas id="canvasOne" width="2" height="2">
 Your browser does not support HTML 5 Canvas. 
</canvas>
</div>
<div id="plotControlDiv" className="visible">
<form id="form">
<br>
  <div class="tabs">
    <a data-toggle="openTab">Open</a>
    <a data-toggle="canvasTab" id="canvasTabToggle" class="hidden">Canvas</a>
    <a data-toggle="axesTab" id="axesTabToggle" class="hidden">Axes</a>
    <a data-toggle="ticksTab" id="ticksTabToggle" class="hidden">Tick Marks</a>
    <a data-toggle="curvesTab" id="curvesTabToggle" class="hidden">Curves</a>
    <a data-toggle="legendTab" id="legendTabToggle" class="hidden">Legend</a>
    <a data-toggle="annotationsTab" id="annotationsTabToggle" class="hidden">Annotations</a>
    <a data-toggle="saveTab" id="saveTabToggle" class="hidden">Save</a>
  </div>

<div class="tabContent"> 
  <div id="openTab">
    <fieldset class="openFieldset">
      <legend>Open a plot from cloud storage</legend>
      <select id="availablePlots" size="10">
      </select>
    </fieldset>
    <label id="orLabel">or</label>
    <fieldset id="csvTarget">
      <legend>Drag & drop a .csv file here</legend>
    </fieldset>
    <br><br>
    &nbsp;<a href="plotHelp.html" target="_blank">Help</a>
    <br>
  </div>

  <div id="canvasTab">
    <fieldset>
      <legend>Size</legend>
      <table id="canvasTable">
        <tr><td align="right">Width</td><td>
          <input type="range" id="canvasWidth" min="400" max="1200" step="1" class="longRange" /></td>
          <td/></tr>
        <tr><td align="right">Height</td><td>
          <input type="range" id="canvasHeight" min="200" max="1000" step="1" class="longRange" /></td>
          <td align="right" /></tr>
        </tr>
      </table>
    </fieldset>
    <fieldset>
      <legend>Colors</legend>
      <table>
       <tr><td align="right">Outside Axes&nbsp;</td>
         <td><input type="color" id="perimeterColor"/></td></tr>
       <tr><td align="right">Within Axes&nbsp;</td>
         <td><input type="color" id="plotBackgroundColor"/></td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    <input type="checkbox" id="boundingRectangle" />&nbsp;Show bounding rectangle
  </div>

  <div id="axesTab">
    <fieldset>
      <legend>Axis Range & Title</legend>
      <table>
        <tr><th /><th>Start</th><th>Stop</th><th>Title</th></tr>
        <tr><th>X&nbsp;</th><td><input type="text" id="xStartText" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="xStopText" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="xAxisTitle" class="textTitle" style="text-align: center" /></td></tr>
        <tr><th>Y&nbsp;</th><td style="margin-right: 10px;"><input type="text" id="yStartText" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="yStopText" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="yAxisTitle" class="textTitle" style="text-align: center" /><td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    <input type="checkbox" id="fullFrameAxes" />&nbsp;Full-frame axes
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Axis Line Width:
    <select id="axisLineWidth">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <hr class="hr10" />
    <fieldset>
      <legend>Margins</legend>
      <table id="marginTable">
        <tr><td align="right">Top</td><td>
          <input type="range" id="axis_top_margin" min="1" max="300" step="1" class="longRange" /></td>
          <td align="right" /></tr>
        <tr><td align="right">Bottom</td><td>
          <input type="range" id="axis_bottom_margin" min="1" max="300" step="1" class="longRange" /></td>
          <td align="right" /></tr>
        <tr><td align="right">Left</td><td>
          <input type="range" id="axis_left_margin" min="1" max="300" step="1" class="longRange" /></td>
          <td align="right" /></tr>
        <tr><td align="right">Right</td><td>
          <input type="range" id="axis_right_margin" min="1" max="300" step="1" class="longRange" /></td>
          <td align="right" /></tr>
      </table>
    </fieldset>
    <fieldset>
      <legend>Colors</legend>
      <table>
        <tr><td align="right">Axis Lines&nbsp;</td>
          <td><font face="Courier new"><input type="color" id="axisLineColor"/></font></td></tr>
        <tr><td align="right">Axis Titles&nbsp;</td>
          <td><input type="color" id="axisTitleColor"/></td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    <fieldset>
      <legend>Font for Axis Labels</legend>
    <table>
     <tr><td align="center">Family</td><td align="center">Size</td><td align="center">Weight</td><td align="center">Style&nbsp;&nbsp;</td></tr>
     <tr>
       <td><select id="axisLabelFace" class="alignCenter">
         <option value="Arial">Arial</option>
         <option value="Courier New">Courier New</option>
         <option value="Times New Roman">Times New Roman</option>
         <option value="Verdana">Verdana</option>
         </select></td>
       <td><select id="axisLabelSize" class="alignRight">
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="18">18</option>
         <option value="20">20</option>
         <option value="22">22</option>
         <option value="24">24</option>
         </select></td>
       <td><select id="axisLabelWeight">
         <option value="normal">normal</option>
         <option value="bold">bold</option>
         <option value="bolder">bolder</option>
         <option value="lighter">lighter</option>
         </select></td>
       <td><select id="axisLabelStyle">
         <option value="normal">normal</option>
         <option value="italic">italic</option>
         <option value="oblique">oblique</option>
         </select></td>
      </tr>
    </table>
    </fieldset>
    <hr class="hr10" />
    Space between axis labels and major tick marks&nbsp;
    <select id="spaceFromTickLabels">
      <option value="2">2</option>
      <option value="4">4</option>
      <option value="6">6</option>
      <option value="8">8</option>
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
    </select>
  </div>

  <div id="ticksTab">
    <fieldset id="majorTickFieldset">
      <legend>Location of Major Ticks</legend>
      <table><tr><th /><th>First tick</th><th>Interval</th></tr>
        <tr><td>X&nbsp;</td><td><input type="text" id="firstXmajorTick" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="xMajorTickSpacing" class="textNumeric" style="text-align: right"/></td>
        </tr>
        <tr><td>Y&nbsp;</td><td><input type="text" id="firstYmajorTick" class="textNumeric" style="text-align: right"/></td>
          <td><input type="text" id="yMajorTickSpacing" class="textNumeric" style="text-align: right"/></td>
          </tr>
      </table>
    </fieldset>
    <fieldset id="minorTickFieldset">
      <legend># of Minor Ticks</legend>
      <table>
       <tr><td colspan="2">(between major ticks)</td></tr>
        <tr><td align="right">X&nbsp;</td><td><select id="numXminorTicks">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select></td></tr>
        <tr><td align="right">Y&nbsp;</td><td><select id="numYminorTicks">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            </select></td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    <fieldset id="gridFieldset">
      <legend>Grid Lines</legend>
      <input type="checkbox" id="gridHorizontal" />&nbsp;Horizontal
      <br>
      <input type="checkbox" id="gridVertical" />&nbsp;Vertical
    </fieldset>
    <fieldset id="tickLengthFieldset">
      <legend>Tick Mark Length</legend>
      <table id="tickLengthTable">
        <tr><td align="right">Major</td><td>
          <input type="range" id="majorTickLength" min="3" max="20" step="1" /></td>
        <td align="right" />x</tr>
        <tr><td align="right">Minor</td><td>
          <input type="range" id="minorTickLength" min="3" max="20" step="1" /></td>
        <td align="right" />x</tr>
      </table>
    </fieldset>
    <fieldset id="tickWidthFieldset">
      <legend>Tick Mark Width</legend>
      <table id="tickWidthTable">
        <tr><td align="right">Major</td><td>
          <input type="range" id="majorTickWidth" min="1" max="3" step="1" /></td>
        <td align="right" />x</tr>
        <tr><td align="right">Minor</td><td>
          <input type="range" id="minorTickWidth" min="1" max="3" step="1" /></td>
        <td align="right" />x</tr>
      </table>
    </fieldset>
    <br style="float: none; clear: left">
    <hr class="hr10" />
    <fieldset>
      <legend>Font for Major Tick Labels</legend>
        <table>
          <tr><td align="center">Family</td><td align="center">Size</td><td align="center">Weight</td><td align="center">Style&nbsp;&nbsp;</td></tr>
          <tr><td><select id="majorTickFace" class="alignCenter">
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Verdana">Verdana</option>
            </select></td>
          <td><select id="majorTickLabelSize" class="alignRight">
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            </select></td>
          <td><select id="majorTickWeight">
            <option value="normal">normal</option>
            <option value="bold">bold</option>
            <option value="bolder">bolder</option>
            <option value="lighter">lighter</option>
            </select></td>
          <td><select id="majorTickStyle">
            <option value="normal">normal</option>
            <option value="italic">italic</option>
            <option value="oblique">oblique</option>
            </select></td>
      </tr>
    </table>
    </fieldset>
    <hr class="hr10" />
    <fieldset>
      <legend>Colors</legend>
      <table style="width:200px">
        <tr><td align="right">Major Ticks&nbsp;</td>
          <td><input type="color" id="majorTickColor"/></td></tr>
        <tr><td align="right">Minor Ticks&nbsp;</td>
         <td><input type="color" id="minorTickColor"/></td></tr>
        <tr><td align="right">Major Tick Labels&nbsp;</td>
          <td><input type="color" id="majorTickLabelColor"/></td></tr>
        <tr><td align="right">Grid Lines&nbsp;</td>
          <td><input type="color" id="gridLineColor"/></td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    Space between major tick marks and labels&nbsp;
    <select id="spaceFromTick">
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
    </select>
    <hr class="hr10" />
    <label id="dtFormatLabel" class="hidden">X tick label format&nbsp;</label>
    <select id="dtFormat" class="hidden">
      <option value="MMMYear"> MMM Year</option>
      <option value="MonthYear">Month/Year</option>
      <option value="MonthDayYear">Month/Day/Year</option>
      <option value="DayMonthYear">Day/Month/Year</option>
      <option value="MonthDay">Month/Day</option>
      <option value="DayMonth">Day/Month</option>
      <option value="HourDay">Hour-Day</option>
      <option value="HourMinuteDay">Hour:Minute-Day</option>
      <option value="HourMinute">Hour:Minute</option>
      <option value="HourMinuteSecond">Hour:Minute:Second</option>
      <option value="Unspecified">Unspecified</option>
    </select>
  </div>
  
  <div id="curvesTab">
    <hr class="hr10" />
    Selected curve:
    <select id="curveMenu">
    </select>
    <br>
    <hr class="hr10" />
    Curve title: <input type="text" id="curveTitle" size="55" />
    <br>
    <hr class="hr10" />
    <fieldset>
      <legend> Connecting Lines </legend>
      <input type="checkbox" id="showLines" />&nbsp;Show lines that connect each point
      <hr class="hr05" />
      <label>Color&nbsp;</label>
      <input type="color" id="curveColor" />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label>Style&nbsp;</label>
      <select id="curveStyle" class="alignCenter">
        <option value="solid">Solid</option>
        <option value="dash">Dash</option>
        <option value="dash-dot">Dash-Dot</option>
        <option value="dot">Dot</option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select id="curveWidth" class="alignRight">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
      </select>
      <label class="alignRight">Width&nbsp;</label>
    </fieldset>
    <hr class="hr10" />
    <fieldset>
      <legend>Symbols</legend>
      <input type="checkbox" id="showSymbols" />&nbsp;Show a symbol for each point
      <select id="symbolSize" class="alignRight">
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
        <option value="9">9</option>
        <option value="11">11</option>
        <option value="13">13</option>
        <option value="15">15</option>
        <option value="17">17</option>
        <option value="19">19</option>
        <option value="21">21</option>
      </select>
      <label class="alignRight">Size&nbsp;</label>
      <hr class="hr05" />
      <label>Color&nbsp;</label>
      <input type="color" id="symbolColor" />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label>Symbol&nbsp;</label>
      <select id="symbol" class="alignCenter">
        <option value="plus-sign">plus sign</option>
        <option value="asterick">asterick</option>
        <option value="open-box">open box</option>
        <option value="open-circle">open circle</option>
        <option value="open-triangle">open triangle</option>
        <option value="solid-box">solid box</option>
        <option value="solid-circle">solid circle</option>
        <option value="solid-triangle">solid triangle</option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <select id="symbolWidth" class="alignRight">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
      <label class="alignRight">Width&nbsp;</label>
    </fieldset>
    <hr class="hr10" />
  </div>

  <div id="legendTab">
    <hr class="hr10" />
    <input type="checkbox" id="showLegend" />&nbsp;Enable on-plot legend&nbsp;&nbsp;
    (note: drag legend to desired location)
    <hr class="hr10" />
    <fieldset>
      <legend>Font</legend>
        <table>
          <tr><td align="center">Family</td><td align="center">Size</td><td align="center">Weight</td><td align="center">Style&nbsp;&nbsp;</td></tr>
          <tr><td><select id="legendFontFace" class="alignCenter">
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Verdana">Verdana</option>
            </select></td>
          <td><select id="legendFontSize" class="alignRight">
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            </select></td>
          <td><select id="legendFontWeight">
            <option value="normal">normal</option>
            <option value="bold">bold</option>
            <option value="bolder">bolder</option>
            <option value="lighter">lighter</option>
            </select></td>
          <td><select id="legendFontStyle">
            <option value="normal">normal</option>
            <option value="italic">italic</option>
            <option value="oblique">oblique</option>
            </select></td>
      </tr>
    </table>
    </fieldset>
    <hr class="hr10" />
    <fieldset>
      <legend>Colors</legend>
      <table>
        <tr><td align="right">Background&nbsp;</td>
          <td><input type="color" id="legendBgColor"/></td></tr>
        <tr><td align="right">Text&nbsp;</td>
         <td><input type="color" id="legendTextColor"/></td></tr>
      </table>
    </fieldset>
    <hr class="hr10" />
  </div>

  <div id="annotationsTab">
    Select [new] to make a new annotation, or else select an existing annotation<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;annotation:&nbsp;
    <select id="annotationMenu">
      <option value="[new]">[new]</option>
    </select>
    <hr class="hr10" />
    Annotation text:<br>
    <textarea rows="1" cols="25" id="annotationText"></textarea>
    <br>(note: drag text to desired location)
    <hr class="hr10" />
    Color:&nbsp;<input type="color" id="annotationColor" />
    <hr class="hr10" />
    <fieldset>
      <legend>Font</legend>
        <table>
          <tr><td align="center">Family</td><td align="center">Size</td><td align="center">Weight</td><td align="center">Style&nbsp;&nbsp;</td></tr>
          <tr><td><select id="annotationFace" class="alignCenter">
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Verdana">Verdana</option>
            </select></td>
          <td><select id="annotationSize" class="alignRight">
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            <option value="24">24</option>
            <option value="28">28</option>
            <option value="32">32</option>
            </select></td>
          <td><select id="annotationWeight">
            <option value="normal">normal</option>
            <option value="bold">bold</option>
            <option value="bolder">bolder</option>
            <option value="lighter">lighter</option>
            </select></td>
          <td><select id="annotationStyle">
            <option value="normal">normal</option>
            <option value="italic">italic</option>
            <option value="oblique">oblique</option>
            </select></td>
        </tr>
      </table>
    </fieldset>
    <hr class="hr10" />
    <button type="button" id="deleteAnnotationButton" class="hidden">Delete this annotation</button>
  </div>

  <div id="saveTab">
    <hr class="hr10" />
    Plot name:&nbsp;
    <input type="text" id="saveText" size="40" />&nbsp;&nbsp;&nbsp;
    <button type="button" id="saveButton">Save plot</button>
    <hr class="hr10" />
  </div>
</div>
<br>
</form>
</div>
</body>
</html>