﻿var sectionArray = new Array();
var tempHtml;
var tempStr1;
var tempStr2;
if (section == null)	var section = 0;
if (level1 == null)	var level1 = "";
if (level2 == null)	var level2 = "";
if (level3 == null)	var level3 = "";
var id1 = null;
var id2 = null;
var id3 = null;
var imgPath = path + "images/";
var menuImgPath = path + "images/menu/";
var menuTop = "33";
var menuLeft = "130";

var color1 = "#5D92DB";
var color2 = "#0C4D96";


function getSectionByElement(e)
{
	var nodes = e.childNodes;
	var sub = new Array();
	var qlinks = new Array();
	var menuItem = new menu();
	var j = 0;
	var q = 0;
	
	for (var i=0; i<nodes.length; i++)
		{
			var node = nodes[i];
			for (var k in menuItem)
				{
					if (node.nodeName == k)
						{
							switch(node.nodeName)
								{
									case "subSection":
										sub[j++] = getSectionByElement(node);
										break;
									default:
										menuItem[k] = (node.firstChild)?node.firstChild.data:"";
										break;									
								}
						}
				}
			menuItem["subSection"] = sub;
		}
	return menuItem;
}


function genNav() {
	var sect = 0;
	var obj = sectionArray[section];
	var total = obj.length;
	
//	alert(document.getElementById("topBanner").style.background);
//	path+'images/obj.id/banner.jpg';

	if (id1!=null)
		{
			document.getElementById("topBanner").background = path+'images/'+obj[id1].id+'/banner.jpg';
			document.getElementById("topBanner").style.paddingTop = 169;
			document.getElementById("topBanner").setAttribute('style','background-image:url("' +path+'images/'+obj[id1].id+'/banner.jpg' + '");background-repeat:no-repeat;background-positiion:top; padding:169px 0px 0px 0px;');
		}
	else
		{
			document.getElementById("topBanner").style.padding = '0px';
		}
	
//	tempHtml += '<div id="topNav" style="position:absolute; left:'+menuLeft+'px; top:'+menuTop+'px; width:591px;">';
tempHtml += '<div style="top:98px;position:absolute;width:970px; height:180px;overflow:hidden;">';
	tempHtml += '<table border="0" cellspacing="0" cellpadding="0">';
	
	tempHtml += '	<tr valign="top">';
	
	for (var i=0; i<total; i++) {
		if (obj[i].id=="others") continue;	
	
		if (sect == section && id1 == i) {
			isSect = 1;
		} else {
			isSect = 0;
		}
		
		tempStr1 = "";
		
//		obj[i].width = (100/total) + "%";
//		tempHtml += '<td width="'+obj[i].width+'" style="padding: 0px 0px 3px 0px; cursor:pointer;'+tempStr1+'" nowrap class="menu_nav">';
		//tempHtml += '<td style="padding: 0px 0px 0px 0px; cursor:pointer;'+tempStr1+'" nowrap class="menu_nav"  onMouseOver="navOver('+i+', 1, '+isSect+');menuGo('+i+', 1, 0);" onMouseOut="navOver('+i+', 0, '+isSect+'); setTimeout(function() {menuGo('+i+', 0, 0);}, 200);" onClick="menuGo('+i+', 1, 0);">';
		tempHtml += '<td style="padding: 0px 0px 0px 0px; cursor:pointer;'+tempStr1+'" onMouseOver="navOver('+i+', 1, '+isSect+');menuGo('+i+', 1, 0);" onMouseOut="navOver('+i+', 0, '+isSect+'); menuGo('+i+', 0, 0);" onClick="menuGo('+i+', 1, 0);">';
		tempHtml += '<a href="'+genLink(obj[i].link, obj[i].popup, obj[i].target)+'" target="'+obj[i].target+'" class="menu_menuTxt" onMouseOver="navOver('+i+', 1, '+isSect+');menuGo('+i+', 1, 0);" onMouseOut="navOver('+i+', 0, '+isSect+'); menuGo('+i+', 0, 0);" onClick="menuGo('+i+', 1, 0);">';
		tempHtml += '<img id="topNavBtn_'+i+'" src="'+path+'images/common/nav_'+obj[i].id+((isSect)?"_f2":"")+'.gif" alt="'+obj[i].name+'" border="0" name="nav_about">';
		tempHtml += '</a>';
		tempHtml += '</td>';
		
		if (i < (total-2))
			{
				tempHtml += '<td><img src="'+path+'images/common/line_v.gif" width="5" height="23" alt=""></td>';
				//tempHtml += '<td width="2" rowspan="2"><img src="'+imgPath+'spacer.gif" width="2" height="1"></td>';
			}
		
	}
	
	tempHtml += '								<td style="padding:0px 15px 0px 1px;"><img src="'+path+'images/common/shadow_v.gif" width="7" height="23" alt=""></td>';
	tempHtml += '								<td style="padding:5px 3px 0px 0px;"><a href="javascript:changeFontSize(\'contentTd\', 1);"><img src="'+path+'images/common/icon_plus.gif" width="11" height="11" border="0" alt="+"></a></td>';
	tempHtml += '								<td style="padding:5px 3px 0px 0px;"><a href="javascript:changeFontSize(\'contentTd\', -1);"><img src="'+path+'images/common/icon_minus.gif" width="11" height="11" border="0" alt="-"></a></td>';
	tempHtml += '								<td style="padding:4px 0px 0px 0px;"><img src="'+path+'images/common/icon_font.gif" alt="趼倰" width="24" height="12"></td>';
	tempHtml += '								<td style="padding:4px 0px 0px 0px;"><img src="'+path+'images/common/line_v_2.gif" width="1" height="12" hspace="8" alt=""></td>';
	tempHtml += '								<td style="padding:4px 0px 0px 0px;"><a href="javascript:changeLanguage(\'gb\');"><img src="'+path+'images/common/btn_gb.gif" alt="&#31616;&#20307;" width="24" height="13" border="0"></a></td>';
	tempHtml += '								<td style="padding:4px 0px 0px 0px;"><img src="'+path+'images/common/line_v_2.gif" width="1" height="12" hspace="8" alt=""></td>';
	tempHtml += '								<td style="padding:6px 0px 0px 0px;"><a href="javascript:changeLanguage(\'eng\');"><img src="'+path+'images/common/btn_eng.gif" alt="ENG" width="23" height="9" border="0"></a></td>';	
	
	tempHtml += '</tr>';
	
	tempHtml += '<tr>';
	for (var i=0; i<total; i++) {
		if (obj[i].id=="others") continue;
		tempHtml += '<td>';
		genSubMenu(i, isSect);
		tempHtml += '</td>';
		tempHtml += '<td>';
		tempHtml += '</td>';
	}
	tempHtml += '</tr>';
	
	tempHtml += '<tr>';
	tempHtml += '<td>';
	//genMenu();
	tempHtml += '</td>';
	
	tempHtml += '</tr>';
	tempHtml += '</table>';
	
	tempHtml += '</div>';
}


