function TabMenu(menuElements, menuID, varName)
{
	this.menuElements = menuElements;
	this.menuID = menuID;
	this.varName = varName;
	this.activeTab = 0;
}

TabMenu.prototype.displayHead = displayHead;
TabMenu.prototype.displayBottom = displayBottom;
TabMenu.prototype.switchTab = switchTab;

function displayHead()
{
	document.write("<table width='100%' border='0' cellpadding='0' cellspacing='0'>");

	// the top border of the menu elements
	document.write("	<tr>");
	document.write("		<td colspan='3'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td colspan='" + (this.menuElements.length * 4 + 1) + "' class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td colspan='4'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");

	// the menu elements
	document.write("	<tr>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='20'></td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='4' height='1'></td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='8' height='1'></td>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");

	for (i = 0; i < this.menuElements.length; i++)
	{
		document.write("		<td id='" + this.menuID + "_Tab_" + i + "_LeftSpace'  " + ((this.menuElements[i][1] == 1) ? "class='tabWhiteSwitch'" : "class='tabGreySwitch'") + " onclick='" + this.varName + ".switchTab(\"" + i + "\", " + i + ")'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='5' height='1'></td>");
		document.write("		<td align='center' width='" + (100 / this.menuElements.length) + "%' id='" + this.menuID + "_Tab_" + i + "_MenuLabel' " + ((this.menuElements[i][1] == 1) ? "class='tabWhiteSwitch'" : "class='tabGreySwitch'") + " onclick='" + this.varName + ".switchTab(\"" + i + "\", " + i + ")' nowrap>" + this.menuElements[i][0] + "</td>");
		document.write("		<td id='" + this.menuID + "_Tab_" + i + "_RightSpace' " + ((this.menuElements[i][1] == 1) ? "class='tabWhiteSwitch'" : "class='tabGreySwitch'") + " onclick='" + this.varName + ".switchTab(\"" + i + "\", " + i + ")'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='5' height='1'></td>");
		document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	}

	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='8' height='1'></td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='4' height='1'></td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");

	// the seperation between menu elements and menu content
	document.write("	<tr>");
	document.write("		<td colspan='4' class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");

	for (i = 0; i < this.menuElements.length; i++)
	{
		document.write("		<td colspan='3' id='" + this.menuID + "_Tab_" + i + "_Bottom' " + ((this.menuElements[i][1] == 1) ? "" : "class='tabGreyBorder'") + "><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
		document.write("		<td colspan='1' class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	}

	document.write("		<td colspan='3' class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");

	// create some space
	document.write("	<tr>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='4'></td>");
	document.write("		<td colspan='" + (this.menuElements.length * 4 + 5) + "'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");

	// the menu content row
	document.write("	<tr>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td colspan='" + (this.menuElements.length * 4 + 3) + "' width='100%'>");
}

function displayBottom()
{
	document.write("	</td>");
	document.write("		<td><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");
	document.write("	<tr>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='4'></td>");
	document.write("		<td colspan='" + (this.menuElements.length * 4 + 5) + "'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("		<td class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");
	document.write("	<tr>");
	document.write("		<td colspan='" + (this.menuElements.length * 4 + 7) + "' class='tabGreyBorder'><img src='" + getPath("XoomK","Design") + "/images/pix.gif' width='1' height='1'></td>");
	document.write("	</tr>");
	document.write("</table>");
	
	this.switchTab(0);
}

function switchTab(tabNumber)
{
	for (i = 0; i < this.menuElements.length; i++)
	{
		if (tabNumber == i)
		{
			if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
			{
				document.getElementById(this.menuID + "_TabContent_" + i).style.display = "block";
			}
			else
			{
				document.getElementById(this.menuID + "_TabContent_" + i).style.display = "table";
			}
			document.getElementById(this.menuID + "_Tab_" + i + "_LeftSpace").className = "tabWhiteSwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_MenuLabel").className = "tabWhiteSwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_RightSpace").className = "tabWhiteSwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_Bottom").className = "";
		}
		else
		{
			document.getElementById(this.menuID + "_TabContent_" + i).style.display = "none";
			document.getElementById(this.menuID + "_Tab_" + i + "_LeftSpace").className = "tabGreySwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_MenuLabel").className = "tabGreySwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_RightSpace").className = "tabGreySwitch";
			document.getElementById(this.menuID + "_Tab_" + i + "_Bottom").className = "tabGreyBorder";
		}

		/*
		for (var j = 0; j < document.getElementById(this.menuID + "_TabContent_" + i).rows[0].cells.length; j++)
		{
			if (j == 0)
			{
				document.getElementById(this.menuID + "_TabContent_" + i).rows[0].cells[j].width = "100%";
			}
		}
		*/
	}
	
	this.activeTab = tabNumber;
}