Tabs = new Class({

	Binds: [
		'adoptElement',
		'tabClickListener'
		
	],
	
	Implements: Options,
	
	options: {
		
	},

	/**
	 * @constructor
	 */
	initialize:function(options) {	
		this.setOptions(options);
				
		this.tabs = $$('.tabs');

		// create an array of tab components
		// add tabs-tab and tabs-content to this
		
		// loop through all the .tabs elements and if we come across a divider, start a new tab component
		
		this.tabComponents = Array();
		i = 0;
		this.tabIndex = 0;
		
		this.tabs.each(function(el){
			
			//console.log(this.tabComponents);
			if(el.hasClass('tabs-tab')){
				
				el.store('tabIndex', this.tabIndex);
				el.addEvent('click', this.tabClickListener);

				// mark first tab as selected
				if(this.tabIndex == 0){
					el.addClass('selected');
				}
				
				this.tabComponents.push(el);
				
				// inject a content wrapper after the tab
				var content = new Element('div', {'class': 'tabs-content'});
				content.inject(el,'after');
				
				// if content.getNext does not have the class tabs, adopt it
				this.adoptElement(content.getNext(), content);
				this.tabComponents.push(content);
				
				this.tabIndex ++;
				
			}
			// if this is a divider, start a new tabComponent
			if(el.hasClass('tabs-divider')){
				
				var wrapper = new Element('div', {'class': 'tabs-wrapper'});
				wrapper.inject(el,'before');
				
				wrapper.adopt(this.tabComponents);
				
				var tabBar = new Element('div', {'class': 'tabs-bar'});
				tabBar.inject(wrapper,'top');
				
				tabBar.adopt(wrapper.getChildren('.tabs-tab'));
				
				this.tabComponents.empty();
				this.tabIndex = 0;
				i++;
			
			}
		}.bind(this));
	
	},
	
	adoptElement:function(el, content){
		if(el){
			if(el.hasClass('tabs')){
				return;
			}
			content.grab(el);
			this.adoptElement(content.getNext(), content)
		}
	},
	
	tabClickListener:function(evt){
		evt.preventDefault();
		var tab = evt.target;
		
		tab.getSiblings('.selected').removeClass('selected');
		tab.addClass('selected');
		contents = tab.getParent().getSiblings('.tabs-content');
		contents.setStyle('display','none');
		
		contents[tab.retrieve('tabIndex')].setStyle('display','block');
		
	}

	
});