window.addEvent('domready', function() {
	var eScrollbarUp = $( 'scrollbar_scrollup' );
	var eScrollbarDown = $( 'scrollbar_scrolldown' );
	var eScrollbarWrapper = $( 'scrollbar_wrapper' );
	var eScrollbarBackground = $( 'scrollbar_background' );
	var eScrollbarHandle = $( 'scrollbar_handle' );
	var eContentConatiner = $( 'site_rightcol' );
	var iScrollStep = 15;
	
	eContentConatiner.setStyle( "overflow", "hidden" );
	
	// Create scroller bar to control the content box
	if( ( eContentConatiner.getSize().scrollSize.y > eContentConatiner.getSize().size.y ) ) {
		eScrollbarWrapper.setStyle( "visibility", "visible" );
		
		var mySlide = new Slider( eScrollbarBackground, eScrollbarHandle, {
			steps: 100,
			mode: 'vertical',
			onChange: function( step ){
				// Scroll the content area
				eContentConatiner.scrollTo( 0, ( ( eContentConatiner.getSize().scrollSize.y - eContentConatiner.getSize().size.y ) / 100 ) * step );
				
				// Update the position of the project numbers
				if( $( 'projectNumbers' ) != null ) {
					$( 'projectNumbers' ).setStyle( "top", eContentConatiner.getSize().scroll.y );
				}
			}
		}).set(0);
		
		// Update the position of the scroll handle in relation to the content area
		function updateHandle( event ){
			// Stop the scroll effecting the whole page
			event = new Event( event ).stop();
			
			// Figure our where to move the scroll handle to
			var iPerc = ( 100 / ( eContentConatiner.getSize().scrollSize.y - eContentConatiner.getSize().size.y ) ) * eContentConatiner.getSize().scroll.y;
			var iPos = ( ( eScrollbarBackground.getSize().size.y - eScrollbarHandle.getSize().size.y ) / 100 ) * iPerc;
			
			// Move the scroll handle
			eScrollbarHandle.setStyle( "top", iPos );
			
			// Update the position of the project numbers
			if( $( 'projectNumbers' ) != null ) {
				$( 'projectNumbers' ).setStyle( "top", eContentConatiner.getSize().scroll.y );
			}
		};
		
		// Scroll the content box when the user moves the scroll wheel over the scroll bar or content area
		function mouseWheelScroll( event ){
			// Scroll the content container
			eContentConatiner.scrollTo( 0, eContentConatiner.getSize().scroll.y - ( event.wheel  * iScrollStep ) );
			
			updateHandle( event );
		}
		
		//
		function scrollButtonClick( event ){
			// Scroll the content container
			if( event.target == eScrollbarUp ) {
				eContentConatiner.scrollTo( 0, eContentConatiner.getSize().scroll.y - iScrollStep );
			} else {
				eContentConatiner.scrollTo( 0, eContentConatiner.getSize().scroll.y + iScrollStep );
			}
			
			updateHandle( event );
		}
		
		eContentConatiner.addEvent( 'mousewheel', mouseWheelScroll.bindWithEvent( eContentConatiner ) );
		eScrollbarBackground.addEvent( 'mousewheel', mouseWheelScroll.bindWithEvent( eContentConatiner ) );
		
		eScrollbarUp.addEvent( 'click', scrollButtonClick.bindWithEvent( eContentConatiner ) );
		eScrollbarDown.addEvent( 'click', scrollButtonClick.bindWithEvent( eContentConatiner ) );
	}
});