// JavaScript Document
jQuery(document).ready(function(){
																													
(function(jQuery) {
jQuery(function(){
	var _imgNum = 0;	//画像の枚数
	var _imgSize = 621;	//画像のサイズ
	var _imgAlt = "";	//alt取得
	var _current = 0;	//現在の画像
	var _timer = 4800;	//タイマー時間
	var _intervaltime =0;
	
	//各ボタンの配置
	

	jQuery('#rotation-banner .sub-screen').append('<ul class="navigation"> </ul>');	
	//画像サイズ取得
	//_imgSize = jQuery('#rotation-banner .main-screen img').width();
	

	//メイン画像の数だけ繰り返す
	jQuery('#rotation-banner .main-screen .topic').each(function(){																																																													
		//画像をずらして外に配置
		jQuery(this).css('margin-left', -_imgSize);
		//画像の数だけページネーションボタンを作成
		if (_imgNum == _current) {
			//currentだったらアクティブ、メインの画像は表示
			
			_imgAlt = jQuery('#rotation-banner .main-screen img:eq('+_imgNum+')').attr("alt");
			jQuery('#rotation-banner .sub-screen .navigation').append('<li><a href="javaScript:void(0)" onclick="return false;" class="active">'+_imgAlt+'</a></li>');
			jQuery(this).css('margin-left', '0px');
		} else {
			
			_imgAlt = jQuery('#rotation-banner .main-screen img:eq('+_imgNum+')').attr("alt");
						jQuery('#rotation-banner .sub-screen .navigation').append('<li><a href="javaScript:void(0)" onclick="return false;">'+_imgAlt+'</a></li>');
		}
		//ループの数をカウントして_imgNumに入れる
		_imgNum++;
	});


	//ページネーションクリック
	jQuery('#rotation-banner .sub-screen .navigation li a').click(function() {
		var thisNum = jQuery('#rotation-banner .sub-screen .navigation li a').index(this);
		//押したボタンが現在の画像じゃなかったら実行
		if(thisNum  != _current) {
			imageMove(thisNum );
			clearInterval (_intervaltime);	
		}
	});
	//一定時間ごとにimageMoveを実行
	_intervaltime = setInterval(function(){
		imageMove(_current +1);
	}, _timer);
	
	function imageMove(next) {
		//次の画像が次の画像より多きかったら右に配置（小さかったら左）
		var pos;
		if (_current < next) {
			pos = -_imgSize;
		} else {
			pos = _imgSize;
		}
		
		//次の画像が最後なら1枚目、１枚目なら最後
		if (next == _imgNum) {
			next = 0;
		} else if(next == -1) {
			next = (_imgNum-1);
		}

		//次の画像を動かす
		jQuery("#rotation-banner .main-screen .topic").eq(next)
		//次の画像を次の位置に配置
		.css("margin-left", pos)
		.animate({
			marginLeft: "0"
		},"fast");
		
		//現在の画像を動かす
		jQuery("#rotation-banner .main-screen .topic").eq(_current)
		.animate({
			marginLeft: -pos
		},"fast");
		
		//ページネーション現在のを消し次のをアクティブに
		jQuery('#rotation-banner .sub-screen .navigation li a').eq(_current).removeClass('active');
		jQuery('#rotation-banner .sub-screen .navigation li a').eq(next).addClass('active');
		
		//現在の番号を次の番号にする。
		_current = next;
	}
});
})(jQuery);	

});