jQuery(function($){
    function Ztabs(Tid){
        ts = "tab1";
        $("#tab").children("table:not(:first)").hide();
        var titles = $(Tid).children("li");
        titles.css({
            cursor: "hand",
            cursor: "pointer"
        });
        $.each(titles, function(i, n){
            $(n).bind("click", function(){
                titles.removeClass().addClass("close");
                $(this).removeClass().addClass("active");
                $("#tab").children().hide();
                var d = "#" + $(this).attr("id") + "d";
                ts = $(this).attr("id");
                $(d).show();
            })
        });
    }
    Ztabs("#tabs");
});

var ts = "";

function filter(){
    var t = $("#tab").children();
    var v = $.trim($("#keywords").val());
    if (v == "请输入服务器名称进行搜索") 
        v = "";
    for (var i = 0; i < t.length; i++) 
        fsub(t[i].rows, v);
}

function fsub(r, v){
    for (var i = 0; i < r.length; i++) {
        var s = r[i].cells[1].title;
        if (!v) {
            r[i].cells[1].innerHTML = s;
            r[i].style.display = "";
            continue;
        }
        var re = new RegExp("^(" + v + ")", "gi");
        if (s.search(re) > -1) {
            r[i].style.display = "";
            r[i].cells[1].innerHTML = s.replace(re, "<font color=\"#cc0000\">$1</font>");
        }
        else 
            r[i].style.display = "none";
    }
}

function format(json){
    var a = [], b = [], t = $("#tab"), j = 0;
    $("#keywords").val("请输入服务器名称进行搜索").css({
        color: "#999"
    });
    if (json.length == 0) {
        t.html("<table height=300 width=100%><tr><td align=center class=h1bg>暂无服务器收货</td></tr></table>");
    }
    else {
        a.push("<table width=\"100%\" class=\"itemlist f9\" id=\"tab1d\" name=\"list\"" + (ts == "tab1" ? "" : "style='display:none'") + ">");
        b.push("<table width=\"100%\" class=\"itemlist f9\" id=\"tab2d\" name=\"list\"" + (ts == "tab2" ? "" : "style='display:none'") + ">");
        for (var i = 0; i < json.length; i++) {
            a.push("<tr class=\"" + (i % 2 == 0 ? "tr2" : "tr1") + "\">");
            a.push("<td width=\"20%\" style=\"font-size:11px;\">" + json[i].GN + "</td>");
            a.push("<td class=\"" + (json[i].O ? "inblue" : "itemname") + "\" title=\"" + json[i].N + "\">" + json[i].N + "</td>");
            a.push("<td class=\"price\" width=\"20%\">" + json[i].P + "</td>");
            a.push("<td class=\"vdis\" width=\"15%\">" + json[i].D + "</td>");
            a.push("<td nowrap=\"nowrap\" width=\"8%\"><a href="+sellUrl+json[i].ID+".aspx>"+openImg+"</a></td></tr>");
            if (json[i].O) {
                b.push("<tr class=\"" + (j % 2 == 0 ? "tr2" : "tr1") + "\">");
                b.push("<td width=\"20%\" style=\"font-size:11px;\">" + json[i].GN + "</td>");
                b.push("<td class=\"inblue\" title=\"" + json[i].N + "\">" + json[i].N + "</td>");
                b.push("<td class=\"price\" width=\"20%\">" + json[i].P + "</td>");
                b.push("<td class=\"vdis\" width=\"15%\">" + json[i].D + "</td>");
                b.push("<td nowrap=\"nowrap\" width=\"8%\"><a href="+sellUrl+json[i].ID+".aspx>"+openImg+"</a></td></tr>");
                j++;
            }
        }
        a.push("</table>");
        b.push("</table>");
        t.html(a.join('') + b.join(''));
        window.clearTimeout(autoLoaderTimer);
        autoLoaderTimer = window.setTimeout(load, 180000);
    }
}

function load(){
    $("#tab").html("<table height=300 width=100%><tr><td align=center>数据载入中<br /><img src='"+loadimg+"' width=220 height=19></td></tr></table>")
    //$.getJSON("WebServices/jquery.svc/GetServers", format);
    
    $.ajax({
        type: "GET",
        url: surl,//"WebServices/jquery.svc/GetServers",
        data:"groupid="+groupID,
        cache: false,
        contentType: "application/json;utf-8",
        dataType: 'json',
        success: format
    })
}

var autoLoaderTimer = window.setTimeout(load, 180000);

$(document).ready(function(){

    $("#keywords").val("请输入服务器名称进行搜索").css({
        color: "#999"
    }).focus(function(){
        if ($(this).val() == "请输入服务器名称进行搜索") {
            $(this).val("").css({
                color: "#333"
            })
        }
        else {
            $(this).css({
                color: "#333"
            })
        }
        
    }).blur(function(){
        if ($(this).val() == "请输入服务器名称进行搜索" || $(this).val() == "") 
            $(this).val("请输入服务器名称进行搜索").css({
                color: "#999"
            })
    }).keyup(filter)
    
    $("#reset").click(function(){
        $("#keywords").val("请输入服务器名称进行搜索").css({
            color: "#999"
        })
        filter();
    })
    
    $("#load").click(load);
})