/* 

   proScroll v0.1 (18.12.2008)
   plugin for jQuery
   (c) http://developing.name/, http://otpro.ru/
   
   using: <div id="scrolling"></div>
   
*/

(function($) {

	$.fn.scroll = function(options) {
		
		options = $.extend({
			width: 600,
			height: 100,
			widthbar: 13,
			background: "#EEEEEE",
			
			btnup: "/images/scroll/btn-up.gif",
			btndn: "/images/scroll/btn-dn.gif",
			
			bartop: "/images/scroll/btn1.png",
			barmiddle: "/images/scroll/btn2.png",
			barbottom: "/images/scroll/btn3.png",
			
			dragbar: "/images/scroll/dragbar.gif",
			
			divstyle: "border:1px solid #000;"

		}, options);		
		
		var divpos = $(this).position().top;	
		
    	bar = '<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0" id="barheight">';
    	bar+= '<tr><td height="4" style="background: url('+options.bartop+') no-repeat;"></td></tr>';
    	bar+= '<tr><td style="background: url('+options.barmiddle+') repeat-y;"></td></tr>';
    	bar+= '<tr><td height="4" style="background: url('+options.barbottom+') 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 width="13" height="15"><a href="" id="srolling_up"><img src="'+options.btnup+'" border="0"></a></td></tr>';
		scrollbar+= '<tr><td style="background: url('+options.dragbar+') center repeat-y;" valign="top">'+bar+'</td></tr>';
		scrollbar+= '<tr><td width="13" height="15"><a href="" id="srolling_down"><img src="'+options.btndn+'" border="0"></a></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 texttop = options.height-textheight;
		texttop = (texttop<0?texttop:0);
		
		var barheight = 8;
		var barbutton = 15;
		
		var barmax = options.height-barbutton*2;
		var barmove = false;
	
		if (textheight>options.height)
		{	
			barcur = barmax*options.height/textheight;
		} else {
			barcur = barmax;
		}
		
		var bartop = barmax-barcur;
		
		if (bartop>barmax)
		{
			bartop=barmax-barheight;
		}

		$("#barheight").css({
			'height' : barcur
		});
		
		
		$("#srolling_down").bind("mouseover", function(e) {
			if (!barmove)
			{
				$("#barheight").animate({marginTop: bartop+"px"}, 1500)
				$("#scrolling_content").animate({"top": texttop+"px"}, 1500);
			}
		});
				
	
		$("#srolling_up").bind("mouseover", function(e) {
			if (!barmove)
			{
				$("#barheight").animate({marginTop: "0px"}, 1500);
				$("#scrolling_content").animate({"top": "0px"}, 1500);
			}
		});
		
		$("#srolling_down, #srolling_up").bind("mouseout", function(e) {
			if (!barmove)
			{
				$("#scrolling_content").stop();
				$("#barheight").stop();
			}
		});		

		$("#srolling_down, #srolling_up").bind("click", function(e) {		
			return false;
		});

		
		$("#barheight").bind("mousedown", function(e) {
			
			barcurtop = parseInt($("#barheight").css('marginTop'));
			barcurtop = (isNaN(barcurtop)?0:barcurtop);
			barcurtop = (e.pageY-divpos-barbutton)-barcurtop;
					
			$("body").bind("mousemove", function(e) {
				
				barmove = true;		
				_margintop = (e.pageY-divpos-15)-barcurtop;
				
				if (_margintop>bartop)
				{
					_margintop = bartop;
				}
				else if (_margintop<0)
				{
					_margintop=0;
				}
				
				$("#barheight").css({
					marginTop: _margintop
				});				
			
				_margintop = _margintop*texttop/bartop;
											
				$("#scrolling_content").css({
					"top": _margintop
				});

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