var ContentScroller = new Class(

	{
	
		initialize : function(page, mode) {

			this.vertical = (mode == 'vertical' ? true : false) ;
			if(this.vertical) {
				this.scrollerSize = page.getParent().getStyle('height').toInt() ;
				this.scroller = page ;
				this.scroller.setProperty('class', 'ContentManager ContentScroller Vertical') ;
				
				this.page = new Element('div', {
					'class' : 'ContentWrapper ContentScrollWrapper',
					'html' : this.scroller.get('html')
				}) ;
				
				this.scrollerNav = new Element('div', {
					'class' : 'ContentManagerNav'
				}) ;
				this.scrollerNav.setStyle('display', 'none') ;
				this.scrollerButton1 = new Element('div', {
					'class' : 'ScrollBarButtonTop'
				}) ;
				this.scrollerNav.grab(this.scrollerButton1) ;
				this.scrollerBar = new Element('div', {
					'class' : 'ScrollBar'
				}) ;
				this.scrollerKnob = new Element('div', {
					'class' : 'ScrollKnob'
				}) ;
				this.scrollerBar.grab(this.scrollerKnob) ;
				this.scrollerNav.grab(this.scrollerBar) ; 
				this.scrollerButton2 = new Element('div', {
					'class' : 'ScrollBarButtonBottom'
				}) ;
				this.scrollerNav.grab(this.scrollerButton2) ;
				this.scroller.empty() ;
				this.scroller.grab(this.scrollerNav) ;
				this.scroller.grab(this.page) ;

				this.scroller.setStyle('height', this.scrollerSize) ;
				this.scrollerNav.setStyle('height', this.scrollerSize) ;
				this.scrollerBar.setStyle('height', this.scrollerSize - this.scrollerButton1.getStyle('height').toInt() - this.scrollerButton2.getStyle('height').toInt()) ;
			} else {
				
				this.scrollerSize = page.getParent().getStyle('width').toInt() ;
				this.scroller = page ;
				this.scroller.setProperty('class', 'ContentManager ContentScroller Horizontal') ;
				
				this.page = new Element('div', {
					'class' : 'ContentWrapper ContentScrollWrapper',
					'html' : this.scroller.get('html')
				}) ;
				
				this.scrollerNav = new Element('div', {
					'class' : 'ContentManagerNav'
				}) ;
				this.scrollerNav.setStyle('display', 'none') ;
				this.scrollerButton1 = new Element('div', {
					'class' : 'ScrollBarButtonLeft'
				}) ;
				this.scrollerNav.grab(this.scrollerButton1) ;
				this.scrollerBar = new Element('div', {
					'class' : 'ScrollBar'
				}) ;
				this.scrollerKnob = new Element('div', {
					'class' : 'ScrollKnob'
				}) ;
				this.scrollerBar.grab(this.scrollerKnob) ;
				this.scrollerNav.grab(this.scrollerBar) ; 
				this.scrollerButton2 = new Element('div', {
					'class' : 'ScrollBarButtonRight'
				}) ;
				this.scrollerNav.grab(this.scrollerButton2) ;
				this.scroller.empty() ;
				this.scroller.grab(this.page) ;
				this.scroller.grab(this.scrollerNav) ;
				this.scroller.setStyle('width', this.scrollerSize) ;
				this.scrollerNav.setStyle('width', this.scrollerSize) ;
				this.scrollerBar.setStyle('width', this.scrollerSize - this.scrollerButton1.getStyle('width').toInt() - this.scrollerButton2.getStyle('width').toInt()) ;
				
			}
			
		},

		activate : function() {

			if(this.scrollerSize < (this.vertical ? this.page.getSize().y : this.page.getSize().x)) {

				this.scrollerNav.setStyle('display', 'block') ;
				var steps = 0 ;
				if(this.vertical) {
					steps = this.page.getSize().y - this.scrollerSize ;
					this.scrollerKnob.setStyle('height', Math.round(this.scrollerBar.getStyle('height').toInt() / (this.page.getSize().y / this.scrollerSize))) ;
				} else {
					steps = this.page.getSize().x - this.scrollerSize ;
					this.scrollerKnob.setStyle('width', Math.round(this.scrollerBar.getStyle('width').toInt() / (this.page.getSize().x / this.scrollerSize))) ;
				}
		
				this.slider = new Slider(this.scrollerBar, this.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, this.scrollerBar).addEvent('mousewheel', function(event) {
		
					this.slider.set(this.slider.step - event.wheel * 30) ;
			
				}.bind(this)) ;
				this.scrollerButton1.addEvent('click', function(event) {
		
					this.slider.set(this.slider.step - 10) ;
			
				}.bind(this)) ;
				this.scrollerButton2.addEvent('click', function(event) {
		
					this.slider.set(this.slider.step + 10) ;
			
				}.bind(this)) ;

			}
		}
		
	}
	
) ;