{% extends 'base.html' %}
{% block head %}
<title>Pad.ma: Play</title>
<link rel="stylesheet" type="text/css" href="/static/css/padmaList.css" />
<script type="text/javascript" src="/static/js/padmaApi.js"></script>
<script type="text/javascript" src="/static/js/padmaList.js"></script>
<script type="text/javascript" src="/static/js/padmaVideo.js"></script>
<script type="text/javascript" src="/static/js/padmaLayer.js"></script>
<script type="text/javascript" src="/static/js/padmaSearch.js"></script>
<script type="text/javascript" src="/static/js/liveFuncs.js"></script>
<script type="text/javascript">
var listId = "{{ listId|escapejs }}";
</script>

{% endblock %}

{% block body %}
<!--
  <div id="resultWrapper">
    <div id="results">
    
    </div>
    <div id="resultDetails">
    </div>
  </div>
-->
<script type="text/html" id="tmpl_layerResult">
    <div class="layerTitle">
      <span class="layerTrack"><%= layer.track %> </span>: 
      <span class="layerValue"><%= layer.shortValue %>... </span>
      <span class="layerInOut"><%= layer.time_in_npt %> - <%= layer.time_out_npt %></span>
      <span class="layerBtns">
        <a href="#" class="addToClipBin" title="Add this clip to playlist.">&gt;&gt;</a> 
      </span>
    </div>
</script>

<script type="text/html" id="tmpl_clip">
 <div class="clipMain">
    <div class="clipImages">
      <div class="clipInImage clipImage">
        <img src="<%= layer.firstFrame128 %>" title="In: <%= layer.value %>" /><br />
        <%= layer.time_in_npt %>
      </div>
      <div class="clipImage">
            
        <video class="clipVideo" src="<%= layer.videoSrc128 %>" poster="<%= layer.middleFrame128 %>" controls="controls">
          um, browser?
        </video>
                
      </div>
      <div class="clipOutImage clipImage">
        <img src="<%= layer.lastFrame128 %>" title="Out: <%= layer.value %>" /><br />
        <%= layer.time_out_npt %>
      </div>
    </div>
      <div class="layerControls">
        </div>
        <div class="clipView layerControl">
          -->
        </div>
      </div>
    </div>
  <div class="removeClip">
    X
  </div>
  </div>
</script>
<script type="text/html" id="tmpl_playerWindow">
<html>
  <head>
    <style type="text/css">
#wrapper {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

video {
  width: 640px;
  margin-left: 30px;
}

#text {
  margin-top: 10px;
  font-family: Arial, Verdana, sans-serif;
  color: #363636;
}

#track {
  font-weight: bold;
}
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="video">
        <video src="<%= layer.videoSrc320 %>" poster="<%= layer.firstFrame320 %>" controls="controls">browser? open video? huh?</video>
      </div>
      <div id="text">
        <div id="track">
          <%= layer.track%>:
        </div>
        <div id="value">
          <%= layer.value_html %>
        </div>
      </div>
    </div>
  </body>
</html>
</script>

<div id="wrapper">
    <div id="playBin">

    </div>

    <div id="videos">

    </div>
  <div id="buffer">
  <br /><br /><br /><br />
  </div>
<div id="bottomBar">
  <div id="searchDiv">
    <form id="searchForm" action="" method="">
      Search: <input type="text" id="search" /><span id="resultStats"></span>
    </form>
  </div>
</div>

{% endblock %}