
	function toggleScrolls() {
		var chopWidth = 20; // should be scrollbar width + left/right padding (boxing model padding)
		var scrollTopBottomButtonHeight = 40; // height of the buttons top /bottom
		$$('*.scrollable').each(function(e){
			dimensions = e.getDimensions();
			if (dimensions.height < (e.scrollHeight)){
				if (e.id == ""){
					e.id = "scrollable"+ Math.round(Math.random()*100); // inefficient but quick fix for collision.
				}
				e.style.width = (e.getWidth() - chopWidth) + 'px'; 
				e.insert({after: '<div class="scroller" style="height:'+ dimensions.height +'px"><div class="scrolltop" id="scrolltop'+ e.id +'"><img src="../img/scrolltop.gif" /></div><div class="scrollbar" style="height:'+ ( dimensions.height - scrollTopBottomButtonHeight) +'px" id="track'+ e.id +'"><div class="scrollhandle" id="handle'+ e.id +'"></div></div><div class="scrollbottom" id="scrollbottom'+ e.id +'"><img src="../img/scrollbottom.gif" /></div></div>'});
				e.removeClassName('scrollable');
				e.addClassName('scrollenabled');
//Eval ("var slider"+ e.id +" = new Control.Slider('handle"+ e.id +"','track"+ e.id +"',{axis:'vertical', onSlide:function(v){$('"+ e.id +"').scrollTop = ($('"+ e.id +"').scrollHeight - $('"+ e.id +"').getHeight()) * v; $('slidervalue').value = v;$('scrollheightvalue').value = $('"+ e.id +"').scrollHeight;$('scrolltopvalue').value = $('"+ e.id +"').scrollTop;},onChange:function(v){$('"+ e.id +"').scrollTop = ($('"+ e.id +"').scrollHeight - $('"+ e.id +"').getHeight()) * v;}})");
                var temp = e.scrollHeight - dimensions.height;
				eval ("var slider"+ e.id +" = new Control.Slider('handle"+ e.id +"','track"+ e.id +"',{axis:'vertical', onSlide:function(v){$('"+ e.id +"').scrollTop = "+ (e.scrollHeight - dimensions.height ) +" * v ; }, onChange:function(v){$('"+ e.id +"').scrollTop = "+ (e.scrollHeight - dimensions.height ) +" * v;}})");
				eval ("Event.observe('"+ e.id +"', 'DOMMouseScroll', function(event){wheel(event,slider"+ e.id +");})");
				eval ("Event.observe('"+ e.id +"', 'mousewheel', function(event){wheel(event,slider"+ e.id +");})");
				eval ("Event.observe('scrolltop"+ e.id +"', 'mousedown', function(event){slider"+ e.id +".setValueBy(-0.1);})");
				eval ("Event.observe('scrollbottom"+ e.id +"', 'mousedown', function(event){slider"+ e.id +".setValueBy(0.1);})");
			}
		});
		$$('*.scrollenabled').each(function(e){
			dimensions = e.getDimensions();
			if (dimensions.height >= (e.scrollHeight)){
				e.next().remove();
				e.removeClassName('scrollenabled');
				e.addClassName('scrollable');
				e.style.width = (e.getWidth() + chopWidth) + 'px';
			}
		});
	}

	/** Event handler for mouse wheel event. */
	function wheel(event,sliderhandle){
		var delta = 0;
		if (!event) /* For IE. */
			event = window.event;
		if (event.wheelDelta) { /* IE/Opera. */
			delta = event.wheelDelta/1200;
			/** In Opera 9, delta differs in sign as compared to IE. */

			if (window.opera)
				delta = -delta;
		} else if (event.detail) { /** Mozilla case. */
			/** In Mozilla, sign of delta is different than in IE.
			* Also, delta is multiple of 3.
			*/
			delta = -event.detail/30;
		}

		/** If delta is nonzero, handle it.
		* Basically, delta is now positive if wheel was scrolled up,
		* and negative, if wheel was scrolled down.
		*/
		if (delta){
			sliderhandle.setValueBy(-delta);
		}
			

		/** Prevent default actions caused by mouse wheel.
		* That might be ugly, but we handle scrolls somehow
		* anyway, so don't bother here..
		*/
		if (event.preventDefault)
			event.preventDefault();
		
		event.returnValue = false;
	}
	
	
