$(document).ready(function(){

var num = 0;
var now_stage = 0;
var all_stage = $("#stage li").length;	// 全ステージ数を取得

var ie6mgn = 0;
jQuery.easing.def = "easeOutQuint";

(jQuery.support.opacity) ? noIE = 1 : noIE = 0;

// エッジ用のマスク画像を挿入
$("#stageArea").before('<img src="../common/mask_stage.png" alt="" width="720" height="505" id="mask" class="pngbg" />');

// ステージの幅測定
$("#stage").css( "width", all_stage * 720 );

// ローカルナビの現在地表示
$('#lNav').children().eq(0).addClass("current");

// URL取得解析
	var url = document.URL;
	urlreq = url.split("#")[1];
	if (urlreq) {
		moveStage(urlreq);
	}

	// ローカルナビにnum設定
	$("#lNav li").each(function(i){
		$(this).attr("rel", i);
	});

	// ローカルナビにイベント設定
	$("#lNav a").click(function(){
		var num = $(this).parent().attr("rel");
		moveStage(num);
		return false;
		})
		.hover(
			function () {
					$(this).css("cursor","pointer");
			},
			function () {
					$(this).css("cursor","default");
		});

	$("a#left").click(function(){
		moveLeft();
		return false;
	});
	$("a#right").click(function(){
		moveRight();
		return false;
	});

	function moveLeft(){
		num = eval(now_stage) - 1;
		if (num < 0) { num = 0; }
		moveStage(num);
	}
	function moveRight(){
		num = eval(now_stage) + 1;
		if (num > (all_stage - 1)) { num = all_stage - 1; }
		moveStage(num);
	}

	// ステージ移動
	function moveStage(num){
		if (noIE) {	$("#mask").fadeOut(10).fadeIn(10); }
		var mgn = num * -720;
		var mgn = mgn + ie6mgn;
		var mgn = mgn + "px";
		$("#stage").stop();
		$("#stage").animate({"marginLeft":mgn}, 2000, "easeOutQuint", function(){ comp(num); });
		now_stage = num;
		return now_stage;
	}

	// 移動完了
	function comp(num){
		if (noIE) {	$("#mask").fadeOut(1500); }
		$('#lNav').children().removeClass("current");
		$('#lNav').children().eq(num).addClass("current");
	}


});