$(document).ready(function() {
  var onMouseOutOpacity = 0.67;
    $("#thumbs ul.thumbs li:not('.selected') a img").css('opacity', onMouseOutOpacity).hover(function () {
      $(this).fadeTo('fast', 1.0);
    }, function () {
      $(this).fadeTo('fast', onMouseOutOpacity);
    });
	
  var gallery = $('#gallery').galleriffic('#thumbs', {
    delay:                  3000, // in milliseconds
    numThumbs:              16, // The number of thumbnails to show page
    preloadAhead:           -1, // Set to -1 to preload all images
    enableTopPager:         false,
    enableBottomPager:      true,
    imageContainerSel:      '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
    controlsContainerSel:   '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
    captionContainerSel:    '#caption', // The CSS selector for the element within which the captions should be rendered
    loadingContainerSel:    '#loading', // 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:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
    playLinkText:           'Play',
    pauseLinkText:          'Pause',
    prevLinkText:           '‹‹ Previous',
    nextLinkText:           'Next ››',
    nextPageLinkText:       '›',
    prevPageLinkText:       '‹',
    enableHistory:          true, // 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) {
      $('#thumbs ul.thumbs').children('img').eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end().eq(nextIndex).fadeTo('fast', 1.0);
    },
    onTransitionOut: function(callback) {
      $('#caption').fadeTo('fast', 0.0);
      $('#slideshow').fadeTo('fast', 0.0, callback);
    },
    onTransitionIn: function() {
      $('#slideshow').fadeTo('fast', 1.0);
      $('#caption').fadeTo('fast', 1.0);
    },
    onPageTransitionOut: function(callback) {
      $('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
    },
    onPageTransitionIn: function() {
      $('#thumbs ul.thumbs').fadeTo('fast', 1.0);
    }
  });
});