window.onload = function(){
    var $ = function(id){
        return document.getElementById(id);
    }

    //四个导航相对于导航条最左端的距离
    var posLeft = [210, 320,420,710];
    var ns = [];
    ns[ns.length] = $('nav-product-service');
    ns[ns.length] = $('nav-solutions');
    ns[ns.length] = $('nav-news');
    ns[ns.length] = $('nav-about');
    for(var i = 0; i < ns.length; i++){
        if(typeof ns[i] != 'object'){
            continue;
        }

        (function(obj, xx){
            var cdvid = obj.id.replace('nav-', 'navc-');
            var cdiv = $(cdvid);
            if(!cdiv){
                return;
            }

            var hti = 0;
            obj.onmouseover = function(ev){
                if(hti){
                    clearTimeout(hti);
                }
                ev = ev || window.event;
                var pos = {};
                pos.y = 145;

                //为了兼容不同分辨率，浮动导航的横向位置为：浏览器边框到导航条左端的距离 + 导航项到导航条左端的距离
                //在此，obj为li标签，obj.parentNode为ul标签
                //obj.parentNode.offsetLeft为导航最左端到浏览器边框的距离
                pos.x = posLeft[xx] + obj.parentNode.offsetLeft;
                cdiv.style.position = 'absolute';
                cdiv.style.left = pos.x + 'px';
                cdiv.style.top = pos.y + 'px';
                cdiv.style.display = '';
            }

            obj.onmouseout = function(){
                var handler = function(){
                    cdiv.style.display = 'none';
                }
                hti = setTimeout(handler, 200);
            }

            cdiv.onmouseover = function(){
                if(hti){
                    clearTimeout(hti);
                }
            }

            cdiv.onmouseout = function(){
                var handler = function(){
                    cdiv.style.display = 'none';
                }
                hti = setTimeout(handler, 200);
            }

        })(ns[i], i);
    }
}