var html = '<div id="vscrollbar">'
				+ '<div id="vbuttonup"></div>'
				+ '<div id="vtrack"><div id="vhandle" class="selected"></div></div>'
				+ '<div id="vbuttondown"></div>'
			+ '</div>';

var moving = false;
var speed = 5;
var increment = 0.04;

$('scrollcell').innerHTML = html;

var vslider = new Control.Slider('vhandle', 'vtrack', {
	axis: 'vertical',
	onSlide: function(v) { scrollVertical(v, $('scrollable'), vslider);  },
	onChange: function(v) { scrollVertical(v, $('scrollable'), vslider); }
});

Event.observe('vbuttonup', 'mousedown', function(){
	moving = true;
	vmove(speed, increment*-1);
});
Event.observe('vbuttonup', 'mouseup', stop);
Event.observe('vbuttonup', 'mouseout', stop);
Event.observe('vbuttondown', 'mousedown', function(){
	moving = true;
	vmove(speed, increment);
});
Event.observe('vbuttondown', 'mouseup', stop);
Event.observe('vbuttondown', 'mouseout', stop);

function vmove(speed, increment) {
	if (moving) {
		vslider.setValue(vslider.value + increment);
		setTimeout("vmove("+speed+","+increment+")",speed);
	}
}
function stop() {
	moving = false;
}


// scroll the element vertically based on its width and the slider maximum value
function scrollVertical(value, element, slider) {
	element.scrollTop = Math.round(value / slider.maximum * (element.scrollHeight - element.offsetHeight));
}

$('scrollable').style.overflow='hidden';

// disable vertical scrolling if text doesn't overflow the div
if ($('scrollable').scrollHeight <= $('scrollable').offsetHeight) {
	vslider.setDisabled();
	$('vscrollbar').hide();
}