///////////////////////////////////////////////////////////
//
//	FUNCTIONS TO CREATE DINAMIC GENERATED MENUS
//
///////////////////////////////////////////////////////////
//
//	This file contains some functions that,
//	when called correctly, reads a predefined
//	Array containing data, creates a <DIV>,
//	creates HTML code that draw the menu,
//	and writes this code in the <DIV>
//
//	This file is divided in two main parts:
//	one that generates static navigation menus,
//	and other that generates a dinamic menu
//	that responds to onmouseover events to
//	open subitens.
//
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
//	BROWSER RECOGNITION
///////////////////////////////////////////////////////////

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var isVisible = false;

///////////////////////////////////////////////////////////
//	GLOBAL VARIABLE DECLARATIONS
///////////////////////////////////////////////////////////

// HTML content that will be written on the layer
var content = "";

// REL_ID of the selected node in navigation tree
var rel_id_selected = "";

// Start of the address that will be placed on links
var URLHeader = "";

// string that stores javascript commands to be generated
// and interpreted at runtime using
// eval(restoreImageString). Is used to restore
// highlighted images to original ones,
// when users moves mouse out of a menu
// image, on second part.
var restoreImageString = "";

// used on second part code to call a function
// to restore the menu after some miliseconds
var restoretimeout = "";

// position (x, y) for each layer
var pos_x = 100;
var pos_y = 100;

var imagePath = "";

var locale = "";

var timeout1;
var timeout2;
var timeouttime = (ns4?500:10);

var restoretimeout = "";

// maximum number of submenu itens before spliting
// the submenu in two columns
var maxsubmenuitens = 8;

///////////////////////////////////////////////////////////
//	URL MAKER FUNCTION
///////////////////////////////////////////////////////////

function makeURL(id)
{
	return (URLHeader+"Mediator?id="+id);
}

///////////////////////////////////////////////////////////
//	ITEM CLASS DECLARATION
///////////////////////////////////////////////////////////
//
//	This class is the base of the datastructure that
//	stores navigation trees. Subitem propertie stores
//	an array of Item objects.
//
///////////////////////////////////////////////////////////

function Item(name, linkstring, rel_id, subitem)
{
	this.name=name;
	this.linkstring=linkstring;
	this.rel_id=rel_id;
	this.subitem=new Array();
}

///////////////////////////////////////////////////////////
//	MENUITEM CLASS DECLARATION
///////////////////////////////////////////////////////////
//
//	This class is the base of the datastructure that
//	stores navigation trees on topnav menus. Subitem
//	propertie stores an array of MenuItem objects.
//
///////////////////////////////////////////////////////////

function MenuItem(name, linkstring, subitem)
{
	this.name=name;
	this.linkstring=linkstring;
	this.subitem=new Array();
}

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//
//	1ST PART: STATIC MENU
//
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//
//	For example, this is a well-formed
//	Javascript code that must be declared
//	BEFORE calling the write("") function:
//
//	<script>
//		var item = new Array();
//		item[0] = new Item("Delrin ® POM",30," 1,7,30,");
//		item[1] = new Item("Elvamide ® PA",52,"1,7,52,");
//		item[2] = new Item("Filaments",74,"1,7,74,");
//		item[3] = new Item("Hytrel ® TEEE",75,"1,7,75,");
//		item[4] = new Item("Minlon ® PA",97,"1,7,97,");
//		item[5] = new Item("Rynite ® PET",119,"1,7,119,");
//		item[6] = new Item("Vespel ® Parts",141,"1,7,141,");
//		item[7] = new Item("Zenite ® LCP",142,"1,7,142,");
//		item[8] = new Item("Zytel ® PA",164,"1,7,164,");
//		var subitem = new Array();
//		subitem[0] = new Item("PA 66",165,"1,7,164,165,");
//		subitem[1] = new Item("PA 612",187,"1,7,164,187,");
//		subitem[2] = new Item("PA 6",209,"1,7,164,209,");
//		subitem[3] = new Item("Zytel® MDX",231,"1,7,164,231,");
//		subitem[4] = new Item("#NL#Enhanced Functionality",253,"1,7,164,253,");
//		var subsubitem = new Array();
//		subsubitem[0] = new Item("Dimensional Stability",254,"1,7,164,253,254,");
//		subsubitem[1] = new Item("Extreme Environments",275,"1,7,164,253,275,");
//		subsubitem[2] = new Item("Flame Retardant",296,"1,7,164,253,296,");
//		subsubitem[3] = new Item("Structural Strength",317,"1,7,164,253,317,");
//		subsubitem[4] = new Item("Toughened",338,"1,7,164,253,338,");
//		subsubitem[5] = new Item("Wear & Friction",359,"1,7,164,253,359,");
//		subitem[4].subitem = subsubitem;
//		item[8].subitem = subitem;
//		item[9] = new Item("Crastin ® PBT",8,"1,7,8,");
//		item[10] = new Item("Zytel ® HTN",380,"1,7,380,");
//	</script>
//
//	write("") function can bee called as many times as
//	needed, but NEVER with the same argument. When
//	called, this function reads the last declared item[]
//	array. So, if one wants to draw more than
//	one menu, he (or she) must declare item[],
//	call write(), declare item[] again, and
//	call write() again with a different argument.
//
//	So, the shema that have to be followed is:
//
//	1) Write item[] declaration as in the example above
//	2) Call write function
//	   (e.g.: <script>write("Left");</script>)
//	3) Write other item[] declaration
//	4) Call write function again, but with other
//	   parameter
//	   (e.g.: <script>write("Right");</script>)
//	5) And so on...
//
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
//	WRITE FUNCTION
///////////////////////////////////////////////////////////
//
//	Main function to draw static menus.
//
///////////////////////////////////////////////////////////

