/**
 *  @author: Mark Priatel (mark@iolog.com)
 *
 *  Simple tabbed navigation widget.
 *
 *  Creates tabs and panels given the following markup structure:
 * 
 *  <div id='tab-strip'></div>
 *  <div id='tab-content-area'>
 *    <div class='tab-content'>
 *       <h2>Tab Title</h2>
 *    </div>
 *    .. repeat tab-content ...
 *  </div>
 *
 *  <script>
 *    new ContentTabs( {tabEl:'tab-strip' , contentEl: 'tab-content-area'} );
 *  </script>
 */
function ContentTabs( cfg )
{
	this.tabStrip = $(cfg.tabEl);
	this.contentEl = $(cfg.contentEl);
	this.panes = [];
	this.tabs = [];
	this.activeTab = false;
	this.activePane = false;
	this.clickCallback = cfg.onClick;

	var self = this;

	$('.tab-content').each( function(idx){

		var pane = this;
		self.panes.push(pane);		
		var title = $(this).find("h2");
		var t =	$("<div></div>").addClass('tab').append( $("<span></span>").html( title.text() ) )
			.attr('tab_title',title.text())
			.bind( "click" , {contentPane:pane} , function(evt){
																										 
				if ( self.clickCallback ) self.clickCallback(this);																										 
																										 
				if (self.activePane) self.activePane.hide();
				if (self.activeTab) self.activeTab.removeClass('tabOn');
				self.activePane = $(pane);
				self.activeTab = $(t);
				$(t).addClass('tabOn');
				self.contentEl.animate({ height: $(pane).height() + 20 +"px"},100);
				$(pane).fadeIn('def',function(){
						if ( jQuery.browser.msie) this.style.removeAttribute('filter');
					});
			})
		title.remove();	
		$(pane).hide();		
		self.tabStrip.append(t);
		self.tabs.push(t);
	});
	
	
	if ( document.location.hash )
	{
		var tabName = document.location.hash.substr(1);
		$.each(this.tabs, function(idx){
			var tabTitle = this.eq(0).attr('tab_title');
			if ( tabTitle == tabName )
			{
				$(self.panes[1]).show();
				$(self.tabs[1]).addClass('tabOn');
				self.activePane = $(self.panes[1]);
				self.activeTab = $(self.tabs[1]);
				return false;
			}
													 	
		});
	}

	if ( !this.activeTab )
	{
		$(this.panes[0]).show();
		$(this.tabs[0]).addClass('tabOn');
		this.activePane = $(this.panes[0]);
		this.activeTab = $(this.tabs[0]);
	}
}