function makeScrollbar(content, scrollbar, handle, initial){

	var init = initial || 0;
	var steps = content.getScrollSize().x - content.getSize().x -9;

	var slider = new Slider(scrollbar, handle, {	
		steps: steps,
		mode: 'horizontal',
		onChange: function(step){
			content.scrollTo(step,0);
		}
	}).set(init);
				
	// Stops the handle dragging process when the mouse leaves the document body.
	$(document.body).addEvent('mouseleave',function(){slider.drag.stop();});
}
			
window.addEvent('domready', function(){			
	$$('.scrollSection').each(function(item){

		var size = item.getElements('.scrollBox').length.toInt() * item.getElement('.wrapper').getFirst().getWidth().toInt()
		
		// Sync width 
		item.getElement('.scrollBody').setStyle('width', size);

		// Find avtive Item
		var elem = $(active_elem);

					
		var offset = 0;
		if (item.hasChild($(active_elem))){
			elem.addClass('active');
			offset = elem.getPosition(elem.getParent('.scrollSection')).x -311;
		} 

		makeScrollbar(item.getElement('.scrollArea'), item.getElement('.scrollbar-hor'), item.getElement('.handle-hor'), offset);
	});	
				

	$$('.scrollSection .toggleView').each(function(item){
		item.addEvent('click', function(){
			with(this.getParents('.scrollSection')){
				getElement('.scrollArea').scrollTo(0,0);
				getElement('.handle-hor').setStyle('left', 0);
				getElement('.scrollArea').toggleClass('active');
				getElement('.scrollbar-hor').toggleClass('invisible');
			}
		});
	});
});