// jQuery.bbrk.nav.js

(function ($) {
  
  if (typeof $.bbrk === "undefined") {
    $.bbrk = {};
  }
  
  $.bbrk.nav = function (data) {

    
    var $nav = $(data);
    var $listItem = $nav.find("ul li");
    var btnList = [];
    
    $listItem.each(function (i){
    
      var $this = $(this);
      var $contents = $this.children("a");
      var $leave = $contents.children("img");
      var $enter = $("<img>", {
        "class": "enter",
        "src": $leave.attr("src").replace("-white", "-yellow")
      });
      
      if ($this.hasClass("current")) {
        $leave.css({
          opacity: 0
        });
      }
      else {
        $enter.css({
          opacity: 0
        });
      }
      
      $contents.append($enter);
      
      btnList.push({
        enter: $enter,
        leave: $leave
      });
      
    });
    
    $listItem.on("mouseenter", onMouseEnter);
    $listItem.on("mouseleave", onMouseLeave);
    
    
    function onMouseEnter(e) {

      var $currentTarget = $(e.currentTarget);
      var index = $currentTarget.index();
      var $enter, $leave;
      
      $enter = btnList[index].enter;
      $leave = btnList[index].leave;
      
      $enter.stop();
      $enter.animate({
        opacity: 1
      }, {
        duration: 0
      });
      
      $leave.stop();
      $leave.animate({
        opacity: 0
      }, {
        duration: 0
      });
    }
    
    function onMouseLeave(e) {

      var $currentTarget = $(e.currentTarget);
      var index = $currentTarget.index();
      var $enter, $leave;

      if ($currentTarget.hasClass("current")) {
        return;
      }
      
      $enter = btnList[index].enter;
      $leave = btnList[index].leave;
      
      $enter.stop();
      $enter.animate({
        opacity: 0
      }, {
        duration: 200
      });
      
      $leave.stop();
      $leave.animate({
        opacity: 1
      }, {
        duration: 50
      });
    }
    
    return $nav;
  };
  
})(jQuery);