//fx.slide


window.addEvent('domready', function(){
	var toggles = $$('.toggle');
	var content = $$('.content');	
 
	toggles.each( function(toggle, i) {
		var collapsible = new Fx.Slide(content[i], {
			duration: 500,
			transition: Fx.Transitions.linear
		});
 collapsible.hide();
		toggle.onclick = function(){
			collapsible.toggle('vertical'); //or horizontal	
			return false;
		}
	});	
});



//scroll bar
	function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){ 
				var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y)) 
				var slider = new Slider(scrollbar, handle, {	
					steps: steps, 
					mode: (horizontal?'horizontal':'vertical'), 
					onChange: function(step){ 
						// Scrolls the content element in x or y direction. 
						var x = (horizontal?step:0); 
						var y = (horizontal?0:step); 
						content.scrollTo(x,y); 
					} 
				}).set(0); 
				if( !(ignoreMouse) ){ 
					// Scroll the content element when the mousewheel is used within the 
					// content or the scrollbar element. 
					$$(content, scrollbar).addEvent('mousewheel', function(e){	
						e = new Event(e).stop(); 
						var step = slider.step - e.wheel * 30;	
						slider.set(step);					
					}); 
				} 
				/* Stops the handle dragging process when the mouse leaves the document body. 
				$(document.body).addEvent('mouseup',function(){slider.drag.stop()}); */
			} 
						
			window.addEvent('domready', function(){				
				// -- first example, vertical scrollbar -- 
				makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') ); 
				// -- second example, horizontal scrollbar -- 
				makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true ); 
				// -- third example, horizontal and vertical scrollbars 
				makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false ); 
				makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true );	
			});