/*
Script: TabGroup.js
	Contains <TabGroup> Class.

Author:
	Darryl Yip, <http://www.mindspeed.com>

License:
	GNU/GPL license.
*/

/*
Class: TabGroup
	Creates a tabbed interface. 

Arguments:
	options - an Object, see options below.

Options:
	id - the css id of the tab group
	panelClass - the css class of the panels
	tabClass - the css class of the tabs
	show - which tab to show, 1=the first tab
	cookieName - if specified, will save the current tab in the cookie

Example:
	(start code)
	<div id="tabGroup">
		<div class="panel">
			<div class="tab">Tab 1</div>
			<div class="content">content goes here</div>
		</div>
		<div class="panel">
			<div class="tab">Tab 2</div>
			<div class="content">content goes here</div>
		</div>
	</div>
	
	<script type="text/javascript">
	var tabGroup = new TabGroup({
		id: 'tabGroup',
		show: 1,
		cookieName: 'savedtab'
	});
	</script>
	(end)
*/
var TabGroup = new Class({
	initialize: function(options){
		if( $(options.id) ) {
			this.options 											= options;
			this.options.tabClass 						= (this.options.tabClass) ? '.'+this.options.tabClass : '.tab';
			this.options.panelClass 					= (this.options.panelClass) ? '.'+this.options.panelClass : '.panel';
			this.tabs													= $ES(this.options.tabClass, this.options.id); 
			this.panels												= $ES(this.options.panelClass, this.options.id);
			if( (this.tabs) && (this.panels) ) {
				this.currentIndex								= (this.options.cookieName) ? Cookie.get(this.options.cookieName) : null;
				this.currentIndex								= (this.currentIndex && (this.currentIndex<this.tabs.length)) ? this.currentIndex : this._posToIndex(this.options.show); //this.activeIndex;
				this._build();
				this.show(this.currentIndex);
			}
		}
	},
	// convert tab position to index
	_posToIndex: function(pos){
		pos--;
		var last = (this.tabs.length -1);
		return (pos < 0) ? 0 : (pos > last) ? last : pos;
	},
	_build: function() {
		var ul = new Element('ul').setProperty('id', this.options.id+'_tabs');
		for(i=0; i<this.tabs.length; i++) {
			var li = new Element('li');
			if( i==this.tabs.length-1 ) { li.addClass('last'); }
			var a = new Element('a').setProperty('href', 'javascript:;').setProperty('title', '').setHTML(this.tabs[i].innerHTML);
			a.injectInside(li);
			li.addEvent('click', this.show.pass([i], this));
			li.injectInside(ul);
			this.tabs[i].remove();
			this.tabs[i] = li; //remove();
			this.panels[i].setStyle('display', 'none');
		}
		ul.injectBefore( this.panels[0] );
	},
	/*
   Function: show
		Display the selected panel.

   Parameters:
      iToShow - integer to specify which panel to display, 1 is the first panel.

	*/
	show: function(iToShow) {
		this.tabs[iToShow].addClass('current');  // display current tab and add current css style
		this.panels[iToShow].setStyle('display', '');  // display the current panel
		if( iToShow != this.currentIndex ) { // if there is an existing current
			this.tabs[this.currentIndex].removeClass('current');
			this.panels[this.currentIndex].setStyle('display', 'none');
		}
		this.currentIndex = iToShow; // update current index
		
		if( this.options.cookieName ) {
			Cookie.set(this.options.cookieName, this.currentIndex, {duration: 90}); //save this for 5 days
		}
	}
});