var menuH = 250;

function genSubMenu(id, isSec)
{
	var sect = 0;
	var obj = sectionArray[section];
	var total = obj.length;
	
	var leftD = -2;
	
	var i = id;
	
	if (Math.ceil(obj[i].subSection.length/5)>2)
		{
			leftD -= 120;
		}
	if (id==5)
	{
		leftD -= 100;
	}
	
	tempHtml += '<div style="position:relative;top:18px">';
//	tempHtml += '<div style="border:1px solid red;position:absolute; overflow:hidden; left:'+leftD+'px; top:0px; width:660px;" id="menuMask_'+id+'">';
//	tempHtml += '<div id="navMenu_'+id+'" style=" width:660px; overflow:hidden;position:absolute; top:'+(-menuH)+'px; left:'+leftD+'px; visibility:hidden;" onMouseOver="menuGo('+id+', 1, 0);" onMouseOut="setTimeout(function() {menuGo('+id+', 0, 0);}, 100);">';
	tempHtml += '<div id="navMenu_'+id+'" style="width:660px; overflow:hidden;position:absolute; top:'+(-menuH)+'px; left:'+leftD+'px; visibility:hidden;" onMouseOver="menuGo('+id+', 1, 0);" onMouseOut="menuGo('+id+', 0, 0);">';

	tempHtml += '	<table border="0" cellspacing="0" cellpadding="0" class="navBg"  onMouseOver="navOver('+i+', 1, 0);" onMouseOut="navOver('+i+', 0, 0);">';
	tempHtml += '		<tr valign="top">';
	tempHtml += '			<td><img src="'+path+'images/common/spacer.gif" width="1" height="4" alt=""></td>';
	tempHtml += '		</tr>';
	tempHtml += '		<tr>';
	tempHtml += '			<td style="padding:0px 1px 1px 1px; background-color:#FFFFFF;">';
	tempHtml += '				<table border="0" cellspacing="0" cellpadding="0">';
	tempHtml += '					<tr valign="top">';
	tempHtml += '						<td style="background:url('+path+'images/common/pulldown_t_bg.gif) repeat-x top; padding:3px 0px 0px 0px; border-bottom:'+obj[i].color+' 2px solid;">';
	tempHtml += '							<table border="0" cellspacing="0" cellpadding="0">';
	tempHtml += '								<tr valign="top">';
	
	//=================
	
	if (obj[i].subSection) {
		var obj1 = obj[i].subSection;
		var cols = Math.ceil(obj1.length/5);
		for (k=0; k<cols; k++)
			{
				tempHtml += '<td id="menuBg_'+i+'" style="padding:10px;">';
				tempHtml += '	<table border="0" cellspacing="0" cellpadding="4">';
				
				var nextMax = (k+1)*5;
				for (var j=k*5; j<nextMax; j++)
					{
						if (j>=obj1.length) break;
						//alert(id2 + " :" + id3 + " : " + i + " : " + k);
						if ((i==id1) && (j == id2))
							{
								isSect = true;
							}
						else
							{
								isSect = false;
							}
						//if (id3==j) isSect = true;
						tempHtml += '<tr valign="top" onMouseOver="menuItemOver('+i+', '+j+');">';
						tempHtml += '	<td width="5" style="padding:8px 4px 5px 5px;"><img src="'+path+'images/common/pt_gray.gif" width="5" height="5" alt=""></td>';
						tempHtml += '	<td class="nav">';
						tempHtml += '		<a class="nav" href="'+genLink(obj1[j].link, obj1[j].popup, obj1[j].target)+'" target="'+obj1[j].target+'" class="menu_menuTxt"  '+ ((isSect)?'style="color:#9F0000;"':'')+' id="menuTxt_'+i+'_'+j+'">'+obj1[j].name+'</a>';
						tempHtml += '	</td>';
						tempHtml += '</tr>';
					}
				
				tempHtml += '</table>';
			
				tempHtml += '</td>';
				
				if (k>=(cols-1)) break;
				//pulldown dash line
				tempHtml += '<td width="6" style="padding:12px 0px 8px 0px;" height="100%">';
				tempHtml += '	<table border="0" cellspacing="0" cellpadding="0" height="100%">';
				tempHtml += '		<tr>';
				tempHtml += '			<td style="background:url('+path+'images/common/pulldown_dash.gif) repeat-y top right;"><img src="'+path+'images/common/spacer.gif" width="6" height="1" alt=""></td>';
				tempHtml += '		</tr>';
				tempHtml += '	</table>';
				tempHtml += '</td>';
				//end of pulldown dash line
			}
	}
	
	// pulldown image
	tempHtml += '<td align="right" valign="bottom" style="padding:10px;" onMouseOver="menuGo('+id+', 1, 0);">';
//	tempHtml += '<div id="menuBox" onMouseOver="menuGo('+id+', 1, 0);">';
	var img = obj[i].image;
	if (obj[i].image == "")
		{
			img = "spacer.gif";
		}
	tempHtml += '	<img id="menu_Image_'+i+'" src="'+path+'images/common/'+img+'" width="116" height="86" alt="" />';
//	tempHtml += '</div>';
	tempHtml += '</td>';
	//end of  pulldown image
	
	//=================
	tempHtml += '								</tr>';
	tempHtml += '							</table>';
	tempHtml += '						</td>';
	tempHtml += '					</tr>';
	tempHtml += '				</table>';
	tempHtml += '			</td>';
	tempHtml += '		</tr>';
	tempHtml += '	</table>';

	tempHtml += '</div>';
//	tempHtml += '</div>';
	tempHtml += '</div>';
}

