var PortfolioClass = new Class({
	initialize: function(portfolio){
		this.items = [];
		this.portfolio = $(portfolio);
		this.portfolio.getElements('.item').each(function(item){
			this.items.push({
				link:item.get('href'),
				image:item.get('rel'),
				title:item.get('alt'),
				description:item.get('html')
			});
			item.dispose();
		}, this);
		this.index = 0;
		this.offset = 0;
		this.selection = null;

		this.imageHolder = new Element('div', {
			'class':'imageHolder'
		});

		this.image = new Element('div', {
			'class':'image'
		}).inject(this.imageHolder);

		this.caption = new Element('div', {
			'class':'caption'
		}).inject(new Element('div', {
			'class':'captionHolder'
		}).inject(this.imageHolder));

		this.captionHeader = new Element('a',{
			'class':'captionHeader'	
		}).inject(this.caption);

		this.captionText = new Element('div', {
			'class':'captionText'
		}).inject(this.caption);

		this.list = new Element('div', {
			'class':'list'
		});

		new Element('a', {
			'class':'up',
			'events':{ 
				'click':this.up.bind(this),
				'dblclick':this.up.bind(this) 
			}
		}).inject(this.list);

		this.itemHolders = [];
		(18).times(function(index){
			this.itemHolders[index] = new Element('a', {
				'class':'item',
				'events':{ 'click':$empty },
				'index':index
			}).inject(this.list);
		}.bind(this));

		new Element('a', {
			'class':'down',
			'events':{ 
				'click':this.down.bind(this),
				'dblclick':this.down.bind(this) 
			}
		}).inject(this.list);

		this.imageHolder.inject(this.portfolio);
		this.list.inject(this.portfolio);

		this.scroll(0);
		this.select(0);
		this.portfolio.setStyle('display','block');
	},

	scroll: function(offset){
		for(var i = 0; i < 18; i++){
			if(i + offset < this.items.length){
				this.itemHolders[i].set('html', this.items[i + offset].title);
				this.itemHolders[i].removeEvents('click');
				this.itemHolders[i].addEvent('click', this.select.bind(this, i));
				if(this.items[i + offset].selected){
					this.itemHolders[i].set('class','selectedItem');
				} else {
					this.itemHolders[i].set('class','item');
				}
			} else {
				this.itemHolders[i].set('html','');
				this.itemHolders[i].removeEvents('click');
				this.itemHolders[i].set('class','blankItem');
			}
		}
		this.offset = offset;
	},

	up: function(){
		if(this.offset - 1 >= 0){
			this.scroll(this.offset - 1);
		}
	},

	down: function(){
		if(this.offset + 18 < this.items.length){
			this.scroll(this.offset + 1);
		}
	},

	clearSelection: function(){
		this.itemHolders.each(function(item){
			item.set('class', 'item');
		});
		this.items[this.index].selected = false;
	},

	select: function(index){
		this.clearSelection();
		this.selection = this.itemHolders[index];
		this.selection.set('class','selectedItem');

		this.image.setStyle('background-image','url(' + this.items[index + this.offset].image + ')');
		this.captionHeader.set('html',this.items[index + this.offset].title);
		this.captionHeader.set('href',this.items[index + this.offset].link);
		this.captionText.set('html',this.items[index + this.offset].description);
		this.items[index + this.offset].selected = true;
		this.index = index + this.offset;
	}
});