// featuredSlider.js

(function ($) {
  
  
  // !定数
  
  var contexts = {
    SLIDE_CONTENT: "#featuredSlider",
    SLIDE_CONTENT_LIST: "#featuredSlider > ul",
    SLIDE_CONTENT_LIST_ITEM: "#featuredSlider > ul > li"
  };
  
  var imgPath = {
    ARROW_LEFT: "./common/images/dot/arrow-left-white-11x16.png",
    ARROW_RIGHT: "./common/images/dot/arrow-right-white-11x16.png",
    DOT_DEFAULT: "./common/images/dot/dot-gray-7x7.png",
    DOT_ACTIVE: "./common/images/dot/dot-dblue-7x7.png"
  };
  
  var SLIDER_WIDTH = 944;
  var SLIDER_HEIGHT = 472;
  
  var SLIDE_INTERVAL = 6000;
  var SLIDE_DURATION = 1200;
  var SLIDE_EASING = "easeInOutExpo";
  
  var SLIDE_NAV_DURATION = 600;
  var SLIDE_NAV_EASING = "easeOutQuint";
  
  var TIP_TEXT = "Show Detail";
  
  
  // !変数
  
  var $document = $(document);
  
  var $slide, $gallery, $slideNav, $dotPagination, $toolTip, $tipText;
  
  var sliderEvents = $.simpleGallery.events;
  var sliderNavEvents = $.sliderNav.events;
  var paginationEvents = $.dotPagination.events;
  var tipTextEvents = $.tipText.events;
  
  var paginationBtnData = {
    size: {
      width: 23,
      height: 23
    },
    enter: {
      contents: "<div class=\"image\"><img src=\"" + imgPath.DOT_ACTIVE + "\" alt=\"\"></div>",
      duration: 0
    },
    leave: {
      contents: "<div class=\"image\"><img src=\"" + imgPath.DOT_DEFAULT + "\" alt=\"\"></div>",
      duration: 400
    }
  };
  
  var tooltipOptions = {
    position: {
      x: -40,
      y: 20
    },
    resistance: 4
  };
  
  var isOldIE = !(typeof document.documentElement.style.maxHeight != "undefined");
  
  var timer;

  
  // !初期化
  
  $document.bind("ready", onReadyDocument);
  
  
  // !イベントハンドラ
  
  function onReadyDocument(e) {
    
    var contentsList = [];
    var totalItems = $(contexts.SLIDE_CONTENT_LIST_ITEM).length;
    
    $document.unbind("ready", onReadyDocument);
    
    $(contexts.SLIDE_CONTENT_LIST_ITEM).each(function (i) {

      var contents = $(this).html();
      var $img = $(this).find("img");
      
      contentsList.push(contents);
      $img.attr("alt", "");
      
    });
    
    $slide = $(contexts.SLIDE_CONTENT);
    
    $gallery = $.simpleGallery(SLIDER_WIDTH, SLIDER_HEIGHT, contentsList);
    $gallery.css({
      opacity: 0
    });
    $gallery.bind(sliderEvents.SLIDE_END, onSlideEnd);
    $gallery.bind("mouseenter", onMouseEnterSlider);
    $gallery.bind("mouseleave", onMouseLeaveSlider);
    
    if (contentsList.length > 1) {
      $slideNav = $.sliderNav("<img src=\"" + imgPath.ARROW_LEFT + "\" alt=\"\">", "<img src=\"" + imgPath.ARROW_RIGHT + "\" alt=\"\">");
      $slideNav.bind(sliderNavEvents.CLICK_PREV, onClickPrev);
      $slideNav.bind(sliderNavEvents.CLICK_NEXT, onClickNext);
      $slideNav.bind("mouseleave", onMouseLeaveSliderNav);
      $slideNav.hide(0);
      
      $dotPagination = $.dotPagination(totalItems, paginationBtnData);
      $dotPagination.bind(paginationEvents.CLICK_ITEM, onClickItem);
    }
    
    $tipText = $.tipText(TIP_TEXT);
    
    $toolTip = $.simpleTip(tooltipOptions);
    $toolTip.bind("mouseleave", onMouseLeaveToolTip);
    $toolTip.append($tipText);
    
    $slide.append($gallery, $slideNav, $dotPagination);
    $slide.after($toolTip);
    
    if (contentsList.length > 1) {
      $dotPagination.css({
        left: (SLIDER_WIDTH - $dotPagination.width()) / 2
      });
    }
    
    $(contexts.SLIDE_CONTENT_LIST).remove();
    
    $slide.bind($.imagesLoad.IMAGES_LOAD, onImagesLoad);
    $.imagesLoad($slide);
  }
  
  function onImagesLoad(e) {
    
    var totalItems = $gallery.getTotalItems();

    $gallery.css({
      opacity: 1
    });
    
    if (!$.support.opacity) {
      $gallery.get(0).style.removeAttribute("filter");
    }
    
    if (isOldIE && typeof $slideNav != "undefined") {
      $.pngFix($slideNav);
    }
    
    $gallery.slideTo(totalItems - 1, 0);
    $gallery.slideTo(0, SLIDE_DURATION, SLIDE_EASING);
    
    setTimer();
  }
  
  function onSlideEnd(e) {
    if (typeof $dotPagination != "undefined") {
      var index = $gallery.getCurrentItem();
      $dotPagination.changeCurrentBtn(index);
    }
  }
  
  function onMouseEnterSlider(e) {

    var isToolTipChildren = isChild($(e.relatedTarget), $toolTip);

    if (typeof $slideNav != "undefined") {
      $slideNav.show(SLIDE_NAV_DURATION, SLIDE_NAV_EASING);
    }
    
    if (!isToolTipChildren) {
      $toolTip.show();
      $tipText.show(200);
    }
  }
  
  function onMouseLeaveSlider(e) {

    var isSliderNavChildren = isChild($(e.relatedTarget), $slideNav);
    var isToolTipChildren = isChild($(e.relatedTarget), $toolTip);
    
    if (typeof $slideNav != "undefined" && !isSliderNavChildren && !isToolTipChildren) {
      $slideNav.hide(SLIDE_NAV_DURATION, SLIDE_NAV_EASING);
    }

    if (!isToolTipChildren) {
      $tipText.bind(tipTextEvents.HIDE_COMPLETE, onHideCompleteTipText);
      $tipText.hide(200);
    }
  }
  
  function onClickPrev(e) {
    clearTimer();
    $gallery.slidePrev(SLIDE_DURATION, SLIDE_EASING);
    setTimer();
  }
  
  function onClickNext(e) {
    clearTimer();
    $gallery.slideNext(SLIDE_DURATION, SLIDE_EASING);
    setTimer();
  }
  
  function onMouseLeaveSliderNav(e) {
    if (!isChild($(e.relatedTarget), $gallery)) {
      $slideNav.hide(SLIDE_NAV_DURATION, SLIDE_NAV_EASING);
    }
  }
  
  function onClickItem(e, i) {
    clearTimer();
    $gallery.slideTo(i, SLIDE_DURATION, SLIDE_EASING);
    setTimer();
  }
  
  function onMouseLeaveToolTip(e) {

    if (!isChild($(e.relatedTarget), $gallery)) {
      if (typeof $slideNav != "undefined") {
        $slideNav.hide(SLIDE_NAV_DURATION, SLIDE_NAV_EASING);
      }
      $tipText.bind(tipTextEvents.HIDE_COMPLETE, onHideCompleteTipText);
      $tipText.hide(200);
    }

  }
  
  function onHideCompleteTipText(e) {
    $tipText.unbind(tipTextEvents.HIDE_COMPLETE, onHideCompleteTipText);
    $toolTip.hide();
  }
  
  
  // !プライベート
  
  function setTimer() {
    timer = setTimeout(function loop() {
      $gallery.slideNext(SLIDE_DURATION, SLIDE_EASING);
      timer = setTimeout(loop, SLIDE_INTERVAL);
    }, SLIDE_INTERVAL);
  }
  
  function clearTimer() {
    clearTimeout(timer);
  }
  
  function isChild($target, $parent) {
    
    var $parents = $target.parents();
    var isChild = false;
    
    if (typeof $parent !== "undefined") {
      $parents.each(function (i) {
        if (this === $parent.get(0)) {
          isChild = true;
          return false;
        }
      });
    }
    
    return isChild;
  }

})(jQuery);