padmaAPI/static/js/padmaVideo.js

var padmaVideo = function(json, index) {
  this.id = json.id;
  this.index = index;
  this.title = json.title;
  this.jq = {};
  this.poster = PADMA_BASE_URL + "/" + this.id + "/poster.jpg";
  this.timeline = PADMA_BASE_URL + "/" + this.id + "/timeline.png";
  this.wrapperHtml = this.getWrapperHtml()
  this.init();
  this.dataLoaded = false;
  this.layers = [];
}

padmaVideo.prototype.getWrapperHtml = function() {
  var that = this;
  var videoElem = $('<div />');
  videoElem.attr('id', that.id);
  videoElem.addClass("videoWrapper");
  var html = '';
  html += "<div class='videoTitle'>";
  html += this.title;
  html += "</div>";
  html += "<div class='videoPoster'>";
  html += "<img src='" + this.poster + "' />";
  html += "</div>";
/*
  html += "<div class='videoTimeline' data-index='" + this.index + "'>";
  html += "<img src='" + this.timeline + "' class='timeline' />";
  html += "</div>";
*/ 
  html += "<div class='videoMeta'>";
  html += "Loading...";
  html += "</div>";
  html += "<div class='searchResults'></div>";
  videoElem.html(html);
  return videoElem;
}

/*
var Timeline = function(padmaVideo) {
  this.videoId = padmaVideo.id;
  this.layers = padmaVideo.layers;
  this.url = padmaVideo.timeline;
  this.e = $('.videoTimeline').find('@attr
  }
*/


padmaVideo.prototype.init = function() {
  var that = this;
  $('#videos').append(that.wrapperHtml);
  this.jq = $('#' + that.id);
  this.loadData();
//  console.log("hi");
  return;
}

padmaVideo.prototype.getLayerById = function(id) {
  var that = this;
  for (var i=0; i < that.layers.length; i++) {
    var thisLayer = that.layers[i];
    if (thisLayer.id == id) {
      return thisLayer;
    }
  }
  return false; 
}

padmaVideo.prototype.metaLoaded = function() {
  var that = this;
  $('#' + that.id + ' .videoMeta').html(that.meta.description_html);
}

padmaVideo.prototype.layersLoaded = function() {
  this.dataLoaded = true;
  $('#bottomBar').fadeIn();
/*  $('.videoTimeline').mousemove(function(e) {
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    var index = $(this).attr('data-id');
    var thisVideo = padmaVideos[index];
    });
*/ 
}

padmaVideo.prototype.loadData = function() {
  var that = this;
  var metaUrl = PADMA_BASE_URL + "/" + that.id + "/video.js";
//  console.log(metaUrl);
  $.getScript(metaUrl, function() {
    that.meta = video;
    that.metaLoaded();
    var layersUrl = PADMA_BASE_URL + "/" + that.id + "/layers.js";
    $.getScript(layersUrl, function() {
      var theseLayers = layers;
      for (var i=0; i < theseLayers.length; i++) {
        var thisLayer = new padmaLayer(theseLayers[i], that);
        that.layers.push(thisLayer);
      }
      that.layersLoaded();
    });
  });
}