// JavaScript Document

(function(jQuery) {
jQuery(function(){
	var _imgNum = 0;	//画像の枚数
	var _imgSize = 0;	//画像のサイズ
	var _imgSrc = "";	//タイマー時間
	var _current = 0;	//現在の画像
	var _timer = 6000;	//タイマー時間
	var _intervaltime =0;

	//各ボタンの配置


	jQuery('#rotation-banner').append('<div class="sub-screen clear"><div class="left"> <a href="javaScript:void(0)" onclick="return false;"><img src="'+BASE_URL+'other/banner/nc_rotation_banner/images/navibox.gif" id="btn-prev" alt="前へ" /></a> </div><div class="navigation"><div class="position clear"><ul></ul></div></div><div class="right"> <a href="javaScript:void(0)" onclick="return false;"><img src="'+BASE_URL+'other/banner/nc_rotation_banner/images/navibox.gif" id="btn-next" alt="次へ" /></a> </div></div>');
	//画像サイズ取得
	_imgSize = jQuery('#rotation-banner .main-screen img').width();
	_imgAlt = jQuery('#rotation-banner .main-screen img').attr("alt");

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

	//ボタンをクリック
	jQuery('#btn-next').click(function(){
		imageMove(_current +1);
		clearInterval (_intervaltime);
	});
	jQuery('#btn-prev').click(function(){
		imageMove(_current -1);
		clearInterval (_intervaltime);
	});


	//ページネーションクリック
	jQuery('#rotation-banner .sub-screen .navigation .position ul li').click(function() {
		var thisNum = jQuery('#rotation-banner .sub-screen .navigation .position li').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 li").eq(next)
		//次の画像を次の位置に配置
		.css("margin-left", pos)
		.animate({
			marginLeft: "0"
		},"fast");

		//現在の画像を動かす
		jQuery("#rotation-banner .main-screen li").eq(_current)
		.animate({
			marginLeft: -pos
		},"fast");

		//ページネーション現在のを消し次のをアクティブに
		jQuery('#rotation-banner .sub-screen .navigation .position li').eq(_current).removeClass('active');
		jQuery('#rotation-banner .sub-screen .navigation .position li').eq(next).addClass('active');

		//現在の番号を次の番号にする。
		_current = next;
	}
});
})(jQuery);