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

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

// スライドの速さ
var Speed = 0.4;	// 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[0] == undefined) || (next[0] == undefined)) {
            return;
        }

	// 表示する項目が少ない場合は、進む/戻るボタンを消す
	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 = Math.ceil((div_s.length - section_length) / section_stride);
	}

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

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

}

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

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

function updateBtnColorOnClick()
{
    prev  = jQuery(selector_prev_button);
    next  = jQuery(selector_next_button);
    if (index > 0 && jQuery(prev[0]).hasClass('prevGrayBtn')) {
        jQuery(prev[0]).removeClass('prevGrayBtn');
    } else if (index == 0 && !jQuery(prev[0]).hasClass('prevGrayBtn')) {
        jQuery(prev[0]).addClass('prevGrayBtn');
    }

    if (index < max_index && jQuery(next[0]).hasClass('nextGrayBtn')) {
        jQuery(next[0]).removeClass('nextGrayBtn')
    } else if (index == max_index && !jQuery(next[0]).hasClass('nextGrayBtn')) {
        jQuery(next[0]).addClass('nextGrayBtn');
    }
    updateCursorPointOfEachChild();
}

function updateCursorPointOfEachChild()
{
    $A(prev[0].children).each(function(child) {
        child.style.cursor = (index == 0) ? 'default' : 'pointer';
    });
    $A(next[0].children).each(function(child) {
        child.style.cursor = (index == max_index) ? 'default' : 'pointer';
    });
}

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";
	}
}