// jQuery.bbrk.home.thumb.js

(function ($) {
  
  if (typeof $.bbrk === "undefined") {
    $.bbrk = {};
  }
  
  if (typeof $.bbrk.home === "undefined") {
    $.bbrk.home = {};
  }
  
  $.bbrk.home.thumb = function (data) {
    
    var $thumb;
    var $normal;
    var $active;
    
    var isActive = false;
    
    
    $thumb = $("<div>", {
      "class": "thumb"
    });
    
    $normal = $("<div>", {
      "class": "normal"
    });
    
    $active = $("<div>", {
      "class": "active"
    });
    
    $active.css({
      opacity: 0
    });
    
    $normal.html("<img src=\"" + data.src.normal + "\">");
    $active.html("<img src=\"" + data.src.active + "\">");
    
    $thumb.append($normal, $active);
    
    $thumb.on("mouseenter", onMouseEnter);
    $thumb.on("mouseleave", onMouseLeave);
    
    function onMouseEnter(e) {
      showActiveLayer();
    }
    
    function onMouseLeave(e) {
      
      if (isActive) {
        return;
      }
      
      hideActiveLayer();
    }
    
    function showActiveLayer() {
      $active.stop();
    
      $active.animate({
        opacity: 1
      }, {
        duration: 0
      });
      
      $normal.stop();
    
      $normal.animate({
        opacity: 0
      }, {
        duration: 0
      });
    }
    
    function hideActiveLayer() {
      $active.stop();
      
      $active.animate({
        opacity: 0
      }, {
        duration: 200
      });
      
      $normal.stop();
      
      $normal.animate({
        opacity: 1
      }, {
        duration: 0
      });
    }
    
    $thumb.enableActiveMode = function () {
      if (isActive) {
        return;
      }
      isActive = true;
      showActiveLayer();
    };
    
    $thumb.disableActiveMode = function () {
      if (!isActive) {
        return;
      }
      isActive = false;
      hideActiveLayer();
    };
    
    return $thumb;
  };
  
})(jQuery);