﻿var XHR = null;
var relativeWord = null;
var arrRelativeWord = new Array();
var getKey = null;
var searchTipIndex = -1;

function getRelativeWord(e) {
    var kc = e.keyCode;
    if (kc != 37 && kc != 38 && kc != 39 && kc != 40) {
        getKey = document.getElementById('homeSearchKey').value;
        if (window.XMLHttpRequest) {
            XHR = new XMLHttpRequest();
        } else {
            XHR = new ActiveXObject("Microsoft.XMLHTTP");
        }
        XHR.onreadystatechange = function () {
            if (XHR.readyState == 4 && XHR.status == 200) {

                searchTipIndex = -1;

                $('div.getValueSign').css("background-image", "url('images/btnHomeSearch.jpg')");

                relativeWord = XHR.responseText;
                arrRelativeWord = relativeWord.split("^&*");
                arrRelativeWord.pop();
                $('#hideTable').css("display", "none");
                //循环启动各条目并注入数据
                if (document.getElementById('homeSearchKey').value == '' && kc=='8') {//判断搜索框内被删到没有字符时弹出推荐地区框，用js而不能用jq，因为用jq时文本框里的值会夹杂很多jq代码
                    $('#tbSearchTip').fadeOut(1, function () {//要用回调函数保证在搜索ajax提示信息消失后再出现固定提示板，不然键盘按快了会同时存在
                        $('#hideTable').animate({ width: 333, height: 222 }, 1, function () {
                            $('#hideTable').fadeIn(555); //这里设置淡入速度慢点以照顾hideTable恢复正常大小的过程，hideTable的尺寸恢复效果在此时会受按键影响变得不好看，所以不予展示了
                        });
                    });                   

                } else {
                    $('#homeSearchKey').css("color", "black");
                    $('#tbSearchTip').css("display", "none");                    
                    $('#tbSearchTip').height(arrRelativeWord.length * 33 + "px");
                    $('#tbSearchTip').fadeIn(9,function(){
                      for (var i = 0; i < 10; i++) {
                        if (arrRelativeWord[i] == undefined) {
                            $('#searchTip' + i).css("display", "none");
                            if (arrRelativeWord.length == 0) {//没有任何值时要隐藏整个tbSearchTip，不然会留下tbSearchTip的一个边，影响美观
                                $('#tbSearchTip').css("display", "none");
                            }
                        } else {
                            $('#searchTip' + i).css("display", "none");
                            $('#searchTip' + i).fadeIn(300 + i * 50);
                            $('#searchTip' + i).html(arrRelativeWord[i]);
                        }
                    }

                  });
                   
                }
            }
        }

        $('#hideTable').css("display", "none"); //按键时要隐藏固定提示框

        XHR.open("get", "homeSearchDataBridge.aspx?getRouteName=" + escape(getKey), true);
        XHR.send();

    } else {//键盘上下键移动                
        if (kc == 40 ) {
            searchTipIndex++;
            if (searchTipIndex > arrRelativeWord.length - 1) {
                searchTipIndex = arrRelativeWord.length - 1;
            }
            $('div.getValueSign').css("background-image", "url('images/btnHomeSearch.jpg')"); //先重加载所有搜索提示条背景，防止当鼠标悬停的的背景和按键背景同时出现
            $('#homeSearchKey').val(document.getElementById('searchTip' + searchTipIndex).innerHTML); //把按键所选值注入到搜索文本框
            $('#searchTip' + searchTipIndex).css("background-image", "url('images/btnHomeSearchGlass.jpg')")
            $('#searchTip' + (searchTipIndex - 1)).css("background-image", "url('images/btnHomeSearch.jpg')")
        }
        if ( kc == 38) {
            searchTipIndex--;
            if (searchTipIndex < 0) {
                searchTipIndex = 0
            }
            $('div.getValueSign').css("background-image", "url('images/btnHomeSearch.jpg')");
            $('#homeSearchKey').val(document.getElementById('searchTip' + searchTipIndex).innerHTML);
            $('#searchTip' + searchTipIndex).css("background-image", "url('images/btnHomeSearchGlass.jpg')")
            $('#searchTip' + (searchTipIndex + 1)).css("background-image", "url('images/btnHomeSearch.jpg')")
        }
    }

}
//用户操作互动效果部分
$(document).ready(function () {
    if (document.getElementById('homeSearchKey').value == "旅游景点搜索") {
        $('#homeSearchKey').css("color", "silver");
    }
    //在框内为“旅游景点搜索时”再打字要清楚这段提示，要用keydown而不是keyup
    $('#homeSearchKey').keydown(function () {
        if (document.getElementById('homeSearchKey').value == "旅游景点搜索") {
            $('#homeSearchKey').css("color", "black");
            document.getElementById('homeSearchKey').value = "";
        }
    });
    //在页面文档加载完毕后立即对tbSearchTip和homeSearchKey实施定位，以紧跟搜索框，不然调整浏览器大小时就错位了
    orientation();
    $('#homeSearchKey').blur(function () {
        $('#tbSearchTip').fadeOut(555);
        $('#hideTable').fadeOut(555);
    });

    $('#tbSearchTip').mouseleave(function () {
        $('#tbSearchTip').css("display", "none");
    });
    $('#homeSearchKey').click(function () {
        if (document.getElementById('homeSearchKey').value == "旅游景点搜索") {
            $('#homeSearchKey').css("color", "black");
            document.getElementById('homeSearchKey').value = "";
        }
        $('#tbSearchTip').css("display", "none");
        $('#hideTable').animate({ width: 333, height: 222 }, 1, function () {
            $('#hideTable').fadeIn(555); //这里设置淡入速度慢点以照顾hideTable恢复正常大小的过程，hideTable的尺寸恢复效果在此时会受按键影响变得不好看，所以不予展示了
        });
    });
    $('#hideTable').mouseover(function () {
        $('#homeSearchKey').css("color", "black");
        if (arguments.callee.caller.arguments[0].target.tagName == 'A') {//限定只取超链接里的值，不然点中间地带就会取一大片
            $('#homeSearchKey').val(arguments.callee.caller.arguments[0].target.innerHTML); //为了兼容火狐浏览器，必须用arguments.callee.caller.arguments[0].target获取，而不用event.srcElement
        }
    });
    $('#hideTable').click(function () {
        if (arguments.callee.caller.arguments[0].target.tagName == 'A') {//限定只取超链接里的值，不然点中间地带就会取一大片
            $('#hideTable').css("display", "none");
            $('#homeSearchKey').focus();
            window.location = "/Tour/Newtravel_regionList.aspx?regionName=" + arguments.callee.caller.arguments[0].target.innerHTML;
        }
    });
    $('#hideTable').mouseleave(function () {
        $('#hideTable').css("display", "none");
    });
    ////////////////////ajax搜索提示条的取值部分
    $('div.getValueSign').click(function () {
        //$('#homeSearchKey').val(arguments.callee.caller.arguments[0].target.innerHTML); //为了兼容火狐浏览器，必须用arguments.callee.caller.arguments[0].target获取，而不用event.srcElement
        $('#homeSearchKey').focus();
        window.location = "/Tour/Newtravel_regionList.aspx?regionName=" + arguments.callee.caller.arguments[0].target.innerHTML;
    });
    ///////////////ajax搜索提示条的变背景
    $('div.getValueSign').mouseover(function () {
        $('#homeSearchKey').css("color", "black");
        $('#homeSearchKey').val(arguments.callee.caller.arguments[0].target.innerHTML);
        $('div.getValueSign').css("background-image", "url('images/btnHomeSearch.jpg')"); //先重加载所有搜索提示条背景，防止当鼠标悬停的的背景和按键背景同时出现
        $(this).css("background-image", "url('images/btnHomeSearchGlass.jpg')")
        $(this).css("cursor", "pointer");
    });
    $('div.getValueSign').mouseout(function () {
        $(this).css("background-image", "url('images/btnHomeSearch.jpg')")
    });
});
//在浏览器大小调整和滚动时对tbSearchTip和homeSearchKey实施定位，以紧跟搜索框，不然调整浏览器大小时就错位了
function orientation() {
    document.getElementById('tbSearchTip').style.top = document.getElementById('homeSearchTable').offsetTop + 28 + "px";
    document.getElementById('hideTable').style.top = document.getElementById('homeSearchTable').offsetTop + 28 + "px";
    document.getElementById('tbSearchTip').style.left = document.getElementById('homeSearchTable').offsetLeft + "px";
    document.getElementById('hideTable').style.left = document.getElementById('homeSearchTable').offsetLeft-80 + "px";
}
window.onresize = orientation;
window.onscroll = orientation;
