﻿/// <reference path="../jquery/jquery-1.4.1-vsdoc.js" />


//选择框 多选城市
jQuery.MyTools_SelectMoreCity = {
    Bind: function (Div, SDiv, ShowInput, Input, HidInput) {



        $(ShowInput).attr("readonly", "readonly");
        $(Div).css("display", "none");
        $(Div).html(GetMainHtml());

        var G = setInterval(function () {
            if (IsLoadCityXml) {
                Go();
                clearInterval(G);
            }
            else {
                $(Div).find("div[n='City']").html("正在加载城市中...");
            }
        }, 300);

        //重选
        $(Div).find("img[n='But_Del']").click(function () {
            $(Div).find("li[n='sel']").remove();
            $(Div).find("input[type='checkbox']").attr("checked", false);
            $(Div).find("input[type='checkbox']").attr("disabled", false);
        });

        //确定
        $(Div).find("img[n='But_ok']").click(function () {
            var strText = "", strValue = "";
            $(Div).find("li[n='sel']").each(function () {
                if (strText == "") {
                    strText = $(this).text();
                    strValue = $(this).attr("FIndex") + "|" + $(this).attr("value");
                }
                else {
                    strText += "," + $(this).text();
                    strValue += "," + $(this).attr("FIndex") + "|" + $(this).attr("value");
                }
            });

            $(ShowInput).val(strText);
            $(HidInput).val(strValue);
            $(Div).css("display", "none");
        });

        //关闭
        $(Div).find("a[n='But_Close']").click(function () {
            $(Div).css("display", "none");
        });




        //打开
        $(Input).click(function () {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            $(Div).css("z-index", "9999")
            $(Div).css("display", "");

            $(Div).find("div[n='Main']").css("position", "absolute");
            var popupWidth = $(Div).find("div[n='Main']").width();
            var popupHeight = $(Div).find("div[n='Main']").height();


            $(Div).find("div[n='Main']").css("left", (windowWidth - popupWidth) / 2 + "px");
            $(Div).find("div[n='Main']").css("top", (windowHeight - popupHeight) / 2 - 0 + GetscrollTop() + "px");
            $(Div).find("div[n='Main']").css("z-index", "9998");

            $(Div).find("div[n='bg']").css("z-index", "9997");
            $(Div).find("div[n='bg']").height(document.body.clientHeight);
            $(Div).find("div[n='bg']").width(document.body.clientWidth);
            $(Div).find("div[n='bg']").bgiframe();
        });





        // setTimeout(function () { Go(); }, 300);

        //主方法
        function Go() {

            $(Div).find("div[n='City']").html(GetCityHtml());
            //            $(Div).find("input[name='ChkCity']").click(function () {  CitySelect(this); });

            //打开子层
            $(Div).find("a[value]").click(function () {

                $(Div).find("div[n=SDivTitle]").html(("&nbsp;&nbsp;&nbsp;" + $(this).text()));
                $(Div).find("div[n=SDivMain]").css("display", "");


                var HTML = '<span>全选<input Fi="' + $(this).attr("value") + '" t="f" na="' + $(this).text() + '" type="checkbox" n="ChkAll" value="' + $(this).attr("value") + '" /></span>';
                $(CityXml).find("City[FIndex='" + $(this).attr("value") + "']").each(function () {
                    HTML += '<li>' + $(this).attr("Sname") + '<input Fi="' + $(this).attr("FIndex") + '" t="s" na="' + $(this).attr("Sname") + '" type="checkbox" value="' + $(this).attr("Index") + '" /></li>';
                });
                $(Div).find("ul[n=Sul]").html(HTML);

                $(Div).find("input[type='checkbox']").click(function () { AddCity(this) });

                $("input[t='f']").attr("checked", true);
                AddCity($("input[t='f']"));
                //                $("input[t='f']").click();

                //                if ($(Div).find("li[n='sel']").length < 3) {
                //                    $("input[t='f']").attr("checked", true);
                //                }

            });

        }
        function AddCity(e) {
            if ($(e).attr("checked")) {
                if ($(Div).find("li[n='sel']").length < 3) {
                    if ($(e).attr("t") == "f") {
                        $(Div).find("input[type='checkbox'][t='s']").attr("checked", true);
                        $(Div).find("input[type='checkbox'][t='s']").attr("disabled", true);
                        $(Div).find("li[FIndex='" + $(e).val() + "']").each(function () { $(e).remove(); })
                    }
                    var Index = $(e).val();
                    var LiHtml = '<li FIndex="' + $(e).attr("Fi") + '" value="' + $(e).val() + '" n="sel">' + $(e).attr("na");
                    LiHtml += '<a href="javascript:void(0)"><img src="/Content/Default/images/X.gif" width="14" height="14" /></a></li>';

                    $(Div).find("div[n=Divselect]").before(LiHtml);


                    $(Div).find("li[value='" + Index + "']").find("img").click(function () {
                        $(Div).find("li[value='" + Index + "']").remove();
                        $(Div).find("input[type='checkbox'][value='" + Index + "']").attr("checked", false);
                    });


                }
                else {
                    alert("最多只能选择三个城市");
                    $(e).attr("checked", false);

                }
            }
            else {
                $(Div).find("li[n='sel'][value='" + $(e).val() + "']").remove();
                if ($(e).attr("t") == "f") {
                    $(Div).find("input[type='checkbox'][t='s']").attr("checked", false);
                    $(Div).find("input[type='checkbox'][t='s']").attr("disabled", false);
                }
            }
        }

        //添加城市 
        //        function CitySelect(e) {
        //            if ($(e).attr("checked")) {
        //                if ($(Div).find("span[n='sel']").length < 3) {
        //                    $(Div).find("div[n='show']").before('<span FIndex="' + $(e).attr("FIndex") + '" n="sel" value=' + $(e).val() + '><a href="javascript:void(0)">' + $(e).attr("Text") + '<img src="/Content/Default/images/dd2.gif" /></a></span>');
        //                    $(Div).find("span[value='" + $(e).val() + "']").find("img").mousemove(function () {
        //                        $(this).attr("src", "/Content/Default/images/plus.gif");
        //                    })
        //                    $(Div).find("span[value='" + $(e).val() + "']").find("img").mouseout(function () {
        //                        $(this).attr("src", "/Content/Default/images/dd2.gif");
        //                    })
        //                    $(Div).find("span[value='" + $(e).val() + "']").find("img").click(function () {
        //                        $(Div).find("span[value='" + $(e).val() + "']").remove();
        //                        $(Div).find("input[type='checkbox'][value='" + $(e).val() + "']").attr("checked", false);
        //                        $(SDiv).find("input[type='checkbox'][value='" + $(e).val() + "']").attr("checked", false);
        //                    })
        //                }
        //                else {
        //                    alert("最多只能选择三个城市");
        //                    $(e).attr("checked", false);
        //                }
        //            }
        //            else {
        //                $(Div).find("span[n='sel'][value='" + $(e).val() + "']").remove();
        //            }
        //        }
        function GetCityHtml() {
            var Html = "";
            var Area = new Array("华北", "华东", "华南", "华中", "西南", "东北", "西北", "其他");
            for (var i = 0; i < Area.length; i++) {
                Html += '<ul><span>' + Area[i] + '：</span>';
                $(CityXml).find("City[Area='" + Area[i] + "']").each(function () {
                    Html += '<li><a href="javascript:void(0)" value="' + $(this).attr("Index") + '">' + $(this).attr("Sname") + '</a></li>';
                });
                Html += '</ul>';
            }
            return Html;
        }
        function GetMainHtml() {

            var Html = '<div n="Main"><div class="top_dq">&nbsp;&nbsp;&nbsp;&nbsp;城市选择<span><a href="javascript:void(0)" n="But_Close">关闭</a></span></div>\
<div class="top_cn">&nbsp;&nbsp;&nbsp;&nbsp;温馨提示：当您选择具体城市时，将会获得更为准确的搜索结果，您最多可以选择3个工作地点。\
<ul class="xzqy"><li>已选择:</li><div n="Divselect"></div>\
</ul><ul class="xz_qd"><li><a href="javascript:void(0)"><img n="But_Del" src="/Content/Default/images/cx.gif" /></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)"><img n="But_ok" src="/Content/Default/images/qd.gif" /></a></li>\
</ul></div>\
<div n="City" class="xz_bg">';
            Html += '</div>\
<div n="SDivTitle" class="csdq" >&nbsp;&nbsp;&nbsp;&nbsp;</div>\
<div n="SDivMain" class="cs_bg" style="display:none">\
<ul n="Sul">\
<span>全&nbsp;&nbsp;&nbsp;&nbsp;选<input type="checkbox" name="checkbox" id="checkbox" /></span>\
</ul>\
</div></div>\
</div><div n="bg" style="width:100%;height:' + window.screen.availHeight + 'px;background:#000; position:absolute;left:0px;top:0px;filter:alpha(opacity=40);-moz-opacity:0.4;opacity: 0.4;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>';
            return Html;
        }
        //返回滚动条的坐标兼容所有浏览器
        function GetscrollTop() {
            var scrollTop = window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
            return scrollTop
        }


    }
};

