$(document).ready(function() {
			// We only want these styles applied when javascript is enabled
			$('div.navigation').css({'width' : '300px', 'float' : 'left'});
			$('div.content').css('display', 'block');
		
			
			// 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);
					}
				);
			
			var gallery = $('#gallery').galleriffic('#thumbs', {
				delay:                  3000,
				numThumbs:              8,
				preloadAhead:           10,
				enableTopPager:         false,
				enableBottomPager:      true,
				enableNumberNav:      	false,
				imageContainerSel:      '#slideshow',
				controlsContainerSel:   '#controls',
				captionContainerSel:    '#caption',
				loadingContainerSel:    '#loading',
				renderSSControls:       true,
				playLinkText:           'Play Slideshow',
				pauseLinkText:          'Pause Slideshow',
				prevLinkText:           'Next',
				nextLinkText:           'Previous',
				nextPageLinkText:       '',
				prevPageLinkText:       '',
				enableHistory:          false,
				autoStart:              false,
				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);
				},
				onPageTransitionOut:    function(callback) {
					$('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
				},
				onPageTransitionIn:     function() {
					$('#thumbs ul.thumbs').fadeTo('fast', 1.0);
				}
			});
		});