$().ready(function() {
	//set up our menu items
	$('.kwicks').kwicks({
		max : 685,
		spacing : 3,
		sticky : true,
		event : 'click',
		duration : 600
	});
	
	//Display the appropriate div using a jquery fade in and hide all others using a fade out
	//This might be improved by storing the active (visible) div in a global variable and only fading that one out, but
	//that *might* open up the possibility of having two divs visible at once as a result of a fast click before the fadeout finishes (worth trying)
	$("#kwick_1").click(function(){
		$("#content1").fadeIn("slow");
		$("#content2").fadeOut("slow");
		$("#content3").fadeOut("slow");
		$("#content4").fadeOut("slow");
	});
	$("#kwick_2").click(function(){
		$("#content1").fadeOut("slow");
		$("#content2").fadeIn("slow");
		$("#content3").fadeOut("slow");
		$("#content4").fadeOut("slow");
	});
	$("#kwick_3").click(function(){
		$("#content1").fadeOut("slow");
		$("#content2").fadeOut("slow");
		$("#content3").fadeIn("slow");
		$("#content4").fadeOut("slow");
	});
	$("#kwick_4").click(function(){
		$("#content1").fadeOut("slow");
		$("#content2").fadeOut("slow");
		$("#content3").fadeOut("slow");
		$("#content4").fadeIn("slow");
	});
});