added license, some optimizations

COPYING

@@ -0,0 +1,14 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
+

padma.layers.js

@@ -9,6 +9,8 @@ var padmaVideo = function(videoId) {
   this.hasAllData = false;
   this.video = {};
   this.layers = {};
+  var that = this;
+  padmaVideo.cache.push(that); 
 }
 
 padmaVideo.prototype.getAllData = function(callback, data) {
@@ -55,20 +57,31 @@ padmaVideo.prototype.noop = function() {
 }
 
 padmaVideo.prototype.getVideoData = function(callback, data) {
+
+
   var that = this;
+  if (this.hasVideoData) {
+    callback(that, data);
+  } else {
     $.getScript(that.videoUrl, function() {
       that.video = video;
       that.hasVideoData = true;
       callback(that, data);
     });
+  }
 }
 
-padmaVideo.prototype.getLayersData = function() {
+padmaVideo.prototype.getLayersData = function(callback, data) {
   var that = this;
-  $.getScript(layersUrl, function() {
+  if (this.hasLayersData) {
+    callback(that, data);
+  } else {
+    $.getScript(that.layersUrl, function() {
       that.layers = layers;
       that.hasLayersData = true;
+      callback(that, data);
     });
+  }
 }
 
 padmaVideo.prototype.getLayerById = function(id) {
@@ -124,3 +137,16 @@ function filterLayersByContributors(layers, users) {
   }
   return matchedLayers;
 }
+
+padmaVideo.cache = [];
+
+padmaVideo.getFromCache = function(videoId) {
+  var cache = padmaVideo.cache;
+  for (var i=0; i<cache.length; i++) {
+    var v = cache[i];
+    if (v.id === videoId) {
+      return v;
+    }
+  }
+  return false;
+}

padma.links.js

@@ -8,15 +8,27 @@
       if ($(this).attr("href") === undefined) {
         return;
       }
+      var href = $(this).attr("href");
+      if (href.indexOf('#') != -1) {
+        return;
+      }
       $(this).attr("target", "_blank");
-      var link = $(this).attr("href");
+      var link = href;
       if (link.indexOf(PADMA_URL) != -1) {
         $(that).addClass('padmaLink');
         var linkData = parsePadmaUrl(link, PADMA_URL);                      
         if (linkData) {
+          //Don't fetch data twice if video id already exists
+          var videoId = linkData.videoId;
+          var cacheVideo = padmaVideo.getFromCache(videoId);
+          if (cacheVideo) {
+            var videoObj = cacheVideo;
+          } else {
+            var videoObj = new padmaVideo(videoId);
+          }
+
    //       console.log(linkData);
-          var v = new padmaVideo(linkData.videoId);
+          videoObj.getVideoData(setupPadmaLink, {'linkData': linkData, 'jq': that});
-          v.getAllData(setupPadmaLink, {'linkData': linkData, 'jq': that});
 //          v.getVideoData(setupSidenotes, {'linkData': linkData, 'jq': that});
 //          getPadmaData(linkData, that, {}); 
         }

text.css

@@ -0,0 +1,147 @@
+body {
+  background: #F0EBE2;
+  color: #363636;
+  font-family: "DejaVu Sans", Arial, Verdana, sans-serif;
+}
+
+.padmaWrapper {
+  width: 100%;
+  position: relative;
+  margin-top: 5px;
+  margin-bottom: 5px;
+/*  margin-left: 10%; */
+  border: 1px solid #333;
+  background: #000;
+  padding: 4px;
+}
+
+#essay {
+  width: 60%;
+}
+
+.para {
+  padding: 8px;
+  border-left: 1px solid #000;
+}
+
+h1 {
+  font-size: 220%;
+  font-family: "Times New Roman", Times, serif;
+}
+
+#loading {
+  position: fixed;
+  right: 0px;
+  bottom: 40%;
+  top: 40%;
+  width: 320px;    
+  height: 20%;
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  background: #898989;
+  opacity: 0;
+  z-index: 1000;
+}
+
+#padmaSidebar {
+  width: 320px;
+  height: 100%;
+  margin-right: 10px;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+	background-color: rgb(187,187,87);
+  background-color: rgba(187,187,87,1);
+  bottom: 0px;
+}
+
+#aboutTxt {
+  color: #363636;
+  padding: 15px;
+  height: 90%;
+  margin-top: 10%;
+  overflow-y: scroll;
+}
+
+#padmaSidebarRelative {
+  position: relative;
+}
+
+.padmaVideo {
+  
+}
+
+.annotationText {
+  color: #363636;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  height: 300px;
+  overflow-y: auto;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;  
+/*  padding: 8px;
+  margin-right: 2px; */
+  overflow-y: auto;
+}
+
+.padmaViewer {
+  position: relative;
+  width: 320px;
+  height: 100%;
+  padding: 6px;
+  color: #fff;
+}
+
+.padmaViewer video {
+  width: 320px;
+  margin-top: 10px;
+  margin-left: -6px;
+}
+
+.padmaLink {
+  text-decoration: none;
+  font-style: italic;
+  font-size: 90%;
+  color: #666;
+}
+
+.padmaLink:hover {
+  color: red;
+}
+
+.padmaViewer .close {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  font-size: 12px;
+  color: #f00;
+  cursor: pointer;
+}
+
+.viewOnPadma {
+  margin-top: 6px;
+  width: 100%;
+  text-align: center;
+}
+
+
+.viewOnPadma a {
+  color: #666;
+  text-decoration: none;
+  font-weight: bold;
+  border: 2px outset #666;
+  padding: 2px; 
+}
+
+.viewOnPadma a:hover {
+  color: #fff;
+}
+
+.viewOnPadma a:active {
+  border: 2px inset #666;
+}

