TripX.Ajax.SimilarCity = function(input, output, originalInput)
{
    var resource = new Array(2);
    resource[0] = { InputOrSelect:"输入中文/拼音或从下面的地址中选择", SortByCharacter:", 按拼音排序", Previous:"上一页", Next:"下一页", NoRecord:"对不起, 找不到: " };
    resource[1] = { InputOrSelect:"Type or select from the follow list", SortByCharacter:", sort by character", Previous:"Previous", Next:"Next", NoRecord:"Sorry, Couldn't find in database: " };
    resource[2] = { InputOrSelect:"輸入中文/拼音或從下面的位址中選擇", SortByCharacter:", 按拼音排序", Previous:"上一頁", Next:"下一頁", NoRecord:"對不起, 找不到:" };

    var _xmlHttp = new TripX.Ajax.XmlHttp();
    var _serviceUrl = input.getAttribute("serviceUrl");
    var _language = parseInt(input.getAttribute("cultrueID"));
    var _country = parseInt(input.getAttribute("country"));
    var _onValueChanged = input.getAttribute("onValueChanged");
    var _cities;
    var _pageIndex = 0;
    var _pageSize = 10;
    var _recordCount;
    var _pageCount;
    var _iframe = top.document.getElementById("AjaxCityIframe");
    var _iframeDoc;
    var _citySelector;
    var _table;
    var _head;
    var _foot;

    this.Initalize = function()
    {
        Do();
    }
    
    Do = function()
    {
        if (document.all && document.readyState != "complete")
        {
            setTimeout("Do()", 10);
            return;
        }
        
        try
        {
            if (_iframe == null)
            {
                _iframe = top.document.createElement("iframe");
                
                with (_iframe)
                {
                    id = "AjaxCityIframe";
                    src = "/Comm/AjaxCity.htm";
                    frameBorder = "0";
                    scrolling = "no";
                    marginWidth = "0";
                    marginHeight = "0";
                    
                    with (style)
                    {
                        display = "none";
                        width = "320px";
                        height = "300px";
                        position = "absolute";
                        background = "#FFF";
                        border = "solid 1px #7F9DB9";
                    }
                }
                
                top.document.getElementsByTagName("form")[0].appendChild(_iframe);
            }
    
            _iframe.contentWindow.targetWindow = GetWindowByElement(input);
            
            _iframeDoc = _iframe.contentWindow.document;
            _citySelector = _iframeDoc.getElementById("CitySelector");
            _table = (_language == 1) ? _citySelector.getElementsByTagName("table")[1] : _citySelector.getElementsByTagName("table")[0];
            _head = _citySelector.getElementsByTagName("h6")[0];
            _foot = _iframeDoc.getElementById("Foot");
            
            top.document.onclick = OnFocusChange;
            top.document.onkeypress = OnFocusChange;
    
            if (window != top)
            {
                var iframesInTop = top.document.getElementsByTagName("iframe");
                for (var i = 0; i < iframesInTop.length; i++)
                {
                    var doc = iframesInTop[i].contentWindow.document;
                    if (doc != _iframeDoc)
                    {
                        doc.onclick = OnFocusChange;
                        doc.onkeypress = OnFocusChange;
                    }
                }
            }
        }
        catch (e)
        {
            setTimeout("Do()", 10);
            return;
        }
        
        GetCity();
    }

    GetCity = function()
    {
        _xmlHttp.Method = "post";
        _xmlHttp.IsSync = false;
        _xmlHttp.Url = _serviceUrl;
        _xmlHttp.OnSucceed = "GetCitySucceeded()";
        _xmlHttp.OnFailed = "GetCityFailed()";
        _xmlHttp.Content = "input=" + input.value + "&language=" + _language + "&country=" + _country;
        _xmlHttp.Request();
    }
        
    GetCitySucceeded = function()
    {
        _cities = eval(_xmlHttp.ResponseText);
        BindData();
    }

    GetCityFailed = function()
    {
        //alert("取城市列表错误！");
    }
    
    BindData = function()
    {
        _recordCount = _cities.length;
        //_pageSize = (input.value == "") ? _recordCount : _pageSize;
        _pageCount = Math.ceil(_recordCount / _pageSize);
        
        while (_table.tBodies.length > 0)
        {
            _table.removeChild(_table.tBodies[0]);
        }
        
        var tbody = _iframeDoc.createElement("tbody");
        var tr;
        var td;
        
        for (var i = 0; i < _recordCount; i++)
        {
            tr = _iframeDoc.createElement("tr");
            tr.onclick = function(){ Click(this); };
            
            if (_language == 1)
            {
                td = _iframeDoc.createElement("td");
                td.innerHTML = _cities[i].Name;
                tr.appendChild(td);
            }
            else
            {
                td = _iframeDoc.createElement("td");
                td.innerHTML = _cities[i].Pinyin;
                tr.appendChild(td);
                
                td = _iframeDoc.createElement("td");
                td.innerHTML = _cities[i].Name;
                tr.appendChild(td);
            }
            
            tbody.appendChild(tr);
            
            if ((i + 1) % _pageSize == 0)
            {
                _table.appendChild(tbody);
                tbody = _iframeDoc.createElement("tbody");
                tbody.style.display = "none";
            }
            else
            {
                if (i + 1 == _cities.length)
                {
                    _table.appendChild(tbody);
                }
            }
        }

        SettHead();
        SettFoot();
        SetPosition();
    }
    
    SetPosition = function()
    {
        GetOffsetParentObj = function(obj)
        {
            if ((obj.offsetParent == null) && (GetWindowByElement(obj) != top))
            {
                var iframesInParent = window.parent.document.getElementsByTagName("iframe");
                for (var i = 0; i < iframesInParent.length; i++)
                {
                    if (iframesInParent[i].contentWindow == window)
                        return iframesInParent[i];
                }
            }
            else
            {
                return obj.offsetParent;
            }
        }
        
        var e = input;
        var absTop = 0;
        var absLeft = 0;
        do
        {
            absTop += e.offsetTop;
            absLeft += e.offsetLeft;
        }
        while (e = GetOffsetParentObj(e));
        
        with (_iframe.style)
        {
            top = absTop + input.offsetHeight + "px";
            left = absLeft + "px";
            display = "";
        }
    }
    
    SettHead = function()
    {
        var html;
        if (input.value == "")
        {
            html = resource[_language].InputOrSelect;
        }
        else
        {
            if (_table.tBodies.length > 0)
            {
                html = input.value + resource[_language].SortByCharacter;
            }
            else
            {
                html = resource[_language].NoRecord + input.value;
            }
        }
        _head.innerHTML = html;
    }
    
    SettFoot = function()
    {
        _foot.innerHTML = "";
        if (_pageIndex > 0)
        {
            _foot.innerHTML += "<a href=\"javascript:void(0);\" onclick=\"targetWindow.GoPage(" + (_pageIndex - 1) + ")\">" + resource[_language].Previous + "</a>";
        }
        if (_pageIndex < _pageCount - 1)
        {
            _foot.innerHTML += " <a href=\"javascript:void(0);\" onclick=\"targetWindow.GoPage(" + (_pageIndex + 1) + ")\">" + resource[_language].Next + "</a>";
        }
    }
    
    GoPage = function(pageIndex)
    {
        for (var i = 0; i < _table.tBodies.length; i++)
        {
            _table.tBodies[i].style.display = "none";
        }
        _table.tBodies[pageIndex].style.display = "";
        _pageIndex = pageIndex;
        SettFoot();
    }
    
    Click = function(tr)
    {
        var isvalueChanged = (output.value == _cities[tr.rowIndex].ID) ? false : true;
        
        input.value = _cities[tr.rowIndex].Name;
        output.value = _cities[tr.rowIndex].ID;
        originalInput.value = _cities[tr.rowIndex].Name;
        _iframe.style.display = "none";
        
        if (isvalueChanged) eval(_onValueChanged);
    }
    
    OnFocusChange = function(ev)
    {
        ev = ev || window.event;

        if (_iframe.style.display != "none")
        {
            if (ev != null)
            {
                var target = ev.target || ev.srcElement;
                
                while (target != null && target != document)
                {
                    if ((target == input) || (target == _iframe))
                    {
                        return;
                    }
                    else
                    {
                        target = target.parentNode;
                    }
                }
            }
            
            if (input.value == "")
            {
                input.value = "";
                output.value = "";
            }
            else
            {
                input.value = originalInput.value;
            }
            _iframe.style.display = "none";
        }
    }

    GetWindowByElement = function(e)
    {
        win = e.ownerDocument.parentWindow;
        if (typeof(win) == "undefined")
            win = e.ownerDocument.defaultView;
        return win;
    }
}