/**********************************************************************************************************************
	ToolbarControl Constructor
	Parameters:	toolbars is an array
			    left, top, width, height is the position and size of the toolbars	
	The array is something like:
	var myTools = new Array
	(
		new Array("门户",														// toolbar tab name
				  "image/01_01.ico|新浪|location='http://news.sina.com.cn'| sina website",		// image | title | onclick | text
				  "image/01_02.ico|搜狐|location='http://news.sohu.com.cn'"),
		new Array("Microsoft|*",												// * indicate the default tab
				  "image/02_01.ico|MSDN|location='http://msdn.microsoft.com'| microsoft site",
				  "image/02_03.ico|Mail|location='http://www.hotmail.com'"),
		new Array("Yahoo!", 
				  "image/03_01.ico|雅虎|location='http://www.yahoo.com'", 
				  "image/03_02.ico|财经|location='http://finance.yahoo.com'")
	);
	Note that the quotation mark in onclick script SHOULD use the SINGLE quotation mark(').

	Author:  zlei12@hotmail.com
	Version: 1.0	
***********************************************************************************************************************/

//<script language="javascript" src="javascript/Utilities.js"></script> 

function ToolbarControl(toolbars, left, top, width, height)
{
	var _toolbars	= toolbars;										// toolbars data
	var _left		= left>=0? left : 0;							// toolbars position
	var _top		= top>=0? top : 0;
	var _width		= width>=20? width : 80;						// toolbars size
	var _height		= height>=20? height : 300;
	var _ControlID = ToolbarControlHandler.getUniqueID();			// Control ID
	ToolbarControlHandler.allToolbarControls[_ControlID] = this;	// record the control

	// Public methods
	this.toString  = function() {
//	    var builder = new StringBuilder();
//	    alert (builder.toString());
		var percentage = 100 - (_toolbars.length*20)*100/_height;	// tools area percentage
		var HTML = "";
//		builder.append('<span');
//		builder.append('>');
//		builder.append('Jalal');
//		builder.append('</span>');
//		HTML = builder.toString();
		HTML += "<DIV class='toolbarBox' STYLE='LEFT:" + _left + "px;TOP:" + _top + "px;WIDTH:" + _width + "px; HEIGHT:" + _height + "px'>"; // POSITION:absolute;
		for (var i = 0; i < _toolbars.length; i++) {
			var data = _toolbars[i][0].split('|');
			var className = data[1]=='*'? 'tabOn' : 'tabOff';
			var visible   = data[1]=='*'? 'block' : 'none';
			HTML += "<INPUT TYPE='BUTTON' ID='" + makeTabID(i) + "' VALUE='" + data[0] + "' CLASS='" + className + "' STYLE='WIDTH:" + _width + "px' ONCLICK='onToolbarClick(this);'/><br />"
			HTML += "<DIV ID='" + makeToolsID(i) + "' ALIGN='center' STYLE='display:" + visible + ";HEIGHT:" + percentage +"%'>"
			for(var j = 1;  j < _toolbars[i].length;  j++) {
				data = _toolbars[i][j].split('|');
				HTML += "<br /><a CLASS='imgOff' ONMOUSEOVER='className=\"imgOn\"' ONMOUSEOUT='className=\"imgOff\"' HREF=\"" +  data[2] + "\">";				
				if(data[0].length > 0)
				{
					HTML +=	"<IMG SRC='" + data[0] + "' TITLE='" + data[1] + "' />";
				}  
				if(data[3] == null)
				{
					data[3] = "";
				}
				HTML += data[3] + "</a><br />";
			}
			HTML += "</DIV>";
		}
		HTML += "</DIV>";
		return HTML;
	}

	this.activateTab = function(tabID)
	{
		for (var i = 0; i < _toolbars.length; i++) {
			tabOff(makeTabID(i));
		}
		tabOn(tabID);
		var IDs = tabID.split('_');				// IDs[0]: ControlID, IDs[1]: TabID
		var tabIndex = parseInt(IDs[1]);
		for (var i = 0; i < _toolbars.length; i++) {
			i==tabIndex? toolsShow(makeToolsID(i)) : toolsHide(makeToolsID(i));
		}
	}

	function makeTabID(i)
	{
		return _ControlID + "_" + i + "_WebToolBar";
	}

	function makeToolsID(i)
	{
		return _ControlID + "_Tools_" + i + "_WebToolBar";
	}
}


/* OnClick event handler */
function onToolbarClick(tab)
{   
	ToolbarControlHandler.allToolbarControls[tab.id.split("_")[0]].activateTab(tab.id);
	document.body.focus();
}


/* DHTML helper functions */
function tabOn(ID)
{
	document.getElementById(ID).className = "tabOn";
}

function tabOff(ID)
{
	document.getElementById(ID).className = "tabOff";
}

function toolsHide(ID)
{
	document.getElementById(ID).style.display = "none";
}

function toolsShow(ID)
{
	document.getElementById(ID).style.display = "block";
}


/* Global ToolbarControl context */
ToolbarControlHandler = {
	nextID				: 0,
	getUniqueID			: function() { return this.nextID++; },
	allToolbarControls	: new Array()
}