(function($) {

    $.fn.vScroller = function(interval) {

        return this.each(function() {
        
			function isAtTop() {
				return ($scrollPane.position().top >= 0);
			}

			function isAtBottom() {
				return ($scrollPane.position().top * -1) + $clipPane.height() >= $scrollPane.height();
			}
			
			function enableDisableControls() {
				$upControl.removeClass('vScroller-upControl-disabled');
				$downControl.removeClass('vScroller-downControl-disabled');
			
				if (isAtTop())
					$upControl.addClass('vScroller-upControl-disabled');
					
				if (isAtBottom())
					$downControl.addClass('vScroller-downControl-disabled');
			}
        
			$container = $('<div class="vScroller-container" />');
			$scrollPane = $('<div class="vScroller-scrollPane" style="position: absolute;" />');
			$clipPane = $('<div class="vScroller-clipPane" style="position: relative;" />');
			$upControl = $('<div class="vScroller-control vScroller-upControl" />');
			$downControl = $('<div class="vScroller-control vScroller-downControl" />');
			
			$(this).parent().attr('style', 'height: auto;');
			
			$(this).parent().append($container);
			$container.append($clipPane);
			$container.append($upControl);
			$container.append($downControl);
			$container.append($('<div style="clear: both;" />'));
			$clipPane.append($scrollPane);					
			$scrollPane.append($(this));
			$scrollPane.append($('<div style="clear: both;" />'));
			
			enableDisableControls();
			
			$downControl.click(function (){
				$scrollPane.stop(true, true);
				if (!isAtBottom())
					$scrollPane.animate({ top: '-=' + interval.toString() }, 250, 'linear', enableDisableControls);				
			});

			$upControl.click(function (){
				$scrollPane.stop(true, true);
				if (!isAtTop())
					$scrollPane.animate({ top: '+=' + interval.toString() }, 250, 'linear', enableDisableControls);
			});
        });

    };
})(jQuery);