var Tabs = new Class({

	Implements: Options,

	tabs: [],
	el: null,

	options: {
		initialTab: 0,
		tabId: 'tabs',
		tabContent: '.tab',
		firstTabClass: 'firstItem',
		lastTabClass: 'lastItem'
	},

	initialize: function(el, options) {
		this.el = $(el);
		this.setOptions(options);
		this.buildStruct();
	},

	buildStruct: function() {
		var tabContent = this.el.getChildren(this.options.tabContent);		

		var tabContainer = new Element('div', { 'id': this.options.tabId }).inject(this.el, 'before');		
		var tabList = new Element('ul').inject(tabContainer);
		
		tabContent.each(function(tabContentItem, i) {
			var className = null;
			
			if (i == 0) {
				className = this.options.firstTabClass;
			} else if (i == tabContent.length - 1) {
				className = this.options.lastTabClass;
			}
			
			var trigger = new Element('li', {
				'class': className,
				'events': { 'click': this.go.bindWithEvent(this, i) }
			}).inject(tabList);
			
			trigger.adopt(new Element('a').adopt(new Element('span').set('text', tabContentItem.get('title'))));
			
			this.tabs.push({
				trigger: trigger,
				content: tabContentItem
			});
		}, this);
		
		this.showTab(this.options.initialTab);
	},

	go: function(event, i) {
		event.stop();
		this.showTab(i);
	},

	showTab: function(i) {
		if (this.tabs[i].trigger.hasClass('selected')) return;
		
		this.tabs.each(function(tab, j) {
			if (i === j) {
				tab.trigger.addClass('selected');
				tab.content.setStyle('display', 'block');
			} else {
				tab.trigger.removeClass('selected');
				tab.content.setStyle('display', 'none');
			}
		});
	}
});