function dowrite(where)
{

	///////////////////////////////////////////////////////////
	//	COPY ITENS TO PRODUCTS GLOBAL ARRAY
	///////////////////////////////////////////////////////////

	var products = new Array();

	for (i=0; i<item.length; i++)
	{
		products[i] = item[i];
	}

	///////////////////////////////////////////////////////////
	//	LAYER CREATION
	///////////////////////////////////////////////////////////

	if(!ns4)
	{
		document.write("<div id=\""+where+"Nav\" style=\"visibility: show\">YYY</div>");
	}

	///////////////////////////////////////////////////////////
	//	LAYER PREPARATION
	///////////////////////////////////////////////////////////

	if(ns4||ns6||ie4)
	{
		if(ns6)
		{
			eval(where+"NavLayer = document.getElementById(\""+where+"Nav\").style");
		}
		else if(ie4)
		{
			eval(where+"NavLayer = document.all."+where+"Nav.style");
		}
		if(!ns4)
		{
			eval(where+"NavLayer.visibility = \"visible\"");
			eval(where+"NavLayer.display = \"none\"");
		}
	}

	if(!ns4)
	{
		eval(where+"NavLayer.display = \"none\"");
	}

	///////////////////////////////////////////////////////////
	//	HTML CONSTRUCTION
	///////////////////////////////////////////////////////////

	//If it's a bottom nav menu
	if(where == "Bottom")
	{
		content = '<TABLE border="0" cellspacing="0" cellpadding="0">\n';	
		
		// for each product...
		for(i=0; i<products.length; i++)
		{
			if(i==0)
			{
				content+=' <TR>\n';
			}
			else
			{
				content+='&nbsp;|&nbsp;</TD>\n';
			}

			// if these product is selected, must be highlighted
			if(rel_id_selected.indexOf(products[i].rel_id)==0)
			{
				content+=' <TD class="leftNavon" onmouseover="this.className=\'leftNavon\';" onmouseout="this.className=\'leftNavon\';" height="20" valign="top"><A class="leftNavon" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';" href="'+products[i].linkstring+'" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';"><span class="leftNavon" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';">'+products[i].name+'</span></A>\n';
			}
			else //not highlighted
			{
				content+=' <TD class="leftNav" onmouseover="this.className=\'leftNavon\';" onmouseout="this.className=\'leftNav\';" height="20" valign="top"><A class="leftNav" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';" href="'+products[i].linkstring+'" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';"><span class="leftNav" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';">'+products[i].name+'</span></A>\n';
			}					
		}
		
		content+='</TD>\n';
		content+=' </TR>\n';
	}
	else //it's a Left or Right nav menu
	{

	content = '<TABLE width="125" border="0" cellspacing="0" cellpadding="0">\n';

	// for each product...
	for(i=0; i<products.length; i++)
	{
		var texto = products[i].name+"";
		// if this is not a link, prints it on a special way...
		if(texto.substring(0,4)=="#NL#")
		{
			content+='				<TR>\n';
			content+='					<TD colspan="2" height="10" class="leftNavon" valign="baseline">'+texto.substring(4,texto.length)+'</TD>\n';
			content+='				</TR>\n';
		}
		else
		{
			// if this product is selected...
			if(rel_id_selected.indexOf(products[i].rel_id)==0)
			{
				content+='	<TR>\n';
				content+='		<TD width="8" height="20" valign="top"><img src="' + imagePath + '/common/images/ptrgrey.gif" height="10" width="5"></TD>\n';
				content+='		<TD width="117" class="leftNavon" onmouseover="this.className=\'leftNavon\';" onmouseout="this.className=\'leftNavon\';" height="20" valign="top"><A class="leftNavon" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';" href="'+products[i].linkstring+'" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';"><span class="leftNavon" onmouseover="this.className=\'leftNavon\';" class="leftNavon" onmouseout="this.className=\'leftNavon\';">'+products[i].name+'</span></A></TD>\n';
				content+='	</TR>\n';
			}
			// END (if these product is selected...)
			// if these product is not selected, prints the product not highlighted...
			else
			{
				content+='	<TR>\n';
				content+='		<TD width="8" height="20" valign="top"><img src="'+ imagePath + 'common/images/ptrgrey.gif" height="10" width="5"></TD>\n';
				content+='		<TD width="117" class="leftNav" onmouseover="this.className=\'leftNavon\';" onmouseout="this.className=\'leftNav\';" height="20" valign="top"><A class="leftNav" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';" href="'+products[i].linkstring+'" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';"><span class="leftNav" onmouseover="this.className=\'leftNavon\';" class="leftNav" onmouseout="this.className=\'leftNav\';">'+products[i].name+'</span></A></TD>\n';
				content+='	</TR>\n';
			}			
		}
		
		//if is not a link or is a link selected
		if(texto.substring(0,4)=="#EL#" || texto.substring(0,4)=="#NL#" || rel_id_selected.indexOf(products[i].rel_id)==0)
		{
						
			// if there is any grade declared...
			if(products[i].subitem.length>0)
			{
				content+='	<TR>\n';
				if(texto.substring(0,4)=="#EL#")
				{
					content+='		<TD></TD>\n';
				}else{
					content+='		<TD>&nbsp;</TD>\n';
				}
				
				content+='		<TD>\n';
				content+='			<TABLE cellpadding="0" cellspacing="0" border="0">\n';

				// for each grade...
				for(j=0; j<products[i].subitem.length; j++)
				{
					
					var texto = products[i].subitem[j].name+"";
					// if these grade is not a link, prints it on a special way...
					if(texto.substring(0,4)=="#NL#")
					{
						content+='				<TR>\n';
						content+='					<TD colspan="2" height="10" class="leftNavon" valign="baseline">'+texto.substring(4,texto.length)+'</TD>\n';
						content+='				</TR>\n';
					}
					else if(texto.substring(0,4)=="#EL#")
					{
						content+='	<TR>\n';
						

						// if this expand link has subitens, prints it black
						if(products[i].subitem[j].subitem.length>0)
						{
							content+='		<TD width="8" height="10" valign="top"><img src="' + imagePath + '/common/images/ptrgrey.gif" height="10" width="5"></TD>\n';
							content+='		<TD height="10" valign="top" class="subNavParent"><A href="#" class="subNavParent" onclick="display(' + j + ');"><span class="subNavParent">'+texto.substring(4,texto.length)+'</span></A></TD>\n';
						}
						else //if this grade has no subitens, prints it default color
						{
							content+='		<TD width="8" height="10" valign="top"><img src="'+ imagePath + 'common/images/subnav_arrow.gif" height="10" width="5"></TD>\n';
							content+='		<TD height="10" valign="top" class="subNav" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><A href="#" class="subNav" onclick="display(' + j + ');" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><span class="subNav" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNav\'">'+texto.substring(4,texto.length)+'</span></A></TD>\n';
						}
							
						content+='	</TR>\n';
					}
					// if these is a normal grade, prints on the default way...
					else
					{
						content+='				<TR>\n';
						
						// if these grade is selected, prints it highlighted
						if(rel_id_selected.indexOf(products[i].subitem[j].rel_id)==0)
						{
							// if this grade has subitens, prints its arrow black
							if(products[i].subitem[j].subitem.length>0)
							{
								content+='		<TD width="8" height="10" valign="top"><img src="' + imagePath + '/common/images/ptrgrey.gif" height="10" width="5"></TD>\n';														
							}
							else //prints its arrow default color
							{
								content+='		<TD width="8" height="10" valign="top"><img src="'+ imagePath + 'common/images/subnav_arrow.gif" height="10" width="5"></TD>\n';
							}
							content+='	<TD height="10" valign="top" class="subNavon" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavon\'"><A href="'+products[i].subitem[j].linkstring+'" class="subNavon" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavon\'"><span class="subNavon" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNavon\'">'+texto+'</span></A></TD>\n';
						}
						// if these grade is not selected, prints it not highlighted
						else
						{
							// if this grade has subitens, prints it black
							if(products[i].subitem[j].subitem.length>0)
							{
								content+='		<TD width="8" height="10" valign="top"><img src="' + imagePath + '/common/images/ptrgrey.gif" height="10" width="5"></TD>\n';							
								content+='		<TD height="10" valign="top" class="subNavParent" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavParent\'"><A href="'+products[i].subitem[j].linkstring+'" class="subNavParent" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavParent\'"><span class="subNavParent" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNavParent\'">'+texto+'</span></A></TD>\n';
							}
							else //if this grade has no subitens, prints it default color
							{
								content+='		<TD width="8" height="10" valign="top"><img src="'+ imagePath + 'common/images/subnav_arrow.gif" height="10" width="5"></TD>\n';
								content+='		<TD height="10" valign="top" class="subNav" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><A href="'+products[i].subitem[j].linkstring+'" class="subNav" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><span class="subNav" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNav\'">'+texto+'</span></A></TD>\n';
							}
						}
						content+='	</TR>\n';
					}

					//if is not a link or is a link selected
					if(texto.substring(0,4)=="#EL#" ||texto.substring(0,4)=="#NL#" || rel_id_selected.indexOf(products[i].subitem[j].rel_id)==0)
					{
				
						// if this grade has subitens, prints them...
						if(products[i].subitem[j].subitem.length>0)
						{
							content+='	<TR>\n';
							if(texto.substring(0,4)=="#EL#")
							{
								content+='		<TD></TD>\n';
							}else{
								content+='		<TD>&nbsp;</TD>\n';
							}
							
							content+='		<TD>\n';
							content+='			<TABLE cellpadding="0" cellspacing="0" border="0">\n';

							if(texto.substring(0,4)=="#EL#")
							{
								if(rel_id_selected.indexOf(products[i].subitem[j].rel_id)==0)
								{
									content+='<TR><TD>';
									content+='<div id="EL' + j + '">';
									content+='	<TABLE cellpadding="0" cellspacing="0" border="0">\n';
								}else{
									content+='<TR><TD>';
									content+='<div style="display:none" id="EL' + j + '">';
									content+='	<TABLE cellpadding="0" cellspacing="0" border="0">\n';
								}
							}					
					
									//for each subitem in this grade...
									for(k=0; k<products[i].subitem[j].subitem.length; k++)
									{
										content+='							<TR>\n';
										content+='								<TD width="8" height="10" valign="top"><img src="'+ imagePath + 'common/images/subnav_arrow.gif" height="10" width="5"></TD>\n';
										if(rel_id_selected.indexOf(products[i].subitem[j].subitem[k].rel_id)==0)
										{
											content+='	<TD height="10" valign="top" class="subNavon" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavon\'"><A href="'+products[i].subitem[j].subitem[k].linkstring+'" class="subNavon" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNavon\'"><span class="subNavon" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNavon\'">'+products[i].subitem[j].subitem[k].name+'</span></A></TD>\n';
										}
										else
										{
											content+='	<TD height="10" valign="top" class="subNav" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><A href="'+products[i].subitem[j].subitem[k].linkstring+'" class="subNav" onmouseover="this.className=\'subNavon\'" onmouseout="this.className=\'subNav\'"><span class="subNav" onMouseOver="this.className=\'subNavon\'" onMouseOut="this.className=\'subNav\'">'+products[i].subitem[j].subitem[k].name+'</span></A></TD>\n';
										}
										content+='	</TR>\n';
									}
									
							if(texto.substring(0,4)=="#EL#")
							{
								content+='</TABLE>\n';
								content+='</div>';
								content+='</TD></TR>';
							}
							
							content+='			</TABLE>';
							content+='</TD></TR>\n';
						}
					}
				}
					
				// END for each grade...
				content+='			</TABLE>\n';
				content+='			<TABLE border="0" cellspacing="0" cellpadding="0">\n';
				content+='				<TR>\n';
				content+='					<TD background="' + imagePath + 'common/images/spacer.gif" width=1 height="4" border="0"></TD>\n';
				content+='				</TR>\n';
				content+='			</TABLE>\n';
				content+='		</TR>\n';
			}
			// END (if there is any grade declared...)
			
		}

	}
	// END for each product...

	}

	content+='</TABLE>\n';
	


	///////////////////////////////////////////////////////////
	//	HTML WRITING
	///////////////////////////////////////////////////////////

	if(ns4)
	{
		document.write(content);
	}
	if(ns6)
	{
		document.getElementById(where+"Nav").innerHTML = content;
		eval(where+"NavLayer.display='block'");
	}
	if(ie4)
	{
		document.all(where+"Nav").innerHTML=content;
		eval(where+"NavLayer.display='block'");
	}

}

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//
//	2ND PART: ANIMATED MENU
//
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//
//	This part needs a script code that does declaration
//	of some objects	and variables to work. It's important
//	to take care of browsers differences, because menus
//	are build using absolute coordinates. This means that
//	one must inform coordinates for each browser in order
//	to show properly the menu despite of the browser user
//	is using.
//
//	For exanple, this code is a well-formed Javascript
//	that can build a three level menu:
//
//	<script>
//	    var item = new Array();
//	    item[0] = new Item("Engineering Plastics",0,"#");
//	    item[1] = new Item("Ethylene Copolymers and Olefins",0,"222");
//		item[2] = new Item("Film Composites",0,"333");
//		item[3] = new Item("Fluoropolymers",0,"4");
//		item[4] = new Item("Fluoropolymer Films",0,"55555");
//		item[5] = new Item("Polyester Films",0,"666666");
//		item[6] = new Item("Polyimide Films",0,"777777777777");
//		var subitem = new Array();
//		subitem[0] = new Item("Teste Teste",0,"777771111111");
//		subitem[1] = new Item("rrrr",0,"777777722222");
//		item[6].subitem = subitem;
//		item[7] = new Item("Polyolefin Shrink Films",0,"88");
//		item[8] = new Item("Thermoplastic Elastomers",0,"999999");
//		var subitem = new Array();
//		subitem[0] = new Item("!!!@@@",0,"9991111111");
//		subitem[1] = new Item("@@@###",0,"9222222");
//		item[8].subitem = subitem;
//		item[9] = new Item("Thick Film Material",0,"10101010101010");
//		item[10] = new Item("Additives, Modifiers and Advanced Composites",0,"111111");
//	</script>
//	<script>
//	/* coordinates for netscape 4+ */
//	if(ns4)
//	{
//		pos_x = 135;
//		pos_y = 113;
//		sub_x = 260;
//		var sub_y = new Array();
//		sub_y[0] = 0;
//		sub_y[1] = 0;
//		sub_y[2] = 0;
//		sub_y[3] = 0;
//		sub_y[4] = 0;
//		sub_y[5] = 0;
//		sub_y[6] = 220;
//		sub_y[7] = 0;
//		sub_y[8] = 260;
//		sub_y[9] = 0;
//		sub_y[10] = 0;
//		sub_y[11] = 0;
//	}
//	/* coordinates for netscape 6+ */
//	if(ns6)
//	{
//		pos_x = 133;
//		pos_y = 106;
//		sub_x = 258;
//		var sub_y = new Array();
//		sub_y[0] = 0;
//		sub_y[1] = 0;
//		sub_y[2] = 0;
//		sub_y[3] = 0;
//		sub_y[4] = 0;
//		sub_y[5] = 0;
//		sub_y[6] = 220;
//		sub_y[7] = 0;
//		sub_y[8] = 260;
//		sub_y[9] = 0;
//		sub_y[10] = 0;
//		sub_y[11] = 0;
//	}
//	/* coordinates for internet explorer 4+ */
//	if(ie4)
//	{
//		pos_x = 135;
//		pos_y = 113;
//		sub_x = 260;
//		var sub_y = new Array();
//		sub_y[0] = 0;
//		sub_y[1] = 0;
//		sub_y[2] = 0;
//		sub_y[3] = 0;
//		sub_y[4] = 0;
//		sub_y[5] = 0;
//		sub_y[6] = 220;
//		sub_y[7] = 0;
//		sub_y[8] = 260;
//		sub_y[9] = 0;
//		sub_y[10] = 0;
//		sub_y[11] = 0;
//	}
//	buildTop("products");
//	</script>
//
//	The first part (first javascript tag) can be generated
//	dinamically directly from a database or a
//	resourcebunldes file. The second part (second javascript
//	tag) must be written hardcoded to inform locations of
//	each menu on user's browser. Finally, the function
//	buildTop() must be called to construct the menu.
//
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
//	BUILDING OF NAVIGATION LAYER
///////////////////////////////////////////////////////////
//
//	This function writes menu layer, so it can be shown
//	later, when user pass the mouse over a section name.
//
///////////////////////////////////////////////////////////
function buildTop(name)
{

	// put a new item into menus array

	///////////////////////////////////////////////////////////
	//	BUILDING OF NAVIGATION LAYER
	///////////////////////////////////////////////////////////

	content = "<table border=\"0\" bordercolor=\"#00FFCC\" width=\"125\" cellpadding=\"0\" cellspacing=\"0\">";
	for (i=0; i<item.length; i++)
	{
		var containssub = false;
		// if there are subitens...
		if(item[i].subitem.length>0)
		{
			subcontent = "<table border=\"0\" bordercolor=\"#00FFCC\" cellpadding=\"0\" cellspacing=\"0\">";
			// if we need to split in two rows...
			if(item[i].subitem.length>maxsubmenuitens)
			{
				for(j=0;j<item[i].subitem.length;j++)
				{
					// even number
					if(j%2==0)
					{
						subcontent += "<tr><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"10\"></td><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\" width=\"128\" height=\"18\"><a href=\""+item[i].subitem[j].linkstring+"\" class=\"navdown\" onmouseover=\"sublinkover()\" onmouseout=\"sublinkout()\">"+item[i].subitem[j].name+"</a></td><td bgcolor=\"#ffcc66\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"1\"></td>";
					}
					// odd number
					else
					{
						subcontent += "<td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"10\"></td><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\" width=\"128\" height=\"18\"><a href=\""+item[i].subitem[j].linkstring+"\" class=\"navdown\" onmouseover=\"sublinkover()\" onmouseout=\"sublinkout()\">"+item[i].subitem[j].name+"</a></td></tr>";
						subcontent += "<tr><td bgcolor=\"#ffcc66\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\" colspan=\"5\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"128\" height=\"18\"></td></tr>";
					}
				}
			}
			// if we haven't to split in two rows...
			else
			{
				for(j=0;j<item[i].subitem.length;j++)
				{
					subcontent += "<tr><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"10\"></td><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\" width=\"128\" height=\"18\"><a href=\""+item[i].subitem[j].linkstring+"\" class=\"navdown\" onmouseover=\"sublinkover()\" onmouseout=\"sublinkout()\">"+item[i].subitem[j].name+"</a></td></tr>";
					subcontent += "<tr><td bgcolor=\"#ffcc66\" onmouseover=\"cellover()\"  onmouseout=\"cellout(true)\" colspan=\"2\"><img src=\"" + imagePath + "common/images/spacer.gif\" height=\"1\" width=\"128\" height=\"18\"></td></tr>";
				}
			}
			subcontent += "</table>";
			///////////////////////////////////////////////////////////
			//	HTML WRITING FOR SUBMENU
			///////////////////////////////////////////////////////////
			eval(name+i+"content = subcontent");
			// creates variable for timeout
			eval("timeout"+name+i+" = \"\"");
			containssub = true;
		}
		//if(item[i].)
		content += "<tr><td bgcolor=\"#ffcc66\" onmouseover=\"cellover()\"  onmouseout=\"cellout("+containssub+")\"><img name=\"img"+name+i+"\" src=\""+ imagePath + "common/images/spacer.gif\" width=\"10\" height=\"17\" align=\"left\"></td><td bgcolor=\"#ffcc66\" onmouseover=\"cellover()\"  onmouseout=\"cellout("+containssub+")\" width=\"125\"><a href=\""+item[i].linkstring+"\" class=\"navdown\" onmouseover=\"linkover('"+name+"', "+i+", "+containssub+")\" onmouseout=\"linkout('"+name+"', "+i+", "+containssub+")\">"+item[i].name+"</a></td></tr>";
		content += "<tr><td bgcolor=\"#ff9933\" onmouseover=\"cellover()\"  onmouseout=\"cellout("+containssub+")\" colspan=\"2\"><img src=\""+ imagePath + "common/images/spacer.gif\" height=\"1\" width=\"125\"></td></tr>";
	}
	content += "</table>";
	///////////////////////////////////////////////////////////
	//	HTML WRITING FOR SUBMENU
	///////////////////////////////////////////////////////////
	eval(name+"content = content");
	eval(name+"pos_x = pos_x");
	eval(name+"pos_y = pos_y");
	eval(name+"sub_x = sub_x");
	eval(name+"sub_y = sub_y");
}

