(function($) {

	$.fn.scroll = function(options) {
		
		options = $.extend({
			width: 349,
			height: 394,
			widthbar: 13,
			background: "",
			
			btnup: "",
			btndn: "",
			
			bartop: "",
			barmiddle: "img/scrolling.png",
			barbottom: "",
			
			dragbar: "img/scroll-line.png",
			
			divstyle: ""

		}, options);		
		
		var divpos = $(this).position().top;	
		
    	bar = '<table cellpadding="0" cellspacing="0" width="100%" height="20px" border="0" id="barheight">';
    	bar+= '<tr><td style="background: url('+options.barmiddle+') no-repeat;"></td></tr>';
    	bar+= '</table>';
			
		scrollbar = '<td width="'+options.widthbar+'"><table height="'+options.height+'" width="'+options.widthbar+'" cellpadding="0" cellspacing="0">';
		scrollbar+= '<tr><td style="background: url('+options.dragbar+') center repeat-y;" valign="top">'+bar+'</td></tr>';
		scrollbar+= '</table></td>';
		
		divscroll = '<table border="0" cellpadding="0" cellspacing="0" width="'+options.width+'" height="'+options.height+'" bgcolor="'+options.background+'">';
		divscroll+= '<tr><td><div style="position:relative; overflow:hidden; width:'+(options.width-options.widthbar)+'px; height:'+options.height+'px; '+options.divstyle+' ">';
		divscroll+= '<div id="scrolling_content" style="position:absolute; left:0px; top:0px; visibility: visible;">'+$(this).html()+'</div></div></td>'+scrollbar+'</tr><table>';
		
		$(this).replaceWith(divscroll);
		
		var textheight = parseInt($("#scrolling_content").innerHeight());	
		var barheight = 20;
		var height = options.height;
		
		$("#barheight").bind("mousedown", function(e) {
			
			barcurtop = parseInt($("#barheight").css('marginTop'));
			barcurtop = (isNaN(barcurtop)?0:barcurtop);
			barcurtop = (e.pageY-divpos)-barcurtop;
			$("body").bind("mousemove", function(e) {
				
				barmove = true;		
				_margintop = (e.pageY-divpos)-barcurtop;
				if (_margintop>height-barheight)
				{
					_margintop = height-barheight;
				}
				else if (_margintop<0)
				{
					_margintop=0;
				}
				
				$("#barheight").css({
					marginTop: _margintop
				});				
			
				_margintop = _margintop-_margintop*textheight/(height-barheight);
											
				$("#scrolling_content").css({
					"top": _margintop
				});

				$("body").one("mouseup", function(e) {
					$("body").unbind("mousemove");
					barmove = false;
				});
				
				return false;
			});
			return false;
		});
		
	}
					
})(jQuery);