//We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'right'});
$('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);
		}
	);


$(document).ready(function() {
    var galleryAdv = $('#gallery').galleriffic('#thumbs', {
        delay:                  3000, // in milliseconds
        numThumbs:              5, // The number of thumbnails to show page
        preloadAhead:           5, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      false,
        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:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           '<img src="/public/images/pfeil_zurueck.jpg" alt="Zur&uuml;ck" />',
        nextLinkText:           '<img src="/public/images/pfeil_vorwaerts.jpg" alt="Weiter" />',
        nextPageLinkText:       '&rsaquo;',
        prevPageLinkText:       '&lsaquo;',
        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes 
        autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads 
		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);
	}

    });
});