window.addEvent('load', function() {
		var duration = 20000;
		var boxes = $$('div.hp-scrollbox');
		boxes.each(function(el) {
			// search for the up/down buttons near this scroll box
			var up = $(el).getPrevious('div.hp-scrollcontrols img');
			var down = $(el).getNext('div.hp-scrollcontrols img');
			var id = $(el).get('id');
			// calculate height of scrollable content
			var h = $(el).getFirst().getSize().y - $(el).getSize().y;
			// set up scroller
			var scrl = new Fx.Scroll(id, {
				'duration': duration,
				transition: Fx.Transitions.linear
			});
			$(up).addEvents({
				'mouseover': function(e) {
					// reset the duration so that the scroll speed is always the same.
					scrl.cancel();
					var spos = $(id).getScroll().y;
					var dur = (spos / h) * duration;
					scrl.options.duration = dur;
					scrl.toTop();
				},
				'mousedown': function(e) {
					scrl.cancel();
					var spos = $(id).getScroll().y;
					var dur = (spos / h) * (duration / 14);
					scrl.options.duration = dur;
					scrl.toTop();
				},
				'mouseup': function(e) {
					$(e.target).fireEvent('mouseover');
				},
				'mouseout': function(e) {
					scrl.cancel();
				}
			});
			$(down).addEvents({
				'mouseover': function(e) {
					// reset the duration so that the scroll speed is always the same.
					scrl.cancel();
					var spos = $(id).getScroll().y;
					var dur = ((h - spos) / h) * duration;
					scrl.options.duration = dur;
					scrl.toBottom();
				},
				'mousedown': function(e) {
					scrl.cancel();
					var spos = $(id).getScroll().y;
					var dur = ((h - spos) / h) * (duration / 14);
					scrl.options.duration = dur;
					scrl.toBottom();
				},
				'mouseup': function(e) {
					$(e.target).fireEvent('mouseover');
				},
				'mouseout': function(e) {
					scrl.cancel();
				}
			});
		});
		
	});