scrollbars = {};
scrollbar = {

	__pos : 0,
	__dragging : 0,
	__ratio : 1,
	__clickStep : 10,
	init : function(base, content)
	{
		this.__pos = 0;
		this.base = document.getElementById(base);
		this.content = document.getElementById(content);
		this.id = base;
		this.setAllTheCrap();
		scrollbars[base] = this;
		return this;
		
	},
	
	setAllTheCrap : function()
	{
		this.base.innerHTML = '';
		var upBtn = document.createElement('div'); upBtn.id = 'up'; this.base.appendChild(upBtn);
		var downBtn = document.createElement('div'); downBtn.id = 'down'; this.base.appendChild(downBtn);
		var bar = document.createElement('div'); 
		bar.id = this.base.id+'_'+'bar';
		bar.style.position = 'absolute';
		//bar.style.border = '1px solid green';
		bar.style.top = upBtn.offsetHeight+'px';
		//bar.style.overflow = 'hidden';
		bar.style.width = '100%';
		bar.style.height = this.base.offsetHeight - upBtn.offsetHeight - downBtn.offsetHeight+'px';
		this.base.appendChild(bar);
		
		
		var scroller = document.createElement('div'); 
		scroller.id = 'scroller';
		bar.appendChild(scroller);
		//------

		var scrollerX = document.createElement('div'); 
		scrollerX.style.position = 'absolute';
		scrollerX.style.width = '200px';
		scrollerX.style.height = scroller.offsetHeight+100+'px';
		scrollerX.style.top = '-50px';
		scrollerX.style.left = '-100px';
		//scrollerX.style.border = '1px solid green';
		scrollerX.style.zIndex = '99999';
		
		scroller.appendChild(scrollerX);
		
		//------
		
		this.__ratio = (this.content.offsetHeight - this.content.parentNode.offsetHeight)/ (bar.offsetHeight - scroller.offsetHeight * 2) ;
		if (this.__ratio < 0) { this.base.style.display = 'none';}
		//alert( bar.pare	ntNode.offsetHeight - bar.offsetHeight +'    '+ this.content.offsetHeight);
		
	
		upBtn.setAttribute('onclick',"scrollBy('"+this.id+"', -"+this.__clickStep+")");
		downBtn.setAttribute('onclick',"scrollBy('"+this.id+"', +"+this.__clickStep+")");		
		bar.setAttribute('onclick', "scrollTo('"+this.id+"',event)");
		bar.setAttribute('onmousemove', "dragTo('"+this.id+"',event)");
		scroller.setAttribute('onmousedown',"startDrag('"+this.id+"')");
		//var body = document.getElementsByTagName('body')[0];
		scrollerX.setAttribute('onmouseup',"stopDrag('"+this.id+"')");
		scrollerX.setAttribute('onmouseout',"stopDrag('"+this.id+"')");
	//	scrollerX.setAttribute('onblur',"stopDrag('"+this.id+"')");
		
		
		this.bar = bar;
		this.scroller  = scroller;
	},
	
	moveScroller : function(pos)
	{
	
		if (pos < 0) 
		{
			this.__pos = 0;
		} 
		else if (pos  > this.bar.offsetHeight - this.scroller.offsetHeight)
		{
			this.__pos = this.bar.offsetHeight - this.scroller.offsetHeight;
		}
		else
		{
			this.__pos = pos;
		}
	//	document.getElementById('tmp').value = this.__pos+'   '+this.__dragging;
		this.scroller.style.top = this.__pos+'px';
		this.content.parentNode.scrollTop = this.__pos *  this.__ratio;
	}
}
function startDrag(scrollbar)
{
	var s = scrollbars[scrollbar];
	if (!s._dragging)
	{
		document.body.focus(); 	
		document.onselectstart = function () { return false; }; 
		try {event.target.ondragstart = function() { return false; }; } catch(e) {}
		s.__dragging = true;
	}
}
function stopDrag(scrollbar)
{
	scrollbars[scrollbar].__dragging = false;
}
function scrollTo(scrollbar, event)
{
	var s = scrollbars[scrollbar];
	var y = getMouseXY(event, s.bar).y;
	s.moveScroller(y- s.scroller.offsetHeight / 2);

}
function dragTo(scrollbar, event)
{
	var s = scrollbars[scrollbar];		
	if (s.__dragging)
	{
		var y = getMouseXY(event, s.bar).y;
		s.moveScroller(y - s.scroller.offsetHeight / 2);	
	}
}	
function scrollBy(scrollbar, delta)
{
	var s = scrollbars[scrollbar];		
	s.moveScroller(s.__pos + delta);		
}

function getMouseXY(e,obj) 
{
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	
	{
		posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	do 
	{
		posx -= obj.offsetLeft;
		posy -= obj.offsetTop;
	} while (obj = obj.offsetParent);

	return {'x':posx, 'y':posy};
}