$(document).ready(function() {
	 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);
			 }
	 ); 
	
	var gallery = $('div#gallery').galleriffic('div#thumbs', {
        delay:                  3000, // in milliseconds
        numThumbs:              18, // The number of thumbnails to show page
        preloadAhead:           21, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      'div#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:       false, // Specifies whether the slideshow's Play and Pause links should be rendered
        renderNavControls:      false, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next ›',
        prevPageLinkText:       '‹ Prev',
        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes 
        autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads 
        onChange: function(prevIndex, nextIndex) {
    		$('div#thumbs ul.thumbs').children()
    		.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    		.eq(nextIndex).fadeTo('fast', 1.0);
    	},
    	onTransitionOut: function(callback) {
    		$('div#caption').fadeTo('fast', 0.0);
    		$('div#slideshow').fadeTo('fast', 0.0, callback);
    	},
    	onTransitionIn: function() {
    		$('div#slideshow').fadeTo('fast', 1.0);
    		$('div#caption').fadeTo('fast', 1.0);
    	},
    	onPageTransitionOut: function(callback) {
    		$('div#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
    	},
    	onPageTransitionIn: function() {
    		$('div#thumbs ul.thumbs').fadeTo('fast', 1.0);
    	} 
    });
});