(function($) {
    $.fn.slideshow = function(options) {

        var defaults = {
            width: 400,
            height: 400,
            fadeOutDuration: 200,
            fadeInDuration: 500,
            intervalDelay: 5000,
            icon: 'slidenavicon.png',
            selectedicon: 'slidenaviconselected.png'
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var playground = $(this);
            var timeoutid = '';
            var slidecount = 0;
            var currentslide = 1;
            var images = new Array();

            _init();

            function _init() {
                playground.find('ul').hide();
                slidecount = playground.find('li').length;

                playground.find('img').each(function(i) {
                    images[i] = $(this).attr("src");
                });

                playground.append(
                    jQuery('<div/>', {
                        id: 'slide',
                        css: {
                            width: options.width,
                            height: options.height
                        },
                        click: function() {
                            if(slidecount > 1) {
                                _change();
                            }
                        },
                        html: "<img src='{0}' />".replace('{0}', playground.find('img:first').attr('src')),
                        mouseover: function() {
                            $(this).addClass('pointer');
                        }
                    })
                );

                if (slidecount > 1) {
                    playground.append(
                        jQuery('<div/>', {
                            id: 'slidenav',
                            'class': 'slidenav',
                            css: {
                                width: options.width
                            }
                        })
                    );

                    for (var i = 0; i < slidecount; i++) {
                        playground.find('#slidenav').append(
                            jQuery('<img/>', {
                                id: i,
                                'class': 'slidenavicon',
                                src: i == 0 ? options.selectedicon : options.icon,
                                css: {
                                    
                                },
                                click: function() {
                                    currentslide = this.id;
                                    _change();
                                },
                                mouseover: function() {
                                    this.src = options.selectedicon;
                                    $(this).addClass('pointer');
                                },
                                mouseout: function() {
                                    this.src = options.icon;
                                }
                            })
                        );
                    }
                timeoutid = setInterval(_change, options.intervalDelay);
                }
            }

            function _change() {
                var slide = playground.find('#slide img');
                var icons = playground.find('.slidenavicon');

                icons.attr('src', options.icon);
                icons.bind('mouseout', function() { this.src = options.icon; });

                if (currentslide == slidecount) {
                    currentslide = 0;
                }

                cicon = playground.find('#' + currentslide);
                cicon.attr('src', options.selectedicon);
                cicon.unbind('mouseout');

                slide.fadeOut(options.fadeOutDuration, function() {
                    slide.attr('src', images[currentslide++]);
                    slide.fadeIn(options.fadeInDuration);
                })
                clearInterval(timeoutid);
                timeoutid = setInterval(_change, options.intervalDelay);
            }
        });
    };
})(jQuery);