///////////////////////////////////////////////////////////
//	DRAWING OF MENUS
///////////////////////////////////////////////////////////
//
//	This function draws menus and submenus. "Draw a menu"
//	means moving a layer to correct position, change
//	it's content and make it visible.
//
//	content: content that will be putted on the layers
//	what: the name of the layer that will be changed
//	x: x coordinate for the layer
//	y: y coordinate for the layer
//
///////////////////////////////////////////////////////////
function drawmenu(content, what, x, y)
{
	if(ns4)
	{
		eval("layer = document."+what);
//		layer.visibility = "hide";
		layer.left=x;
		layer.top=y;
		layer.document.write(content);
		layer.document.close();
		layer.visibility = "show";
	}
	if(ns6)
	{
		layer = document.getElementById(what);
//		layer.style.visibility="hidden";
		layer.style.left = x;
		layer.style.top = y;
		layer.innerHTML = content;
		layer.style.visibility="visible";
	}
	if(ie4)
	{
		layer = document.all[what];
//		layer.style.visibility = "hidden";
		layer.style.left = x;
		layer.style.top = y;
		layer.innerHTML = content;
		layer.style.visibility = "visible";
	}
}

///////////////////////////////////////////////////////////
//	HIDDING OF MENUS
///////////////////////////////////////////////////////////
//
//	Hides a menu. I.e., make it invisible.
//
//	what: the name of the layer that will be changed
//
///////////////////////////////////////////////////////////
function hidemenu(what)
{
	if(ns4)
	{
		eval("layer = document."+what);
		layer.visibility = "hide";
	}
	if(ns6)
	{
		layer = document.getElementById(what);
		layer.style.visibility="hidden";
	}
	if(ie4)
	{
		layer = document.all[what];
		layer.style.visibility = "hidden";
	}
}

