padmatexts/padmaTexts/static/js/views/sidebar.js

var padmaContainer;

$(function() {
  padmaContainer = $('#padmaSidebar');
  padmaContainer.data("currentVideo", false);
  function resize() {
    var docWidth = $(document).width();
    var essayWidth = docWidth - 400;
    $('#leftWrapper').css("width", essayWidth);
  }
  resize();
  $(window).resize(resize);
});

function setupPadmaLink(videoObj, data) {
  var $a = $(data.jq);
//  $a.data("isDisplayed", false);
  if (!$.inArray(data.linkData.type, ["info", "editor", "tcRange"])) {
    return false;
  }

  if (data.linkData.type == 'info' || data.linkData.type == 'editor') {
    data.linkData.tcIn = ms2npt(0);
    data.linkData.tcOut = ms2npt(videoObj.video.duration);
    console.log(data.linkData);
    data.linkData.type = "tcRange";
  }
  
  var linkData = data.linkData;
  //FIXME: put this as a variable, option somewhere?
  var $container = padmaContainer;
  videoObj.currentLayers = [];

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