// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
	.hover(
		function() {
		    $(this).not('.selected').fadeTo('fast', 1.0);
		},
		function() {
		    $(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
		}
	);
 
// code to initialise gallery on page
$(function() {
    var gallery = $('#gallery').galleriffic('#thumbs', {
        delay: 3000, // in milliseconds
        numThumbs: 20, // The number of thumbnails to show page
        preloadAhead: 10, // Set to -1 to preload all images
        enableTopPager: false,
        enableBottomPager: true,
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls',
        loadingContainerSel: '#loading',
        playLinkText: 'Play Slideshow',
        pauseLinkText: 'Pause Slideshow',
        prevLinkText: 'Previous Image',
        nextLinkText: 'Next Image',
        onChange: function(prevIndex, nextIndex) {
            $('#thumbs ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
        },
        onTransitionOut: function(callback) {
            $('#slideshow').fadeTo('fast', 0.0, callback);
        },
        onTransitionIn: function() {
            $('#slideshow').fadeTo('fast', 1.0);
        }
    });
});