var activeOpacity = 1;
var inactiveOpacity = .6;

function showTimeline(){
	//Fade/hide the boxes and infos
	$(".box").fadeTo("fast", inactiveOpacity);
	$(".info").hide();
	//Show the timeline
	$("#timeline-home").fadeIn();
};
function showBox(boxId) {
	//Construct the info id
	var infoId = boxId + "-info";
	//Fade/hide the other elements
	$("#timeline-home").hide();
	$(".box").not(boxId).fadeTo("fast", inactiveOpacity);
	//Show the active box
	$(boxId).fadeTo("fast", activeOpacity);
	//Hide the other infos
	$(".info").not(infoId).hide();
	//Show the info associated with the current box
	$(infoId).fadeIn();
};
jQuery(document).ready(function() {
	// Set up the document. Hide/fade necessary elements.
	$(".info").hide();
	$(".box").fadeTo("fast", inactiveOpacity);
	
	// Set up the events.
	$("#header").hover(function() {
		showTimeline();
	});
	$("#general-info").hover(function() {
		showTimeline();
	});
	$("#faster").hover(function() {
		showBox("#faster");
	});
	$("#easier").hover(function() {
		showBox("#easier");
	});
	$("#paper").hover(function() {
		showBox("#paper");
	});
	$("#privacy").hover(function() {
		showBox("#privacy");
	});
});