padmaAPI/static/js/padmaList.js

$(document).ready(function() {
  var apiUrl = "/list/videos?listId=" + listId;
  callPadma(apiUrl, initList);
  prevSearchTerms = [];
  $('#search').keyup(function() {
    var val = $(this).val();
    if (val == '') {
      $('#results').html('');
      }
    var words = val.split(" ");
    for (var i = 0; i < words.length; i++) {
      var thisWord = words[i];
      if (!prevSearchTerms.inArray(thisWord) && thisWord.length > 3) {
        doSearch(thisWord);
        prevSearchTerms.push(thisWord);
        }
      } 
    });
  });

function doSearch(word) {
  var matchingLayers = findMatchingLayers(word);
  for (var l in matchingLayers) {
    var layer = matchingLayers[l];
    var imgPath = layer.firstFrame128;
    var html = layer.getThumbElem();
//    var imgHtml = "<img src='" + imgPath + "' />";
    $('#results').append(html);
    }
  }

function findMatchingLayers(word) {
  var matchedLayers = [];
  for (var v in padmaVideos) {
    var layers = padmaVideos[v].layers;
    for (var l in layers) {
      if (layers[l].value) {
        var val = layers[l].value;
        if (val.indexOf(word) != -1) {
          var matchedLayer = new padmaLayer(layers[l], v)
          matchedLayers.push(matchedLayer);
          }        
        }      
      }
    }
  return matchedLayers;
  }

Array.prototype.inArray = function(value) {
// Returns true if the passed value is found in the
// array. Returns false if it is not.
  var i;
  for (i=0; i < this.length; i++) {
    if (this[i] == value) {
      return true;
      }
    }
  return false;
  };

var padmaLayer = function(json, videoIndex) {
  this.id = json.id;
  this.video = videoIndex;
  this.time_in = json.time_in;
  this.time_out = json.time_out;
  this.track = json.track;
  this.value = json.value;
  this.value_html = json.value_html;
  this.creator = json.creator;
  var that = this;
  this.firstFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_in);
  this.firstFrame128 = this.firstFrameStr + ".128.jpg";
  this.firstFrame320 = this.firstFrameStr + ".320.jpg";
  this.lastFrameStr = "http://pad.ma/" + padmaVideos[this.video].id + "/frame/" + ms2npt(that.time_out);
  this.lastFrame128 = this.lastFrameStr + ".128.jpg";
  this.lastFrame320 = this.lastFrameStr + ".320.jpg";
  }

padmaLayer.prototype.getThumbElem = function() {
  var that = this;
  var e = $('<div />');
  e.addClass('matchedLayer');
  e.attr("id", that.id);
  var img = $('<img />');
  if (that.firstFrame128) {
    img.attr("src", that.firstFrame128);
    e.append(img);
    }
  e.attr("data-track", that.track);
  e.attr("data-value", that.value_html);
  e.mouseover(function() {
    var html = '';    
    html += padmaVideos[that.video].title;
    html += "<br />";
    html += $(this).attr('data-track');
    html += '<br />';
    html += $(this).attr('data-value');
    $('#resultDetails').html(html);
    }).mouseout(function() {
    $('#resultDetails').html('');
    });
  return e;
  }

var padmaVideo = function(json, index) {
  this.id = json.id;
  this.index = index;
  this.title = json.title; 
  this.poster = "http://pad.ma/" + this.id + "/poster.jpg";
  this.timeline = "http://pad.ma/" + this.id + "/timeline.png";
  this.wrapperHtml = this.getWrapperHtml()
  this.init();
  this.dataLoaded = false;
  }

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>";
  videoElem.html(html);
  return videoElem;
  }

padmaVideo.prototype.init = function() {
  var that = this;
  $('#videos').append(that.wrapperHtml);
  this.loadData();
  }

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 = "http://pad.ma/" + that.id + "/video.js";
  $.getScript(metaUrl, function() {
    that.meta = video;
    that.metaLoaded();
    var layersUrl = "http://pad.ma/" + that.id + "/layers.js";
    $.getScript(layersUrl, function() {
      that.layers = layers;
      that.layersLoaded();
      });
    });
  }

var padmaVideos = [];
function initList(json) {
  var videos = json.videos;
  for (v in videos) {
    var thisVideo = new padmaVideo(videos[v], v);
    padmaVideos.push(thisVideo);
    }
  }


/**
* Returns time-code in npt format from pos in miliseconds
* @param {Int} pos Position in miliseconds
* @returns {String} Time-code in npt format.
*/
function ms2npt(pos) {
    var h = Math.floor(pos / 3600000);
    var m = Math.floor(pos % 3600000 / 60000);
    var s = Math.floor(pos % 60000 / 1000);
    var ms = pos % 1000;
    return h.toString().pad('0', 2) + ':' + m.toString().pad('0', 2) + ':' + s.toString().pad('0', 2) + '.' + ms.toString().pad('0', 3);
    // return strpad(h.toString(), '0', 2, 'left') + ':' + strpad(m.toString(), '0', 2, 'left') + ':' + strpad(s.toString(), '0', 2, 'left') + '.' + strpad(ms.toString(), '0', 3, 'left');
}

String.prototype.pad = function(pad, len, dir) {
    if (typeof(dir) == 'undefined')
        dir = 'left';
    var str = this;
    while (str.length < len) {
        if (dir == 'left')
            str = pad + str;
        else if (dir == 'right')
            str = str + pad;
    }
    return str;
}