var timeoutid;    // 延迟处理时使用
$(function() {
    $("#tab1 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
                $("#tab1 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
                $("#tab1 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                $("#tab1 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    $("#tab3 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
                $("#tab3 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
                $("#tab3 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                $("#tab3 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    $("#tab4 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
                $("#tab4 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
                $("#tab4 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                $("#tab4 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    $("#tab5 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
            $("#tab5 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
            $("#tab5 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
            $("#tab5 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    $("#GIndexMidtab1 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
            $("#GIndexMidtab1 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
            $("#GIndexMidtab1 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
            $("#GIndexMidtab1 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });



    //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
    $("#tab2 #container #content").load("tab.htm");  
    $("#tab2 li").each(function(index) {
        $(this).mouseover(function() {
            var liNode = $(this);
            timeoutid = setTimeout(function() {
                $("#tab2 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
                switch (index) {
                    case 0:
                        $("#tab2 #container #content").load("tab.htm");  // 提取网页全部内容
                        break;
                    case 1:
                        $("#tab2 #container #content").load("tab.htm h2");   // 提取网页部分内容
                        break;
                    case 2:
                        // 提取handler的输出内容, 加个参数防止页面缓存
                        $("#tab2 #container #content").load("handler/tab.ashx?t=" + new Date().getTime());  
                        break;
                }
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        });
    });

    //对于loading图片绑定ajax请求开始和交互结束的事件
    $("#tab2 #loading").bind("ajaxStart", function() {
        $("#tab2 #container #content").text(""); 
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    });
});