(function($){
    $.fn.imgSlider = function(width, visibleCount ){
        return this.each(function(){
            var step  = 1;
            if (width == undefined ) width = 300;
            var count = $('.slide', this).wrapAll('<div class="slides-inner"></div>').css({'width':width}).size(),
                inner = $('.slides-inner', this).css('width', (width + 20 ) * count),
				outer = $('.slides-inner', this).wrapAll('<div class="slides-outer"></div>');
			if ( visibleCount == undefined ) visibleCount = 1;
			
            if (count>1) {
                $('.slides-container', this).css('overflow', 'hidden');
                $(this).prepend('<div class="controls"><div id="next" class="control" title="Next">&raquo;</div><div id="prev" class="control" title="Previous">&laquo;</div></div>');
	        $('.control', this).click(function (e) {
					if ($(e.target).attr('title') == "Next") {
						step ++;
						if ( step > count - visibleCount+1 ) step = 1;
					}
					else {
						step --;
						if ( step <= 0 ) step = count - visibleCount+1;
					}
                    inner.animate({
                        'marginLeft': width * (1 - (step < 1 ? count :  step > count ? 1 : step ))
                    });
                });
            }
        });
    }
})(jQuery);