var AquilaTabs = new Class({
	
	initialize: function(tabs, content)
	{
		this.tabHolder = $(tabs);
		this.tabs = this.tabHolder.getChildren('li');

		this.contentHolder = $(content);
		this.content = this.contentHolder.getChildren('div');
		
		this.content.each(function(item) {
			//item.fade('hide');
			item.setStyles({'display':'none', 'z-index': 11});
		});
		
		if(document.location.hash.contains('#tab_'))
		{
			this.index = document.location.hash.substring(5);
		}
		else
		{
			this.index = 0;
		}
		//this.content[this.index].fade('show');
		this.content[this.index].setStyles({'display':'block', 'z-index': 12});
		this.tabs[this.index].addClass('active');
		
		this.tabHolder.getElements('a').each(function(item) {
			item.addEvent('click', this.click.bindWithEvent(this));
		}.bind(this));
	},
	
	click: function(event) {
		//event.stop();
		var target = event.target;
		var parent = target.getParent();
		var index = this.tabs.indexOf(parent);
		if(index == this.index) return;
		
		this.showContent(index);
	},
	
	showContent: function(index)
	{ 
		//this.content[this.index].fade('out'});
		this.content[this.index].setStyles({'display':'none', 'z-index': 11});
		this.tabs[this.index].removeClass('active');
		this.index = index;
		//this.content[this.index].fade('in');
		this.content[this.index].setStyles({'display':'block', 'z-index': 12});
		this.tabs[this.index].addClass('active');
	}
	
});