text.js

@@ -0,0 +1,167 @@
+var padmaContainer;
+
+$(function() {
+  padmaContainer = $('#padmaSidebar');
+  padmaContainer.data("currentVideo", false);
+  var docWidth = $(document).width();
+  var essayWidth = docWidth - 360;
+  $('#essay').css("width", essayWidth);
+});
+
+function setupPadmaLink(videoObj, data) {
+  var $a = $(data.jq);
+//  $a.data("isDisplayed", false);
+  var linkData = data.linkData;
+  if (linkData.type != 'tcRange') {
+    return false;
+  }
+  //FIXME: put this as a variable, option somewhere?
+  var $container = padmaContainer;
+  videoObj.currentLayers = [];
+  switch (linkData.type) {
+    case "tcRange":
+      console.log("hi");
+      var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
+//      console.log(mid_frame_npt);
+      var thumbUrl = videoObj.getFrame(mid_frame_npt);
+      break;
+    default:
+      var frame_npt = ms2npt(videoObj.video.poster_frame);
+      var thumbUrl = videoObj.getFrame(frame_npt);
+  }
+
+  //FIXME: Html may need to be conditional on linkData.type, probably put html in switch case above.
+  var html = tmpl("tmpl_tooltip", {'video': videoObj, 'thumbUrl': thumbUrl, 'linkData': linkData});
+//  $a.attr("title", title);
+  $a.tooltip({
+    bodyHandler: function() {
+      return html;
+    },
+    showURL: false
+  });
+
+  $a.click(function(e) {
+
+
+//    sidebarAnimateIn();
+    e.preventDefault();
+    var currentVideo = padmaContainer.data("currentVideo");
+    if (currentVideo == videoObj) { 
+    /*
+     if (!isSidebarVisible()) {
+        sidebarAnimateIn();
+      }
+    */
+      return;
+    }
+    if (currentVideo) {
+      cleanupVideo(currentVideo);
+    }
+    $container.data("currentVideo", videoObj); 
+    if (!isSidebarVisible()) {
+      sidebarAnimateIn();
+    } 
+    videoObj.getLayersData(displayLayer, {'linkData': linkData});
+    $('#loading').fadeTo(0.5);
+    
+    function displayLayer(videoObj, data) {
+      $('#loading').fadeOut();
+      var linkData = data.linkData;
+      var html = tmpl("tmpl_sidebar", {'video': videoObj, 'linkData': linkData});
+      $('#padmaSidebarWrapper').html(html);
+      $('#aboutTxt').hide();
+
+      //FIXME: should be a better way to deal with displaying default layer.
+      var currentLayers = videoObj.getLayersAtTimecode(npt2ms(linkData.tcIn));
+      
+      var transcripts = filterLayersByTracks(currentLayers, ['transcript']);
+  //    console.log(transcripts);
+      if (transcripts.length > 0) {
+        var annotHtml = transcripts[0].value_html;
+      } else {
+        var annotHtml = '';
+      }
+      $('.annotationText').html(annotHtml);
+  /*
+      var closeBtn = $('<div />')
+        .addClass("close")
+        .click(function() {
+          sidebarAnimateOut();
+        })
+        .text("x")
+        .appendTo('.padmaViewer');
+  */
+      var videoElem = $('video');
+  //    var videoObj = video;
+
+      videoElem.bind("play", function() {
+        var that = this
+        videoObj.interval = setInterval(function() {
+          var currentTime = parseInt(that.currentTime * 1000);
+          var time_ms = currentTime + npt2ms(linkData.tcIn);
+          var allLayers = videoObj.getLayersAtTimecode(time_ms);
+          if (videoObj.currentLayers == allLayers) {
+            return;
+          }
+  //        GLOBAL_FOO = allLayers;
+          var transcript = filterLayersByTracks(allLayers, ['transcript'])[0].value_html;
+          if (transcript != $('.annotationText').html()) {
+            $('.annotationText').html(transcript);
+          }
+        }, 150);
+      });
+
+      videoElem.bind("pause", function() {
+        clearInterval(videoObj.interval);
+      });
+
+      videoElem.bind("ended", function() {
+        clearInterval(videoObj.interval);
+  //      cleanupVideo(videoObj);
+        sidebarAnimateOut();
+      });
+    }
+    function sidebarAnimateIn() {
+      /*
+      $container.animate({'width': '400px'}, function() {
+        $(this).animate({'backgroundColor': '#000000'});
+      });
+      var docWidth = $(document).width();
+      var newWidth = docWidth - 440;
+      $('#essay').animate({'width': newWidth + "px"});
+      */
+//      $container.show();
+      $('#aboutTxt').fadeOut();
+    }
+
+    function sidebarAnimateOut() {
+      $container.find('.padmaViewer').empty();
+      $('#aboutTxt').show();
+             
+      /*
+      $container.animate({'width': '0px'}, function() { 
+        $(this).animate({'backgroundColor': '#ffffff'});
+      });
+      $('#essay').animate({'width': '100%'});
+      */
+    }
+
+    function isSidebarVisible() {
+      if (padmaContainer.width() > 0) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  });
+}
+
+//All functions that destroy the video must call this to ensure clean-ups are handled
+//FIXME: actually handle the cleanups.
+// parameter is a padmaVideo object.
+function cleanupVideo(videoObj) {
+  $('video')[0].pause();
+  clearInterval(videoObj.interval);
+  $('.padmaViewer').remove();
+  padmaContainer.data("currentVideo", false);
+}