// The setImage function sets the image src of the big main image to a new image.
// The new image is defined by the offset of the image within the thumbnail list (stored in the li's).
// The "active" state of the thumbnail images is also reset and set correctly on the clicked image
function setImage(offset)
{
	$("#main_image img").attr("src", $("#gallery li:eq(" + (offset - 1) + ") img").attr("src"));
	
	// Set all gallery images to be inactive
	$("#gallery li").each(function( intIndex ){
		$(this).find('img').attr("class", "");
	});
	
	// Set all gallery info text items images to be hidden
	$("#galleryinfo li").each(function( intIndex ){
		$(this).css("display", "none");
	});	
	
	// Now set the newly selected image to be active
	$("#gallery li:eq(" + (offset - 1) + ") img").attr("class", "active");
	
	// Set the correct gallery info li item to display
	$("#galleryinfo li:eq(" + (offset - 1) + ")").css("display", "block");    			
}

// The showTab function shows the tab corresponding to the tab header the user has clicked on.
// The "active" state of the tabs is also reset and set correctly according to the tab that was clicked upon.
function showTab(tabNo)
{
	// Hide all tabs
	$("#tab_content_wrapper div").each(function( intIndex ){
		$(this).css("display", "none");
	});
	
	// Now show the tab the user has clicked on
	$("#tab_content_wrapper div:eq(" + (tabNo - 1) + ")").css("display", "block");
	
	// Remove the class declarations from the tabs (thus removing the 'active' state)
	$("#tab_introduction").attr("class", "");
	$("#tab_features").attr("class", ""); 
	$("#tab_specs").attr("class", ""); 
	$("#tab_environment").attr("class", "");
	
	// Now set the active state on the correct tab
	if(tabNo == 1) 
		$("#tab_introduction").attr("class", "active");
	else if(tabNo == 2)
		$("#tab_features").attr("class", "active");
	else if(tabNo == 3)
		$("#tab_specs").attr("class", "active");
	else if(tabNo == 4)
		$("#tab_environment").attr("class", "active");									 
	 
}