var gallery = null;

$(function($) {
    if ($('#gallery').length != 0) {
        // We only want these styles applied when javascript is enabled
        $('div.gallery-navigation').css({ 'width': '288px', 'float': 'right' });
        $('div.gallery-content').css('display', 'block');

        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.67;

        $('#gallery-thumbs ul.thumbs li').opacityrollover({
            mouseOutOpacity: onMouseOutOpacity,
            mouseOverOpacity: 1.0,
            fadeSpeed: 'fast',
            exemptionSelector: '.selected'
        });

        var captionOpacity = 0.7;

        // Initialize Advanced Galleriffic Gallery
        gallery = $('#gallery-thumbs').galleriffic({
            delay: 2500,
            numThumbs: 12,
            preloadAhead: 12,
            enableTopPager: true,
            enableBottomPager: true,
            maxPagesToShow: 5,
            imageContainerSel: '#slideshow',
            controlsContainerSel: '#gallery-controls',
            captionContainerSel: '#slideshow-caption',
            loadingContainerSel: '#slideshow-loader',
            renderSSControls: true,
            renderNavControls: true,
            playLinkText: 'Play Slideshow',
            pauseLinkText: 'Pause Slideshow',
            prevLinkText: '‹ Previous Photo',
            nextLinkText: 'Next Photo ›',
            nextPageLinkText: 'Next ›',
            prevPageLinkText: '‹ Prev',
            enableHistory: false,
            autoStart: false,
            syncTransitions: true,
            defaultTransitionDuration: 900,
            onSlideChange: function(prevIndex, nextIndex) {
                this.find('ul.thumbs').children()
			    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);
            },
            onTransitionIn: function(slide, caption, isSync) {
                var duration = this.getDefaultTransitionDuration(isSync);

                slide.fadeTo(duration, 1.0);

                var slideImage = slide.find('img');                             

                /* http://thejudens.com/eric/2009/07/jquery-image-resize/ */
                $(slideImage).each(function() {
                    var maxWidth = 372;
                    var maxHeight = 372;
                    var ratio = 0;
                    var width = $(this).width();
                    var height = $(this).height();

                    if (width > maxWidth) {
                        ratio = maxWidth / width;
                        $(this).css("width", maxWidth);
                        $(this).css("height", parseInt(height * ratio));
                        height = parseInt(height * ratio);
                        width = parseInt(width * ratio);
                    }

                    if (height > maxHeight) {
                        ratio = maxHeight / height;
                        $(this).css("height", maxHeight);
                        $(this).css("width", parseInt(width * ratio));
                        width = parseInt(width * ratio);
                    }
                });

                caption.width(slideImage.width())
                    .css({
                        'bottom': Math.floor((slide.height() - slideImage.outerHeight()) / 2) - 1,
                        'left': Math.floor((slide.width() - slideImage.width()) / 2) + slideImage.outerWidth() - slideImage.width() + 1
                    })
                    .fadeTo(duration, captionOpacity);            
            },
            onPageTransitionOut: function(callback) {
                this.fadeTo('fast', 0.0, callback);
            },
            onPageTransitionIn: function() {
                this.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);
            }
        });
    }
});

function programmeDetailsTabChanged(sender, args) {
    if (sender.get_activeTabIndex() == 1) {
        if (gallery != null) {
            gallery.gotoIndex(0);
        }
    }
}