var padmaLists = []

$(document).ready(function() {
  callPadma("/list/get", initLists);
  });


var padmaList = function(json) {
  this.listId = json.listId;
  this.description = json.description;
  this.iconId = json.iconId;
  this.iconPath = "http://pad.ma/" + this.iconId + "/poster.jpg";
  this.title = json.title;
  this.html = this.getHtml();
  this.init();
  }

padmaList.prototype.init = function() {
  var that = this;
  $('#lists').append(that.html);
  }

padmaList.prototype.getHtml = function() {
  var that = this;
  var wrapperElem = $("<div />");
  wrapperElem.addClass("listWrapper");
  var titleElem = $('<div />');
  titleElem.attr("id", this.listId);
  titleElem.addClass("listTitle");
  var titleHtml = "<a href='/list?id=" + this.listId + "'>" + this.title + "</a>"; 
  console.log(titleHtml);
  titleElem.html(titleHtml);
  titleElem.hover(function() {
    $(this).next().show();
    }, function() {
    $(this).next().hide();
    });
  wrapperElem.append(titleElem);
  var innerElem = $('<div />');
  innerElem.addClass("listDetail");
  innerElem.hide();
  var innerHtml = '';
  innerHtml += "<div class='listImage'>";
  innerHtml += "<img src='" + this.iconPath + "' />"
  innerHtml += "</div>";
  innerHtml += "<div class='listDescription'>";
  innerHtml += this.description;
  innerHtml += "</div>";
  innerElem.html(innerHtml);
  innerElem.css("min-height", "150px");
  wrapperElem.append(innerElem);
  return wrapperElem;
  }


function initLists(json) {
  var allLists = json['lists']
  for (l in allLists) {
    console.log(allLists[l]);
    var list = new padmaList(allLists[l]);
//    padmaLists.push(list);
    } 
  }