/// <reference path="jquery-1.3.2-vsdoc.js" />

var currentCarousel;

$(function() {
    // Document is ready

    $("#image-gallery-dialog-placeholder").load("/templates/ssf/public/scripts/galleria/image-gallery-dialog.xml", null, function() {

        $("#image-gallery-dialog-wrap").dialog({
            autoOpen: false,
            width: 700,
            minWidth: 700,
            resizable: false,
            modal: true,
            closable: false
        });

        $('span.close').click(function() {
            $('#image-gallery-dialog-wrap').dialog('close');
        });

        $('ul.image-gallery').each(function(index, domEle) {

            // Hide all elements exept the first item
            $(this).children('li').not(':first').hide();

            // Add a click handler to initialize the gallery
            $(this).children('li:first').click(function(event) {

                event.preventDefault();

                // Remove the elements created by Galleria
                $('#main-image').children().remove();

                if (currentCarousel) {
                    $('.jcarousel-container').remove();
                    currentCarousel.list.css(currentCarousel.lt, '0px');
                    currentCarousel.list.css(currentCarousel.wh, '10px');
                }

                // Clear the carousel
                $('#gallery-images').append('<ul id="image-carousel"></ul>');

                // Grab all siblings and append them to the carousel
                $(this).parent().children('li').clone(false).show().appendTo('ul#image-carousel');

                // Initialize the gallery
                // Ensure the required script get cached
                $.ajaxSetup({ cache: true });
                $.getScript('/templates/ssf/public/scripts/galleria/jquery.galleria.custom.js', function() {

                    // Open the dialogue
                    $("#image-gallery-dialog-wrap").dialog('open');

                    $('ul#image-carousel').galleria({
                        history: true, // Activates the history object for bookmarking, back-button etc.
                        clickNext: true, // Helper for making the image clickable
                        insert: '#main-image', // The containing selector for our main image
                        onImage: function(image, caption, thumb) { // Let's add some image effects for demonstration purposes

                            // Fade in the image & caption
                            image.css('display', 'none').fadeIn(200);
                            caption.css('display', 'none').fadeIn(200);

                            // Fetch the thumbnail container
                            var _li = thumb.parents('li');

                            // Fade out inactive thumbnail
                            _li.siblings().children('img.selected').fadeTo(100, 0.6);

                            // Fade in active thumbnail
                            thumb.fadeTo('fast', 1).addClass('selected');

                            // Add a title for the clickable image
                            image.attr('title', '>>');

                            $('#main-image').trigger('img_change');
                        },
                        onThumb: function(thumb) { // thumbnail effects goes here

                            // fetch the thumbnail container
                            var _li = thumb.parents('li');

                            // if thumbnail is active, fade all the way.
                            var _fadeTo = _li.is('.active') ? '1' : '0.6';

                            // fade in the thumbnail when finished loading
                            thumb.css({ display: 'none', opacity: _fadeTo }).fadeIn(500);

                            // hover effects
                            thumb.hover(function() {
                                thumb.fadeTo('fast', 1);
                            }, function() {
                                _li.not('.active').children('img').fadeTo('fast', 0.6);
                            });
                        }
                    }).jcarousel({
                        initCallback: onInitCarousel
                    });

                    // Turn cache back off
                    $.ajaxSetup({ cache: false });
                });

                return false;
            });
        });
    });
});

function onInitCarousel(carousel) {
    currentCarousel = carousel;
};