var scrollStep = 15;

function attachScroller(attachTo) {
	var container = document.getElementById(attachTo);
	var scrollBox = document.getElementById('scrollbox');


//creating scrollbar div	
	var scrollbar = document.createElement('div');
	scrollbar.id = 'scrollbar';
	
	var aup = document.createElement('img');
	aup.src= 'images/arrow-up.gif';
	aup.id = 'aup';
	aup.onmousedown = function() {
		startScroll('up');
	}
	aup.onmouseup = function() {
		stopScroll();
	}
	var adn = document.createElement('img');
	adn.src= 'images/arrow-down.gif';
	adn.id = 'adown';
	adn.onmousedown = function() {
		startScroll('down');
	}
	adn.onmouseup = function() {
		stopScroll();
	}
	scrollbar.appendChild(aup);
	scrollbar.appendChild(adn);
// end creating scrollbar
// add scrollbar
	container.parentNode.insertBefore(scrollbar,container.nextSibling);
//resize and adjust container
	container.style.width = (container.offsetWidth-19)+'px';
	container.style.borderRightColor = '#4A50B9';	
//adjust scrollbox overflow
	scrollbox.style.overflow = 'visible';
	scrollBox.style.position = 'absolute';
	scrollBox.style.top = '0px';
	scrollBox.top = 0;
	scrollBox.style.left = '0px';
	
	
	document.onkeydown = function(e) {
		if(!e) e=event;
		key = e.keyCode;
		if (key==38) {startScroll('up',true)};
		if (key==40) {startScroll('down',true)};
		if (key==33) {startScroll('up',true,45)};
		if (key==34) {startScroll('down',true,45)};
	}
	document.onmousewheel = function() {
		//alert(event.wheelDelta);
		if (event.wheelDelta>0) {startScroll('up',true)} else {startScroll('down',true)}
	}


	
}

function startScroll(direction,step,stepSize) {

	var scrollBox = document.getElementById('scrollbox');
	if (direction=='up') {
		scrollBox.top += stepSize||scrollStep;
		if (scrollBox.top>0) scrollBox.top = 0;
		scrollBox.style.top = scrollBox.top+'px';
		if(!step) scroller = setTimeout('startScroll(\'up\')',100);		
	} else {
		scrollBox.top -= stepSize||scrollStep;
		//if (scrollBox.top>0) scrollBox.top = 0;
		scrollBox.style.top = scrollBox.top+'px';
		if(!step) scroller = setTimeout('startScroll(\'down\')',100);	
	}	
}

function stopScroll() {
	clearTimeout(scroller);
}