/* 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;
}


/* xFader 関数
#
#　フェード付きスライド
#
--------------------------------------------------------------------*/
var xFader = function(trgs, navi){
	this.trgs = trgs;
	this.navi = navi;
	this.time;
}
xFader.prototype = {
	setup: function(){
		var self = this;
		var ovr = '_ovr.';
		var out = '_out.';
		var preload = [];

		for(var i=0; i<this.trgs.length; i++){
			var image = this.navi[i].getElementsByTagName('img')[0];
			image.ext = image.src.slice(image.src.lastIndexOf('.')+1, image.src.length);
			image.nimg = image.src;
			image.oimg = image.src.replace(out + image.ext, ovr + image.ext);
			preload[i] = new Image();
			preload[i].src = image.oimg;

			if(this.trgs[i].className == 'before'){
				this.before = i;
				this.after = i+1;
			}
			objAlpha(this.trgs[i], 100);

			this.navi[i].num = i;
			this.navi[i].onmouseover = function(){
				if(this.className == 'active') return false;
				if(self.ratio != 100) return false;
				self.vector = this.num - self.before;
				return self.toggle();
			}
		}
		this.active();
		this.fadeTime = setTimeout(function(){ self.auto() },this.delay);
	},
	toggle: function(){
		this.after = this.before + this.vector;
		this.active();
		this.fade();
		return false;
	},
	fade: function(){
		if(this.fadeTime) clearTimeout(this.fadeTime);
		var self = this;

		if(this.ratio <= 0){
			this.ratio = 100;
			objAlpha(this.trgs[this.before], this.ratio);
			this.before = this.after;
			this.after = (this.before == this.trgs.length-1) ? 0 : (this.before+1);
			this.active();
			this.fadeTime = setTimeout(function(){ self.auto() },this.delay);
			return;
		}
		this.ratio -= this.vo;
		objAlpha(this.trgs[this.before], this.ratio);

		var self = this;
		this.fadeTime = setTimeout(function(){ self.fade() },10);
		return;
	},
	active: function(){
		for(var i=0; i<this.trgs.length; i++){
			this.trgs[i].className = (i == this.before) ? 'before'
									: (i == this.after) ? 'after' : '';
			this.navi[i].className = (i == this.before) ? 'active' : '';

			var img = this.navi[i].getElementsByTagName('img')[0];
			if(this.navi[i].className == 'active'){
				img.setAttribute('src', img.oimg);
			} else {
				img.setAttribute('src', img.nimg);
			}
		}
	},
	auto: function(){//自動実行
		this.active();
		this.fade();
		return false;
	}
}
//初期設定
xFader.prototype.vo = 10;		//フェードアウト速度(%)
xFader.prototype.before = 0;	//表示している画像番号
xFader.prototype.after = 1;		//次に表示する画像番号
xFader.prototype.vector = 1;	//表示方向の切り替え　-1が前 1が次
xFader.prototype.delay= 5000;
xFader.prototype.flg = 1;
xFader.prototype.ratio = 100;

//実行関数
function rollBanner01 (){
	var target = document.getElementById('slideItems');
	if(objCheck(target) == false) return false;

	var trgs = target.getElementsByTagName('li');
	var navi = document.getElementById('slideNavi').getElementsByTagName('li');

	var roll01 = new xFader(trgs, navi);
	roll01.setup();
}
addEventFunc(rollBanner01);