/**********************************************************************
 * Tabbed Box script
 *
 * Usage:
 * create a tabbed box as follows:
 *
 * var ts = new TabbedBox(parent, tabs, initial);
 *
 * parent	= a page element that will be the container for the tabbed box
 * tabs		= a JS array where each item is an object with the properties below
 * initial	= id of the initial tab to have selected
 *
 * Each tab object has the following properties:
 *
 * caption		: text to display on the tab
 * id			: an identifer for the tab
 * docId		: (optional) The identifier within the document of an element to use
 *                for the content of the tab.  When the tab is selected
 *                this element will be removed from its current location
 *                and added to the tabbed box content area.
 * fncRender	: (optional) A function that will be called to render the contents
 *                of the tab.  The container div will be passed as an argument.
 * fncInit		: (optional) A function that will be called after the tab content
 *                has been rendered for the first time.
 * fncClick		: (optional) A function that will be called whenever the tab is clicked
 *
 * For example, the follow code will create a tabbed box with the two tabs labelled
 * "Shares" and "Managed funds".  Each tab specifies the id of a document element
 * to use as the tab content and a function to call to initialize each tab.  The
 * tabbed box will be a child of the "container" element and the first tab shown
 * will be the "Shares" tab.
 *
 * var tabs =
 * [
 *		{
 *			caption	: "Shares",
 *			id		: "s",
 *			docId	: "SharesTab",
 *			fncInit	: function() { qs_shares_loadInfoRequest(); }
 *		},
 *		{
 *			caption	: "Managed funds",
 *			id		: "mf",
 *			docId	: "ManagedTab",
 *			fncInit	: function() { qs_managed_loadInfoRequest(); }
 *		}
 * ];
 *
 * var tb = new TabbedBox(document.getElementById("container"), tabs, "s");	
 */

function createThisCallback(obj,strFunc)
{
	var temp=obj;var args=[];
	for (var i=2;i<arguments.length;i++)
		args.push(arguments[i]);
	return function ()
	{
		for (var i=0;i<arguments.length;i++)
			args.push(arguments[i]);
		if (temp[strFunc])
			return temp[strFunc].apply(obj,args);
	}
}

function TabbedBox(parent, tabs, initial)
{
	this.tabs		= tabs;
	this.tabspan	= [];
	this.tablcnr	= [];
	this.tabrcnr	= [];
	this.content	= new Array(tabs.length);
	this.iSel		= -1;
	
	if (!initial || initial.length == 0)
		initial = tabs[0].id;
	
	this.getSelectedTabIndex = function()
	{
		return this.iSel;
	}
	
	this.handleTabClick = function(iTab)
	{
		if (this.iSel == iTab)
			return;
		// Turn off current sel
		if (this.iSel != -1)
		{
			this.tabspan[this.iSel].className = "tb_tabnonsel";
			this.tablcnr[this.iSel].className = "tb_tableftnonsel";
			this.tabrcnr[this.iSel].className = "tb_tabrightnonsel";
			if (this.content[this.iSel])
			{
				this.content[this.iSel].style.display = "none";
			}
		}
		
		// Turn on new
		this.tabspan[iTab].className = "tb_tabsel";
		this.tablcnr[iTab].className = "tb_tableftsel";
		this.tabrcnr[iTab].className = "tb_tabrightsel";
		
		this.iSel = iTab;
		
		this.updateTabContent();

		if (this.tabs[this.iSel].fncClick)
			this.tabs[this.iSel].fncClick(); 
	}
	
	this.updateTabContent = function()
	{
		if (!this.content[this.iSel])
		{
			this.content[this.iSel] = this.divContent.appendChild(document.createElement("div"));
			
			// If docId then move it
			if (this.tabs[this.iSel].docId)
			{
				var e = document.getElementById(this.tabs[this.iSel].docId);
				
				e.parentNode.removeChild(e);
				
				this.content[this.iSel].appendChild(e);
				
				// Make sure it is visible
				e.style.display = "block";
				e.style.visibility = "visible";
			}
			
			// render if specified
			if (this.tabs[this.iSel].fncRender)
				this.tabs[this.iSel].fncRender(this.content[this.iSel]);
				
			// Init if specified
			if (this.tabs[this.iSel].fncInit)
				this.tabs[this.iSel].fncInit();
		}
			
		this.content[this.iSel].style.display = "block";
		this.content[this.iSel].style.visibility = "visible";
		
	}
	
	
	var pdiv = parent.appendChild(document.createElement("div"));
	pdiv.className="tb_tabs";
		
	// Add each tab
	for(var i=0; i < tabs.length; i++)
	{
		var fSel	= tabs[i].id == initial;
		
		if (fSel)
			this.iSel = i;
		
		// add left tab corner holder
		var span = pdiv.appendChild(document.createElement("span"));
		span.className	= fSel ? "tb_tableftsel" : "tb_tableftnonsel";
		span.innerHTML = "&nbsp;";
		this.tablcnr.push(span);
			
		var span;
		
		if (tabs[i].tabId)
		{
			span = document.getElementById(this.tabs[i].tabId);
			
			span.parentNode.removeChild(span);
			pdiv.appendChild(span);
			
		}
		else
		{
			span = pdiv.appendChild(document.createElement("span"));
			span.innerHTML	= tabs[i].caption;
		}
		span.style.display = span.style.display=='none'?'inline':span.style.display;
		span.className	= fSel ? "tb_tabsel" : "tb_tabnonsel";
		this.tabspan.push(span);
		
		span.onclick = createThisCallback(this, "handleTabClick", i);
		
		// add right tab corner holder
		var span = pdiv.appendChild(document.createElement("span"));
		span.className	= fSel ? "tb_tabrightsel" : "tb_tabrightnonsel";
		span.innerHTML = "&nbsp;";
		this.tabrcnr.push(span);
		
		if (i < tabs.length-1)
		{
			// add spacer
			var span = pdiv.appendChild(document.createElement("span"));
			span.className = "tb_tabspace";
			span.innerHTML = "&nbsp;";
		}
	}
	
	var cdiv = parent.appendChild(document.createElement("div"));
	cdiv.className = "tb_content";
	this.divContent = cdiv;	
	this.updateTabContent();
}