//使用方法  HEAD 中的 JS, 不用作任何修改, 也几乎没有什么修改的必要.
// HEAD中的CSS 根据自己的需要, 可以作任意修改.
// 下面的JS,  都写有注释, 可以随便修改定义菜单的语句和使用的样式表名. 
//	var webNav=new navMenuClass(); 这一句要注意, 创建的这个实例必须名为 webNav

function createDiv(inObj){ //创建一个DIV
	var tempObj=document.createElement("div");
	obj=inObj.appendChild(tempObj);	
	return obj;
}
function navMenuClass(){
	var m=new Array();
	var l=new Array();
	var sArray=new Array();//a标签的其他属性,( title='' target='_breaj' ) 
	this.mainCss=null;       //主菜单样式表
	this.mainEndCss=null;    //最后一个主菜单的样式表
	this.mainMouseCss=null;  //主菜单鼠标移上去后的样式式表
	this.lowCss=null;        //子菜单样式表
	this.lowMouseCss=null;   //子菜单鼠标移上去样式表
	this.lowBgCss=null;      //子菜单背景样式表
	this.lDiv=null;          //子菜单的外部DIV
	this.lDivBG=null;        //子菜单的背景DIV
	this.lDivText=null;      //子菜单的DIV
	this.isClose=0;           //是否关半子菜单
	this.mainObj=null;        //
	this.z=0;
	this.addMain=function(text,url){
		m[m.length]=text+"|"+url;
		l[l.length]=new Array();
		if(arguments.length==3){
			sArray.push(arguments[2]);
		}else{
			sArray.push(" ");	
		}
		this.z++;
	}
	
	this.addLow=function(index,text,url){
		var x=l[index].length;
		l[index][x]=new Array();
		l[index][x][0]=text;
		l[index][x][1]=url;
	}
	
	this.create=function(obj){
		if (this.mainCss==null){ alert("请定义主菜单的样式");return;}
		if (this.lowCss==null){ alert("请定义子菜单的样式");return;}
		if (this.lowMouseCss==null){ alert("请定义子菜单鼠标移上去后的菜单的样式");return;}
		if (this.lowBgCss==null){ alert("请定义子菜单背景的样式");return;}
		if (obj==null){ alert("请设置把菜单显示到哪个对象中");return;}
		if (m.length==0){alert("请你设置好主菜单");return;}
		if (l.length==0){alert("请你设置好子菜单");return;}
		this.lDiv=createDiv(document.body);
		this.lDivBG=createDiv(this.lDiv);  //背景层
		this.lDivText=createDiv(this.lDiv);//文字层		
		this.lDiv.style.cssText="position: absolute;  z-index: 1; left: -30px; top: 0px;display:none;width:800px";
		this.lDivBG.style.cssText="position: absolute; z-index: 2; left: -30px; top: 0px; ";
		this.lDivBG.className=this.lowBgCss;
		this.lDivText.style.cssText="position: absolute; z-index: 3; left: -30px; top: 0px;";
		for (var i=0;i<m.length;i++){
			var mObj=createDiv(obj);
			if (i==m.length-1){
				mObj.className=this.mainEndCss;
			}else{
				mObj.className=this.mainCss;
			}
			mText=m[i].split("|");
			mObj.innerHTML="<a "+sArray[i]+" href='" + mText[1] + "'>" + mText[0] + "</a>";
			mObj.i=i;
			mObj.onmouseover=function(){ //当鼠标移到主菜单上
				webNav.setIsClose;
				this.className=webNav.mainMouseCss;
				if (webNav.mainObj!=null & webNav.mainObj!=this){
					if (parseInt(webNav.mainObj.i)==webNav.z-1){
						webNav.mainObj.className=webNav.mainEndCss;
					}else{
						webNav.mainObj.className=webNav.mainCss;
					}
				}
				webNav.mainObj=this;
				webNav.createLow(this);
			}			
			mObj.onmouseout=function(){ //当鼠标移开主菜单
				webNav.timeCloseMenu();
			}
		}
		
		this.lDiv.onmouseout=function(){
			webNav.timeCloseMenu();
		}		
		this.lDiv.onmouseover=function(){
			webNav.setIsClose();
		}
	}
	
	this.createLow=function(obj){
		webNav.setIsClose();
		var x=parseInt(obj.i);
		this.lDiv.style.display="none";
		this.lDivText.innerHTML="";
		lData=l[x];
		var lobj,i;
		for (i=0;i<lData.length;i++){
			lobj=createDiv(this.lDivText);
			lobj.className=this.lowCss;
			lobj.innerHTML="<a  href='" + lData[i][1] + "'>" +  lData[i][0] + "</a>";			
			lobj.onmouseover=function(){
				webNav.setIsClose();
				this.className=webNav.lowMouseCss;
			}			
			lobj.onmouseout=function(){
				webNav.timeCloseMenu();
				this.className=webNav.lowCss;
			}
		}
		var y=getTop(obj)+obj.offsetHeight;
		var x=getLeft(obj);
		
		this.lDiv.style.top=y;
		this.lDiv.style.left=x-40;
		if (i!=0){
			this.lDiv.style.display="";
		}
		try{
			var w=Element.getWidth(lobj);
		}catch(e){
			var w=0;
		}
		this.lDivBG.style.width=(w*i)+"px";
	}
	
	this.setIsClose=function(){
		this.isClose=0;
	}
		
	this.timeCloseMenu=function(){ //延时后关闭菜单
		this.isClose=1;
		setTimeout("webNav.closeMenu()",500);
	}
	
	this.closeMenu=function(){
		if (this.isClose==1){
			this.lDiv.style.display="none";
			if (this.mainObj!=null){
				if (parseInt(this.mainObj.i)==m.length-1){
					this.mainObj.className=this.mainEndCss;
				}else{
					this.mainObj.className=this.mainCss;
				}
			}
		}
	}
}