///////////////////////////////////////////////////////////
//	ONMOUSEOVER FOR MENU TABLE CELLS
///////////////////////////////////////////////////////////
//
//	Only clears all timeouts related with hidding
//	menus.
//
///////////////////////////////////////////////////////////
function cellover()
{
	clearTimeout(timeout1);
	clearTimeout(timeout2);
	clearTimeout(restoretimeout);
}

///////////////////////////////////////////////////////////
//	ONMOUSEOUT FOR MENU TABLE CELLS
///////////////////////////////////////////////////////////
//
//	Starts timeouts to hide menus. If this cell
//	contains submenus, then start timeout to
//	hide the layer in which submenus are
//	represented.
//
///////////////////////////////////////////////////////////
function cellout(containssub)
{
	timeout1 = setTimeout("hidemenu('menu1')", timeouttime);
	if(containssub)
	{
		timeout2 = setTimeout("hidemenu('menu2')", timeouttime);
	}
	restoretimeout = setTimeout("eval('"+restoreImageString+"')", timeouttime);
}

///////////////////////////////////////////////////////////
//	ONMOUSEOVER FOR MENU LINKS
///////////////////////////////////////////////////////////
//
//	Clear timeout for hidding main menu and to
//	restore image buttons menu. Shows submenu if
//	necessary, and change images for menu buttons
//	to highlighted ones.
//
///////////////////////////////////////////////////////////
function linkover(name, number, containssub)
{
	clearTimeout(timeout1);
	clearTimeout(restoretimeout);
	// if contains submenu, clear it's timeout and draw it
	if(containssub)
	{
		clearTimeout(timeout2);
		eval("drawmenu("+name+number+"content, \"menu2\", "+name+"sub_x, "+name+"sub_y["+number+"])");
	}
	// if it does not contain a submenu, hide this submenu layer
	else
	{
		hidemenu("menu2");
	}

	// change image button menus to highlighted ones
	if(ie4)
	{
		document.all["img"+name+number].src = imagePath + "common/images/ptr.gif";
	}
	else
	{
		eval("document.img"+name+number+".src = \"" + imagePath + "common/images/ptr.gif\"");
	}
}

