var isIE = !!(window.attachEvent && !window.opera);
var isOpera = !!window.opera;
var isSafari = navigator.userAgent.indexOf('AppleWebKit/') > -1;
var isMoz = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1;
var isMobileSafari = !!navigator.userAgent.match(/Apple.*Mobile.*Safari/);


var oEventUtil = new Object();

oEventUtil.addEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
	if(oTarget.addEventListener){
		oTarget.addEventListener(sEventType,fnHandler,false);
	}else if(oTarget.attachEvent){
		oTarget.attachEvent("on"+sEventType,fnHandler);
	}else{
		oTarget["on"+sEventType] = fnHandler;
	}
}

oEventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
	if(oTarget.removeEventListener){
		oTarget.removeEventListener(sEventType,fnHandler,false);
	}else if(oTarget.detachEvent){
		oTarget.detachEvent("on"+sEventType,fnHandler);
	}else{
		oTarget["on"+sEventType] = null;
	}
}

oEventUtil.formatEvent = function(oEvent){
	if(isIE){
		if(oEvent.type == 'keypress'){
			oEvent.charCode = oEvent.keyCode;
			oEvent.keyCode = 0;
		}
		if(oEvent.type == 'keydown' || oEvent.type == 'keyup'){
			oEvent.charCode = 0;
		}
		oEvent.eventPhase = 2;
		oEvent.isChar = (oEvent.charCode > 0);
		oEvent.pageX = oEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
		oEvent.pageY = oEvent.clientY + document.body.scrollTop - document.body.clientTop;
		
		if(oEvent.type == 'mouseout'){
			oEvent.relatedTarget = oEvent.toElement;
		}else if(oEvent.type == 'mouseover'){
			oEvent.relatedTarget = oEvent.fromElement;
		}
		
		oEvent.preventDefault = function(){
			oEvent.returnValue = false;
		}
		
		oEvent.stopPropagation = function(){
			oEvent.cancelBubble = true;
		};
		
		oEvent.target = oEvent.srcElement;
		oEvent.time = (new Date()).getTime();
	}
	//oEvent.mousePosition = {x,y}
	return oEvent;
}

oEventUtil.getEvent = function(){
	if(window.event)
		return this.formatEvent(window.event);
	else
		return this.formatEvent(oEventUtil.getEvent.caller.arguments[0]);
}

function $(id){
	return document.getElementById(id);
}

Number.prototype.NaN0 = function(){
	//如果不是数字则返回0 否则返回原数
	return isNaN(this)?0:this;
}
function GetPosition(obj){
	var left = 0;
	var top  = 0;
	while (obj.offsetParent){
		left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth)).NaN0():0);
		top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth)).NaN0():0);
		obj  =  obj.offsetParent;
	}

	left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth)).NaN0():0);
	top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}
//sProperty:所需设置的属性
//nStart:属性值的起始值
//nEnd:属性值的结束值
//nInterval:总的运动时间
//nStep:步进时间
//fnCallback:缓动完成后的回调函数
function BufferMove(sProperty,nStart,nEnd,nInterval,nStep,fnCallback){
	var rank =2;
	var arg =((nEnd-nStart)/Math.abs(nEnd-nStart)) * Math.pow(Math.abs(nEnd - nStart),rank) / nInterval;
	var curStep = 0;
	var SetValue = function(){
		if(curStep + nStep >= nInterval){
			clearInterval(interval);
			eval(sProperty + "=" + nEnd);
			if(fnCallback && fnCallback instanceof Function)
				fnCallback(); 
		}else{
			curStep += nStep;
			eval(sProperty + "=" + ((arg/Math.abs(arg)) * Math.pow((Math.abs(arg) *curStep),1/parseFloat(rank.toString())) + nStart));
		}
	}
	var interval = setInterval(SetValue,nStep);
}



