var ListScroller = new Class({
	
	initialize: function(container){
		this.container = $(container);
		this.list = this.container.getElement('ul');
		this.columns = this.list.getChildren();
		
		if (!this.columns.length){
			return false;
		}
		
		this.column_width = this.columns[0].getSize().x;
		
		this.columns = this.columns.length;
		this.scrollers = undefined;
		
		this.split_scrollers = this.container.hasClass('split-scrollers');
		
		this.resize();
		window.addEvent('resize', this.resize.bindWithEvent(this));
		
		this.container.setStyle('overflow', 'hidden').getParent().addEvents({
			mouseover: (function(){
				if ($defined(this.scrollers) && this.hidden > 0){
					this.showScrollers();
				}
			}).bind(this),
			
			mouseout: (function(){
				if ($defined(this.scrollers) && (this.area - this.column_width * this.shown <= 48)){
					this.hideScrollers();
				}
			}).bind(this)
		});
	},
	
	createScrollers: function(){
		var fx = new Fx.Tween(this.list, {duration: this.column_width});
		var aside = 0;
		var scrolls = [];
		var bounds = [0, this.hidden];
		
		var obj = this;
		this.scrollers = ['left', 'right'].map(function(side, index){
			scrolls[index] = new Element('span', {
				'class': side + '-arrow' + (!index ? ' disabled' : ''),
				opacity: (!index ? 0.3 : 1.0),
				events: {
					mouseover: function(){
						if (!this.hasClass('disabled')){
							this.addClass('hover');
						}
					},
					
					mouseout: function(){
						this.removeClass('hover');
					}
				}
			});
			
			scrolls[index].store('onclick', function(){
				fx.cancel();

				aside += Math.pow(-1, 1 - index);
				
				if (aside == bounds[1 - index] + Math.pow(-1, 1 - index)){
					scrolls[1 - index].removeClass('disabled').set('opacity', 1.0);
					scrolls[1 - index].addEvent('click', scrolls[1 - index].retrieve('onclick'));
				}
				
				if (aside == bounds[index]){
					this.addClass('disabled').set('opacity', 0.3).removeClass('hover').removeEvent('click', this.retrieve('onclick'));
				}
				
				fx.start('margin-left', (-1) * aside * obj.column_width);
			});
			
			if (index)
				scrolls[index].addEvent('click', scrolls[index].retrieve('onclick'));
			
			return new Element('div', {'class': 'scroller'}).adopt(scrolls[index]);
		});
		
		this.container.getParent().adopt(this.scrollers);
	},
	
	resize: function(){
		this.area = this.container.getParent().getSize().x;
		
		this.shown = (this.area < this.column_width * this.columns) ? Math.floor(parseFloat(this.area) / this.column_width) : this.columns;
		this.hidden = this.columns - this.shown;
		
		this.container.setStyle('width', this.column_width * this.shown);
		
		if (this.hidden > 0){
			if (!$defined(this.scrollers)){
				this.createScrollers();
			}

			//var offset = this.area - this.container.getSize().x;
			//this.container.setStyle('padding-right', offset + 'px');
			
			if (this.split_scrollers){
				this.scrollers[0].setStyle('right', this.column_width - 35);
				this.scrollers[1].setStyle('right', 15);
			} else {
				var rightOffset = (this.area - this.column_width * this.shown) / 2;
				
				if (rightOffset < 21){
					rightOffset = 21;
				}
				
				this.scrollers[0].setStyle('right', rightOffset);
				this.scrollers[1].setStyle('right', rightOffset - 21);
			}
			
			if (this.area - this.column_width * this.shown > 48)
				this.showScrollers();
			else
				this.hideScrollers();
			
		} else {
			if ($defined(this.scrollers)){
				this.hideScrollers();
			}
		}
	},
	
	hideScrollers: function(){
		this.scrollers.each(function(scroller){
			if (Browser.Engine.trident){
				scroller.setStyles({
					'visibility': 'hidden',
					'opacity': 0.0
				});
			} else {
				scroller.fade('out');
			}
		});
	},
	
	showScrollers: function(){
		this.scrollers.each(function(scroller){
			if (Browser.Engine.trident){
				scroller.setStyles({
					'visibility': 'visible',
					'opacity': 1.0
				});
			} else {
				scroller.fade('in');
			}
		});
	}
	
});