﻿(function ($) {
    var $$; $$ = $.fn.jqgallery = function ($options) {
        var $defaults = {
            startIdx: 0,
            mainSelector: '.main',
            thumbsSelector: '.thumbs',
            showCarousel: true,
            mainImageClickNext: true
        };

        var $opts = $.extend($defaults, $options);

        var liSelector = $opts.thumbsSelector + ' li';
        var liActiveSelector = '[class*="' + $(this).attr('class') + '"] ' + $opts.thumbsSelector + ' li.active';
        var thisMainSelector = '[class*="' + $(this).attr('class') + '"] ' + $opts.mainSelector;

        function initCallbackFunction(carousel) {
            $(thisMainSelector).bind('image-loaded', function () {
                var idx = $(liActiveSelector).data('index') - 2;
                carousel.scroll(idx);
                return false;
            });
        };

        return this.each(function () {
            if ($opts.showCarousel) {
                $(this).find(liSelector).each(function (idx) {
                    $(this).data('index', (++idx));
                });

                $(this).find($opts.thumbsSelector).jcarousel({
                    start: $opts.startIdx,
                    scroll: 5,
                    initCallback: initCallbackFunction
                });
            }

            $(this).find($opts.thumbsSelector).galleria({
                insert: thisMainSelector,
                clickNext: $opts.mainImageClickNext,
                history: false,
                show: $opts.startIdx,
                onImage: function (image, caption, thumb) {
                    image.hide().fadeIn(500);
                    if ($opts.showCarousel)
                        $(thisMainSelector).trigger('image-loaded');
                }
            }).find('li:eq(' + $opts.startIdx + ')').addClass('active');

            $('.play').click(function () {
                if ($('.play').is('.pause')) {
                    window.clearInterval(slideshow);
                    $('.play').html('Play');
                }
                else {
                    // set interval when slideshow is enabled
                    slideshow = window.setInterval(function () {
                        $.galleria.next()
                    }, 6000);
                    $('.play').html('Pause');
                }
                $('.play').toggleClass('pause');
            });
            $('.next').click(function () { $.galleria.next() });
            $('.prev').click(function () { $.galleria.prev() });
        });
    }
})(jQuery);
