var action;
var distance=1;
var moveIntervalId=0;

var imageBar = document.getElementById('imageBar');
imageBar.style.left = 0;
imageBar.style.top = 0;

var xpos = 0;
var ypos = 0;
var maxBottom=0;

var arrowUp = document.getElementById('arrowUp');
var arrowDown = document.getElementById('arrowDown');
arrowDown.src = 'images/arrow_down.gif';
arrowUp.src = 'images/arrow_up_disabled.gif';

function startScroll(action) {	
	
	if (ypos > maxTop) { 
			if (action=='up') {
				ypos = ypos - distance;
				//arrowUp.src = 'images/arrow_up_on.gif';
			} else {
				arrowDown.src = 'images/arrow_down.gif';
			}
		} else {
			arrowDown.src = 'images/arrow_down_disabled.gif';
		}
	
	if (ypos != maxBottom) { 
			if (action=='down') {
				ypos = ypos + distance;
				//arrowDown.src = 'images/arrow_down_on.gif';
			} else {
				arrowUp.src = 'images/arrow_up.gif';
			}
		} else {
			arrowUp.src = 'images/arrow_up_disabled.gif';
		}
		
	imageBar.style.left = xpos + "px";
	imageBar.style.top = ypos + "px";
	
	if (action == 'up') {moveIntervalId = setTimeout ( "startScroll('up')", 10 );}
	if (action == 'down') {moveIntervalId = setTimeout( "startScroll('down')", 10 );}
	
}
	
function clearScroll() {
	clearTimeout ( moveIntervalId );
	if (ypos > maxTop) { 
		arrowDown.src = 'images/arrow_down.gif';
	} else {
		arrowDown.src = 'images/arrow_down_disabled.gif';
	}
	if (ypos == maxBottom) { 
		arrowUp.src = 'images/arrow_up_disabled.gif';
	} else {
		arrowUp.src = 'images/arrow_up.gif';
	}
}