$(document).ready(function() {
  var apiUrl = "/list/videos?listId=" + listId;
  callPadma(apiUrl, initList);
  });

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.wrapperHtml = this.getWrapperHtml()
  this.init();
  }

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='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() {
  return true;
  }

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