function SlideMenu(oBtn,oMenu,sMenuId){
	var btn = oBtn;
	var menu = oMenu;
	if(menu.id == '')
		menu.id = sMenuId;
	var menuGroup = sMenuId
	var isOpened = false;
	var timeOutId = null;
	//为下拉菜单添加外框
	var menuContainer = document.createElement("div");
	menu = menu.parentNode.removeChild(menu);
	menuContainer.appendChild(menu);
	document.body.appendChild(menuContainer);
	
	//设置外框必要的样式
	menuContainer.style.display = 'block';
	menuContainer.style.visibility = 'visible';
	menuContainer.style.overflow = 'hidden';
	menuContainer.style.position = 'absolute';
	
	// 设置下拉菜单的样式
	menu.style.position = 'absolute';
	menu.style.overflow = 'visible';
	menu.style.display = 'block';
	menu.style.visibility = 'hidden';// 用户既看不到下拉菜单 又可以获取菜单的宽和高
	// 获得下拉菜单的宽和高
	var menuWidth = menu.offsetWidth;
	var menuHeight = menu.offsetHeight;
	
	//设置下拉菜单容器的宽和高
	menuContainer.style.width = menuWidth;
	menuContainer.style.height = menuHeight;
	
	//关闭菜单
	function CloseMenu(){
		if(!isOpened)
			return;
		BufferMove('document.getElementById("' + menu.id + '").style.top',0,-menuHeight,0,1,fnCallback);
		function fnCallback(){
			menuContainer.style.display = 'none';
			isOpened = false;
			oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
		}
	}
	//凡是属于这个group的都有
	function GroupMouseOver(){
		clearTimeout(timeOutId);
		timeOutId = null;
	}
	function GroupMouseOut(){
		oEvent = oEventUtil.getEvent();
		if(oEvent.relatedTarget.getAttribute("menugroup") != menuGroup && timeOutId == null)
			timeOutId = setTimeout(CloseMenu,100);
	}
	//设置下拉菜单的group
	function SetGroup(obj){
		obj.setAttribute("menugroup",menuGroup);
		oEventUtil.addEventHandler(obj,"mouseover",GroupMouseOver);
		oEventUtil.addEventHandler(obj,"mouseout",GroupMouseOut);
		for(var i=0;i<obj.childNodes.length;i++){
			if(obj.childNodes[i].nodeName != "#text")
				SetGroup(obj.childNodes[i]);
		}
	}
	SetGroup(btn);
	SetGroup(menu);
	
	//将下拉菜单容器隐藏
	menuContainer.style.display = 'none';
	
	
	var btnMouseOver = function(){
		//如果已经是展开的话 就不做响应
		if(isOpened)
			return;
		//如果正在展开的过程中 又将鼠标移到btn上的话 就会响应很多次
		//这样就可以限制在展开的过程当中多次响应mouseover
		oEventUtil.removeEventHandler(btn,"mouseover",btnMouseOver);
		//将下拉容器设置为可见 此时下拉菜单为display:block;visibility:hidden;
		menuContainer.style.display = 'block';
		
		//设置下拉容器的位置
		var pos = GetPosition(btn);
		
		/*获取浏览器 "类型"  "版本" */
		var __Agt = navigator.userAgent.toLowerCase();
        var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);
        if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);
        
        //类型
        var _Br=__If[1],
        //版本
        _Ver=__If[2];
        
        
        var url = window.location.href;
        
        var str = url.split("/");
        var urlStr = str[3].split(".");
        
        
        if(urlStr[0] == "Default" || urlStr[0] == "ProductList" || urlStr[0] == "Product_Detail")
        {
            if(_Br == 'msie')
            {
                menuContainer.style.left =( pos.x - 25) + 'px';
            }
            else if(_Br == 'firefox')
            {
                menuContainer.style.left =( pos.x - 25) + 'px';
            }
            menuContainer.style.top = (pos.y + btn.offsetHeight + 9) + 'px';
        }
        else
        {
		    if(_Br == 'msie')
            {
                if(str[4] == "")
                {
                    menuContainer.style.left =( pos.x - 20) + 'px';
                    menuContainer.style.top = (pos.y + btn.offsetHeight + 9) + 'px';
                }
                else
                {
                    menuContainer.style.left =( pos.x - 25) + 'px';
                    menuContainer.style.top = (pos.y + btn.offsetHeight) + 'px';
                }
            }
            else if(_Br == 'firefox')
            {
                if(str[4] == "")
                {
                    menuContainer.style.left =( pos.x - 27) + 'px';
                }
                else
                {
                    menuContainer.style.left =( pos.x - 25) + 'px';
                }
                menuContainer.style.top = (pos.y + btn.offsetHeight + 9) + 'px';
            }
        }
		
	
		//设置下拉菜单的属性
		menu.style.left = '0px';
	   
		menu.style.top = -menuHeight + 'px';
		menu.style.visibility = 'visible';
		
		BufferMove('document.getElementById("' + menu.id + '").style.top',-menuHeight,0,0,1,fnCallback);
		function fnCallback(){
			isOpened = true;
		}
	}
	oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
}
//	window.onload = function(){
//	    new SlideMenu($("btn0"),$("menu0"),"menu0");
//		new SlideMenu($("btn1"),$("menu1"),"menu1");
//		new SlideMenu($("btn2"),$("menu2"),"menu2");
//	    new SlideMenu($("btn3"),$("menu3"),"menu3");
//	}





