$(document).ready(function(){

	/*
	 * set animations
	 * inspired by http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
	 */

	$('#car #portrait').hover(function(){
		$(".cover", this).stop().animate({top:'150px'},{queue:false,duration:500});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:500});
	});


	// make it draggable
	$(".cube, #portrait, #logo").draggable({ grid: [50, 50] });
	
	// layout 1
	$(".layoutDefault").click(function(){$(".cube").removeClass("ly1")});
	// layout 2
	$(".layout1").click(function(){$(".cube").addClass("ly1")});

	// reset positions
	$(".resetLayout").click(function(){resetLayout()});

});

/*
 * reset the layout
 */
function resetLayout() {

	$(".cube").removeClass("ly1");

	$("#portrait").stop().animate({left:'200px', 	top: '0px'},{queue:false,duration:1000});
	$("#logo").stop().animate({left:'200px', 		top: '155px'},{queue:false,duration:1000});

	$(".cube.a1").stop().animate({left:'150px', 	top: '0px'},{queue:false,duration:1000});
	$(".cube.a2").stop().animate({left:'550px', 	top: '0px'},{queue:false,duration:1000});
	
	$(".cube.b1").stop().animate({left:'150px', 	top: '50px'},{queue:false,duration:1000});
	$(".cube.b2").stop().animate({left:'350px', 	top: '50px'},{queue:false,duration:1000});
	$(".cube.b3").stop().animate({left:'500px', 	top: '50px'},{queue:false,duration:1000});

	$(".cube.c1").stop().animate({left:'0px', 		top: '100px'},{queue:false,duration:1000});
	$(".cube.c2").stop().animate({left:'350px', 	top: '100px'},{queue:false,duration:1000});

	$(".cube.d1").stop().animate({left:'0px', 		top: '150px'},{queue:false,duration:1000});
	$(".cube.d2").stop().animate({left:'500px', 	top: '150px'},{queue:false,duration:1000});

	$(".cube.e1").stop().animate({left:'0', 		top: '200px'},{queue:false,duration:1000});
	$(".cube.e2").stop().animate({left:'200px', 	top: '200px'},{queue:false,duration:1000});
	$(".cube.e3").stop().animate({left:'450px', 	top: '200px'},{queue:false,duration:1000});

	$(".cube.f1").stop().animate({left:'0px', 		top: '250px'},{queue:false,duration:1000});
	$(".cube.f2").stop().animate({left:'100px', 	top: '250px'},{queue:false,duration:1000});
	$(".cube.f3").stop().animate({left:'350px', 	top: '250px'},{queue:false,duration:1000});

}