function Margin() {		
	if ($(document).width() > 1311) {
		$("#main").css({"width":"1311px"})
	} else {
		$("#main").css({"width":$(document).width()+'px'})
	}
}

function Height(block) {
		$(block).find(".zone div").css({"top": "0"})
		$(block).find(".zone div").css({"height": "auto"})
	if ($("body").height() > ($(block).find(".zone div").height()+$(block).find(".zone .closer").height()+10)) {
		$(block).find(".zone div").css({"margin-top":(Math.round($(block).height()/2) - Math.round($(block).find(".zone div").height()/2))+'px'})
		$(block).find(".zone div").draggable('disable');
		$(block).find(".zone div").css({'cursor':'auto'})
	} else {
		$(block).find(".zone div").css({"height": ($("body").height()-$(block).find(".zone .closer").height()-10) + 'px'})
		$(block).find(".zone div").css({"margin-top":'0px'})
		$(block).find(".zone div").draggable('enable');
		$(block).find(".zone div").css({'cursor':'s-resize'})
		
	}
	$(block).find(".method div").css({"margin-top":(Math.round($(block).height()/2) - Math.round($(block).find(".method div").height()/2))+'px'})

}

function ShowMe(block) {
	$("#forface").hide()
	$("#forbody").hide()
	$("#line .method").hide()
	$("#line").show()
	$(block).show()
	
	if ($(block).is("#forbody")) {
		$("#line").css({"margin-left":"646px"})
	} else {
		$("#line").css({"margin-left":"426px"})
	}
	
	$(block).find(".zone dl a").removeClass("act")
	$(block).find(".zone").show()
	Height(block)
}

var last;

$(document).ready( function() {	
	$(".zone div").draggable({axis: 'y' });	 
	
	Margin()
	$(window).resize( function() {
		Margin();
		Height(last);
	})
	
	$("#line").hide()
	
	$("#head a").click( function() {
		ShowMe("#forface")
		last = "#forface"
		return false;
	})	
	$("#show dd a").click( function() {
		ShowMe("#forface")
		last = "#forface"
		return false;
	})
	
	$("#show dt a").click( function() {
		ShowMe("#forbody")
		last = "#forbody"
		return false;
	})
	$("#body a").click( function() {
		ShowMe("#forbody")
		last = "#forbody"
		return false;
	})
	
	$("#line .zone a.closer").click( function() {
		$(this).parent().parent().find(".method").hide()
		$(this).parent().parent().find(".zone").hide()
		$(this).parent().parent().parent().hide()
		$(this).parent().parent().find(".method ul").html('')
		$(this).parent().find("a").removeClass("act")
		return false;
	})
	
	$("#line .method a.closer").click( function() {
		$(this).parent().hide()
		$(this).parent().find("ul").html('')
		$(this).parent().parent().find("a").removeClass("act")
		if ($(this).is("#forbody *")) {
			$("#line").css({"margin-left":"646px"})	
		} else {
			$("#line").css({"margin-left":"426px"})
		}
		return false;
	})
	
	$("#line .zone dd a").click( function() {
		$("#line").css({"margin-left":"426px"})
		$(this).parent().parent().parent().parent().parent().find(".method ul").html('')
		$(this).parent().parent().parent().parent().parent().find(".method").show()
		$(this).parent().parent().parent().parent().parent().find(".method ul").append($(this).parent().find("ul").html())
		Height($(this).parent().parent().parent().parent().parent())
		$(this).parent().parent().parent().find("dd").removeClass("act")
		$(this).parent().addClass("act")
		return false;
	})	
	



	$("#head a").click( function() {								 
		$('.face-el').hide();
		$('.face-el-' + $(this).attr('class')).show();
		
		ShowMe("#forface")
		return false;
	})	
	
	
	$("#show dd a").click( function() {
		$('.face-el').show();
		ShowMe("#forface")
		return false;
	})
	
	$("#show dt a").click( function() {
		$('.body-el').show();
		ShowMe("#forbody")
		return false;
	})
	$("#body a").click( function() {
		$('.body-el').hide();
		$('.body-el-' + $(this).attr('class')).show();

		ShowMe("#forbody")
		return false;
	})
	
});