function menuItemOver(i, k)
{
	var obj = sectionArray[section];
	var obj1 = obj[i].subSection;
	//var img = obj1[k].image;
	var img = obj[i].image;
	if (img == "")
		{
			img = "spacer.gif";
		}
	document.getElementById("menu_Image_"+i).src = path+'images/common/'+img;
//	document.getElementById("menuImage").setAttribute("src", path+'images/common/'+obj1[k].image);
}


var navIsOver = false;

function navOver(id, over, isSect) {
	var obj = sectionArray[section];

	if (isSect == 1) {
		//return;
	}
	
	for (var i=0; i<obj.length; i++) {
		if (obj[i].id=="others") continue;	
		if (i == id) continue;
		document.getElementById('navMenu_'+i).style.top = -500;
		if (i == id1) continue;
		var btn = document.getElementById('topNavBtn_'+i);
		btn.src = path+'images/common/nav_'+obj[i].id+'.gif';
	}
	
	var layer = document.getElementById('navMenu_'+id);
	
	if (over == 1) {
		navIsOver = true;
		var btn = document.getElementById('topNavBtn_'+id);
		btn.src = path+'images/common/nav_'+obj[id].id+'_f2.gif';
		
	} else {
		navIsOver = false;
		if (id == id1) return;
		var btn = document.getElementById('topNavBtn_'+id);
		btn.src = path+'images/common/nav_'+obj[id].id+'.gif';
	}
}


