jQuery(document).ready(function($) {
		// We only want these styles applied when javascript is enabled
		$('#div.navigation').css({'width' : '560px'});
		$('#container.narrow div.navigation').css({'width' : '450px'});
		$('div.gallerycontent').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').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		var gallery = $('#thumbs').galleriffic({
	        delay:                     5000, // in milliseconds
	        numThumbs:                 12, // The number of thumbnails to show page
	        preloadAhead:              6, // Set to -1 to preload all images
	        enableTopPager:            false,
	        enableBottomPager:         false,
	        maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
	        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:         false, // Specifies whether the slideshow's Next and Previous links should be rendered
			playLinkText:              '<img src="/images/play.jpg" width="32" height="32" border="0"> Play',
			pauseLinkText:             '<img src="/images/pause.jpg" width="30" height="32" border="0"> Pause',
			prevLinkText:              '<img src="/images/previous.jpg" width="33" height="32" border="0"> Previous',
			nextLinkText:              'Next <img src="/images/next.jpg" width="33" height="32" border="0">',
	        nextPageLinkText:          'Next &rsaquo;',
	        prevPageLinkText:          '&lsaquo; Prev',
	        enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
	        enableKeyboardNavigation:  false, // Specifies whether keyboard navigation is enabled
	        autoStart:                 true, // Specifies whether the slideshow should be playing or paused when the page first loads
	        syncTransitions:           true, // Specifies whether the out and in transitions occur simultaneously or distinctly
	        defaultTransitionDuration: 900, // If using the default transitions, specifies the duration of the transitions
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			}, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			}, // accepts a delegate like such: function(
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}, // accepts a delegate like such: function() { ... }
	        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
	        onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
	        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
	        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
		});
	});