jQuery(document).ready(function($) {
	// We only want these styles applied when javascript is enabled
	$('#webcam div.navigation').css('float', 'left');
	$('#webcam div.content').css('display', 'block');
	
	// Initially set opacity on thumbs and add
	// additional styling for hover effect on thumbs
	var onMouseOutOpacity = 0.67;
	$('#wcthumbs 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 galGallery = $('#webcam').galleriffic('#thumbs', {
		delay:                  2000,
		numThumbs:              12,
		preloadAhead:           10,
		enableTopPager:         false,
		enableBottomPager:      true,
		imageContainerSel:      '#slideshow',
		controlsContainerSel:   '',
		captionContainerSel:    '#caption',
		loadingContainerSel:    '',
		renderSSControls:       false,
		renderNavControls:      false,
		playLinkText:           'Play Slideshow',
		pauseLinkText:          'Pause Slideshow',
		prevLinkText:           '‹ Previous Photo',
		nextLinkText:           'Next Photo ›',
		nextPageLinkText:       'Next ›',
		prevPageLinkText:       '‹ Prev',
		enableHistory:          true,
		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) {
			$('#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);
		}
	});
});