//<script type="text/javascript">
//		var isIE = !!(window.attachEvent && !window.opera);
//		var isOpera = !!window.opera;
//		var isSafari = navigator.userAgent.indexOf('AppleWebKit/') > -1;
//		var isMoz = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1;
//		var isMobileSafari = !!navigator.userAgent.match(/Apple.*Mobile.*Safari/);
//		
//		
//		var oEventUtil = new Object();

//		oEventUtil.addEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
//			if(oTarget.addEventListener){
//				oTarget.addEventListener(sEventType,fnHandler,false);
//			}else if(oTarget.attachEvent){
//				oTarget.attachEvent("on"+sEventType,fnHandler);
//			}else{
//				oTarget["on"+sEventType] = fnHandler;
//			}
//		}

//		oEventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
//			if(oTarget.removeEventListener){
//				oTarget.removeEventListener(sEventType,fnHandler,false);
//			}else if(oTarget.detachEvent){
//				oTarget.detachEvent("on"+sEventType,fnHandler);
//			}else{
//				oTarget["on"+sEventType] = null;
//			}
//		}

//		oEventUtil.formatEvent = function(oEvent){
//			if(isIE){
//				if(oEvent.type == 'keypress'){
//					oEvent.charCode = oEvent.keyCode;
//					oEvent.keyCode = 0;
//				}
//				if(oEvent.type == 'keydown' || oEvent.type == 'keyup'){
//					oEvent.charCode = 0;
//				}
//				oEvent.eventPhase = 2;
//				oEvent.isChar = (oEvent.charCode > 0);
//				oEvent.pageX = oEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
//				oEvent.pageY = oEvent.clientY + document.body.scrollTop - document.body.clientTop;
//		        
//				if(oEvent.type == 'mouseout'){
//					oEvent.relatedTarget = oEvent.toElement;
//				}else if(oEvent.type == 'mouseover'){
//					oEvent.relatedTarget = oEvent.fromElement;
//				}
//		        
//				oEvent.preventDefault = function(){
//					oEvent.returnValue = false;
//				}
//		        
//				oEvent.stopPropagation = function(){
//					oEvent.cancelBubble = true;
//				};
//		        
//				oEvent.target = oEvent.srcElement;
//				oEvent.time = (new Date()).getTime();
//			}
//			//oEvent.mousePosition = {x,y}
//			return oEvent;
//		}

//		oEventUtil.getEvent = function(){
//			if(window.event)
//				return this.formatEvent(window.event);
//			else
//				return this.formatEvent(oEventUtil.getEvent.caller.arguments[0]);
//		}
//    
//        function $(id){
//            return document.getElementById(id);
//        }
//    
//		Number.prototype.NaN0 = function(){
//			//如果不是数字则返回0 否则返回原数
//			return isNaN(this)?0:this;
//		}
//		function GetPosition(obj){
//			var left = 0;
//			var top  = 0;
//			while (obj.offsetParent){
//				left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth)).NaN0():0);
//				top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth)).NaN0():0);
//				obj  =  obj.offsetParent;
//			}

//			left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth)).NaN0():0);
//			top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth)).NaN0():0);

//			return {x:left, y:top};

