(function($)
{

    $.fn.addCarousel = function()
    {
        return this.each(function()
        {
            var carousel = $(this);

            carousel.next = function(){
                carousel.children('div#carouselContents').each(function() {
                    //get the width of the items
                    var item_width = $(this).children('div').outerWidth() + 10;

                    //calculate the new left indent of the unordered list
                    var left_indent = parseInt($(this).css('left')) - item_width;

                    //make the sliding effect using jquery's animate function '
                    $(this).animate({'left' : left_indent},400,'swing',function(){

                        //get the first list item and put it after the last list item
                        $(this).children('div:last').after($(this).children('div:first'));

                        //and set the left indent to 0
                        $(this).css({'left' : '0px'});
                    });
                });
            };

            $(this).children('#next').click(function(){
                carousel.next();
            });
            $(this).addClass('carousel');

            window.setInterval(carousel.next, 5000);

        });
    };
})(jQuery);
