padmaEssay/test.js

var $padmaQuery = jQuery.noConflict();


(function($) {
  var p = padmaConfig;
  var padmaContainer;
  var wikiContainer;

  $(function() {
    padmaContainer = $('<div />').attr("id", "padmaSidebar").css({'position': 'fixed', 'bottom': '0px', 'top': '0px', 'right': '0px', 'width': '0px', 'background': p.background, 'color': p.color}).appendTo('body');
    padmaContainer.data("currentVideo", false);
    wikiContainer = $('<div />').attr("id", "wikiWrapper").css({'width': '100%'});
    $('body').wrapInner(wikiContainer);
  });

  function setupPadmaLink(videoObj, data) {
    var $a = $(data.jq);
  //  $a.data("isDisplayed", false);
    var linkData = data.linkData;

    var $container = padmaContainer;
    videoObj.currentLayers = [];
    switch (linkData.type) {
      case "tcRange":
        var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
        var thumbUrl = videoObj.getFrame(mid_frame_npt);
      default:
        var frame_npt = ms2npt(videoObj.video.poster_frame);
        var thumbUrl = videoObj.getFrame(frame_npt);
    }

    var html = videoObj.video.title + "<br />";
    html += "<img src='" + thumbUrl + "' /> <br />";
    html += "Click to Play";
    $a.tooltip({
      bodyHandler: function() {
        return html;
      },
      showURL: false
    });

    $a.click(function(e) {

      function sidebarAnimateIn() {
        $container.show();
        $container.animate({'width': '400px'});
        var docWidth = $(document).width();
        var newWidth = docWidth - 440;
        $('#wikiWrapper').animate({'width': newWidth + "px"});
      }

      function sidebarAnimateOut() {
        $container.animate({'width': '0px'}).hide();
        sidebarWrap.remove();
        $('#wikiWrapper').animate({'width': '100%'});
        cleanupVideo(videoObj);
      }

      function isSidebarVisible() {
        if (padmaContainer.width() > 0) {
          return true;
        } else {
          return false;
        }
      }

      e.preventDefault();
      var currentVideo = $container.data("currentVideo");
      if (currentVideo) {
        cleanupVideo(currentVideo);
      }
      $container.data("currentVideo", videoObj); 
      if (!isSidebarVisible()) {
        sidebarAnimateIn();
      }
      padmaContainer.empty();
      var sidebarWrap = $('<div />')
        .attr("id", "padmaSidebarWrapper")
        .css({'position': 'relative', 'height': '100%'})
        .appendTo($container); 
      var videoElem = $('<video />')
        .addClass('padmaVideo')
        .attr("src", videoObj.getLayerVideo(linkData.tcIn, linkData.tcOut))
        .attr("autoplay", "autoplay")
        .attr("controls", "controls")
        .appendTo(sidebarWrap)
        .css({'width': '400px'});
      var annotHeight = $(window).height() - parseInt((videoObj.video.height / videoObj.video.stream_width) * 400) - 20;
      var annotations = $('<div />')
        .addClass('annotationText')
        .css({'height': annotHeight + "px", "overflow-y": "auto"})
        .appendTo(sidebarWrap);
      var padmaButtons = $('<div />')
        .addClass('padmaButtons')
        .css({'position': 'absolute', 'bottom': '1px', 'right': '8px', 'color': padmaConfig.color, 'font-size': '12px'})
        .appendTo(sidebarWrap);
      var padmaUrl = linkData.url;
      var padmaLayerBtn = $('<a />')
        .addClass('padmaButton')
        .text("See on Padma")
        .attr("target", "_blank")
        .attr("href", padmaUrl)
        .css({'text-decoration': 'none', 'color': '#ffff00'})
        .appendTo(padmaButtons)
        .hover(function() {
          $(this).css({'color': padmaConfig.color});
          }, function() {
          $(this).css({'color': '#ffff00'});
        }); 
      var html = getLayersHtml(npt2ms(linkData.tcIn), p.default_layers); 
      $('.annotationText').html(html);

      //tc in ms
      //tracks is an array like ['transcript', 'description']
      function getLayersHtml(tc, tracks) {
        //FIXME: This code is retarded, but we do want a way to group transcripts, descriptions, etc.
        var currentLayers = videoObj.getLayersAtTimecode(tc);
        var annotLayers = [];
        var annotHtml = '';
        for (var t=0; t < tracks.length; t++)  {
          var thisTrack = tracks[t];          
          var thisTrackLayers = filterLayersByTracks(currentLayers, [thisTrack]);
          if (thisTrackLayers.length > 0) {
            annotHtml += thisTrack + "s<br />";
          }
          for (var i=0; i < thisTrackLayers.length; i++) {
            var thisTrack = thisTrackLayers[i];
            var thisHtml = '';
            thisHtml += "<span class='padmaContributor'>" + thisTrack.creator + ":</span>";
            thisHtml += " <span class='padmaAnnotation'>" + thisTrack.value_html + "</span>";
            thisHtml += "<br /><br />";
            annotHtml += thisHtml;  
          }
        }
        return annotHtml;
      }


      var closeBtn = $('<div />')
        .addClass("closeBtn")
        .click(function() {
          sidebarAnimateOut();
        })
        .text("x")
        .appendTo(sidebarWrap)
        .css({'position': 'absolute', 'top': '2px', 'right': '2px', 'cursor': 'pointer', 'z-index': '100'});

      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 html = getLayersHtml(time_ms, p.default_layers);
          if (html != $('.annotationText').html()) {
            $('.annotationText').html(html);
          }
        }, 150);
      });

      videoElem.bind("pause", function() {
        clearInterval(videoObj.interval);
      });

      videoElem.bind("ended", function() {
        clearInterval(videoObj.interval);
  //      cleanupVideo(videoObj);
  //      sidebarAnimateOut();
      });

    });

  }

  window.setupPadmaLink = setupPadmaLink;

  //All functions that destroy the video must call this to ensure clean-ups are handled
  // parameter is a padmaVideo object.
  function cleanupVideo(videoObj) {
    if ($('.padmaVideo').length > 0) {
  //  console.log("cleaning");
      $('.padmaVideo').get(0).pause();
      $('.padmaVideo').remove();
    }
    clearInterval(videoObj.interval);
  //  $('.padmaViewer').remove();
    padmaContainer.data("currentVideo", false);
  }

})(jQuery);