var Scroller = new Class({
	Implements: [Options],
	options: {
		container: 'ul',
		loadingClass: 'loading', 
		size: 'x',
		direction: 'left'
	},
	initialize: function(element, options) {
		this.setOptions(options);
		if (this.element = document.getElement(element)) {
			this.manage();
		}
	},
	manage: function() {
		var self = this;
		var wrapper = new Hash({
			'el': self.element,
			'size': new Hash(self.element.getSize()).get(self.options.size),
			'offset': new Hash(self.element.getPosition()).get(self.options.size)
		});
		var container = new Hash({
			'el': wrapper.el.getElement(self.options.container),
			'size': new Hash(wrapper.el.getElement(self.options.container).getSize()).get(self.options.size),
			'offset': new Hash(wrapper.el.getElement(self.options.container).getPosition()).get(self.options.size)
		});
		wrapper.el.removeClass(self.options.loadingClass);
		if (container.size > wrapper.size) {
			var ratio = (container.size - wrapper.size) / wrapper.size;
			container.el.addEvent('mouseenter', function() {
				this.addEvent('mousemove', function(mouse) {
					container.el.setStyle(self.options.direction, -(new Hash(mouse.page).get(self.options.size) - container.offset) * ratio);
				});
			});
			container.el.addEvent('mouseleave', function() {
				this.removeEvents('mousemove');
			});
		}
	}
});
Scroller.implement(new Options);