$(document).ready(function() {
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '250px', 'float' : 'left'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.5;
		$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
			.hover(
				function () {
					$(this).not('.selected').fadeTo('fast', 1.0);
				}, 
				function () {
					$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
				}
			);
		
		
		// Initialize Advanced Galleriffic Gallery
		var galleryAdv = $('#gallery').galleriffic('#thumbs', {
			delay:                  3000,
			numThumbs:              6,
			preloadAhead:           6,
			enableTopPager:         false,
			enableBottomPager:      true,
			imageContainerSel:      '#slideshow',
			controlsContainerSel:   '#controls',
			captionContainerSel:    '#caption',
			loadingContainerSel:    '#loading',
			renderSSControls:       true,
			renderNavControls:      false,
			playLinkText:           'Play',
			pauseLinkText:          'Pause',
			prevLinkText:           '‹ Previous Photo',
			nextLinkText:           'Next Photo ›',
			nextPageLinkText:       'Next ›',
			prevPageLinkText:       '‹ Prev',
			enableHistory:          false,
			autoStart:              false,
			onChange:               function(prevIndex, nextIndex) {
				$('#thumbs ul.thumbs').children()
					.eq(prevIndex).fadeTo('slow', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('slow', 1.0);
			},
			onTransitionOut:        function(callback) {
				$('#caption').fadeOut('slow');
				$('#slideshow').fadeOut('slow', callback);
			},
			onTransitionIn:         function() {
				$('#slideshow, #caption').fadeIn('slow');
			},
			onPageTransitionOut:    function(callback) {
				$('#thumbs ul.thumbs').fadeOut('fast', callback);
			},
			onPageTransitionIn:     function() {
				$('#thumbs ul.thumbs').fadeIn('fast');
			}
		});
	});