var gTabs = null;

function Tabs()
{
	this.tabList = [ 'Home', 'Solutions', 'Products', 'Learning Center', 'About XET', 'News Blog', 'Investors', 'Energy REView' ];
	this.tabPanels = [];
	
	gTabs = this;
}

Tabs.prototype.Init = function()
{
	this.LoadTabStructure();
	this.LoadPanels();	
	
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs( "div.tabpanes > div" );

	// This click function selects the top link on the page when the tab is clicked
	var tabApi = $("ul.tabs").tabs();
	tabApi.onClick( function( event, index )
				{ gTabClicked = 'Tab-' + index; }
		);
}

Tabs.prototype.LoadTabStructure = function()
{	
	// If the anchor links have the same name as the tab name, then that tab opens first
	var text = '<ul class="tabs">';
	
	for (i in this.tabList)
	{
		var tabName = this.tabList[ i ];
		var tabWidth = (tabName.length < 7) ? 's' : 'm';
		tabWidth = ( (tabWidth != 's') && (tabName.length > 21 )) ? 'l' : 'm';
		
		// Careful: the panel's id = Tab-i. It will refer to this href and to its class in the tab panel div below
		text += '<li><a class="' + tabWidth + '" href="#Tab-' + i + '">' + tabName + '</a></li>';
	}
	
	text += '</ul><div class="tabpanes">';
	
	for (i in this.tabList)
	{
		var tabName = this.tabList[ i ];
		
		// Careful: the panel's id = Tab-i. It will refer to this id in the unordered list above
		text += '<div class="tab_panel" id="Tab-' + i + '">' + tabName + ' tab content</div>';
	}
	
	text += '</div>';
	
	$('.commoncontent').html( text );
}

Tabs.prototype.LoadPanels = function()
{
	// Careful: the panel's id = Tab-i. It is given to the panel here. The panel assumes it is an id and not a class.
	for (i in this.tabList)
	{
		var panel = new TabPanel( 'Tab-' + i );
		this.tabPanels.push( panel );
		
		panel.Init();
	}
}

// This loads the html when required into the proper tabpanel
//		tabPanelId has the form 'Tab-x'; linkCtr is the index into the panel's list of html links with the form 'y'
Tabs.prototype.LoadHtml = function( tabPanelId, linkCtr )
{
	// Get the tab panel corresponding to this sidebar and tell it to load link i.
	// Also change the banner
	var iIndex = tabPanelId.lastIndexOf( '-' );
	var i = tabPanelId.substr( iIndex + 1 );

	// Load the proper banner first
	this.tabPanels[i].LoadBanner( linkCtr );

	// Have the proper panel load the html from the link list
	this.tabPanels[i].LoadContent( linkCtr );

//alert( $('ul.tabs').tabs('option', 'selected') );
}

Tabs.prototype.FindLink = function( linkPath )
{
	for (i in this.tabPanels)
	{
		var link = this.tabPanels[i].FindLink( linkPath );
		if( link == -1 )
			continue;
		
		return link;
	}
	
	return -1;
}