//Horizontal carousel on project gallery page
jQuery(function () { 
	//show ul (was hidden in css)
	$("#thumb-wrap ul").show();
	
	//initialise carousel
	jQuery('#mycarousel').jcarousel({
			visible:5
	});	
	
	// start hover state
	
	//when the mouse is hovered over “the element” fade to 1.0 at a speed of medium 1.0 equals 100%. The image will then stop at 	100% untill the mouse is moved off the element. 
	$("#mycarousel li img").hover(function(){  
	// fade the element to 30%,
	$(this).fadeTo("medium", 0.3);  
	
	},
	
	//when the mouse is moved off the element fade back to 30%, 0.3 at a speed of slow.
	function(){  
	
		$(this).fadeTo(0, 1.0);  
	 }); 	
	
	//hide all the main image divs  
	hideMainImages();

    //display the first main image div
    $('#selectedImage div:first').show();
    $('#mycarousel li:first').addClass("on");
	 
	 //display the main image for the slected thumbnail 
	$('#mycarousel li img').each(
		function(index){		
			$(this).click(function(){ 
				hideMainImages();
				// show selected image
				$('#selectedImage div:eq(' + index + ')').show();
				removeThumbNailOnStates();
				$(this).parent().addClass("on");				
			});
		});
	
});

function hideMainImages(){
	 $('#selectedImage div').each( function(index ) {
		 $(this).hide();
	 });
}

function removeThumbNailOnStates(){
	$('#mycarousel > li').removeClass("on");
}