document.write("<div id='cityLayer' style='display: none'></div>");

var divEnglishMode = 0;
var divWidth = 0;
var divHeight = 0;
var divInterval = 0;
var divOffset = 0;
var divFunc = null;
var divFuncParameter = null;

function OnKeyDown()
{
    var keycode = event.keyCode;
    
    if ("none" == document.getElementById("cityLayer").style.display)
    {
        return;
    }
    
    switch (keycode)
    {
    case 13:
        SelectCity();
        break;
        
    case 37:
        MoveLeft();
        break;
        
    case 38:
        MoveUp();
        break;
        
    case 39:
        MoveRight();
        break;
    
    case 40:
        MoveDown();
        break;
        
    default:
        break;   
    }
}
document.onkeydown = OnKeyDown;

var resultList = new Array();
var cityListIndex = 0;
var cityIndex = 0;
var objCity;
var selectFlag = false;
var backupCityName = "";

//
// Search city by keyword
//
function SearchCityByKeyword(keyword, cityList)
{
    //
    // Reset result
    //
    resultList = new Array();
    cityListIndex = 0;
    cityIndex = 0;
    
    //
    // Trim city keyword
    //
    var localKeyword = keyword;
    var i = 0;
    var j = 0;
    
    i = 0;
    while (" " === localKeyword.charAt(i))
    {
        i++;
    }
    
    j = localKeyword.length - 1;
    while (" " === localKeyword.charAt(j))
    {
        j--;
    }
    
    if (i > j)
    {
        localKeyword = "";
    }
    else
    {
        localKeyword = localKeyword.substring(i, j + 1);
    }
    
    //
    // English or not
    //
    var isEnglish = false;
    var patternKeyword = /^([a-zA-Z']+\s*)*$/;
    
    if (!patternKeyword.test(localKeyword))
    {
        isEnglish = false;
        
        if (divEnglishMode)
        {
            return;
        }
    }
    else
    {
        isEnglish = true;
    }

    //
    // Search required city
    //
    if (("" === localKeyword) || ("中文或拼音" === localKeyword) || ("city name" === localKeyword))
    {
        resultList = cityList;
    }
    else
    {
        j = 0;
        if (isEnglish)
        {
            for (i = 0; i < cityList.length; i++)
            {
                if ((0 === cityList[i].englishName.toLocaleLowerCase().indexOf(localKeyword)) || (0 === cityList[i].uid.toLocaleLowerCase().indexOf(localKeyword)))
                {
                    resultList[j] = cityList[i];
                    j++;
                }
            }
        }
        else
        {
            for (i = 0; i < cityList.length; i++)
            {
                if ((0 === cityList[i].chineseName.toLocaleLowerCase().indexOf(localKeyword)) || (0 === cityList[i].uid.toLocaleLowerCase().indexOf(localKeyword)))
                {
                    resultList[j] = cityList[i];
                    j++;
                }
            }
        }
    }
}

//
// Show city layer
//
function ShowCityLayer(objSrc, cityList, englishMode, showHint, width, height, interval, offset, func, parameter)
{
    //
    // Skip move event
    //
    var keycode = event.keyCode;
    
    if ("block" == document.getElementById("cityLayer").style.display)
    {
        if ((keycode >= 37) && (keycode <= 40))
        {
            return;
        }
    }
    if (13 == keycode)
    {
        return;
    }
    
    //
    // Reset div parameters
    //
    divWidth = 184;
    divHeight = 180;
    divInterval = 16;
    divOffset = 0;
    divFunc = null;
    divFuncParameter = null;
    selectFlag = false;
    backupCityName = "";
    
    //
    // Set div parameters
    //
    divEnglishMode = englishMode;
    if (width > 0)
    {
        divWidth = width;
    }
    if (height > 0)
    {
        divHeight = height;
    }
    if (interval > 0)
    {
        divInterval = interval;
    }
    if (offset > 0)
    {
        divOffset = offset;
    }
    if (func != null)
    {
        divFunc = func;
        divFuncParameter = parameter;
    }
    if (!divEnglishMode)
    {
        backupCityName = cityList[0].chineseName;
    }
    else
    {
        backupCityName = cityList[0].englishName;
    }
    
    //
    // Search city by keyword
    //
    objCity = objSrc;
    if (("中文或拼音" === objSrc.value) || ("City Name" === objSrc.value))
    {
        objSrc.value = "";
    }
    SearchCityByKeyword(objSrc.value.toLocaleLowerCase(), cityList);
    if (resultList.length > 0)
    {
        if (!divEnglishMode)
        {
            backupCityName = resultList[0].chineseName;
        }
        else
        {
            backupCityName = resultList[0].englishName;
        }
    }

    //
    // Generate city layer
    //
    var objCityLayer = document.getElementById("cityLayer");
    var innerHTML = "";
    var i = 0;
    var j = 0;
    
    innerHTML += "<table rules='cols' width='" + divWidth + "px' height='" + divHeight + "px' border='1' cellspacing='0' cellpadding='2' bordercolor='#7B9AB5' bgcolor='#FFFFFF'>";
    if (cityList == resultList)
    {
        if (!divEnglishMode)
        {
            innerHTML += "  <tr valign='top'><td style='border-bottom: 1px dashed'><span class='graytext'>输入中文/拼音或↑↓选择</span></td></tr>";
        }
        else
        {
            innerHTML += "  <tr valign='top'><td style='border-bottom: 1px dashed'><span class='graytext'>Type or scroll to select</span></td></tr>";
        }
    }
    else
    {
        if (!divEnglishMode)
        {
            innerHTML += "  <tr valign='top'><td style='border-bottom: 1px dashed'><span class='graytext'>" + objSrc.value + "， 共" + resultList.length + "项，←→翻页</span></td></tr>";
        }
        else
        {
            innerHTML += "  <tr valign='top'><td style='border-bottom: 1px dashed'><span class='graytext'>" + objSrc.value + ", " + resultList.length + " Record(s)<br>←→PageUp and PageDown</span></td></tr>";
        }
    }
    innerHTML += "  <tr valign='top'>";
    innerHTML += "    <td>";
    innerHTML += "<table id='cityInputTable' width='" + (divWidth - 2) + "px' border='0' cellspacing='1' cellpadding='1'>";

    if (!divEnglishMode)
    {
        for (i = 0; i < Math.min(resultList.length, 10); i++)
        {
            innerHTML += "  <tr>";
            innerHTML += "    <td align='left' style='cursor: hand'>" + resultList[i].chineseName;
            for (j = 0; j < (divInterval - resultList[i].chineseName.replace(/[^\x00-\xff]/g, "**").length); j++)
            {
                innerHTML += "&nbsp;";
            }
            innerHTML += resultList[i].englishName + "</td>";
            innerHTML += "  </tr>";
        }
    }
    else
    {
        for (i = 0; i < Math.min(resultList.length, 10); i++)
        {
            innerHTML += "  <tr>";
            innerHTML += "    <td align='left' style='cursor: hand'>" + resultList[i].englishName;
            innerHTML += "&nbsp;&nbsp;";
            innerHTML += "(&nbsp;" + resultList[i].fatherEnglishName + "&nbsp;)" + "</td>";
            innerHTML += "  </tr>";
        }
    }
    for (; i < 10; i++)
    {
        innerHTML += "  <tr><td>&nbsp;</td></tr>";
    }

    innerHTML += "</table>";
    innerHTML += "    </td>";
    innerHTML += "  </tr>";
    innerHTML += "</table>";
    
    objCityLayer.innerHTML = innerHTML;
    
    //
    // No result
    //
    if (showHint && (0 === resultList.length))
    {
        if (!divEnglishMode)
        {
            document.getElementById("cityInputTable").getElementsByTagName("td")[0].innerHTML = "对不起，您需求的目的地目前没有直飞航班，请您点击<a href='#' onfocus='window.open(\"/Chat/chat/guestLogin.shtml?language=0\", \"new\", \"height=410, width=450, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no\")' class='yellowtext'>在线客服</a>并填写您的需求，我们为您设计最合理的行程。"
        }
        else
        {
            document.getElementById("cityInputTable").getElementsByTagName("td")[0].innerHTML = "There is no direct flight to your selected destination, please click <a href='#' onfocus='window.open(\"/Chat/chat/guestLogin.shtml?language=1\", \"new\", \"height=410, width=450, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no\")' class='yellowtext'>Online Support</a> and send your request, we will reply to you ASAP."
        }
    }

    //
    // Set function
    //
    if (resultList.length > 0)
    {
        var tds = document.getElementById("cityInputTable").getElementsByTagName("td");
        
        for (i = 0; i < tds.length; i += 1)
        {
            tds[i].style.backgroundColor = "#FFFFFF";
            tds[i].onfocus = function()
            {
                var tempString = this.innerHTML;
                var pos = tempString.indexOf("&nbsp;");
                
                objSrc.value = tempString.substring(divOffset, pos);
                if (divFunc != null)
                {
                    if (divFuncParameter != "undefined")
                    {
                        divFunc(divFuncParameter);
                    }
                    else
                    {
                        divFunc();
                    }
                }
                selectFlag = true;
                objCity.blur();
            };
            tds[i].onmouseover = function() {this.style.backgroundColor = "#DEF3FF";};
            tds[i].onmouseout = function()
            {
                if (document.getElementById("cityInputTable").getElementsByTagName("td")[cityIndex] == this)
                {
                    this.style.backgroundColor = "#52BADE";
                }
                else
                {
                    this.style.backgroundColor = "#FFFFFF";
                }
            };
        }
        tds[cityIndex].style.backgroundColor = "#52BADE";
    }
    
    //
    // Show
    //
    var pos = GetAbsolutePos(objSrc);

    objCityLayer.style.left = pos.x - 3;
    objCityLayer.style.top = pos.y + 20;

    objCityLayer.style.display = "block";
}

//
// Hide city layer
//
function HideCityLayer()
{
    document.getElementById("cityLayer").style.display = "none";
    
    if (!selectFlag)
    {
        objCity.value = backupCityName;
        if (divFunc != null)
        {
            if (divFuncParameter != "undefined")
            {
                divFunc(divFuncParameter);
            }
            else
            {
                divFunc();
            }
        }
    }
}

//
// Move previous city list
//
function MoveLeft()
{
    var tds = document.getElementById("cityInputTable").getElementsByTagName("td");
    var i = 0;
    var innerHTML = "";

    if (cityListIndex > 0)
    {
        cityListIndex--;
        
        if (!divEnglishMode)
        {
            for (i = 0; i < 10; i++)
            {
                innerHTML = "";
                
                innerHTML += resultList[cityListIndex * 10 + i].chineseName;
                for (j = 0; j < (divInterval - resultList[cityListIndex * 10 + i].chineseName.replace(/[^\x00-\xff]/g, "**").length); j++)
                {
                    innerHTML += "&nbsp;";
                }
                innerHTML += resultList[cityListIndex * 10 + i].englishName;
                
                tds[i].innerHTML = innerHTML;
            }
        }
        else
        {
            for (i = 0; i < 10; i++)
            {
                innerHTML = "";
                
                innerHTML += resultList[cityListIndex * 10 + i].englishName;
                innerHTML += "&nbsp;&nbsp;";
                innerHTML += "(&nbsp;" + resultList[cityListIndex * 10 + i].fatherEnglishName + "&nbsp;)";
                
                tds[i].innerHTML = innerHTML;
            }
        }
    }
}

//
// Move next city list
//
function MoveRight()
{
    var tds = document.getElementById("cityInputTable").getElementsByTagName("td");
    var i = 0;
    var innerHTML = "";

    if ((cityListIndex + 1) * 10 < resultList.length)
    {
        cityListIndex++;
        
        if (!divEnglishMode)
        {
            for (i = 0; i < Math.min(resultList.length - cityListIndex * 10, 10); i++)
            {
                innerHTML = "";
                
                innerHTML += resultList[cityListIndex * 10 + i].chineseName;
                for (j = 0; j < (divInterval - resultList[cityListIndex * 10 + i].chineseName.replace(/[^\x00-\xff]/g, "**").length); j++)
                {
                    innerHTML += "&nbsp;";
                }
                innerHTML += resultList[cityListIndex * 10 + i].englishName;
                
                tds[i].innerHTML = innerHTML;
            }
        }
        else
        {
            for (i = 0; i < Math.min(resultList.length - cityListIndex * 10, 10); i++)
            {
                innerHTML = "";
                
                innerHTML += resultList[cityListIndex * 10 + i].englishName;
                innerHTML += "&nbsp;&nbsp;";
                innerHTML += "(&nbsp;" + resultList[cityListIndex * 10 + i].fatherEnglishName + "&nbsp;)";
                
                tds[i].innerHTML = innerHTML;
            }
        }

        if (i < 10)
        {
            if (cityIndex > (i - 1))
            {
                tds[cityIndex].style.backgroundColor = "#FFFFFF";
                cityIndex = i - 1;
                tds[cityIndex].style.backgroundColor = "#52BADE";
            }
            
            for (; i < 10; i++)
            {
                tds[i].innerHTML = "&nbsp;";
            }
        }
    }
}

//
// Move previous city
//
function MoveUp()
{
    var tds = document.getElementById("cityInputTable").getElementsByTagName("td");

    if (cityIndex > 0)
    {
        tds[cityIndex].style.backgroundColor = "#FFFFFF";
        cityIndex--;
        tds[cityIndex].style.backgroundColor = "#52BADE";
    }
}

//
// Move next city
//
function MoveDown()
{
    var tds = document.getElementById("cityInputTable").getElementsByTagName("td");

    if (cityIndex < (Math.min(resultList.length - cityListIndex * 10, 10) - 1))
    {
        tds[cityIndex].style.backgroundColor = "#FFFFFF";
        cityIndex++;
        tds[cityIndex].style.backgroundColor = "#52BADE";
    }
}

//
// Select city
//
function SelectCity()
{
    var tempString = document.getElementById("cityInputTable").getElementsByTagName("td")[cityIndex].innerHTML;
    var pos = tempString.indexOf("&nbsp;");
    
    objCity.value = tempString.substring(divOffset, pos);
    if (divFunc != null)
    {
        if (divFuncParameter != "undefined")
        {
            divFunc(divFuncParameter);
        }
        else
        {
            divFunc();
        }
    }
    selectFlag = true;
    objCity.blur();
}