jQuery.fn.Carousel = function () {

    return this.each(function () {
        var $wrapper    = $('> div', this);
        var $slider     = $wrapper.find('> ul');
        var $items      = $slider.find('> li');
        var $single     = $items.filter(':first');

        var mainWidth       = $wrapper.outerWidth();
        var itemsWidth      = $items.outerWidth();
        var singleWidth     = $single.outerWidth();
        var $items          = $slider.find('> li'); // reselect
        var visible         =  ($items.length * singleWidth) - Math.ceil($wrapper.innerWidth() / singleWidth) * singleWidth;
        var currentPage     = 1;
        var startpos = 0;

        $("#slider").append('<a class="arrow back" id="slider_back"></a><a class="arrow forward" id="slider_forward"></a>');


        $wrapper.scrollLeft(startpos);



        // 4. paging function
        function gotoPage(page, t) {

            if( !t && ( startpos - singleWidth ) <= visible ){
                startpos = startpos + page;
                $wrapper.filter(':not(:animated)').animate({scrollLeft : '+=' + page}, 500 );
            }
            if( t && ( startpos + singleWidth ) > singleWidth){
                page = -1 * page;
                startpos = startpos + page;
                $wrapper.filter(':not(:animated)').animate({scrollLeft : '+=' + page}, 500 );
            }
             return false;

        }

        // 5. Bind to the forward and back buttons
        $('#slider_back').click(function () {
            return gotoPage(singleWidth, true);
        });

        $('#slider_forward').click(function () {
            return gotoPage(singleWidth, false);
        });


    });

};