function menuTxtOver(i, j, over, isSect) {
	var obj = sectionArray[0][i].subSection[j];
	var nav = document.getElementById(('menuTxtTd_'+i+'_'+j));
	
	var menuPic = document.getElementById('menuPic');
	var menuTxt = document.getElementById('menuTxt');
	var menuBox = document.getElementById('menuBox');
	
	if (over == 1) {
		if (!isSect)	nav.style.backgroundColor = color2;

		if (obj.menuTxt != "") { // 20080122 declare value
			menuPic.src = menuImgPath+'pic_'+obj.id+'.gif';
			menuTxt.innerHTML = '<span class="menu_title">' + obj.name + '</span><br>' + obj.menuTxt;
			menuBox.style.visibility = 'visible';
		} else {
			if (menuBox.style.visibility != 'hidden') {
				menuPic.src = imgPath+'spacer.gif';
				menuTxt.innerHTML = "";
				menuBox.style.visibility = 'hidden';
			}
		}
	} else {
		if (!isSect)	nav.style.backgroundColor = '';
		if (menuBox.style.visibility != 'hidden') {
			menuPic.src = imgPath+'spacer.gif';
			menuTxt.innerHTML = "";
			menuBox.style.visibility = 'hidden';
		}
	}
}


function menuBgOver(id) {
	var obj = sectionArray;
	
	for (var i=0; i<obj.length; i++) {
		var menuBg = document.getElementById('menuBg_'+i);
		menuBg.style.backgroundColor = '';
		
		var obj1 = obj[i].subSection;
		for (var j=0; j<obj1.length; j++) {
			var menuTxt = document.getElementById('menuTxt_'+i+'_'+j);
			menuTxt.style.color = '#002E65';
		}
	}
	
	var obj1 = obj[id].subSection;
	for (var j=0; j<obj1.length; j++) {
		var menuTxt = document.getElementById('menuTxt_'+id+'_'+j);
		menuTxt.style.color = '#FFFFFF';
	}
	
	var menuBg = document.getElementById('menuBg_'+id);
	menuBg.style.backgroundColor = color1;
	
}


