/*
Script: simpleTabs.js
Dependencies: Mootools 1.2.4
Author: Chris Bolson <chris[@]cbolson.com>
Url: www.cbolson.com
Version: 1.0
Date: 2009-11-12
License:MIT-style license.
Use:
	Create simple tabs from standard html mark-up
	Relates "tabs" with "tab contents" using the array index
	Fades between slides when tabs clicked

Notes:
	Tab contents are positioned absolutely in the "build" method
	These *could* be absolutley positioned in the css but if the user has js off, they will be stacked on top of eachother - not nice!
  
*/
var simpleTabs = new Class({
    Implements: [Options],
    options: {
		tabTriggers:'a',							//	elements - the tabs
		tabContentsWrapper:'contents-wrapper',	//	element - the tab contents wrapper
		tabContents:'.tab-contents',				//	elements - the tabbed contents	
		start_tab:0,								//	define starting item
		tabs_height: 23,							//	tab triggers height - I don't like this!
		tabScroll:true
    },
    
    initialize: function(container, options){
    	this.setOptions(options);
        tabContainer = document.id(container);									//	the overall tab container
        this.contentsWrapper=document.id(this.options.tabContentsWrapper);		//	the tabbed contents wrapper
        contents = this.contentsWrapper.getElements(this.options.tabContents);	//	array of content boxes
        tabs = tabContainer.getElements(this.options.tabTriggers);				//	array of tabs
       	currentIndex = this.options.start_tab;									//	initial tab		
       	tabScroll=this.options.tabScroll;
       	this.build();
    },
    
	build: function(){
		//	position contents boxes then fade out
		if(this.contentsWrapper.getStyle('position') != 'absolute') tabContainer.setStyle('position','relative');
       	contents.each(function(content,index){
			content.setStyles({
				'position': 'absolute',
                'top':this.options.tabs_height,							//	DON'T LIKE THIS!!!!
                'left':0
            });
            content.fade('hide');										//	fade content box out (all of them)
        }.bind(this));

		//	tabs
    	tabs.each(function(tab,index){
	        tab.addEvent('click',function(){
			    contents[currentIndex].fade('out');						//	fade out previous selected contents
				tabs[currentIndex].removeClass('active');				//	remove active class from tab
				if(tabScroll){
					height_tab		= this.getSize().y;						//	tab height
					height_content 	= contents[index].getScrollSize().y;	//	get selected contents he
					tabContainer.tween('height',height_content+height_tab);	//	scroll container to new height (contents + height)
				}
				contents[index].fade('in');								//	fade in selected contents
				this.addClass('active');								//	mark selected tab
		        currentIndex=index;										//	reassign current index
		        
			}).setStyle('cursor','pointer');
		}.bind(this));
        
        //	activate frst tabs
        tabs[currentIndex].fireEvent('click');
        
        return false;
    }
    
});