/*

*/


$.fn.setupBottom = function() {
  // defaults/vars
  var bottomWidth = 716;
  
  var gridSize = 78;
  var spacing = 4;
  
  var boxes = $(this).find("> li");
  var count = boxes.length;
  var maxPosition = (bottomWidth - count * gridSize) + "px";
  
  var DURATION = "normal";
  var EASING = "swing";
  
  var initialTimeout;
  
  var initialise = function(){
    
    var big = false;
    if(boxes.parent().hasClass("big")) big = true;
    
    //create the popup a for each li based on its child a and then place span and img tags inside the popup a
    boxes.each(function(i, e){
      
      var li = $(e);
      
      if(!li.hasClass("small") && (big || li.hasClass("big"))){
        li.data('closedTarget', {height:"0", width:"0"});
        li.data('openTarget', {height:"157px", width:"209px"});
      } else {
        li.data('closedTarget', {height:"0", width:gridSize+"px"});
        li.data('openTarget', {height:gridSize+"px", width:gridSize+"px"});
      }
      
      var content = li.find(">> span, img").css({display:"block"}).remove();
      var a = li.find("> a");
      var popup;
      if(a.length > 0){
        popup = $('<a href="'+a.attr("href")+'" class="popup"></a>');
      } else {
        popup = $('<div class="popup"></div>');
      }
      popup.append(content);
      popup.css(li.data('closedTarget'));
      
      li.append(popup);
      
      //deal with open images
      if(li.hasClass("open")){
        var imgReady = true;
        if(popup.css('backgroundImage').length > 3){
          var image = checkImage(popup.css('backgroundImage'));
          if(image.loaded != true){
            imgReady = false;
            image.image.load(function(){
              popup.animate(li.data('openTarget'), DURATION);
              initialTimeout = setTimeout(function(){
                parentOut.call(boxes.parent());
              }, 3000);
            });
          }
        }
        if(imgReady) {
          popup.animate(li.data('openTarget'), DURATION);
          initialTimeout = setTimeout(function(){
            parentOut.call(boxes.parent());
          }, 3000);
        }
      }
      
      
    });
  }
  
  // Event handlers
  var hoverIn = function() {
    var li = $(this);
    //close all other elements
    li.siblings().removeClass("open");
    //li.siblings().find(">> strong").css({display: "block"});
    li.siblings().each(function(i, e){
      var li = $(e);
      li.find("> .popup").stop().animate(li.data('closedTarget'), DURATION, EASING);
    });
    
    if(li.hasClass('current')) return; //dont open the current one
    //open this element
    li.addClass("open");
    
    if (li.hasClass("more")) return;
    //li.find(">> strong").css({display: "none"});
    //li.find(">> strong").css({display: "block"});
    li.find("> .popup").stop().animate(li.data('openTarget'), DURATION, EASING);
    //
    clearTimeout(initialTimeout);
    
  };
  
  //when the mouse leaves the parent ul/wrapper element
  var parentOut = function(){
    //close all elements
    $(this).children().each(function(i, e){
      var li = $(e);
      li.removeClass("open");
      li.find("> .popup").stop().animate(li.data('closedTarget'), DURATION, EASING);
    });
    //$(this).find(">>> strong").css({display: "block"});
    clearTimeout(initialTimeout);
  }
  
  var hoverOut = function() {
    //$(this).css({backgroundImage:"url(../images/atom-image.gif)"})
  };
  
  //build the popups and set any vars
  initialise();
  // Attach events
  boxes.parent().bind("mouseleave", parentOut);
  boxes.hover(hoverIn, hoverOut);
  //
  $(this).pngFix();
  //
};