///////////////////////////////////////////////////////////
//	ONMOUSEOUT FOR MENU LINKS
///////////////////////////////////////////////////////////
//
//
//
///////////////////////////////////////////////////////////
function linkout(name, number, containssub)
{
	if(ns4)
	{
		timeout1 = setTimeout("hidemenu('menu1')", timeouttime);
		if(containssub)
		{
			timeout2 = setTimeout("hidemenu('menu2')", timeouttime);
		}
		restoretimeout = setTimeout("eval('"+restoreImageString+"')", timeouttime);
	}
	if(ie4)
	{
		document.all["img"+name+number].src = imagePath + "common/images/spacer.gif";
	}
	else
	{
		eval("document.img"+name+number+".src = \"" + imagePath + "common/images/spacer.gif\"");
	}
}

///////////////////////////////////////////////////////////
//	ONMOUSEOVER FOR LINKS IN SUBMENU
///////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////
function sublinkover()
{
	clearTimeout(timeout1);
	clearTimeout(timeout2);
	clearTimeout(restoretimeout);
}

///////////////////////////////////////////////////////////
//	ONMOUSEOUT FOR LINKS IN SUBMENU
///////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////
function sublinkout()
{
	if(ns4)
	{
		timeout1 = setTimeout("hidemenu('menu1')", timeouttime);
		timeout2 = setTimeout("hidemenu('menu2')", timeouttime);
		restoretimeout = setTimeout("eval('"+restoreImageString+"')", timeouttime);
	}
}

