/* T R E E  D R A W I N G  M E T H O D S */

function getTreeColorFromDepth (depth)
{
	switch (depth)
	{
		case 0: return "#0c3295";
		case 1: return "#97c9ef";
		case 2: return "#a8dcff";
		case 3: return "#bff2ff";
		case 4: return "#e0f8ff";
		default: return "#ffffff";
	}
}

function tree_drawRootElement (idx, depth, name, url)
{
	var item;

	document.write (" \
	<DIV id='tree" + idx + "' style='position: absolute; z-index: 100'> \
	<TABLE height='24' width='192' cellpadding='0' cellspacing='0' border='0'> \
	<TR height='23' bgcolor='" + getTreeColorFromDepth (depth) + "'> \
	<TD width='174' class='wpsTabs'>&nbsp;" + name + "</TD> \
	<TD width='16'><IMG id='img" + idx + "' src='"+img_closed+"' border='0'></TD> \
	</TR> \
	<TR bgcolor='#ffffff'><TD height='1' colspan='2' width='192'><IMG src='"+img_blank+"' height='1'></TD></TR> \
	</TABLE></DIV> \
	");
	
	item = document.getElementById ("tree" + idx);
	
	item.xsize = 192;
	item.ysize = 24;
	
	return item;
}


function tree_drawSubElement (idx, depth, name, url, group, selected_state)
{
	var item;
	var size = depth * 15;
		
	document.write (" \
	<DIV id='tree" + idx + "' style='position: absolute; z-index: " + (100 - depth) + "'> \
	<TABLE height='20' width='192' cellpadding='0' cellspacing='0' border='0'> \
	<TR height='19' bgcolor='" + getTreeColorFromDepth (depth) + "'> \
	<TD width='" + size + "'><IMG src='"+img_blank+"' width='" + size + "' height='1'></TD> \
	<TD class='wpsSubTabs'>" + name + "</TD> \
	");
	
	if (group)
	{
		document.write ("<TD width='16'><IMG id='img"+idx+"' src='"+img_closed_sub+"' border='0'></TD>");
	}
	
	document.write (" \
	</TR> \
	</TABLE></DIV> \
	");

	item = document.getElementById ("tree" + idx);

	item.xsize = 192;
	item.ysize = 20;
	
	return item;
}



/*  M E N U  D R A W I N G   M E T H O D S  */

function menu_color (active)
{
	if (active) return "#d2d0d1";
	else return "#eeeeee";
}


function drawMenuRoot (idx, data)
{
	var item;
	
	var hasUrl = (data[idx][0].length == 2);
	
	document.write (" \
	<DIV id='menu" + idx + "' style='position: absolute; z-index: 300'> \
	<TABLE cellspacing='0' cellpadding='0' border='0' height='18'> \
	<TR> \
	");
	
	if (idx == 0)
	{
		document.write ("<TD width='18'><IMG src='"+img_menu_corner+"' width='18' height='18'></TD>");
	}
	
	document.write (" \
	<TD bgcolor='#d2d0d1' class='menutop' align='center'>&nbsp;&nbsp;&nbsp;" + data[idx][0][0] + "&nbsp;&nbsp;&nbsp;</TD> \
	<TD width='1' height='18'><IMG src='" + img_blank + "' height='18' width='1'></TD> \
	</TR> \
	</TABLE> \
	</DIV> \
	");

	item = document.getElementById ("menu" + idx);
	
	if (hasUrl)
	{
		item.onclick = menu_click;
		item.url = data[idx][0][1]+ "?menu="+idx;
	}
	
	return item;
}


function drawMenuContent (idx, data)
{
	var content;
	
	document.write (" \
	<DIV id='menu" + idx + "_content' style='position: absolute; z-index: 300'> \
	<TABLE cellspacing='0' cellpadding='0' border='0' bgcolor='#eeeeee' height='18'> \
	");
	
	for (var i = 1; i < data[idx].length; i++)
	{
		document.write (" \
		<TR height='18'> \
		<TD width='1' bgcolor='#2e5bd0'><IMG src=" + img_blank + " width='1' height='18'></TD> \
		<TD id='menu"+idx+"_"+i+"' class='menutop'>&nbsp;&nbsp;" + data[idx][i][0] + "&nbsp;&nbsp;</TD> \
		<TD width='1' bgcolor='#2e5bd0'><IMG src=" + img_blank + " width='1' height='18'></TD> \
		</TR> \
		");

		var td = document.getElementById ("menu"+idx+"_"+i);
		
		td.url = data[idx][i][1] + "?menu="+idx+","+i;
		td.onmouseover = menu_setActive;
		td.onmouseout = menu_setInactive;
		td.onclick = menu_click;
		
	}
	
	document.write (" \
	<TR><TD colspan='3' height='1' bgcolor='#2e5bd0'><IMG src=" + img_blank + " width='100%' height='1'></TD></TR> \
	</TABLE> \
	</DIV> \
	");
	
	content = document.getElementById ("menu" + idx + "_content");
	
	return content;
}


/*  C L O C K S   D R A W I N G   M E T H O D S  */

function draw_times (x, y)
{
	var item;
	
	document.write (" \
	<DIV id='times' style='position: absolute'> \
	<TABLE cellspacing='0' cellpadding='0' border='0' width='338'> \
	<TR> \
	<TD width='18'><IMG src='"+img_time_corner+"'></TD> \
	<TD width='100' bgcolor='#bff3ff' class='menutop' align='center'>Paris <B id='time0'>HH:MI:SS</B></TD> \
	<TD width='120' bgcolor='#bff3ff' class='menutop' align='center'>New-York <B id='time1'>HH:MI:SS</B></TD> \
	<TD width='100' bgcolor='#bff3ff' class='menutop' align='center'>Tokyo <B id='time2'>HH:MI:SS</B></TD> \
	</TR> \
	</TABLE> \
	</DIV> \
	");

	item = document.getElementById ("times");
	
	return item;
}


/* C U R R E N T   P A T H   D R A W I N G   M E T H O D S  */

function draw_path (str)
{
	var item;
	
	document.write (" \
	<DIV id='curr_path_shadow' style='position: absolute; visibility: visible'> \
	<SPAN class='pathtopdark'>" + str + "</SPAN> \
	</DIV> \
	<DIV id='curr_path' style='position: absolute; visibility: visible'> \
	<SPAN class='pathtop'>" + str + "</SPAN> \
	</DIV> \
	");
}