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

var padmaContainer;

$(function() {
  padmaContainer = $('#padmaSidebar');
  padmaContainer.data("currentVideo", false);
  function resize() {
    var docWidth = $(document).width();
    var minuser = $('#leftBar').length > 0 ? 650 : 400;
    var essayWidth = docWidth - minuser;
    $('#essayWrapper').css("width", essayWidth);
  }
  resize();
  $(window).resize(resize);
});

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

  //FIXME: tc is WRONG!!!
  if (!$.inArray(data.linkData.type, ["info", "editor", "tc", "tcRange", "layer"])) {
    return false;
  }
//    console.log(data.linkData);

  //FIXME: this whole thing is a bit of rubbish, and they should not set type = 'tcRange'
  if (data.linkData.type == 'info' || data.linkData.type == 'editor' || data.linkData.type == "tc") {
    data.linkData.tcIn = ms2npt(0);
    data.linkData.tcOut = ms2npt(videoObj.video.duration);
    data.linkData.type = "tcRange";
  }
  
  if (data.linkData.type == 'layer') {
    var layer = videoObj.getLayerById(data.linkData.layerId);
    data.linkData.tcIn = ms2npt(layer.time_in);
    data.linkData.tcOut = ms2npt(layer.time_out);
    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']);
      if (transcripts.length > 0) {
        var annotHtml = transcripts[0].value_html;
      } else {
        var annotHtml = '';
      }
      $('.annotationText').html(annotHtml);
      var videoElem = $('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;
          }
          var html = getLayersHtml(time_ms, ['transcript']);
          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();
      });
    }
    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 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;
    }

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