var make_scrolls = function(selector) {
	$$('.scroller').dispose();
	selector = selector || '.scroll';
	$$(selector).setStyle('overflow', 'auto');
	var elems = $$(selector);			
	for(var i = 0; i < elems.length; ++i) {
		new Scroll(elems[i]);
	}
};

var Scroll = new Class({
	initialize: function(content){
		this.content = content;
		this.scroll = null;
		this.knob = null;
		this.slider = null;
		this.current_step = 0;
		
		this.full_size = this.content.getScrollSize().y;
		this.window_size = this.content.getStyle('height').toInt();
		this.size_delta = this.full_size - this.window_size;
		
		this.max_steps = 15;

		if(this.size_delta > 0 && this.content.getElement) {
			this.create();
			this.on_change(0);
		}
	},
	
	create: function() {
		this.scroll = new Element('div', {'class': 'scroller', 'styles': {'height': this.window_size}});
		this.knob = new Element('div', {'class': 'knob'}).inject(this.scroll);
		this.content.scrollTo(0, 0);
		this.content.setStyle('overflow', 'hidden');
		this.scroll.inject(this.content, 'top');
		
		this.slider = new Slider(this.scroll, this.knob, {
			'wheel': true,
			'mode': 'vertical',
			'onChange': this.on_change.bind(this),
			'steps': this.max_steps
		});

		if(Browser.Engine.trident) {
			/*
			this.scroll.setStyle('margin-right', '-15px');
			this.content.setStyle('margin-right', '15px');
			*/
		}
		this.content.addEvent('mousewheel', this.content_scroled.bind(this));
	},
	
	content_scroled: function(e) {
		e = new Event(e).stop();
		var direction = -e.wheel;
		if(this.current_step >= this.max_steps && direction > 0) {
			return;
		}
		
		if(this.current_step <= 0 && direction < 0) {
			return;
		}
		
		this.current_step += direction;
		this.slider.set(this.current_step);
		this.on_change(this.current_step);
	},
	
	on_change: function(step) {
		var scroll = parseInt(this.size_delta * step / parseFloat(this.max_steps));
		this.current_step = step;

		if(Browser.Engine.trident) {
			var version = parseFloat(navigator.appVersion.split("MSIE")[1]);
			if(version > 7) { 
				this.scroll.setStyle('margin-top', scroll);	
			}
		} else {
			this.scroll.setStyle('margin-top', scroll);
		}
		//this.scroll.setStyle('margin-top', scroll);
		this.content.scrollTo(0, scroll);
	}
});