window.addEvent('domready', function(){
	
	var tabSelectionOne = $('tabSelectionOne');			
	if (tabSelectionOne != undefined){
		vsbCreateSlider(tabSelectionOne, 100, 'vsbContent', 'vsbScrollbar', 'vsbHandle');			
	}

	var tabSelectionTwo = $('tabSelectionTwo');
	if (tabSelectionTwo != undefined){
		vsbCreateSlider(tabSelectionTwo, 100, 'vsbContent', 'vsbScrollbar', 'vsbHandle');
	}
	
});

function vsbCreateSlider(box, maxSteps, contentClass, scrollbarClass, handleClass){
	
	var content = new Element('div');
	content.addClass(contentClass);

	box.getChildren().each(function(el){
		content.grab(el);
	});		
	
	var scrollbar = new Element('div');
	scrollbar.addClass(scrollbarClass);
			
	var handle = new Element('div');	
	handle.addClass(handleClass);
		
	scrollbar.grab(handle);
	box.grab(scrollbar);
	box.grab(content);

	var totalSize = content.getScrollSize().y
	var boxSize = content.getSize().y
	
	var sliderSize = boxSize * boxSize / totalSize;
	var scrollableSize = totalSize - boxSize;
	
	
	// don't show a scrollbar if we don't have to!
	if (sliderSize >= totalSize) {
		scrollbar.destroy();
		return;
	}
	
	
	handle.setStyle('height', sliderSize);
	
	var slider = new Slider(scrollbar, handle, {
		steps: maxSteps,
		mode: ('vertical'),
		onChange: function(step){			
			// Scrolls the content element in y direction.
			
			var offset = (scrollableSize * step) / maxSteps;					
			content.scrollTo(0,offset);			
		}
	}).set(0);
	
	// 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 * 10 ;	
		slider.set(step);					
	});

	// Stops the handle dragging process when the mouse leaves the document body.
	$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
		    	
}