$(document).ready( function() {

	
	lastBlock = $("#firstPane");
	lastElement = $("#firstElement div");
	maxWidth = 652;
	minWidth = 100;

	$("#firstPane").css("background", "none");
	$("#firstPane").html("<h2>Latest</h2><a class='button'>See Gallery</a>");

	lastBlock.hover(	
		function(){
			$("#firstPane").html("");
			$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:800, easing:"easeInOutQuart" });
			$(lastElement).animate({width: minWidth+"px"}, { queue:false, duration:800, easing:"easeInOutQuart" });
			$(this).animate({
				width: maxWidth+"px"
				//opacity: 0
			}, { queue:false, duration:800, easing:"easeInOutQuart"});
			lastBlock = this;	
		}
	);
	
	$("#secondPane, #thirdPane, #fourthPane").hover(	
		function(){
			$("#firstPane").html("");
			$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:800, easing:"easeInOutQuart" });
			$(lastElement).animate({width: minWidth+"px"}, { queue:false, duration:800, easing:"easeInOutQuart" });
			$(this).animate({
				width: maxWidth+"px"
				//opacity: 0
			}, { queue:false, duration:800, easing:"easeInOutQuart"});
			lastBlock = this;	
		}
	);
	
	$("#firstPane").mouseover(	
		function(){
			$(this).css("background", "none");
			$(this).html("<h2>Latest</h2><a class='button'>See Gallery</a>");
			$("#secondPane").html("");
			$("#thirdPane").html("");
			$("#fourthPane").html("");
			$("#secondPane").css("background", "url(assets/img/pane-2-nb.jpg) 0 0 no-repeat");
			$("#thirdPane").css("background", "url(assets/img/pane-3-nb.jpg) 0 0 no-repeat");
			$("#fourthPane").css("background", "url(assets/img/pane-4-nb.jpg) 0 0 no-repeat");
		}
	);
	
	$("#secondPane").mouseover(	
		function(){
			$("#firstPane").css("background", "url(assets/img/pane-1-nb.jpg) 0 0 no-repeat");
			$(this).css("background", "none");
			$("#firstPane").html("");
			$(this).html("<h2>Faces</h2><a class='button'>See Gallery</a>");
			$("#thirdPane").html("");
			$("#fourthPane").html("");
			$("#thirdPane").css("background", "url(assets/img/pane-3-nb.jpg) 0 0 no-repeat");
			$("#fourthPane").css("background", "url(assets/img/pane-4-nb.jpg) 0 0 no-repeat");
		}
	);
	
	$("#thirdPane").mouseover(	
		function(){
			$("#firstPane").css("background", "url(assets/img/pane-1-nb.jpg) 0 0 no-repeat");
			$("#secondPane").css("background", "url(assets/img/pane-2-nb.jpg) 0 0 no-repeat");
			$(this).css("background", "none");
			$("#firstPane").html("");
			$("#secondPane").html("");
			$(this).html("<h2>Cities</h2><a class='button'>See Gallery</a>");
			$("#fourthPane").html("");
			$("#fourthPane").css("background", "url(assets/img/pane-4-nb.jpg) 0 0 no-repeat");
		}
	);
	
	$("#fourthPane").mouseover(	
		function(){
			$("#firstPane").css("background", "url(assets/img/pane-1-nb.jpg) 0 0 no-repeat");
			$("#secondPane").css("background", "url(assets/img/pane-2-nb.jpg) 0 0 no-repeat");
			$("#thirdPane").css("background", "url(assets/img/pane-3-nb.jpg) 0 0 no-repeat");
			$(this).css("background", "none");
			$("#firstPane").html("");
			$("#secondPane").html("");
			$("#thirdPane").html("");
			$(this).html("<h2>Details</h2><a class='button'>See Gallery</a>");
		}
	);

});