$(function(){
	zoom = 0;
	//top tabs click
	$(".tabsMap a").click(function() {
		if (zoom == 0) {
		var place = $(this).attr("href");
		selState(place);
		} else {
			var place = $(this).attr("href");
			selState(place);
			$(".areaMap").css({display: "block"});
			$(".areaMap").animate({"opacity" : 1}, 500);
			$(".detail").animate({"opacity" : 0}, 200);
			$(".detail, .linksMap a.sel").removeClass("sel");
			$(".zoomout").removeClass("zoomout");
		        $("#areatables").css({display: "none"});
			zoom = 0;
		}
		return false;
	});
	
	//zoom
	$(".point .zoomer").click(function() {
		var place = $(this).attr("href");
		$("." + place + "_map, .linksMap a." + place).addClass("sel");
		$(".zoom").addClass("zoomout");
		$(".areaMap").animate({"opacity" : 0}, 200, function(){$(".areaMap").css({display: "none"});});
		$(".detail.sel, .zoom").animate({"opacity" : 1}, 500);
		$("#areatables").css({display: "block"});
		drag(place);
		zoom = 1;
		return false;
	});
	
	//zoomout
	$(".zoom").click(function() {
		$(".areaMap").css({display: "block"});
		$(".areaMap").animate({"opacity" : 1}, 500);
		$(".detail").animate({"opacity" : 0}, 200);
		$(".detail, .linksMap a.sel").removeClass("sel");
		$(".zoomout").removeClass("zoomout");
		$("#areatables").css({display: "none"});
		zoom = 0;
		return false;
	});
	
	//linksMap click
	$(".linksMap a.maplink").click(function(){
		$(".detail").animate({"opacity": 0}, 200);
		$(".detail, .linksMap a.sel").removeClass("sel");
		$(".zoom").addClass("zoomout");
		var place = $(this).attr("href");
		$("." + place + "_map, .linksMap a." + place).addClass("sel");
		$(".areaMap").animate({"opacity" : 0}, 200, function(){$(".areaMap").css({display: "none"});});
		$(".detail.sel, .zoom").animate({"opacity" : 1}, 500);
		$("#areatables").css({display: "block"});
		drag(place);
		zoom = 1;
		return false;
	});
	
	//popup hover
	$(".point").bind("mouseenter",function(){
		$(this).addClass("hov");
		$(this).children(".popupbox").addClass("hov");
		$(this).children(".popupbox").animate({"opacity": 1}, 300);
	}).bind("mouseleave",function(){
		$(this).removeClass("hov");
		$(this).children(".popupbox").animate({"opacity": 0}, 150, function(){
			$(this).removeClass("hov");
		});
	});
	});
	
	//state change function
	function selState(state) {
	$(".areaMap .area, .tabsMap, .linksMap").animate({"opacity" : 0}, 150, function() {
		$(".areaMap .area.sel, .tabsMap ul.sel, .linksMap ul.sel, .areaMap .area.sel .point, .tabsMap ul a.sel, .linksMap ul a.sel, .detail.sel, .point.sel").removeClass("sel");
		$(".areaMap #" + state + ", .tabsMap a." + state + ", .linksMap ul." + state + ", .point." + state).addClass("sel");
		$(".areaMap .area, .tabsMap, .linksMap").animate({"opacity" : 1}, 300);
	});
	}
	
	//drag
  function drag(place) {
		if ($('#details').outerWidth() <= $('#details .'+place+'_map').width()) {
	  var leftx = $('#details').offset().left + $('#details').outerWidth() - $('#details .'+place+'_map').width();
		var lefty = $('#details').offset().top + $('#details').outerHeight() - $('#details .'+place+'_map').height(); 
		var rightx = $('#details').offset().left; 
		var righty = $('#details').offset().top; 
		$('#details .'+place+'_map').draggable({containment: [leftx,lefty,rightx,righty] });
		} else {}
	}