var _imgNum = 0;	//画像の枚数
var _current = 0;	//現在の画像
var _imgLayer = 10;	//画像のz-index
var _limit=10; //切替タイマー時間(秒)


$(function(){

	//ステータスボタン配置
	$('#container').append('<div id="status"><ul></ul></div>');
		
	//バナー画像数を繰返処理
	$('#banner img').each(function(){
		//バナー画像にレイヤー値を割振る
		$(this).css('z-index', _imgLayer);
		_imgLayer--;
		if (_imgNum == _current) {
			//currentバナーのみ表示
			$(this).css('display', 'inline');
		} else {
			$(this).css('display', 'none');
		}

		//画像数だけステータスボタン生成
		if (_imgNum == _current) {
			//currntバナーのみアクティブ。メインの画像は表示
			$('#status ul').append('<li class="active"><a href="javascript:void(0);"></a></li>');
			$(this).css('display', 'inline');
		} else {
			$('#status ul').append('<li><a href="javascript:void(0);"></a></li>');
		}
		//インクリメント処理
		_imgNum++;
	});

	//ステータスボタン
	$('#status ul li').hover(function() {
		var thisNum = $('#status li').index(this);
		//マウスオーバーボタンが現在の画像ではなければ実行
		if(thisNum  != _current) {
			imageMove(thisNum);
		}
	});
	
		
	function imageMove(next) {
		//次の画像が最後なら1枚目
		if (next == _imgNum) {
			next = 0;
		} else if(next == -1) {
			next = (_imgNum-1);
		}
		//次の画像をフェードイン＆前面に移動
		$("#banner img").eq(next)
		.fadeIn('slow')
		.css('display', 'inline')
		.css('z-index', '10')
		;
		//現在の画像をフェードアウト＆背面に移動
		$("#banner img").eq(_current)
		.fadeOut('slow')
		.css('display', 'inline')
		.css('z-index', '1')
		;
		//ステータスボタンを移動
		$('#status li').eq(_current).removeClass('active');
		$('#status li').eq(next).addClass('active');
		
		//現在の番号を次の番号にする。
		_current = next;
	}

	//タイマー：機能
	var i=0;
	function photoTimer(){
		$(document).everyTime(1000,'nextTimer',function(){
			i++;
			if(i>=_limit)i=0,imageMove(_current +1);
			$('.sample01').text(i);
		});
	};
	//タイマー：ボタン制御
	$(function(){
		$('#status ul li').hover(
			function() {
				$(document).stopTime('nextTimer');
			},
			function() {
				i=0,
				photoTimer();
			}
		);
	});
	//タイマー：スタート
	$(function(){
				photoTimer();
	});


});