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

var triggers = $('.console-nav li a'), // click on one of these links
	targets = $('.console-content'), // to show the corresponding content
	initial = $('.console-initial'), // the initial content
	initialTrigger = $('.console-nav h2 a'), // link to show initial content
	thumbs = $('.console-initial img.domroll'), // same as triggers, but with thumbmnail images
	lastTrigger = null, // the last link clicked
	lastTarget = null; // the last content viewed

targets.hide(); // hide content at first

// changes the content
triggers.click(function(e){
	e.preventDefault(); // don't follow the link
	initial.hide(); // hide initial content
	
	// 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).show();
	
});

initialTrigger.click(function(e){
	targets.hide();
	
	if (lastTrigger != null) {
		lastTrigger.removeClass('selected');
		lastTrigger = null;
	}
	
	lastTarget = null;
	initial.show();
});

// also changes the content
thumbs.click(function(e){
	initial.hide();
	
	// notice we use thumbs instead of triggers
	var index = thumbs.index(this);
	
	if (lastTrigger != null)
		lastTrigger.removeClass('selected');
	lastTrigger = triggers.eq(index).parent().addClass('selected');
	
	if (lastTarget != null)
		lastTarget.hide();
	lastTarget = targets.eq(index).show();
});

// show a different cursor when hovering over the thumbnails
thumbs.hover(function(e){ // function called on mouse over
	thumbs.eq(thumbs.index(this)).toggleClass('hover');
}, function(e){ // function called on mouse out
	thumbs.eq(thumbs.index(this)).toggleClass('hover');
});

// 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);