/*
*
*  画像スクロールスクリプト
*  2010.10.22 作成
*
*/

// 背景要素のID
var bg_id = "bg-img";
// 背景BOXの左端(px) 親要素内での座標．
var x = 0;
// 背景表示幅(px) 0ならdocument.body.clientWidthから幅を取得します．
var bg_width = 0;
// 背景表示高さ(px)
var bg_height = 451;
// 更新間隔(ms) あまり大きくするとスクロールがカクカクになります．
var wait = 100;
// 更新毎の移動量(px) 負の数なら左にスクロール 右へのスクロールは未対応です．
var step = -1;
// スクロール最大値(px) 0なら無限スクロール
// 無限スクロールの場合はstepを-1にしてください．
//var scrollMax = 1000;
var scrollMax = 3200;
// 画像幅 無限スクロールの場合に設定して下さい．
var bg_img_width = 3200;


// スクロール開始
function start(){
	// 背景エレメント取得
	var bg = document.getElementById( bg_id );
	// ウィンドウ幅の取得
	if( bg_width == 0 ){
		bg_width = document.body.clientWidth;
		bg.style.width = bg_width + "px";
	}
	
	// 背景表示領域(クリッピング)設定 body.clientWidth一杯に表示しない場合は有効にする必要がある．
	//bg.style.clip = "rect(0px,"+ bg_width +"px," + bg_height + "px,0px)";
	// スクロール開始
	setTimeout( frame , wait );
}

// スクロール処理
function frame(){
	// 移動後の左端座標
	x += step;
	
	// 無限スクロール処理が必要?
	if( scrollMax == 0 && bg_img_width < Math.abs( x ) ){
		// 画像幅でx座標をリセット
		x = 0;
	}

	// 背景エレメント取得
	var bg=document.getElementById( bg_id );
	// 背景左端設定
	bg.style.left = x + "px";
	// 背景幅
	var w = bg_width + Math.abs( x );
	// 背景幅設定
	bg.style.width = w + "px";
	
	// 背景表示領域(クリッピング)設定 body.clientWidth一杯に表示しない場合は有効にする必要がある．
	//bg.style.clip = "rect(0px,"+ w +"px,200px," + -x + "px)";
	
	// スクロール限度に来たら終了
	if( scrollMax != 0 && Math.abs( x ) > scrollMax  ){
		return;
	}
	// 繰り返し
	setTimeout( frame , wait );
}