var ScrollList = new Class({
	
	Implements: [Options, Events],
	options: {
		container: false,
		minSize: 170
	},
	
	current: 0,
	itemWidth: null,
	listWidth: null,
	visibleCount: null,
	contentHeight: null,
	cssTransition: null,
	quantity: null,
	offset: 0,
	
	initialize: function(id,options){
		this.setOptions(options);
		
		this.wrapEl = document.id(id)
		this.leftEl = this.wrapEl.getSiblings('.arrow.left')[0];
		this.rightEl = this.wrapEl.getSiblings('.arrow.right')[0];
		this.listEl = this.wrapEl.getElement('.list');
		this.itemsEl = this.wrapEl.getElements('.item');
		this.arrowEl = this.wrapEl.getElements('.selecto');
		this.tabContent = $$('.tab_content');
		
		this.detectTransitions();
		
		this.tabContent.set({'opacity':0});
		
		this.select(this.current);
		this.resize();
		
		this.attachEvents();
	},
	
	attachEvents: function(){
		this.leftEl.addEvent('click', this.goLeft.bind(this));
		this.rightEl.addEvent('click', this.goRight.bind(this));

		this.itemsEl.each(function(el, index){
			el.addEvent('click',function(){
				this.select(index);
			}.bind(this));
		},this);

		window.addEvent('resize', this.resize.bind(this));
		window.addEvent('load', this.resize.bind(this));

	},
	
	goLeft: function(){
		if(this.current === 0){
			return;
		}
		
		this.select(this.current-1);
		
		var location = this.itemsEl.length - (this.itemsEl.length - this.current);
		
		if(location < this.offset){
			this.offset = this.offset -1;
			this.listEl.setStyles({ 'left':-(this.offset) * this.itemWidth});
		}
	},
	
	goRight: function(){
		if(this.current === this.itemsEl.length-1){
			return;
		}
		
		this.select(this.current+1);
		
		var offset = this.current - this.visibleCount+1;
		
		if(offset > 0){
			this.listEl.setStyles({ 'left':-( (this.current - this.visibleCount+1) * this.itemWidth ) });
			this.offset = offset;
		}
	},
	
	select: function(index){

		var previous = this.current;
		this.current = index;

		this.calculate();
		this.tabContent[this.current].getParent().setStyles({'height':this.contentHeight});
		
		if(this.cssTransition) {
			this.arrowEl.setStyles({'left':this.current*this.itemWidth});
		} else {
			this.arrowEl.morph({'left':this.current*this.itemWidth});
		}
		
		this.tabContent[previous].set({'opacity':0});
		this.tabContent[this.current].set({'opacity':1});
	},
	
	start: null,
	end: null,
	
	calculate: function(){
		if(!this.wrapEl) {
			return;
		}
		
		var listWidth = this.wrapEl.getSize().x;
		var itemCount = this.itemsEl.length;
		var minSize = this.options.minSize;
		var visibleCount = Math.floor(listWidth / minSize);
		
		if(visibleCount > itemCount) {
			visibleCount = itemCount;
		}
		
		var itemSize = Math.floor(listWidth / visibleCount);
		
		this.contentHeight = this.tabContent[this.current].getSize().y;
		this.visibleCount = visibleCount;
		this.itemWidth = itemSize;
		this.listWidth = listWidth;
	},
	
	resize: function(){
		
		this.calculate();
		
		this.listEl.setStyles({'width':(this.itemsEl.length*this.itemWidth)});
		this.itemsEl.setStyles({'width':this.itemWidth});
		this.arrowEl.setStyles({'width':this.itemWidth});
		this.arrowEl.setStyles({'left':this.current*this.itemWidth});
		this.tabContent[this.current].getParent().setStyles({'height':this.contentHeight});
		
		/*if(this.itemsEl.length - this.offset < this.visibleCount){
			this.listEl.setStyles({ 'left':0 * this.itemWidth});
		} else {
			this.listEl.setStyles({ 'left':0 * this.itemWidth});
		}*/
	},
	
	detectTransitions: function(){
		if(Browser.ie){
			this.cssTransition = false;
		} else {
			this.cssTransition = true;
		}
	}
	
});