padmaEssay/test.js

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;

  //FIXME: put this as a variable, option somewhere?
  var $container = padmaContainer;
  videoObj.currentLayers = [];
  switch (linkData.type) {
    case "tcRange":
      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);
    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) {

    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').hide();
    }

    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;
      }
    }
//    sidebarAnimateIn();
    e.preventDefault();
    var currentVideo = $container.data("currentVideo");
    if (currentVideo == videoObj) { 
    /*
     if (!isSidebarVisible()) {
        sidebarAnimateIn();
      }
    */
      return;
    }
    if (currentVideo) {
      cleanupVideo(currentVideo);
    }
    $container.data("currentVideo", videoObj); 
    if (!isSidebarVisible()) {
      sidebarAnimateIn();
    } 
    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();
    });

  });

}

//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);
}