// JavaScript Document
var changeArea;
var changeAreaH;
var prevArea;
var prevAreaH;
var beseH

var tokyoH;
var saitamaH;
var gunmaH;
var nagoyaH;
var fukuokaH;
var nagasakiH;




$(window).load(function () {
		
		tokyoH = $('#tokyo').height();
		saitamaH = $('#saitama').height();
		gunmaH = $('#gunma').height();
		nagoyaH = $('#nagoya').height();
		fukuokaH = $('#fukuoka').height();
		nagasakiH = $('#nagasaki').height();
});

$(function(){
	$('.changeBtn').click(function(){
		prevArea = $("#changeBox").attr("class");
		changeArea = $(this).attr("name");
		changeArea = changeArea.replace("2","");

		if (prevArea == changeArea) {
			return;
		}
		
		var idcate =$(this).attr("name");

		var idcate =idcate.replace("2","");
		
		var id1 = $("#" + idcate + " " + ".listBox").eq(0).attr("id");
		var id2 = $("#" + idcate + " " + ".listBox").eq(1).attr("id");
		
		keyIndex[id1] = 0;
		nextIndex[id1] = 0;

		keyIndex[id2] = 0;
		nextIndex[id2] = 0;

		$(".inBox:animated").stop().css({opacity: 1.0}).animate({opacity: 0.0}, 50);


		$("#changeNavi a").removeClass("on");
		$(this).addClass("on");
		
		if (prevArea == "tokyo") {
			prevAreaH = tokyoH;	
		}else if (prevArea == "saitama") {
			prevAreaH = saitamaH;	
		}else if (prevArea == "gunma") {
			prevAreaH = gunmaH;	
		}else if (prevArea == "nagoya") {
			prevAreaH = nagoyaH;	
		}else if (prevArea == "fukuoka") {
			prevAreaH = fukuokaH;	
		}else if (prevArea == "nagasaki") {
			prevAreaH = nagasakiH;	
		}else {
			return;
		}

		if (changeArea == "tokyo") {
			changeAreaH = tokyoH;	
		}else if (changeArea == "saitama") {
			changeAreaH = saitamaH;	
		}else if (changeArea == "gunma") {
			changeAreaH = gunmaH;	
		}else if (changeArea == "nagoya") {
			changeAreaH = nagoyaH;	
		}else if (changeArea == "fukuoka") {
			changeAreaH = fukuokaH;	
		}else if (changeArea == "nagasaki") {
			changeAreaH = nagasakiH;	
		}else {
			return;
		}
		baseH = changeAreaH + 109 ;
		$("div#changeBox").animate({height: baseH - 50}, 500);
		$("div#changeBox").animate({height: baseH}, 500);
		$("#" + prevArea + " " + ".inBox").stop().css({opacity: 1.0}).animate({opacity: 0.0}, 500);
		setTimeout( "changeBox()",550);
	});
});
function changeBox(){
	$("#" + prevArea).css({display: "none"});

	$("#" + changeArea).css({height: prevAreaH}).animate({height: changeAreaH}, 500);
	$("#changeBox").removeClass("tokyo saitama gunma nagoya fukuoka nagasaki");
	$("#changeBox").addClass(changeArea);
	$("#" + changeArea + " " + ".inBox").stop().css({opacity: 0.0}).animate({opacity: 1.0}, 800);
}