var Scrollbar = new Class({

	options : {
		mode : 'vertical',
                sizeFixer : 20,
				container: false
		},
		
	initialize: function(element, containerHeight, bar, slider, options){
		this.setOptions(options);
		this.element = $(element);
		if(this.options.container){
			this.container = $(this.options.container);
			this.container.setStyles({
				'position' : 'relative',
				'height' : containerHeight + 'px',
				'overflow' : 'hidden',
                 'margin' : 0
			});
		}else{
		    this.container = new Element('div');
                this.container.setStyles({
				'position' : 'relative',
				'height' : containerHeight + 'px',
				'overflow' : 'hidden',
                                'margin' : 0
			});
		  //this.container.injectBefore(element);
		  this.container.inject(element, 'before')
		
		  this.container.grab(element);
		}
		this.prop = '';
		var elSize, conSize;
		if(this.options.mode == 'vertical'){
			this.prop = 'margin-top';
			elSize = this.element.getSize().y + this.options.sizeFixer;
			
		}else{
			this.prop = 'margin-left';
			elSize = this.element.getSize().x + this.options.sizeFixer;
			
		}
		var diff = elSize - containerHeight
  		var perShown = containerHeight / (elSize / 100);
		pershown = perShown.round();
  if(perShown < 5) perShown = 5;
                if(perShown >= 100) $(bar).setStyle('display', 'none');
  $(slider).setStyle('height', perShown + '%');
  
		this.slider = new Slider(bar, slider, {
			mode:this.options.mode, 
			steps:diff,
			onChange:this.scrollElement.bind(this)
		});
	},
	
	scrollElement: function(step){
		step = step - (step * 2);
		if(isNaN(step)) return;
		this.element.setStyle(this.prop, step + 'px');
	}
});

Scrollbar.implement(new Options);