// JavaScript Document

$(document).ready(function() {
	// fade in default image
	$('#main_image img').css('display','none').fadeIn('normal');
	
	
	// thumbnails click function
	$('div.scrollable a').click(function() {
												 
		// set class for clicked thumbnail to active
		//$(this).addClass('active');
		
		// fade out and remove active classes on all other thumbnails								 
		//$(this).siblings().removeClass('active').fadeTo('fast',0.4);
		
		// get image source reference from the thumbnail link and store in a variable
		var img = $(this).attr('href');
		// get image caption from the title attribute of the image tag
		var caption = $(this).attr('title');
		var captiondue = $(this).attr('name');
		
		// fade out and hide the previous image
		$('#main_image img').fadeOut().hide();	
		// and the caption
		$('#main_image .caption').fadeOut().hide();
		$('#main_image .captiondue').fadeOut().hide();
		
		// set the new image source file and fade in the new image
		$('#main_image img').attr('src',img);
		$('#main_image img').fadeIn();

		// set the caption text
		$('#main_image .caption').text(caption);
		$('#main_image .captiondue').text(captiondue);
		$('#main_image .caption').fadeIn();
		$('#main_image .captiondue').fadeIn();
		//$('#main_image .caption').text(caption);
		
	});
	
});