$(document).ready(function() {
// fade in default image
$('#main_image img').css('display','none').fadeIn('normal');

// fade out inactive thumbnails
$('ul.gallery li.active').siblings().css({display:'none',opacity:'0.4'}).fadeIn(500);

// thumbnails hover effects
$('ul.gallery li').hover(function() {
$(this).not('.active').fadeTo('fast',1);
$(this).not('.active').css('position', 'relative').css('left', 0).css('top', 0); // Fixes Safari 2 rendering issue
}, function() {
$(this).not('.active').fadeTo('fast',0.4);
}
);

// thumbnails click function
$('ul.gallery li').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).children('a').attr('href');
// get image caption from the title attribute of the image tag
var caption = $(this).children('a').children('img').attr('title');

// fade out and hide the previous image
$('#main_image img').fadeOut().hide();
// and the caption
$('#main_image .caption').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).fadeIn();

});

});