$(document).ready(function () {

	// Initally hide all but show the first
	$(".my_descriptions").hide();
	$(".my_descriptions:first").show();
	$(".my_images").hide();
	$(".my_images:first").show();

	
	// Mark the first link as 'current'
	$(".my_links:first").addClass('current');
	
	// Hook up the links to the descriptions
	$('.my_links').click(function(){
		
		// This is the id of the link just clicked (A_ prefix)
		var link_id = $(this).attr('id');
		
		// This is the id of the description (B_ prefix)
		var description_id = 'B_' + link_id.substr(2);

		// This is the id of the image (C_ prefix)
		var image_id = 'C_' + link_id.substr(2);

		// Un-highlight all links and highlight the current one
		$('.my_links').removeClass('current');
		$('#' + link_id).addClass('current');
		
		// Hide all descriptions and show the new current one
		$(".my_descriptions").hide();
		$('#' + description_id).show();

		// Hide all images and show the new current one
		$(".my_images").hide();
		$('#' + image_id).show();
		
		return false; // stop browser adding # to the URL 
	});
});