SlideBox = Class({
	
	initialize: function(el, options){
		
		el = this.element = $(el);
		var viewport = this.viewport = new Element('div');
		var container = this.container = new Element('div');
		
		this.currentPage = 0;
		
		//Options
		options = options || {};
		if(!options.width){
			options.width = el.getStyle('width').toInt();
		}
		if(!options.itemWidth){
			options.itemWidth = el.getFirst().getSize()['x'] || 1;
		}
		if(!options.itemsPerPage){
			options.itemsPerPage = Math.floor(options.width/options.itemWidth);
		}
		
		this.pages = Math.ceil(el.getChildren().length/options.itemsPerPage);
		
		
		width = this.width_ = options.width;
		this.itemsPerPage = options.itemsPerPage;
		
		
		viewport.setStyles({
			'display':'block',
			'overflow':'hidden',
			'width':width
		});
		
		container.setStyles({
			'width':width * (this.element.getChildren().length + 1)
		});
		el.setStyles({
			'display':'block',
			'overflow':'hidden',
			'margin':0,
			'padding':0,
			'float':'left'
		});
		
		
		viewport.injectAfter(el);
		el.injectInside(container);
		container.injectInside(viewport);
		
		this.totalWidth_ = el.getSize()['x'];
		
		//this.paginator = new Paginator(this, this.pages);
		
		//return;
		
		//Paginator
		var paginator = new Element('div').addClass('paging').setStyle('width', width);
		var next = new Element('a', {'href':'javascript://'}).addClass('next').injectInside(paginator).addEvent('click', this.next.bind(this));
		var prev = new Element('a', {'href':'javascript://'}).addClass('previous').injectInside(paginator).addEvent('click', this.previous.bind(this));
		var pages = new Element('ul').injectInside(paginator);
		var page;
		var pageButtons = [];
		
		if(this.pages <= 1 && this.element.getChildren().length <= this.itemsPerPage + 1){
			return;
		}
		
		this.paginator = paginator;
		this.pageButtons = pageButtons;
		
		for(var i=0; i<this.pages; i++){
			page = new Element('li');
			anchor = new Element('a', {'href':'javascript://'});
			anchor.addEvent('click', 
				(function(box, page){
					box.jump(page);
				}).pass([this, i])
			);
			anchor.set('text', (i+1));
			anchor.injectInside(page);
			page.injectInside(pages);
			pageButtons.push(page);
		}
		
		paginator.injectAfter(viewport);
		this.jump(0);
		
		//Center Paging
		var pagesWidth = pages.getSize().x;
		pages.setStyles({
			left: (width - pagesWidth) * .5
		});
	},
	
	jump: function(page){
		children = this.element.getChildren();
		
		child = this.element.getChildren()[this.itemsPerPage*page];
		x = child.getPosition(this.element)['x'] - child.getStyle('margin-left').toInt();
		this.element.tween('margin-left', -x);
		
		this.pageButtons[this.currentPage].removeClass('active');
		this.currentPage = page;
		this.pageButtons[page].addClass('active');
		
		//this.paginator.setCurrentPage(page);
	},
	
	expand: function(){
		this.container.setStyle('width', this.width_);
		this.paginator.setStyle('display', 'none');
	},
	
	next: function(){
		this.jump(Math.min(this.currentPage+1, this.pages-1));
	},
	
	previous: function(){
		this.jump(Math.max(this.currentPage-1, 0));
	}

});

document.addEvent('domready', function(){
	s = new SlideBox('references_list', {width:960,itemWidth:200});
});