var ContentScroller = new Class(

	{
	
		initialize : function(page, mode) {

			this.vertical = (mode == 'vertical' ? true : false) ;
			var scrollerSize = (this.vertical ? page.getParent().getStyle('height').toInt() : page.getParent().getStyle('width').toInt()) ;
			
			this.scroller = page ;
			this.scroller.setProperty('class', 'ContentManager ContentScroller ' + (this.vertical ? 'Vertical' : 'Horizontal')) ;

			
			this.page = new Element('div', {
				'class' : 'ContentWrapper ContentScrollWrapper',
				'html' : this.scroller.get('html')
			}) ;
			
			var scrollerNav = new Element('div', {
				'class' : 'ContentManagerNav'
			}) ;
			var scrollerButton1 = new Element('div', {
				'class' : (this.vertical ? 'ScrollBarButtonTop' : 'ScrollBarButtonLeft')
			}) ;
			scrollerNav.grab(scrollerButton1) ;
			var scrollerBar = new Element('div', {
				'class' : 'ScrollBar'
			}) ;
			var scrollerKnob = new Element('div', {
				'class' : 'ScrollKnob'
			}) ;
			scrollerBar.grab(scrollerKnob) ;
			scrollerNav.grab(scrollerBar) ; 
			var scrollerButton2 = new Element('div', {
				'class' : (this.vertical ? 'ScrollBarButtonBottom' : 'ScrollBarButtonRight')
			}) ;
			scrollerNav.grab(scrollerButton2) ;
				
			var steps = 0 ;
			this.scroller.empty() ;
			if(this.vertical) {
				this.scroller.grab(scrollerNav) ;
				this.scroller.grab(this.page) ;
				steps = this.page.getSize().y - scrollerSize ;
				scrollerKnob.setStyle('height', Math.round(scrollerBar.getStyle('height').toInt() / (this.page.getSize().y / scrollerSize))) ;
			} else {
				this.scroller.grab(this.page) ;
				this.scroller.grab(scrollerNav) ;
				steps = this.page.getSize().x - scrollerSize ;
				scrollerKnob.setStyle('width', Math.round(scrollerBar.getStyle('width').toInt() / (this.page.getSize().x / scrollerSize))) ;
			}
			
			this.slider = new Slider(scrollerBar, scrollerKnob, {
			
				mode : (this.vertical ? 'vertical' : 'horizontal'),
				steps : steps,
				onChange : function(step) {
				
					this.page.setStyle((this.vertical ? 'top' : 'left'), -step) ;
					
				}.bind(this)

			}).set(0) ;
			$$(this.page, scrollerBar).addEvent('mousewheel', function(event) {
			
				this.slider.set(this.slider.step - event.wheel * 30) ;
				
			}.bind(this)) ;
			scrollerButton1.addEvent('click', function(event) {
			
				this.slider.set(this.slider.step - 10) ;
				
			}.bind(this)) ;
			scrollerButton2.addEvent('click', function(event) {
			
				this.slider.set(this.slider.step + 10) ;
				
			}.bind(this)) ;
			
		}
		
	}
	
) ;