(function( $ ){

    $.fn.slideShow = function(element, options) {

        var boxWidth = this.width();
        var boxHeight = this.height();

        var title = $('<h1>');
        var content = $('<p>');
        var description = $('<div>').addClass('description').append(title).append(content);
        this.append(description);
        var img = this.find('img:first-child');

        var rotate = function() {

            title.html(img.attr('alt'));
            content.html(img.attr('title'));
            var descriptionHeight = (description.height() + 10);
            description.css('bottom', '-'+descriptionHeight+'px');

            img.queue("fx");
            img.fadeIn(1000);
            var marginTop = Math.round(img.height()/2)-boxHeight;
            var marginLeft = (img.width()-boxWidth);
            var speed = 2*Math.round(marginTop*10);
            img.animate({
                'margin-top': '-'+marginTop+'px',
                'margin-left': '-'+marginLeft+'px'
            }, speed, function() {
                description.animate({
                    'bottom': '-'+descriptionHeight+'px'
                }, 500);
            });
            img.fadeOut(500, function() { 
                img.css({
                    'margin-top': '0px',
                    'margin-left': '0px'
                })

                if(img.next('img').length == 0) {
                    img = img.parent().find('img:first-child');                   
                } else {
                    img = img.next('img');
                }
                rotate();
            });

            description.animate({
                'bottom': '0px'
            }, 500);

        }
        rotate()

    };
})( jQuery );
