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

// ボタン画像のCSSセレクタ名
var selector_prev_button	= "p.prevBtn";
var selector_next_button	= "p.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";
    }
}