///////////////////////////////////////////////////////////
//	ONMOUSEOVER FOR MENU ACTIVATION BUTTONS
///////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////
function menuover(name)
{
	clearTimeout(timeout1);
	clearTimeout(timeout2);
	clearTimeout(restoretimeout);
	eval(restoreImageString);
	eval("drawmenu("+name+"content, 'menu1', "+name+"pos_x, "+name+"pos_y)");
	hidemenu("menu2");
	if(ie4)
	{
		restoreImageString = "document.all[\""+name+"_img\"].src = \""+document.all[name+"_img"].src+"\"";
		document.all[name+"_img"].src = imagePath + locale + "/images/header/nav_r_"+name+".gif";
	}
	else
	{
		restoreImageString = "document."+name+"_img.src = \"" + eval("document."+name+"_img.src") + "\"";
		eval("document."+name+"_img.src = \"" + imagePath + locale + "/images/header/nav_r_"+name+".gif\"");
	}
}

///////////////////////////////////////////////////////////
//	ONMOUSEOUT FOR MENU ACTIVATION BUTTONS
///////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////
function menuout(name)
{
	timeout1 = setTimeout("hidemenu('menu1')", timeouttime);
	timeout2 = setTimeout("hidemenu('menu2')", timeouttime);
	restoretimeout = setTimeout("eval('"+restoreImageString+"')", timeouttime);
}

///////////////////////////////////////////////////////////
//	REDIRECT URL
///////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////
function redirect(url)
{
	window.location.href=url;
}

function launchWindow(url) {
	window.open(url, "newWindow");
}

function openExternalLink(url)
{
	open(URLHeader+"Mediator?externalurl="+url, "");
}

function goToPage()
{
	document.location = "#";
}

function display(value)
{
	var componente = document.getElementById("EL" + value);
	if(isVisible)
	{
		componente.style.display = 'none';
		isVisible = false;
	}else{
		componente.style.display = '';
		isVisible = true;
	}
}