/* IE用 背景画像読込キャッシュ
#
#　スプライト画像、背景画像などのチラつき防止
#
--------------------------------------------------------------------*/
try{ document.execCommand('BackgroundImageCache', false, true); }catch(e){}


/* addEventFunc 関数
#
#　イベントの追加用
#
--------------------------------------------------------------------*/
var addEventFunc = function(func){
	try {
		window.addEventListener('load', func, false);
	} catch (e) {
		window.attachEvent('onload', func);
	}
}


/* objCheck 関数
#
#　オブジェクトチェック用関数
#
#　戻り値
#　　true: 有効なオブジェクト
#　　false: 無効なオブジェクト（undefined,null,''）
#
--------------------------------------------------------------------*/
function objCheck(obj) {
	return (typeof obj == 'undefined' || obj == null || obj == '') ? false : true;
}


/* objAlpha 関数
#
#　オブジェクトにアルファ値を適用する
#　引数：　obj = object, ratio = 0～1（小数点第2位まで指定）
#
--------------------------------------------------------------------*/
function objAlpha(obj, ratio){
	obj.style.filter = 'alpha(opacity=' + ratio + ')';
	obj.style.MozOpacity = ratio/100;
	obj.style.opacity = ratio/100;
}


/* smartRollover 関数
#
#　画像のロールオーバーを画像名で判断して設定する
#
--------------------------------------------------------------------*/
var smartRollover = {
	init: function(){
		smartRollover.setup('img');
		smartRollover.setup('input');
	},
	setup: function(tag) {
		var ovr = '_ovr.';
		var out = '_out.';

		var obj = document.getElementsByTagName(tag);
		if(objCheck(obj) == false) return false;

		var preload = [];
		for(var i=0; i<obj.length; i++) {
			if(obj[i].src.indexOf(out) != -1){
				var src = obj[i].src;
				obj[i].ext = src.slice(src.lastIndexOf('.')+1, src.length);
				obj[i].nimg = src;
				obj[i].oimg = src.replace(out + obj[i].ext, ovr + obj[i].ext);

				preload[i] = new Image();
				preload[i].src = obj[i].oimg;

				obj[i].onmouseover = function() {
					this.setAttribute('src', this.oimg);
				};
				obj[i].onmouseout = function() {
					this.setAttribute('src', this.nimg);
				};
			}
		}
		return false;
	}
}
addEventFunc(smartRollover.init);


