$(function(){

	// automatic position adjusting
	$(document).ready(function(){
		var controller_pos = $("#controller").position();
		var controller_width = $("#controller").width();
		var content_top_pos = controller_pos.left + controller_width + 20 + 40; // this 40 means (L+R) padding of #controller
		$("#content-top").css("left",content_top_pos+"px")
	});

	$("#navi").accordion( {clearStyle: true, active: false} );

	$(".move-matrix").click(function(e){
		$("#content-top").fadeOut("slow");
		$(".contentbox").fadeIn("slow");
		var target = "#"+$(this).text();
		var target_pos = $(target).position();
		var target_pos_x = target_pos.left;
		var target_pos_y = target_pos.top;
		var controller_pos = $("#controller").position();
		var controller_width = $("#controller").width();
		var content_top_pos = controller_pos.left + controller_width + 20 + 40; // this 40 means (L+R) padding of #controller
		$("#matrix").animate({
			top: 0-target_pos_y+20+"px",
			left: 0-target_pos_x+content_top_pos+"px"
		},500);
	});

});