//		}
//		//sProperty:所需设置的属性
//		//nStart:属性值的起始值
//		//nEnd:属性值的结束值
//		//nInterval:总的运动时间
//		//nStep:步进时间
//		//fnCallback:缓动完成后的回调函数
//		function BufferMove(sProperty,nStart,nEnd,nInterval,nStep,fnCallback){
//			var rank =2;
//			var arg =((nEnd-nStart)/Math.abs(nEnd-nStart)) * Math.pow(Math.abs(nEnd - nStart),rank) / nInterval;
//			var curStep = 0;
//			var SetValue = function(){
//				if(curStep + nStep >= nInterval){
//					clearInterval(interval);
//					eval(sProperty + "=" + nEnd);
//					if(fnCallback && fnCallback instanceof Function)
//						fnCallback(); 
//				}else{
//					curStep += nStep;
//					eval(sProperty + "=" + ((arg/Math.abs(arg)) * Math.pow((Math.abs(arg) *curStep),1/parseFloat(rank.toString())) + nStart));
//				}
//			}
//			var interval = setInterval(SetValue,nStep);
//		}
//			
//	</script>
//	<script type="text/javascript">
//			
//		function SlideMenu(oBtn,oMenu,sMenuId){
//			var btn = oBtn;
//			var menu = oMenu;
//			if(menu.id == '')
//				menu.id = sMenuId;
//			var menuGroup = sMenuId
//			var isOpened = false;
//			var timeOutId = null;
//			//为下拉菜单添加外框
//			var menuContainer = document.createElement("div");
//			menu = menu.parentNode.removeChild(menu);
//			menuContainer.appendChild(menu);
//			document.body.appendChild(menuContainer);
//			
//			//设置外框必要的样式
//			menuContainer.style.display = 'block';
//			menuContainer.style.visibility = 'visible';
//			menuContainer.style.overflow = 'hidden';
//			menuContainer.style.position = 'absolute';
//			
//			// 设置下拉菜单的样式
//			menu.style.position = 'absolute';
//			menu.style.overflow = 'visible';
//			menu.style.display = 'block';
//			menu.style.visibility = 'hidden';// 用户既看不到下拉菜单 又可以获取菜单的宽和高
//			// 获得下拉菜单的宽和高
//			var menuWidth = menu.offsetWidth;
//			var menuHeight = menu.offsetHeight;
//			
//			//设置下拉菜单容器的宽和高
//			menuContainer.style.width = menuWidth;
//			menuContainer.style.height = menuHeight;
//			
//			//关闭菜单
//			function CloseMenu(){
//				if(!isOpened)
//					return;
//				BufferMove('document.getElementById("' + menu.id + '").style.top',0,-menuHeight,0,1,fnCallback);
//				function fnCallback(){
//					menuContainer.style.display = 'none';
//					isOpened = false;
//					oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
//				}
//			}
//			//凡是属于这个group的都有
//			function GroupMouseOver(){
//				clearTimeout(timeOutId);
//				timeOutId = null;
//			}
//			function GroupMouseOut(){
//				oEvent = oEventUtil.getEvent();
//				if(oEvent.relatedTarget.getAttribute("menugroup") != menuGroup && timeOutId == null)
//					timeOutId = setTimeout(CloseMenu,100);
//			}
//			//设置下拉菜单的group
//			function SetGroup(obj){
//				obj.setAttribute("menugroup",menuGroup);
//				oEventUtil.addEventHandler(obj,"mouseover",GroupMouseOver);
//				oEventUtil.addEventHandler(obj,"mouseout",GroupMouseOut);
//				for(var i=0;i<obj.childNodes.length;i++){
//					if(obj.childNodes[i].nodeName != "#text")
//						SetGroup(obj.childNodes[i]);
//				}
//			}
//			SetGroup(btn);
//			SetGroup(menu);
//			
//			// 将下拉菜单容器隐藏
//			menuContainer.style.display = 'none';
//			
//			
//			var btnMouseOver = function(){
//				// 如果已经是展开的话 就不做响应
//				if(isOpened)
//					return;
//				// 如果正在展开的过程中 又将鼠标移到btn上的话 就会响应很多次
//				// 这样就可以限制在展开的过程当中多次响应mouseover
//				oEventUtil.removeEventHandler(btn,"mouseover",btnMouseOver);
//				// 将下拉容器设置为可见 此时下拉菜单为display:block;visibility:hidden;
//				menuContainer.style.display = 'block';
//				
//				// 设置下拉容器的位置
//				var pos = GetPosition(btn);
//				menuContainer.style.left =( pos.x-15) + 'px';
//				menuContainer.style.top = (pos.y + btn.offsetHeight+9) + 'px';
//				
//			
//				// 设置下拉菜单的属性
//				menu.style.left = '0px';
//			   
//				menu.style.top = -menuHeight + 'px';
//				menu.style.visibility = 'visible';
//				
//				BufferMove('document.getElementById("' + menu.id + '").style.top',-menuHeight,0,0,1,fnCallback);
//				function fnCallback(){
//					isOpened = true;
//				}
//			}
//			oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);
//		}
//		window.onload = function(){
//		    new SlideMenu($("btn0"),$("menu0"),"menu0");
//			new SlideMenu($("btn1"),$("menu1"),"menu1");
//			new SlideMenu($("btn2"),$("menu2"),"menu2");
//		    new SlideMenu($("btn3"),$("menu3"),"menu3");
//		}
//	</script>