Simple Carousel

simple_carousel.js

(function() {

    var $ = jQuery;

    var Carousel = function(element, params) {

        this.init = function(element, params) {
            if ( !(this instanceof Carousel) )
                return new Carousel(element, params);

            if ( typeof element == 'undefined' || element === window )
                throw Error('Please specify a carousel container element.');

            this.element = element;
            this.current = null;
            this.params = $.extend({
                delay: 1000,
                frame: null,
                fade: false,
                fadeDelay: 750
            }, params);

            if ( $(this.element).find('li').length > 0 )
                this.items = $(this.element).find('li');
            else
                this.items = $(this.element).children();

            return this.start();
        };

        this.pause = function() { return clearTimeout(this.timer_id); };
        this.resume = function() { return this.timer(this.current); };

        this.start = function() {
            var self = this; // this sucks.
            $(document).ready(function() {
                self.items.each(function(i, v) {
                    $(this).hover(
                        function() {
                            if ( this === self.current )
                                return false;

                            $(this).siblings().removeClass('active');
                            $(this).addClass('active');

                            self.switch_to.apply(self, [self.items[i]]);
                            return self.pause.apply(self);
                        },
                        function() { return self.resume.apply(self); }
                    );
                });

                if ( self.params.frame ) {
                    $(self.params.frame).hover(
                        function() { return self.pause.apply(self); },
                        function() { return self.resume.apply(self); }
                    );
                }
            });
            return this.switch_to(this.items[0]);
        };

        this.switch_to = function(elem) {
            if ( typeof elem == 'undefined' )
                elem = $(this.current).next()[0];

            if ( !elem )
                elem = this.items[0];

            $(this.current).removeClass('active');
            $(elem).addClass('active');

            if ( this.params.frame && this.current ) {
                if ( this.params.fade ) {
                    var self = this; // oh look, it's this sucking again.
                    $(this.params.frame).find('img').fadeOut(
                        self.params.fadeDelay / 2,
                        function() {
                            $(this).load(function() { $(this).fadeIn(self.params.fadeDelay); });
                            $(this).attr('src', $(self.current).attr('data-image-src'));
                        }
                    );
                } else {
                    $(this.params.frame).find('img').attr(
                        'src', $(this.current).attr('data-image-src') );
                }
            }
            this.current = elem;
            this.timer();
            return this;
        };

        this.timer = function() {
            if (this.timer_id)
                clearTimeout(this.timer_id);
            var self = this; // THIS SUCKS.
            this.timer_id = setTimeout(function() {
                self.switch_to();
            }, this.params.delay);
        };

        if ( typeof this.current === 'undefined' )
            return this.init(element, params);
    };

    // Example usage
    $(document).ready(function() {
        // Uses ul > li and falls back to 
        // ul > direct descendants
        var carousel = Carousel(
            "ul#the-list-to-cycle-thru", 
            {
                delay: 5000,
                frame: "#image-container-elem",
                fade: true
            }
        );
    });

})();