// jQuery.bbrk.home.thumbList.js

(function ($) {
  
  if (typeof $.bbrk === "undefined") {
    $.bbrk = {};
  }
  
  if (typeof $.bbrk.home === "undefined") {
    $.bbrk.home = {};
  }
  
  $.bbrk.home.thumbList = function (data) {
    
    var $thumbList;
    var $contents;
    var $thumbGroup;

    var nameList = ["basic", "jellybean", "pattern", "flag", "sf1", "sf2", "animal", "cute1", "cute2", "hero", "artist1", "artist2"];
    var thumbList = [];
    
    var events = $.bbrk.home.thumbList.events;
    
    var thumbGroupWidth;
    
    var currentLeft = 0;
    var currentThumb = 0;

    
    $thumbList = $("<div>", {
      "class": "thumbList"
    });
    
    $contents = $("<div>", {
      "class": "contents"
    });
    
    $thumbGroup = $("<div>", {
      "class": "thumbGroup"
    });
    
    $thumbList.html($contents);
    $contents.html($thumbGroup);
    
    
    for (var i = 0; i < nameList.length; ++i) {
      
      var $thumb = $.bbrk.home.thumb(data[nameList[i]].thumb);
    
      $thumb.on("click", onThumbClick);
      
      $thumb.css({
        left: ((152 + 12) * i) + 20 + "px"
      });
      
      $thumbGroup.append($thumb);
      thumbList.push($thumb);
    }
      
    thumbGroupWidth = 20 + 20 + (152 * thumbList.length) + (12 * (thumbList.length - 1));
    
    
    function onThumbClick(e) {
      
      var index;
      
      for (var i = 0; i < thumbList.length; ++i) {
        if (thumbList[i].get(0) === e.currentTarget) {
          index = i;
          break;
        }
      }
      
      $thumbList.trigger(events.THUMB_CLICK, [index]);
    }
    
    
    $thumbList.hide = function () {
      $thumbList.css({
        display: "none"
      });
    };
    
    $thumbList.show = function (duration, easing) {

      $thumbList.css({
        display: "block"
      });
      
      $contents.stop();
      
      $contents.animate({
        top: 0
      }, {
        duration: duration,
        easing: easing
      });

    };
    
    $thumbList.move = function (index) {

      if (index === currentThumb) {
        return;
      }

      var left, next;
      
      if (thumbGroupWidth < $thumbList.width()) {
        next = 0;
      }
      else if (index > currentThumb) {
        next = currentLeft + 1;
      }
      else if (index < currentThumb && index === 0) {
        next = 0;
      }
      else {
        next = currentLeft - 1;
      }
      
      if (next < 1) {
        left = 0;
        currentLeft = 0;
      }
      else if (thumbGroupWidth - ((next - 1) * (152 + 12)) - (152 / 3 * 2) - 20 < $thumbList.width()) {
        left = - (thumbGroupWidth - $thumbList.width());
        currentLeft = Math.ceil((thumbGroupWidth - $thumbList.width() - 20 - 20) / (152 + 12));
      }
      else {
        left = - ((next - 1) * (152 + 12)) - (152 / 3 * 2) - 20;
        currentLeft = next;
      }
      
      $thumbGroup.stop();
      
      $thumbGroup.animate({
        left: left + "px"
      }, {
        duration: 400,
        easing: "easeOutExpo"
      });
      
      currentThumb = index;
    };
    
    $thumbList.setActive = function (index) {
      
      for (var i = 0; i < thumbList.length; ++i) {
        thumbList[i].disableActiveMode();
      }
      
      thumbList[index].enableActiveMode();
    };
    
    return $thumbList;
  };
  
  $.bbrk.home.thumbList.events = {
    THUMB_CLICK: "thumbClick"
  };
  
})(jQuery);