var goSpeed = 1;
var speed;
var goStep;
var timeOut;
var objTop;
var tempTop;
var layer;
var menuMask;

var currentID;

function menuGo(id, over, motion) {
	var obj = sectionArray[section];
	
	for (var i=0; i<total; i++) {
		if (obj[i].id=="others") continue;
		if (i == id) continue;
		var temp_layer = document.getElementById('navMenu_'+i);
//		var temp_menuMask = document.getElementById('menuMask_'+i);
		temp_layer.style.top = -menuH-20;
//		temp_menuMask.style.height = 1;
	}
	if (obj[id].subSection.length == 0)
		{
			return;
		}

	layer = document.getElementById('navMenu_'+id);
//	menuMask = document.getElementById('menuMask_'+id);
	
	var sect = 0;
	var total = obj.length;

	
	if (over) {
		if (layer)	layer.style.visibility = 'visible';
		
		if (navigator.appName.indexOf("Microsoft") > -1) {
			tempTop = -20;
			speed = 10;
			if (motion)
				{
					pulldownMotion();
				}
			else
				{
					layer.style.top = -20;
				}
		} else {
			layer.style.top = -20;
		}
//		menuMask.style.height = menuH;
		
		//mvqPHideEle(true);
	} else {
		if (navIsOver)	return;
		if (navigator.appName.indexOf("Microsoft") > -1) {
			tempTop = -menuH - 20;
			speed = 4;
			if (motion)
				{
					timeOut = setTimeout('pulldownMotion();', 200);
				}
			else
				{
					layer.style.visibility = 'hidden';
					layer.style.top = -menuH - 20;
//					menuMask.style.height = 1;
				}
		} else {
			layer.style.visibility = 'hidden';
			layer.style.top = -menuH - 20;
//			menuMask.style.height = 1;
		}
		
		// var menuBox = document.getElementById('menuBox');
		// if (menuBox.style.visibility != 'hidden')	menuBox.style.visibility = 'hidden';
		
		//mvqPHideEle(false);
	}
}



function layerOff() {
	layer.style.visibility = 'hidden';
}


function pulldownMotion() {
	objTop = Number(layer.style.pixelTop);
	
	goStep = (tempTop - objTop)/speed;
	
	if (objTop - tempTop > 1 | objTop - tempTop < -1) {
		objTop += goStep;
		timeOut = setTimeout("pulldownMotion()", goSpeed);
	} else {
		objTop = tempTop;
		clearTimeout(timeOut);
	}
	
	layer.style.pixelTop = objTop;
}



function genLink(i, p, t) {
	if (i.indexOf('http') > -1) {
		var link = i;
	} else if (i.indexOf('javascript') > -1) {
		var link = i;
	} else {
		var link = path + i;
	}
	//var link = i;
	
	switch (p)
		{
			case "1":
				link = "javascript:NewWindowS(\'" + link + "\',\'" + t + "\',770, 550, 1,0);";
				break;
			case "2":
				link = 'javascript:popupLinkNW(\'' + link + '\',\'' + t +'\');';
				break;
		}
	
	return link;
}


function menu(name,id,link,target,image,color,bgcolor,sitemapcolor,subSection)
{
	this.name = (name)?name:"";
	
	this.id = (id)?id:"";
	this.link = (link)?link:"";
	this.image = (image)?image:"";
	this.bgcolor = (bgcolor)?bgcolor:"";	
	this.sitemapcolor = (sitemapcolor)?sitemapcolor:"";	
	this.color = (color)?color:"";
	this.target = (target)?target:"";
	//this.subSection = (subSection)?subSection:new Object();
	this.subSection = (subSection)?subSection:new Array();
}

function getXML()
{
	genMenuObject(path + 'xml/site.xml');
	document.title='香港馬會';
}
 
