/*
	Implementation :
	
		
	<div class="tabholder">
		<ul class="tabber">
			<li class="active">Tab 1</li>
			<li>Tab 2</li>
			<li>Tab 3</li>
		</ul>
		<div class="tab">Tab 1</div>
		<div class="tab hidden">Tab 2</div>
		<div class="tab hidden">Tab 3</div>
	</div>
	
*/

var OM_mooTabs = new Class({
	Implements: [Options, Events],
	options: {
		elements: {
			tabHolder: 'tabholder',
			tabController: 'tabber',
			tabElement: 'tab',
			tabActive: 'active',
			tabHidden: 'hidden'
		}
	},
	initialize: function(options){
		this.elements = {
			tabHolder : null,
			tabController : null,
			tabElement : null
		};
		
		this.setOptions(options);
		window.addEvent('domready', this.domReady.bind(this));
	},
	domReady: function(){
		this.elements.tabHolder = $$('div.' + this.options.elements.tabHolder);
		this.elements.tabHolder.each(function(item,index){
			if(item.getElement('ul.' + this.options.elements.tabController).hasClass('nojs')){
				return false;
			}
			else{
				this.elements.tabController = item.getElement('ul.' + this.options.elements.tabController).getElements('li');
				this.elements.tabElement = item.getElements('div.' + this.options.elements.tabElement);
				if(this.elements.tabController.length===this.elements.tabElement.length){
					this.attachEvents(this.elements.tabController,this.elements.tabElement);
				}
			};
		}.bind(this));
	},
	attachEvents: function(controllers,tabs){
		var cTabs = controllers;
		var tTabs = tabs;
		var that = this;
		
		controllers.addEvent('click', function(event){							   
			event.stop();
			var cIndex = cTabs.indexOf(this);
			cTabs.removeClass(that.options.elements.tabActive);
			cTabs[cIndex].addClass(that.options.elements.tabActive);
			tTabs.addClass('hidden');
			tTabs[cIndex].removeClass('hidden');
		});
	}
});