var curMenu = '';
var tid = null;
ShowSub = function(menuID, o) {
	if( curMenu != '' ) $(curMenu).hide();

	var ref = $(o);
	var dx = $(ref).cumulativeOffset().left + $(ref).getWidth() - 5;
	var dy = $(ref).cumulativeOffset().top;
	if( dx < 0 ) dx = 0;
	if( dy < 0 ) dy = 0;
	$(menuID).setStyle({
		left: dx+'px',
		top: dy+'px'
	});
	$(menuID).show();
	curMenu = menuID;
}
SubTime = function(show) {
	if( show ) {
		$(curMenu).show();
		clearTimeout(tid);
	} else {
		tid = setTimeout('\$(curMenu).hide();',500);
	}
}

var theMenus = [
	[
		["sub01#1", "#"],
		["sub01#2", "#"],
		["sub01#3", "#"],
		["sub01#4", "#"],
		["sub01#5", "#"]
	],
	[
		["sub02#1", "#"],
		["sub02#2", "#"],
		["sub02#3", "#"],
		["sub02#4", "#"],
		["sub02#5", "#"]
	],
	[
		["sub03#1", "#"],
		["sub03#2", "#"],
		["sub03#3", "#"],
		["sub03#4", "#"],
		["sub03#5", "#"]
	],
	[
		["sub04#1", "#"],
		["sub04#2", "#"],
		["sub04#3", "#"],
		["sub04#4", "#"],
		["sub04#5", "#"]
	],
	[
		["sub05#1", "#"],
		["sub05#2", "#"],
		["sub05#3", "#"],
		["sub05#4", "#"],
		["sub05#5", "#"]
	],
	[
		["sub06#1", "#"],
		["sub06#2", "#"],
		["sub06#3", "#"],
		["sub06#4", "#"],
		["sub06#5", "#"]
	]
];

DrawSubMenu = function(index, id) {
	var m = theMenus[ index ];
	var html = "";
	html += '<div id="'+ id +'" style="display:none;">';
	html += '  <table width="178" border="0" cellspacing="0" cellpadding="0">';
	html += '	<tr>';
	html += '	  <td width="10" height="10" align="left" valign="top" nowrap><img src="theme/green/img/submenu_green_01.png" width="10" height="10" border="0"></td>';
	html += '	  <td width="158" height="10" class="submenutop"><img src="images/spacer.gif" width="1" height="1"></td>';
	html += '	  <td width="10" height="10" align="right" valign="top" nowrap><img src="theme/green/img/submenu_green_03.png" width="10" height="10" border="0"></td>';
	html += '	</tr>';
	html += '	<tr>';
	html += '	  <td class="submenuleft"><img src="images/spacer.gif" width="1" height="1"></td>';
	html += '	  <td align="left" valign="top"><div class="submenu">';
	html += '		  <ul>';
	for(var i=0; i < m.length; i++) {
		html += '<li';
		if( i < (m.length-1) ) html += ' class="bottomhl"';
		html += '><a href="'+ m[i][1] +'" onmouseover="SubTime(1);" onmouseout="SubTime(0);">'+ m[i][0] +'</a></li>';
	}
	html += '		  </ul>';
	html += '		</div></td>';
	html += '	  <td class="submenuright"><img src="images/spacer.gif" width="1" height="1"></td>';
	html += '	</tr>';
	html += '	<tr>';
	html += '	  <td width="10" height="10" align="left" valign="bottom" nowrap><img src="theme/green/img/submenu_green_07.png" width="10" height="10" border="0"></td>';
	html += '	  <td width="10" class="submenubottom"><img src="images/spacer.gif" width="1" height="1"></td>';
	html += '	  <td width="10" height="10" align="right" valign="bottom" nowrap><img src="theme/green/img/submenu_green_09.png" width="10" height="10" border="0"></td>';
	html += '	</tr>';
	html += '  </table>';
	html += '</div>';
	document.write( html );
}