function genMenuObject(url) {	
	if (document.getElementById)
		{
			var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); 
		}
	if (x)
		{
			x.onreadystatechange = function()
			{
				if (x.readyState == 4 && x.status == 200)
				{			
					
					var root = x.responseXML.getElementsByTagName('nav').item(0);
					var section = root.getElementsByTagName('section');
					
					sectionArray[0] = new Array();
					sectionArray[1] = new Array();
										
					for (var i=0; i< section.length; i++)
						{
							sectionArray[0][i] = getSectionByElement(section[i]);
						}
						
						
					getLevel();
					genId();
					
					genTop();
					genLeftStart();
					//alert(1);
					
					var bo = document.getElementsByTagName("BODY");
					
					var tds = document.getElementsByTagName("TD");
					var tables = document.getElementsByTagName("TABLE");

					if (document.getElementById('leftNavDiv'))
						{
							subNavStart(id2);
						}
					//bo[0].style.display = "block";
					
					if (id1!=null)
						{
							var aList = document.getElementsByTagName("A");
							
							for (var f in tds)
								{
									if (tds[f].className == "footerHome")
										{
											tds[f].style.color = "#79766B";
										}
								}
							
							for (var f in aList)
								{
									if (aList[f].className == "footerHome")
										{
											aList[f].style.color = "#79766B";
										}
								}
							//tables[0].style.backgroundColor = bgcolor;
							document.getElementById("footerRight").style.paddingRight = 35;
							document.getElementById("footerLeft").style.paddingLeft = 38;
							
							
							var obj = sectionArray[0]
							tables[0].style.backgroundColor = obj[id1].bgcolor;
							
							//getFontSize("contentTd");
						}
					else
						{
							tables[0].style.backgroundColor = "#002D64";
						}
						
					if (document.getElementById('sitemapContent'))
						{
							genSiteMap();
						}
						
					getFontSize("contentTd");
					try{
					mvqPDiv = document.getElementById("navMenu_1");
					mvqPStyle = mvqPDiv.style;
					} catch(e){};
				}
			}
			
			x.open("GET", url, true);
			x.send(null);
		}

}

var tempStr = "";

function popupLinkNW(mypage, n) {
	winprops = '';
	win = window.open(mypage, n, winprops);
	win.self.focus();
}

function NewWindowS(mypage, myname, w, h, scroll,resizable) {
	var winl = (screen.width - w) / 2;
	var wint = (screen.height - h) / 2;
	winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable='+resizable+','
	win = window.open(mypage, myname, winprops)
	win.self.focus()
	if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}


var mvqTimeout = 125;
var mvqPDiv, mvqPStyle;


function mvqPHideEle(boolHide)
{
    window.setTimeout("mvqPHideEle1('OBJECT'," +  boolHide + ")", mvqTimeout);
    window.setTimeout("mvqPHideEle1('SELECT'," +  boolHide + ")", mvqTimeout+1);
}

function mvqPHideEle1(el, boolShowHide)
{
    var objects = document.getElementsByTagName(el);
    if(objects.length == 0) return;
    for(var i=0; i < objects.length; i++)
    {
        var obj = objects.item(i);
        elm = mvqPDiv.firstChild;
        if(elm)
        {
            if(boolShowHide && mvqPVerifyOverlap(elm, obj))
            {
                obj.style.visibility = "hidden";
            }
            else
            {
                if(obj.style.visibility == "hidden") obj.style.visibility = "visible";
            }
        }
    }
}

function mvqPDimension(elm)
{
    var top = 0;
    var height = 0;
    var width = 0;
    var left = 0;
    if(elm)
    {
        this.height = elm.offsetHeight;
        this.width = elm.offsetWidth;
        while(elm)
        {
            left += elm.offsetLeft;
            top += elm.offsetTop;
            elm = elm.offsetParent;
        }
        this.left = left;
        this.top = top;
    }
}

function mvqPVerifyOverlap(tbl, overlapElm)
{
    var p1 = new mvqPDimension(overlapElm);
    var p = new mvqPDimension(tbl);
    return ( ((p.left + p.width) > p1.left) && (p.left < (p1.left + p1.width)) && (p.top < (p1.top - overlapElm.offsetTop + p1.height)) && ((p.top + p.height) > (p1.top - overlapElm.offsetTop)) );
}

