jQuery(document).ready(function($) {
    // We only want these styles applied when javascript is enabled
    $('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').opacityrollover({
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
    });

    // Set numThumbs to the total number of thumbnail images
    var numThumbs = $('#thumbs ul').attr('data-images');
    numThumbs = parseInt(numThumbs, 10);


    // Enable toggling of the caption
    var captionOpacity = 0.0;
    $('#captionToggle a').click(function(e) {
        var link = $(this);

        var isOff = link.hasClass('off');
        var removeClass = isOff ? 'off' : 'on';
        var addClass = isOff ? 'on' : 'off';
        var image = isOff ? '<img src="/images/layout/close-caption.png" alt="" />' : '<img src="/images/layout/show-caption.png" alt="" />';
        var linkText = isOff ? 'Hide Caption' : 'Show Caption';
        captionOpacity = isOff ? 1.0 : 0.0;

        link.removeClass(removeClass).addClass(addClass).html(image).attr('title', linkText);
        $('#caption span.image-caption').fadeTo(100, captionOpacity);

        e.preventDefault();
    });

    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
        delay:                     3500,
        numThumbs:                 numThumbs,
        preloadAhead:              10,
        enableTopPager:            false,
        enableBottomPager:         true,
        maxPagesToShow:            7,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          true,
        renderNavControls:         true,
        playLinkText:              'Play Slideshow',
        pauseLinkText:             'Pause Slideshow',
        prevLinkText:              '&lsaquo; Previous Photo',
        nextLinkText:              'Next Photo &rsaquo;',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             true,
        autoStart:                 true,
        syncTransitions:           true,
        defaultTransitionDuration: 1000,
        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);
        },
        onTransitionOut:           function(slide, caption, isSync, callback) {
            slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
            caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
        },
        onTransitionIn:            function(slide, caption, isSync) {
            var duration = this.getDefaultTransitionDuration(isSync);
            slide.fadeTo(duration, 1.0);

            //Caption set its width and opacity
            var slideImage = slide.find('img');
            caption.width(slideImage.width())
                .fadeTo(duration, captionOpacity);
        },
        onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn:        function() {
            this.fadeTo('fast', 1.0);
        },
        onImageAdded:              function(imageData, $li) {
            $li.opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });
        }
    });

});