// アイテム設定
var section_length			= 4;	// 一度に表示できる数
var section_width			= 196;	// 項目の横幅
// 項目のCSSセレクタ名。このセレクタの数を数え、section_lengthの数と比較し、進む/戻るボタンの表示/非表示などをする。
var selector_section_name	= "div.slideBox";

// ボタン画像のCSSセレクタ名
var selector_prev_button	= "a.prevBtn";
var selector_next_button	= "a.nextBtn";

// スライドボックスの要素名
var selector_slidebox_id	= "sliderBox";

// スライドの速さ
var Speed = 0.3;	// 0より大きく、1以下で指定。1に近いほど速い、1にするとアニメーションなし。※2以上にすると止まらなくなる。


// 初期化処理
var index = 0;
var idTimer = null;
Event.observe(window,"load",init);
function init(){
	
	// 表示する項目をすべて取得
	div_s  = $$(selector_section_name);

	// 進む/戻るボタンの取得
	prev  = $$(selector_prev_button);
	next  = $$(selector_next_button);
	
	// 表示する項目が少ない場合は、進む/戻るボタンを消す
	if(div_s.length <= section_length){
		prev[0].innerHTML = "";
		next[0].innerHTML = "";
	} else {
		// 進む/戻るボタンのクリックイベント登録
		Event.observe(prev[0],"click",OnPrev);
		Event.observe(next[0],"click",OnNext);
		
		// indexの最大値を計算
		max_index = div_s.length - section_length;
	}

	$(selector_slidebox_id).style.width = section_width*div_s.length + "px";

	// タイマーは常に起動しておく。
	idTimer=setInterval("SlideAnimation()",10);
	
}

// 戻るボタンが押されたときの処理
function OnPrev(e){
	// indexをデクリメント
	if(index > 0){
		StartSlide(--index);
	}
}

//進むボタンが押されたときの処理
function OnNext(e){
	// indexをインクリメント
	if(index < max_index){
		StartSlide(++index);
	}
}

var NowScrollLeft = 0;	// 現在のスクロール位置
var DstScrollLeft = 0;	// 目的のスクロール位置

// 目的のスクロール位置を移動
function StartSlide(index){
	DstScrollLeft = index * section_width;
}

// 現在のスクロール位置と目的のスクロール位置が違う場合、
// (DstScrollLeft - NowScrollLeft)*speed ほどスクロールしてNowScrollLeftを更新
// 10ミリ秒毎に実行。実行毎に(DstScrollLeft - NowScrollLeft)が小さくなるので減速アニメーションになる。
function SlideAnimation(){

	sliderItems = $(selector_slidebox_id);
	
//	NowScrollLeft = sliderItems.scrollLeft;
	
	if(NowScrollLeft != DstScrollLeft){
		
		d = DstScrollLeft - NowScrollLeft;
		
		NowScrollLeft += d*Speed;
//		sliderItems.scrollLeft = NowScrollLeft + "px";
		sliderItems.style.marginLeft = "-" + NowScrollLeft + "px";
	}
}