<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> {{ text.title }} </title>
  <link rel="shortcut icon" href="/static/images/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="/static/css/text.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/jquery.tooltip.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/fancybox/jquery.fancybox-1.3.4.css" />
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/padma/jquery.tooltip.js"></script>
  <script type="text/javascript" src="/static/js/jquery.fancybox-1.3.4.pack.js"></script>
  <script type="text/javascript" src="/static/js/padma/padma.layers.js"></script>
  <script type="text/javascript" src="/static/js/padma/padma.links.js"></script>
  <script type="text/javascript" src="/static/js/padma/padma.playlist.js"></script>
  <script type="text/javascript" src="/static/js/views/{{ text.view }}.js"></script>  
  <script type="text/javascript" src="/static/js/padma/utils.js"></script>
  <script type="text/javascript">
$(function() {
  if ($('.imageGallery').length > 0) {
    $('.imageGallery a').fancybox();
  }
  $('a').each(function() {
    var t = $(this);
    if (t.attr("href") != undefined) {
      var href = t.attr("href");
      if (href.indexOf("http://maps.google.com") != -1) {
        if (t.data("mapLoaded")) {
          return false;
        }
        var embedUrl = href + "&output=embed";
        var iframe = $('<iframe />').attr("src", embedUrl).attr("width", "425").attr("height", "350");
        var parentP = t.parents('p');
        parentP.append("<br />").append(iframe);
        t.data("mapLoaded", true);
        t.toggle(function() {
          iframe.slideUp();  
        }, function() {
          iframe.slideDown();
        });      
      }
    }
  });
});
  </script>
</head>
<body>
<script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper">
<!--  <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
  <video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls" autoplay="autoplay"></video>
<!--  <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
  <div class="annotation">
    Transcripts / annotations will appear here.
  </div>
  <div class="closeButton">x</div>
</div>
</script>

<script type="text/html" id="tmpl_layers">
  <div class="layersWrapper">
    <% for (var i=0; i<layers.length; i++) { var layer = layers[i]; %>
    <div class="layerWrapper">
      <div class="layerTrack"><%= layer.track %></div>
      <div class="layerText"><%= layer.value_html %></div>
    </div>
    <% } %>
  </div>

</script>

<script type="text/html" id="tmpl_tooltip">
  <div class="padmaTooltip">
    <div class="videoInfo">
      Click link to play
    </div>
    <img src="<%= thumbUrl %>" />
    <h4 class="padmaTitle">
      <%= video.video.title %>
    </h4>
  </div>
</script>

<script type="text/html" id="tmpl_sidebar">
  <div class="padmaViewer">
    <div class="padmaButtons">
      <span class="viewOnPadma">
        <a title="Click to view clip on Pad.ma" target="_blank" href="<%= linkData.url %>">p</a>
      </span>
      <span class="videoInfo">
        <a title="Click to get more info about video" target="_blank" href="<%= video.infoUrl %>">&#161;</a>
      </span>
      <span class="downloadVideo">
        <a title="Right-click and Save Link As to download video" target="_blank" href="<%= linkData.url %>">&darr;</a>
      </span>
    </div>
    <video src="<%= video.video.urls['320'] %>" width="320" poster="<%= video.getFrame(linkData.tcIn) %>" controls="controls" autoplay="autoplay"></video>

    <div class="annotationWrapper">
  
      <div class="trackButtons" data-selected="transcript">
        <span class="trackButton" data-track="transcript">Annotations</span>
      </div>
 
      <div class="annotationText">

      </div>

    </div>
  </div>
</script>
{% autoescape off %}
<div id="wrapper">
  {% ifnotequal text.left_bar '' %}
  <div id="leftBar">
    {{ text.left_bar }}
  </div>
  {% endifnotequal %}
  <div id="essayWrapper">
    <h1>
      {{ text.title }}
    </h1>
    <h4>
        by <a href="#bio">{{ text.author }}</a>, {{text.date|date:"F Y"}}
    </h4>
    <div id="essayAbstract">
      <p>
      {{ text.abstract }}
      </p>
    </div>
    <div id="padmaSidebar">
      <div id="padmaSidebarWrapper"></div>
    </div>

    <div id="essay">
      {{ text.html }}
    </div>
    <div id="authorBio">
      <a name="bio"></a>
      <h3>{{ text.author }}</h3>
        {{ text.author_bio }}
    </div>
  </div>
</div>
{% endautoescape %}
</body>
</html>