<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>mcopy</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css" rel="stylesheet">
    <link href="./css/w2ui-1.4.3.min.css" rel="stylesheet">
    <link href="./css/effeckt.css" rel="stylesheet">
    <link href="./css/codemirror.min.css" rel="stylesheet">
    <link href="./css/monokai.css" rel="stylesheet">
    <link href="./css/app.css" rel="stylesheet">
  </head>
  <body onload="init();" style="background:#272b30;">
    <nav id="toolbar"></nav>
    <div id="screens">
      <div id="sequencer" class="screen" style="display: block;">
        <div id="counters">
          <div class="cam">
            <label>CAMERA</label>
            <input type="number" id="seq_cam_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.camera.pos);" onblur="gui.updateCam(this);" />
          </div>
          <div class="proj">
            <label>PROJECTOR</label>
            <input type="number" id="seq_proj_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
          </div>
        </div>
        <div id="seq_scroll">
          <div id="sequence">
            <div id="cam_forward" class="row" y="0"></div>
            <div id="proj_forward" class="row" y="1"></div>
            <div id="cam_backward" class="row spacer" y="0"></div>
            <div id="proj_backward" class="row" y="1"></div>
            <div id="light_set" class="row spacer"></div>
            <div id="numbers" class="row"></div>
          </div>
          <div id="seq_labels">
            <div><span>CAM </span><i class="fa fa-plus"></i></div>
            <div><span>PRO </span><i class="fa fa-plus"></i></div>

            <div class="spacer"><span>CAM </span><i class="fa fa-minus"></i></div>
            <div><span>PRO </span><i class="fa fa-minus"></i></div>

            <div class="spacer"><span>LIGHT</span></div>
          </div>
        </div>
        <div id="actions">
          <button id="seq_run" onclick="seq.init();">RUN</button>
          <button id="seq_stop" onclick="seq.stop(true);">STOP</button>
          <button id="seq_clear" onclick="gui.grid.clear();">CLEAR</button>
          <button id="seq_plus24" onclick="gui.grid.plus_24();">+ 24</button>
          <button id="seq_mscript" onclick="mse.mscript.fromSequence();">TO SCRIPT</button>
          <input id="seq_scroll_state" type="number" min="0" value="00000" />
        </div>
        <div id="seq_stats">
          <div class="seq_count"># of steps: <span>0</span></div>
          <div class="timing">To complete: <span>0 ms</span></div>
          <div class="cam_end">Camera end: <span>00000</span></div>
          <div class="proj_end">Projector end: <span>00000</span></div>
        </div>
        <div id="seq_loop">
          <h3>LOOPS</h3>
          <input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = gui.fmtZero(this.value, 6); gui.grid.loopChange(this);"/>
          <div id="loop_current"></div>
        </div>
      </div>
      <div id="script" class="screen">
        <textarea id="editor"></textarea>
        <footer id="console">
        <div id="mscript_cmd">
          <button id="mscript_compile" onclick="mse.mscript.compile()">COMPILE</button>
          <button id="mscript_compile" onclick="mse.mscript.run()">RUN</button>
          <button id="mscript_seq" onclick="mse.mscript.toSequence();">TO SEQUENCE</button>
        </div>
          <textarea>> </textarea>
        </footer>
      </div>
      <div id="controls" class="screen">
        <div id="counters_2">
          <div class="cam">
            <label>CAMERA</label>
            <input type="number" id="seq_cam_count_2" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.camera.pos);" onblur="gui.updateCam(this);" />
          </div>
          <div class="proj">
            <label>PROJECTOR</label>
            <input type="number" id="seq_proj_count_2" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
          </div>
        </div>
        <div id="move_to">
          <div class="cam">
            <!--<label>MOVE TO</label>-->
            <div>
              <input type="number" id="move_cam_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" />
              <button id="move_cam_to_go" onclick="return cmd.cam_to();">GO TO</button>
            </div>
          </div>
          <div class="proj">
            <!--<label>MOVE TO</label>-->
            <div>
              <input type="number" id="move_proj_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);"/>
              <button id="move_proj_to_go" onclick="return cmd.proj_to();">GO TO</button>
            </div>
          </div>
        </div>
        <div id="buttons" class="clearfix">
          <div>
            <div>
              <button id="cmd_cam_forward" onclick="cmd.cam_forward(light.color);" class="cmd fwd">
                <i class="fa fa-video-camera"></i> 
                CAMERA +1
                <i class="fa fa-step-forward"></i>
              </button>
            </div>
            <div>
              <button id="cmd_cam_backward" onclick="cmd.cam_backward(light.color);" class="cmd bwd">
                <i class="fa fa-video-camera"></i> 
                CAMERA -1
                <i class="fa fa-step-backward"></i>
              </button>
            </div>
            <div>
              <button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd">
                <i class="fa fa-times-circle"></i> 
                BLANK +1
                <i class="fa fa-step-forward"></i>
              </button>
            </div>
            <div>
              <button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd">
                <i class="fa fa-times-circle"></i> 
                BLANK -1
                <i class="fa fa-step-backward"></i>
              </button>
            </div>
          </div>
          <div>
            <div>
              <button id="cmd_proj_forward" onclick="cmd.proj_forward();" class="cmd fwd">
                <i class="fa fa-film"></i>
                PROJECTOR +1
                <i class="fa fa-step-forward"></i>
              </button>
            </div>
            <div>
              <button id="cmd_proj_backward" onclick="cmd.proj_backward();" class="cmd bwd">
                <i class="fa fa-film"></i>
                PROJECTOR -1
                <i class="fa fa-step-backward"></i>
              </button>
            </div>
          </div>
        </div>
        <footer>
          <div id="log"></div>
        </footer>
      </div>
      <div id="light" class="screen">
        <div id="colors-tabs"></div>
        <div id="colors-content">
          <div id="kelvin-page" class="colors-page" style="display: block;">
            <h3>TEMPERATURE</h3>
            <input id="kelvin" type="number" min="0" max="20000" value="0" />
            <h4>KELVIN</h4>
            <div id="kelvin-slider">
                <div id="kelvin-scale"></div>
                <div id="kelvin-pos"></div>

                <div id="kelvin-preview">
                  rgb(0, 0, 0)
                </div>
            </div>
          </div>
          <!--<div id="cmy-page" class="colors-page">
            <div id="dial-c" class="dial-wrapper">
              <div class="dial-container dial-container1">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-container dial-container2">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-marker dial-start"></div>
              <div class="dial-marker dial-end"></div>
              <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
            </div>
            <div id="dial-m" class="dial-wrapper">
              <div class="dial-container dial-container1">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-container dial-container2">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-marker dial-start"></div>
              <div class="dial-marker dial-end"></div>
              <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
            </div>
            <div id="dial-y" class="dial-wrapper">
              <div class="dial-container dial-container1">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-container dial-container2">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-marker dial-start"></div>
              <div class="dial-marker dial-end"></div>
              <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
            </div>
            <div id="dial-k" class="dial-wrapper">
              <div class="dial-container-bg"></div>
              <div class="dial-container dial-container1">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-container dial-container2">
                <div class="dial-wedge"></div>
              </div>
              <div class="dial-marker dial-start"></div>
              <div class="dial-marker dial-end"></div>
              <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
            </div>
            <div id="cmy-preview">
              rgb(0, 0, 0)
            </div>
          </div>-->
          <div id="rgb-page" class="colors-page">
            <input id="rgb" value="rgb(0, 0, 0)" />
          </div>
        </div>
        <div id="light-status">
          <h3>LIGHT STATUS</h3>
          <div>
            <form>
              <span>R</span><input type="text" value="0" readonly /><br />
              <span>G</span><input type="text" value="0" readonly /><br />
              <span>B</span><input type="text" value="0" readonly />
            </form>
            <div id="color"></div>
          </div>
          <div id="preview-wrap">
            <h4><span>PREVIEW</span></h4>
            <input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
          </div>
        </div>
        <footer id="light-swatches">
          <div id="new-swatch">
            <i class="fa fa-plus"></i>
          </div>
        </footer>
      </div>
      <div id="settings" class="screen">
        <div>
          <div>
            <h4>Devices</h4>
            <select id="devices">
              <option>Not Set</option>
            </select>
            <button title="Refresh devices"><i class="fa fa-refresh"></i></button>
          </div>
          <div>
            <h4>Projector</h4>
            <select id="projector_device">
              <option>Not Set</option>
            </select>
          </div>
          <div>
            <h4>Camera</h4>
            <select id="camera_device">
              <option>Not Set</option>
            </select>
            <input type="radio" id="camera_type_arduino" name="camera_type" value="arduino" checked="checked" />
          </div>
          <div class="spacer">
            <input type="text" id="intval" name="intval" placeholder="INTVAL3 URL"/>
            <input type="radio" id="camera_type_intval" name="camera_type" value="intval" onclick="devices.intval();" />
          </div>
          <div>
            <h4>Light</h4>
            <select id="light_device">
              <option>Not Set</option>
            </select>
          </div>
          <div>
            <h4>Profile</h4>
              <select id="profile">
                <option>Not Set</option>
              </select>
          </div>
        </div>
      </div>
    </div>
    <div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div>
    <div id="spinner">
      <div id="spinnerMsg"></div>
      <div id="spinnerProgress" class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          <span class="sr-only">0% Complete</span>
        </div>
      </div>
    </div>
    <script src="./js/app.js"></script>
  </body>
</html>