// We only want these styles applied when javascript is enabled
//$('div.navigation').css({'width' : '123px', 'float' : 'left'});
$('div.content').css('display', 'block');
 
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.35;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
	.hover(
		function () {
			$(this).not('.selected').fadeTo('fast', 1.0);
		}, 
		function () {
			$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
		}
	);
 
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
	var galleryAdv = $('#gallery').galleriffic('#thumbs', {
		delay:                  8000,
		numThumbs:              3,
		preloadAhead:           10,
		enableTopPager:         false,
		enableBottomPager:      true,
		imageContainerSel:      '#slideshow',
		controlsContainerSel:   '#controls',
		captionContainerSel:    '#caption',
		loadingContainerSel:    '#loading',
		renderSSControls:       false,
		renderNavControls:      true,
		playLinkText:           '',
		pauseLinkText:          '',
		prevLinkText:           '',
		nextLinkText:           '',
		nextPageLinkText:       '',
		prevPageLinkText:       '',
		enableHistory:          true,
		autoStart:              true,
		onChange:               function(prevIndex, nextIndex) {
			$('#thumbs ul.thumbs').children()
				.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);
			}
		});
});