(function($)
{
    var settings = {
        'auto'              : true,
        'interval'          : 10000,
        'cssClass'          : 'dbSlideshow',
        'quickstart'        : false
    };

    var methods = {
        init : function( options )
        {
            return this.each(function() {
                var $this = $(this), data = $this.data('slideshow'), slideshow = $('<div />');
                
                if ( options ) {
                    $.extend( settings, options );
                }

                if ( ! data ) {
                    $(this).data('slideshow', {
                        target : $this,
                        slideshow : slideshow,
                        timeout : null,
                        panel: null
                    });
                    data = $(this).data('slideshow');
                }

                $this.addClass(settings.cssClass);
                
                $this.dbSlideshow('panel');
                $this.dbSlideshow('first');

                if (settings.auto) {
                    $this.dbSlideshow('start');
                }
            });
            
        },
        start : function( ) {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow');
                data.timeout = setTimeout(function() {
                    if (settings.auto === true) {
                        $this.dbSlideshow('next');
                        data.timeout = setTimeout(arguments.callee, settings.interval);
                    }
                }, settings.interval);
            });
        },
        first : function () {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow');
                
                $('img', data.target).hide();
                $('li:first', data.panel).addClass('active');
                $('img:first', data.target).show();
            });
        },
        stop : function() {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow');
                if (!data.timeout) {
                    return;
                }
                data.timeout = clearTimeout(data.timeout);
            });
        },
        toggle : function() {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow');
                if (!data.timeout) {
                    if (settings.quickstart) {
                        $this.dbSlideshow('next');
                    }
                    $this.dbSlideshow('start');
                } else {
                    $this.dbSlideshow('stop');
                }
            });
        },
        next : function(options) {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow'), $active, $next;
                
                $active = $('img:visible', data.target);
                if ( $active.length == 0 ) {
                    $active = $('img:first', data.target);
                }

                if (options && options.id) {
                    if (data.timeout) {
                        $this.dbSlideshow('stop');
                    }
                    $next = $('img#' + options.id);
                }

                if (!$next) {
                    $next =  $active.next('img').length ? $active.next('img') : $('img:first', data.target);
                }

                if ($active.attr('id') === $next.attr('id')) {
                    return;
                }
                
                $('img:visible', data.target).hide('fade');
                $next.show('fade', 2000);

                $("a[href='#" + $next.attr('id') + "']", data.panel).parent('li').addClass('active').siblings().removeClass('active');
            });
        },
        panel : function() {
            return this.each(function(){
                var $this = $(this), data = $this.data('slideshow');

                var list = $('<ul />');
                $('img', data.target).each(function(i){
                    var id = $(this).attr('id');
                    if (!id) {
                        id = settings.cssClass + "-image-" + i;
                        $(this).attr('id', id);
                    }
                    var a = $('<a />').attr('href', '#' + id).html($('<span />').text(i)).click(function(e){
                        e.preventDefault();
                        $this.dbSlideshow('next', {'id': id});
                    });
                    var li = $('<li />').html(a);
                    list.append(li);
                });

                var button = $('<a />').attr('href', '#pause').html($('<span />').text('pause')).click(function(e){
                    e.preventDefault();
                    $this.dbSlideshow('toggle');

                });
                var toggle = $('<span />').addClass('toggle').append(button);

                data.panel = $('<div />').addClass(settings.cssClass + '-panel').append(list).append(toggle);
                $this.append(data.panel);
            });
        }
    };

    // $.fn is the object we add our custom functions to
    $.fn.dbSlideshow = function(method)
    {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.dbSlideshow' );
        }
        return false;
    };
    
})(jQuery);