$.fn.simpleSlide = function (wrapperSelector) {
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
    
    function width(ele) {	//li
    	var ret = 0;
    	if (ele) {
    		ret += ele.outerWidth();
    		
    		var next = ele.next();
    		while (next) {
    			ret += next.outerWidth();
    			next = ele.next();
    		}

    	}

    	return ret;
    }
  
    return this.each(function () {
        var $wrapper = $(wrapperSelector, this),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),

            singleWidth = 500;
            visible = 1;
            currentPage = 0,	//1
            pages = $items.length;
           
        $wrapper.get(0).scrollLeft = 0;//singleWidth * visible;

        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
                
        // 5. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1, // page < currentPage ? 1 : -1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;

            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page <= 0) {
                    currentPage = 1;
                } else if (page >= pages) {
                    currentPage = pages;
                } else {
                    currentPage = page;
                }
            });                
            

            return false;
        }
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(function () {
    $('#columnList > div').before('<a href="#" class="back"># </a>').after('<a class="forward" href="#"># </a>').parent().simpleSlide('> div');
});
