// アイテム設定
var section_length          = 2;    // 一度に表示できる数
var section_width           = 422;  // 項目の横幅
// 項目の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 ((prev.size() > 0) && (next.size() > 0)) {
        // 表示する項目が少ない場合は、進む/戻るボタンを消す
        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;
        }
    }

    if ($(selector_slidebox_id)) {
        $(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";
    }
}