// jQuery関数
(function($) {
  // Fader
  $.fn.fader = function(settings) {
    var s = settings;
    
    return this.each(function() {
      var container = $(this); // スライダー全体のコンテナ
      var panelContainer = $(s.panelContainer); // パネルのコンテナ
      var navigations = $(s.navigations);
      var panels = $(s.panels);
      var mainImage = s.defaultImage;

      // トリガー設定
      $.each(navigations, function(i, elem) {
        $(elem).bind('mouseover', function(e, n, speed, fadeFlg) { // triggerで呼び出すとき用の引数
          var n = (function() {
            if (n == undefined) {
              return i;
            } else {
              return n;
            }
          })();
          var speed = speed || 200;

          if (panelContainer.hasClass('animated')) panels.filter(':animated').stop();

          fade.apply(panels, [panelContainer, n, speed, fadeFlg]);
          panels.css('zIndex', 1);
          panels.eq(n).css('zIndex', 2);
        });
      });

      // ページロード時にメイン画像を表示する
      var defaultImageNum = 0;

      // リファラーに対象文字列があるときは、それを表示
      if (mainImage != '') {
        navigations.each(function(i) {
          var id = $(this).find('a').attr('href');
          var catUrl = id.replace('/', '');
          if (mainImage == catUrl) {
            defaultImageNum = i;
            return false;
          }
        });
      // リファラーに対象文字列がないときは、ランダム
      } else {
        var l = navigations.length;
        var defaultImageNum = Math.floor(Math.random() * l);
      }

      navigations.eq(defaultImageNum).trigger('mouseover', [defaultImageNum, 400, true]);
    });
    
    // フェード関数
    function fade(panelContainer, n, speed, fadeFlg) {
      var fadeFlg = fadeFlg || false;
      var self = this;
      if (fadeFlg) {
        panelContainer.addClass('animated');
        self.removeClass('active');
        self.eq(n).addClass('active');
        self.css('opacity', 0);
        self.fadeTo(100, 0);
        self.eq(n).animate({
          opacity: 1
        }, {
          duration: speed,
          easing: 'linear',
          complete: function() {
            panelContainer.removeClass('animated');
          }
        })
      } else {
        self.css('opacity', 0);
        self.eq(n).css('opacity', 1);
      }
    }
  }
})(jQuery);


$(function() {
  // トップページの左ナビにマウスオーバーでメイン画像を切り替える
  $('#mainImage').fader({
    navigations: '#selectNaviImage li',
    panelContainer: '#imageWrapper',
    panels: '#imageWrapper li',
    defaultImage: MAIN_IMG_DEFAULT
  });
})