/**********************************************************************************************************************
	ToolbarControl Constructor
	Parameters:	toolbars is an array
     		        left, top, width, height is the position and size of the toolbars	
	The array is something like:
	Note that the quotation mark in onclick script SHOULD use the SINGLE quotation mark(').
***********************************************************************************************************************/
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 percentage = 100 - (_toolbars.length*20)*100/_height;	// tools area percentage
		var HTML = "";
		HTML += "<DIV class='toolbarBox':ALIGN='left' STYLE='POSITION:absolute;LEFT:" + _left + "px;TOP:" + _top + "px;WIDTH:" + _width + "px; HEIGHT:" + _height + "px'>";
		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' ONMOUSEOVER='onToolbarClick(this);'/><BR>"
			var _uleft = _width+4;
			HTML += "<DIV ID='" + makeToolsID(i) 
			      + "' class='toolbarBox':ALIGN='center' STYLE='POSITION:absolute;display:" + visible 
			      + ";LEFT:" + _uleft + "px;WIDTH:" + _width + "px;HEIGHT:" + percentage +"%'>"
			for(var j = 1;  j < _toolbars[i].length;  j++) {
				data = _toolbars[i][j].split('|');
				HTML += "<INPUT TYPE='BUTTON' VALUE='" + data[1] 
				      + "' TITLE='" + data[1] 
				      + "' CLASS='tabOff'"
				      + "' STYLE='WIDTH:" + _width + "px' ONMOUSEOVER='className=\"tabOn\"' ONMOUSEOUT='className=\"tabOff\"' ONCLICK=\"" +  data[2] + "\"/><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()
}

var myTools = new Array
(
	new Array("Home",
              "image/icon3.ico|Willkomen|location='index.html'",
              "image/icon3.ico|Mittagsmenü|location='mittag.html'",
	      "image/01_02.ico|Partyservice|location='partyservice.html'",
	      "image/01_03.ico|Adresse / Anfahrt|location='adresse.html'",
	          "image/01_04.ico|Impressum|location='impressum.html'",
	      "image/01_05.ico|Gästebuch|location='gaestebuch.html'"),
	      
	new Array("Empfehlungsmenü", 
              "image/01_01.ico|Hanoi|location='hanoi.html'",
              "image/01_01.ico|Hue|location='hue.html'",
              "image/01_01.ico|Nhatrang|location='nhatrang.html'",
              "image/01_01.ico|Saigon|location='saigon.html'"),
	new Array("Vorspeisen", 
              "image/mozilla.gif|Suppen|location='suppe.html'",
              "image/mozilla2.gif|Salat|location='salat.html'",
              "image/mozilla3.gif|Häppchen|location='haeppchen.html'"),
	new Array("Hauptsgerichte", 
              "image/01_01.ico|Huhn|location='huhn.html'",
              "image/01_01.ico|Ente|location='ente.html'",
              "image/01_01.ico|Rind|location='rind.html'",
              "image/01_01.ico|Schwein|location='schwein.html'",
              "image/01_01.ico|Meeresfrüchte|location='meeresfruechte.html'",
              "image/01_01.ico|Frische Rollen|location='frischerollen.html'",
              "image/01_01.ico|Sonstiges|location='sonst.html'"),
	new Array("Vegetarisch", 
              "image/01_01.ico|Vorspeisen|location='vegevorspeisen.html'",
              "image/01_01.ico|Hauptgerichte|location='vegehauptgerichte.html'"),
	new Array("Nachspeisen", 
              "image/01_01.ico|Dessert|location='nachspeisen.html'",
              "image/01_01.ico|Weinkarte|location='weinkarte.html'")
)


function onLoad()
{
	try {
		document.all["placeHolder"].innerHTML = new ToolbarControl(myTools, 454, 76, 146, 100);
	}
	catch(e) {
		alert(e);
	}
}