var videoList = null;
videoList = (function(){
  var videos = {
/**
*   To add a video simply copy and paste this commented code and fill the values
*   "name" has to be distinct from other names
*   "title" is what will appear on the page
*   "preview" is the image that will appear on the player when not playing
*   "smallpreview" the image used for navigation
*   "file" the place of the file in the corresponding folder. The folder is only
*   useful in development. In prod. all videos belong in the FLV folder.
*
*      
*    "name" : {
*      title: "",
*      category: "",
*      preview : "",
*      smallPreview : "",
*      file: ""
*    },
*/

	 "brent" : {
      title: "Brent",
      category: "collision",
      preview : "brent_03.jpg",
      smallPreview : "brent.jpg",
      file: "Brent.flv"
    }
    
  };
  
  var previewDiv = {
    'background-image'    : 'url(../images/previews/small/)',
    'background-position' : '0px 2px',
    'background-repeat'   : 'no-repeat'
  };
  
//  function getNewDiv(cssClass){
//    var div = $(document.createElement("div"));
//    if (cssClass) {
//      div.addClass(cssClass);
//    }
//    return div;
//  };
  
  function getNewDiv(attribs, cssClass, innerHTML){
    var div = $(document.createElement("div"));
    if (attribs) {
      div.attr(attribs);
    }
    if (cssClass) {
      div.addClass(cssClass);
    }
    if (innerHTML) {
      div.html(innerHTML);
    }
    return div;
  };
  
  function getVideosByCategory(category){
    var videosObj = {};
    for (var index in videos){
      if (videos[index].category == category){
        videosObj[index] = videos[index];
//        videosObj.push(videos[index]);
      }
    }
    return videosObj;
  }
  
  function addVideoPreviewCSS(obj, img){
    var cssObj = {
      "background-image"      : "url(images/previews/small/"+ img +")",
      "background-position"   : "0px 2px",
      "background-repeat"     : "no-repeat"
    }
    obj.css(cssObj);
    return true;
  }
  
  function attachClickEvents(videoDiv, videoIndex){
    videoDiv.click(function(){
      TM.loadVideo(videoIndex);
      $(".activePreview").removeClass("activePreview");
      $(this).parent("div").addClass("activePreview");
      $('html, body').animate({scrollTop:190}, 'slow');
    });
  }
  
  return {
    getVideo : function(videoStr){
      var videoObj = videos[videoStr];
      if (videoObj){
        return videoObj;
      }
      return null;
    },
    loadCategory: function(category){
      $("#videosPreview").html("");
      var catVideos = getVideosByCategory(category);
      var row = getNewDiv(null, "previewsRow");
      var col = null;
      var videoDiv = null;
      for (var i in catVideos){
        col = getNewDiv(null,"previewColumn");
        videoDiv = getNewDiv({id: i},"smallPreview", catVideos[i].title);
        addVideoPreviewCSS(videoDiv, catVideos[i].smallPreview);
        attachClickEvents(videoDiv, i);
        col[0].appendChild(videoDiv[0]);
        row[0].appendChild(col[0]);
      }
      $("#videosPreview")[0].appendChild(row[0]);
    }
  };
})();