// SilverScript jQuery UI Controls : Carousel
// version 0.1
// Requires: jquery 1.3.x

(function($) {

    $.fn.carousel = function(options) {
        var opt = $.extend({}, $.fn.carousel.defaults, options);
        var play = $(opt.playButton);
        var playing = opt.autoPlay;
        var position = 1;
        var images = this.children('img');
        var panels = images.length;
        var panelSize = opt.panelWidth + opt.panelPadding;
        var links = $(opt.links + ' a');
        var ready = true;
        var reset = false;
        var wait = false;

        // Handle auto-scrolling
        var scrollDelay = function() {
            if (playing && !wait) {
                wait = true;
                setTimeout(function() {
                    wait = false;
                    scrollNext(true);
                }, opt.delay);
            }
        };

        // Animate links
        var animateLinks = function(from, to) {
            links.eq(from).animate(opt.linkInactiveCss, opt.duration, 'linear');
            links.eq(to).animate(opt.linkActiveCss, opt.duration, 'linear');
        };

        // Scroll to next panel
        var scrollNext = function(auto) {
            if (ready) {
                if (!auto || !reset && playing) {
                    ready = false;
                    if (position == panels) {
                        wrapper.animate({ left: '-' + panelSize * position + 'px' }, opt.duration, 'swing', function() {
                            wrapper.css({ left: '0' });
                            images.eq(position).fadeTo(0, opt.panelFade);
                            position = 1;
                            ready = true;
                        });
                        animateLinks(position - 1, 0);
                    }
                    else {
                        wrapper.animate({ left: '-' + panelSize * position + 'px' }, opt.duration, 'swing', function() {
                            ready = true;
                        });
                        animateLinks(position - 1, position);
                        position++;
                    }
                }
                if (auto) scrollDelay();
            }
            // In case auto-scroll is executed while scroll animation is in progress
            else if (auto) scrollDelay();
        };

        // Initialize carousel
        this.css({
            position: 'relative',
            overflow: 'hidden',
            width: opt.panelWidth + 'px',
            height: opt.panelHeight + 'px'
        });
        images.wrapAll(document.createElement('div'));
        var wrapper = images.parent();
        wrapper.append(images.eq(0).clone());
        wrapper.css({
            position: 'absolute',
            width: panelSize * (panels + 1) + 'px',
            height: opt.panelHeight + 'px'
        });
        images = wrapper.children('img').wrap(document.createElement('div'));
        wrapper.children('div').css({
            float: 'left',
            width: panelSize + 'px',
            height: opt.panelHeight + 'px'
        });

        // Initialize UI
        if (playing) play.removeClass('play').addClass('pause');
        else play.removeClass('pause').addClass('play');
        links.css(opt.linkInactiveCss);
        links.eq(position - 1).css(opt.linkActiveCss);

        // Start auto-scroll
        scrollDelay();

        // Click handler for play/pause button
        play.click(function(event) {
            event.preventDefault();
            this.blur();
            if (playing) {
                play.removeClass('pause').addClass('play');
                play.attr('title', 'Play');
                playing = false;
            }
            else {
                play.removeClass('play').addClass('pause');
                play.attr('title', 'Pause');
                playing = true;
                if (reset) reset = false;
                if (!wait) scrollNext(true);
            }
        });

        // Click handler for back button
        $(opt.prevButton).click(function(event) {
            event.preventDefault();
            this.blur();
            if (ready) {
                ready = false;
                if (position == 1) {
                    position = panels;
                    wrapper.css({ left: '-' + panelSize * panels + 'px' });
                    wrapper.animate({ left: '-' + panelSize * (position - 1) + 'px' }, opt.duration, 'swing', function() {
                        ready = true;
                    });
                    animateLinks(0, position - 1);
                }
                else {
                    position--;
                    wrapper.animate({ left: '-' + panelSize * (position - 1) + 'px' }, opt.duration, 'swing', function() {
                        ready = true;
                    });
                    animateLinks(position, position - 1);
                }
            }
        });

        // Click handler for next button
        $(opt.nextButton).click(function(event) {
            event.preventDefault();
            this.blur();
            scrollNext(false);
        });

        var scrollTo = function(target) {
            if (ready) {
                ready = false;
                if (position == 1 && target > panels / 2) {
                    wrapper.css({ left: '-' + panelSize * panels + 'px' });
                    position = panels;
                }
                else if (position == panels && target < panels / 2) {

                }
                wrapper.animate({ left: '-' + panelSize * (target - 1) + 'px' }, opt.duration, 'swing', function() {
                    ready = true;
                });
                animateLinks(position - 1, target - 1);
                position = target;
            }
        };

        // Click handler for links
        links.click(function(event) {
            event.preventDefault();
            this.blur();
            var target = links.index(this) + 1;
            if (target != position) {
                scrollTo(target);
            }
        });
    };

    // Carousel option defaults
    $.fn.carousel.defaults = {
        panelWidth: 958,
        panelHeight: 270,
        panelPadding: 1,
        duration: 1440,
        delay: 6480,
        linkActiveCss: { opacity: 0.99 },
        linkInactiveCss: { opacity: 0.5 },
        autoPlay: true,
        links: '#carousel-links',
        playButton: '#carousel-play',
        prevButton: '#carousel-prev',
        nextButton: '#carousel-next'
    };

})(jQuery);