/* xSlider 関数
#
#　フェード付きスライド + ボタンスライド
#
--------------------------------------------------------------------*/
var xSlider = function(obj){
	this.wrapper = obj.wrapper;
	this.images = obj.images;
	this.button = obj.button;
	this.banner = obj.banner;
	this.range = 181;
	this.rangeFix = 181;
	this.accept = 1;
	this.speed = 5;
	this.now = 0;
	this.next = 1;
	this.vi = 5;	//フェードイン速度(%)
	this.vo = 20;	//フェードアウト速度(%)
	this.ratio = 100;
	this.vector = 0;
	this.delay= 5000;		//バナースクロールまでの時間（通常時：7000）
	this.fadeTime = {};
	this.scrollTime = {};
	this.flg = false;
	this.stopEvt = false;
}
xSlider.prototype = {
	setup: function(){//初期設定
		var self = this;

		this.wrapper.onmouseover = function(){ self.stopEvt = true; return false; };//マウスオバー時、スクロール停止
		this.wrapper.onmouseout = function(){ self.stopEvt = false; return false; };//マウスアウト時、スクロール再開

		this.button[0].onclick = function(){
			if(self.flg) return false;
			self.flg = true;
			self.vector = 0;
			return self.action();
		};
		this.button[1].onclick = function(){
			if(self.flg) return false;
			self.flg = true;
			self.vector = 1;
			return self.action();
		};

		this.banner[0].parentNode.style.width = this.rangeFix * this.banner.length + 'px';

		for(var i=0,len=this.banner.length; i<len; i++){
			if(this.images[i].className == 'current'){
				this.now = i;
				this.next = i+1;
			}
			this.banner[i].style.backgroundColor = '#00BD6C';
			this.banner[i].next = i;
			this.banner[i].onclick = function(){
				if(self.flg) return false;
				this.blur();
				if(this.className != 'current'){
					self.flg = true;
					var after = 0;
					var before = 0;
					for(var i=0,len=self.banner.length; i<len; i++){
						if(self.banner[i] == this){ after = i; }
						if(self.banner[i].className == 'current'){ before = i; }
					}
					self.vector = (after <= before) ? 0 : 1;
					return self.action();
				}
				return false;
			};
			this.banner[i].onmouseover = function(){
				var img = this.getElementsByTagName('img')[0];
				objAlpha(img, 85);
				return false;
			};
			this.banner[i].onmouseout = function(){
				var img = this.getElementsByTagName('img')[0];
				objAlpha(img, 100);
				img.removeAttribute('style')
				return false;
			};
			this.images[i].onmouseover = function(){
				var img = this.getElementsByTagName('img')[0];
				objAlpha(img, 85);
				return false;
			};
			this.images[i].onmouseout = function(){
				var img = this.getElementsByTagName('img')[0];
				objAlpha(img, 100);
				img.removeAttribute('style')
				return false;
			};
		}

		this.banner[0].className = 'current';
		this.banner[0].parentNode.insertBefore(this.banner[this.banner.length-1] ,this.banner[0]);
		this.banner[0].parentNode.insertBefore(this.banner[this.banner.length-1] ,this.banner[0]);
		this.banner[0].parentNode.style.marginLeft = - this.rangeFix + 'px';
		this.range = this.rangeFix;

		this.scrollTime = setTimeout(function(){ self.auto(); }, this.delay);
	},
	fade: function(){//イメージのフェードイン・アウト
		if(this.fadeTime) clearTimeout(this.fadeTime);
		var self = this;
		if(this.ratio < 0){
			this.ratio = 100;
			objAlpha(this.images[this.now], this.ratio);
			objAlpha(this.images[this.next], this.ratio);
			this.images[this.now].removeAttribute('style');
			this.images[this.next].removeAttribute('style');
			this.now = this.next;
			this.next = this.next+1;
			if(this.now > this.images.length-1){ this.now = 0; }
			if(this.next > this.images.length-1){ this.next = 0; }
			this.flg = false;
			this.active();
			this.scrollTime = setTimeout(function(){ self.auto(); }, this.delay);
			return;
		}
		this.ratio -= this.vo;
		objAlpha(this.images[this.now], this.ratio);
		this.fadeTime = setTimeout(function(){ self.fade(); },10);
		return;
	},
	action: function(){//バナークリック時の動作
		this.scroll();
		return false;
	},
	scroll: function(){//バナーのスクロール
		if(this.scrollTime) clearTimeout(this.scrollTime);

		var self = this;
		if(this.range <= 0){
			this.sort();
			return false;
		}

		var top = ~~(this.range/this.speed);
		this.range = ((top <= this.accept) && (top >= -this.accept))
			? this.range - this.accept
			: this.range - top;
		this.banner[0].parentNode.style.marginLeft = (!this.vector)
			? - this.range + 'px'
			: - this.rangeFix*2 + this.range + 'px';
		this.scrollTime = setTimeout(function(){ self.scroll(); }, 10);
	},
	sort: function(){
		(!this.vector) ? this.banner[0].parentNode.insertBefore(this.banner[this.banner.length-1] ,this.banner[0])
						: this.banner[0].parentNode.appendChild(this.banner[0]);

		this.banner[0].parentNode.style.marginLeft = - this.rangeFix + 'px';
		this.range = this.rangeFix;

		this.banner[2].className = 'current';

		this.next = this.banner[2].next;
		this.active();
		this.fade();

		return false;
	},
	active: function(){//フェード画像のアクティブ化
		for(var i=0; i<this.images.length; i++){
			this.images[i].className = (i == this.now) ? 'current' : (i == this.next) ? 'next' : '';
			this.banner[i].className = (this.banner[i].next == this.now) ? 'current' : '';
		}
	},
	auto: function(){//自動実行
		var self = this;
		if(this.stopEvt){
			if(this.scrollTime) clearTimeout(this.scrollTime);
			this.scrollTime = setTimeout(function(){ self.auto(); }, this.delay);
		} else {
			this.button[1].onclick();
		}
	}
}

addEventFunc((function(){
	var wrapper = document.getElementById('promotion-area'),
		images = document.getElementById('images'),
		banner = document.getElementById('banners').getElementsByTagName('ul')[0],
		button = document.getElementById('buttons').getElementsByTagName('li');

	var slider = new xSlider({
		wrapper: wrapper,
		images: images.getElementsByTagName('li'),
		banner: banner.getElementsByTagName('li'),
		button: button
	});
	slider.setup();
}));