Tabs = Class.create({
	initialize: function(tabsContainerId)
	{
		this.tabsContainerId = tabsContainerId;
		this.tabLabelClass = 'tab-label';
		this.tabHandleContainerClass = 'tab-handles';

		this.tabs = [];
		this.handles = [];
		
		this.init();
	},

	init: function()
	{
		var tabLabel, tabHandle, tabHandleA,
			tabHandles = new Element('ul');
		
		$(this.tabsContainerId).getElementsBySelector('.tab').each(function(el, i){
			this.tabs.push(el);
			
			tabLabel = el.down('.' + this.tabLabelClass);
			tabLabel.hide();
			
			tabHandleA = new Element('a')
				.writeAttribute('href', '#')
				.insert('<span>' + tabLabel.innerHTML + '</span>')
				.observe('click', this.click.bindAsEventListener(this, i));
				
			tabHandle = new Element('li').insert(tabHandleA);
			tabHandles.insert(tabHandle);
			
			this.handles.push(tabHandle);
		}, this);
		
		this.handles[this.handles.length - 1].addClassName('last');
		
		$(this.tabsContainerId).insert({top: 
			new Element('div')
				.addClassName(this.tabHandleContainerClass)
				.insert(tabHandles)
		});

		this.showTab(0);
	},

	click: function(e, index) {
		e.stop();
		this.showTab(index);
	},

	showTab: function(index)
	{
		$A(this.tabs).each(function(el, i) {
			if(i == index) {
				el.show();
				this.handles[i].addClassName('selected');
			} else {
				el.hide();
				this.handles[i].removeClassName('selected');
			}
		}, this);
	}
});