var ScrollBar = new Class({

		Implements: [Events, Options],

		options: {
			maxThumbSize: 10,
			wheel: 30,
			vitesse: 10,
			delai: 25,
			colorIn: '#234218',
			colorOut: '#2D1509',
            contentHeight: 195,
            scrollbarWidth: '55px'
		},

		initialize: function(content, options){
			if (options)
			this.setOptions(options);
			this.content = $(content);
			this.content.style.overflow = 'hidden';
    
            var contentHeight = this.content.getStyle('height');
            var height = ((this.options.contentHeight)? (this.options.contentHeight).toInt():(contentHeight).toInt());
            if (this.content.scrollHeight <= height) 
                return false;
			
			this.up = new Element('div', {
                'class': 'up'
				}
            );

			
            this.up.inject(this.content.getParent()); 
         
            this.down = new Element('div', {
                'class': 'down'
            });
            
            this.down.inject(this.content.getParent());
            
			this.vitesse = parseInt(this.options.vitesse);
			this.delai = this.options.delai;
			this.colorIn = this.options.colorIn;
			this.colorOut = this.options.colorOut;

			this.bound = {
				'end': this.end.bind(this),
				'wheel': this.wheel.bind(this),
				'monter': this.monter.bind(this),
				'descendre': this.descendre.bind(this),
				'pageTimer': this.pageTimer.bind(this)
			};

			this.position = {};
			this.mouse = {};
			this.update();
			this.attach();
		},

		update: function(){
			
				this.contentSize = this.content.offsetHeight;
				this.contentScrollSize = this.content.scrollHeight;
				this.contentRatio = this.contentSize / this.contentScrollSize;
		},
		
		attach: function(){			
			if (this.options.wheel) { 
				this.content.addEvent('mousewheel', this.bound.wheel);
			}
			this.up.addEvents({
				'mousedown' : this.bound.monter,
				'mouseup' : this.bound.pageTimer,
				'mouseout' : this.bound.pageTimer
			});
			this.down.addEvents({
				'mousedown' : this.bound.descendre,
				'mouseup' : this.bound.pageTimer,
				'mouseout' : this.bound.pageTimer
			});

		},

		wheel: function(event){
			if (event.wheel < 0) this.fx = this.down;
			else if (event.wheel > 0) this.fx = this.up;
			this.fx.setStyle('border-color', this.colorIn);
			
			this.content.scrollTop -= event.wheel * this.options.wheel;
			event.stop();
		},
		
		monter: function(){
			this.fx = this.up;
			this.fx.setStyle('border-color', this.colorIn);
		    this.content.scrollTop -= this.vitesse;
			this.timer	= setTimeout(this.bound.monter, this.delai);
		},
		
		descendre: function(){
			this.fx = this.down;
			this.fx.setStyle('border-color', this.colorIn);
			this.content.scrollTop += this.vitesse;
			this.timer	= setTimeout(this.bound.descendre, this.delai);
		},
		
		pageTimer: function(event){
			if (this.fx) this.fx.setStyle('border-color', this.colorOut);
			clearTimeout(this.timer);
			event = new Event(event);
			event.stop();
		},

		end: function(event){
			if (this.fx) this.fx.setStyle('border-color', this.colorOut);
			document.removeEvent('mouseup', this.bound.end);
			event = new Event(event);
			event.stop();
		}
	});