/**
*
*	/products/colorio/js/index_wide.js
*/

/*************************************************************************
 *		カラリオトップのJavaScriptを定義
*************************************************************************/

/*============================================================================================
*	特集バナー
*/
$(function() {
	bn_feature.init();
});

var bn_feature = {

	/*----------------------------------------------
	*	設定
	*/
	containerSelector: '#bn_feature',
	slideSelector: '.slide',
	navSelector: '.nav',
	currentClass: 'current',
	start: 0,
	slideDuration: 300,
	navDuration: 150,
	easing: 'linear',

	/*----------------------------------------------
	*	初期化
	*/
	init: function() {
		var self = this;
		var container = this.container = $(this.containerSelector);
		var slide = this.slide = container.find(this.slideSelector + ' li');
		var nav = this.nav = $('<ul class="' + this.navSelector.substr(1) + ' clearfix" />');
		slide.each(function(i) {
			var elm = $(this).css({
				opacity: 0
			});
			var a = elm.find('a').eq(0);
			var href = a.attr('href');
			var target = a.attr('target');
			if (!target) target = '_self';
			var li = $('<li class="bt_feature_0' + (i + 1) + '"><a href="' + href + '" target="' + target + '"><span /></a></li>').mouseover(function() {
				self.change(i);
			});
			li.find('span').eq(0).css({
				opacity: 0
			});
			nav.append(li);
		});
		container.append(nav);
		slide.eq(this.start).css({
			display: 'block',
			opacity: 1
		});
		this.IEFix(slide.get(this.start));
		nav.find('li').eq(this.start).find('span').eq(0).css({
			display: 'block',
			opacity: 1
		});
		this.current = this.start;
	},

	/*----------------------------------------------
	*	スライドを変更
	*/
	change: function(index) {
		var self = this;
		var current = this.current;
		var slide = this.slide;
		var nav = this.nav;
		var slideDuration = this.slideDuration;
		var navDuration = this.navDuration;
		var easing = this.easing;
		// カレントを非表示
		slide.eq(current).stop().css({
			zIndex: 1
		}).animate({
			opacity: 0
		}, {
			duration: slideDuration,
			easing: easing,
			complete: function() {
				$(this).css({
					display: 'none'
				});
			}
		});
		nav.find('li').eq(current).find('span').eq(0).stop().animate({
			opacity: 0
		}, {
			duration: navDuration,
			easing: easing,
			complete: function() {
				$(this).css({
					display: 'none'
				});
			}
		});
		// 次のスライドを表示
		slide.eq(index).stop().css({
			zIndex: 2,
			display: 'block'
		}).animate({
			opacity: 1
		}, {
			duration: slideDuration,
			easing: easing,
			complete: function() {
				self.IEFix(this);
			}
		});
		nav.find('li').eq(index).find('span').eq(0).stop().css({
			display: 'block'
		}).animate({
			opacity: 1
		}, {
			duration: navDuration,
			easing: easing
		});
		this.current = index;
	},

	/*----------------------------------------------
	*	IEのバグFix
	*/
	IEFix: function(elm) {
		if (this.isIE) elm.style.removeAttribute('filter');
	},

	/*----------------------------------------------
	*	IE判定フラグ
	*/
	isIE: /msie ([0-9]+)/.test(navigator.userAgent.toLowerCase())
}