(function($){ // don't pollute the global namespace
$(document).ready(function(){

var triggers = $('.console-nav a'), // click on one of these links
	targets = $('.console-content'), // to show the corresponding content
	lastTrigger = null, // the last link clicked
	lastTarget = null; // the last content viewed

$('.console').show();
targets.hide(); // hide content at first
lastTarget = targets.eq(0).show();

// changes the content
triggers.click(function(e){
	e.preventDefault(); // don't follow the link
	
	// find out which link was clicked
	var index = triggers.index(this);
	
	// return the last trigger to its normal state
	if (lastTrigger != null)
		lastTrigger.removeClass('selected');
	
	// toggle the selected state for this link
	lastTrigger = triggers.eq(index).parent().addClass('selected');
	
	// hide the last content viewed
	if (lastTarget != null)
		lastTarget.hide();
	
	// show the new content
	lastTarget = targets.eq(index + 1).show();
	
});

// same thing, but for triggers
triggers.hover(function(e){ // function called on mouse over
	triggers.eq(triggers.index(this)).parent().toggleClass('hover');
}, function(e){ // function called on mouse out
	triggers.eq(triggers.index(this)).parent().toggleClass('hover');
});

});})(jQuery);