/*******************************Global Configure*******************************/
var divName = 'suggestion'; //the div that dispaly suggestion
var searchTxt = 'demo'; //the input form(type:text) that is used to write searching key word in
var url = "suggestion.php"; //the url that ajax use to request
/*******************************Global variable*******************************/
var sug_statue = false; //the statue of suggestion
var tmpTxt = '';
var currentFocus, sug_length;
var xmlHttp;
var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var sid = new Array;
/*******************************Base Object*******************************/
var base = new Object;

base.$ = function(id){
    return document.getElementById(id);
}
/*******************************Event Object*******************************/
var EventUtil = new Object;

EventUtil.addEventHandler = function(eventName, eventElement, eventHandler){
    if (eventElement.addEventListener) {
        eventElement.addEventListener(eventName, eventHandler, false);
    }
    else
        if (eventElement.attachEvent) {
            eventElement.attachEvent('on' + eventName, eventHandler);
        }
        else {
            eventElement["on" + eventName] = eventHandler;
        }
}

EventUtil.removeEventHandler = function(eventName, eventElement, eventHandler){
    if (eventElement.removeEventListener) {
        eventElement.removeEventListener(eventName, eventHandler, false);
    }
    else {
        if (eventElement.detachEvent) {
            eventElement.detachEvent('on' + eventName, eventHandler);
        }
        else {
            eventElement["on" + eventName] = null;
        }
    }
}

EventUtil.getEvent = function(){
    if (window.event) {
        return window.event;
    }
    else {
        return EventUtil.getEvent.caller.arguments[0];
    }
}

EventUtil.mouseEventHandler = function(isadd){
    if (isadd) {
        EventUtil.addEventHandler('click', document, sugItem.clickOther);
        for (var i = 0; i <= sug_length; i++) {
            EventUtil.addEventHandler('mouseover', base.$('sugItem' + i), sugItem.mouseon);
            EventUtil.addEventHandler('mouseout', base.$('sugItem' + i), sugItem.mouseout);
            EventUtil.addEventHandler('click', base.$('sugItem' + i), sugItem.mouseclick);
        }
    }
    else {
        EventUtil.removeEventHandler('click', document, sugItem.clickOther);
        for (var i = 0; i <= sug_length; i++) {
            EventUtil.removeEventHandler('mouseover', base.$('sugItem' + i), sugItem.mouseon);
            EventUtil.removeEventHandler('mouseout', base.$('sugItem' + i), sugItem.mouseon);
            EventUtil.removeEventHandler('click', base.$('sugItem' + i), sugItem.mouseclick);
        }
    }
}

EventUtil.keyEventHandler = function(){
    var oEvent = EventUtil.getEvent();
    var txt = base.$(searchTxt);
    if (!sug_statue) {
        if (txt.value == "") {
			return;
		}
        else {
            if (txt.value != tmpTxt) {
                var para = "keywd=" + txt.value;
                ajax.doRequest(para, url, view.show);
                return;
            }
            else {
				return;
			}
        }
    }
    else {
        var key = oEvent.which || oEvent.keyCode;
        var sugDiv = base.$(divName);
        if (key == 13) {
            if (currentFocus >= 0) {
                sugItem.choose(sugDiv.childNodes[currentFocus]);
                return;
            }
        }
        else 
            if (key == 38) {
                if (currentFocus == -1) {
                    currentFocus = sug_length;
                    sugItem.focus(sugDiv.childNodes[currentFocus]);
                    sugItem.tmpchoose(sugDiv.childNodes[currentFocus]);
                    return;
                }
                if (currentFocus == 0) {
                    currentFocus = sug_length;
                    sugItem.focus(sugDiv.childNodes[sug_length]);
                    sugItem.tmpchoose(sugDiv.childNodes[sug_length]);
                    sugItem.blur(sugDiv.childNodes[0]);
                    return;
                }
                currentFocus--;
                sugItem.focus(sugDiv.childNodes[currentFocus]);
                sugItem.tmpchoose(sugDiv.childNodes[currentFocus]);
                sugItem.blur(sugDiv.childNodes[currentFocus + 1]);
            }
            else 
                if (key == 40) {
                    if (currentFocus == -1) {
                        currentFocus++;
                        sugItem.focus(sugDiv.childNodes[currentFocus]);
                        sugItem.tmpchoose(sugDiv.childNodes[currentFocus]);
                        return;
                    }
                    if (currentFocus == sug_length) {
                        currentFocus = 0
                        sugItem.focus(sugDiv.childNodes[currentFocus]);
                        sugItem.tmpchoose(sugDiv.childNodes[currentFocus]);
                        sugItem.blur(sugDiv.childNodes[sug_length]);
                        return;
                    }
                    currentFocus++;
                    sugItem.focus(sugDiv.childNodes[currentFocus]);
                    sugItem.tmpchoose(sugDiv.childNodes[currentFocus]);
                    sugItem.blur(sugDiv.childNodes[currentFocus - 1]);
                }
                else {
                    if (txt.value == "") {
                        if (txt.value != tmpTxt) {
							view.hide();
						}
                        return;
                    }
                    else {
                        if (txt.value != tmpTxt) {
                            EventUtil.mouseEventHandler(false);
                            var para = "keywd=" + txt.value;
                            ajax.doRequest(para, url, view.show);
                            return;
                        }
                        else 
                            return;
                    }
                }
    }
}
/*******************************View Object*******************************/
var view = new Object;
//the handler attached to the event when ajax's state is ready
view.show = function(){
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var txt = xmlHttp.responseText;
            var str = view.resolvXml(txt);
            if (!str) 
                view.hide();
            else {
                var sugDiv = base.$(divName);
                sugDiv.innerHTML = str;
                sug_length = sugDiv.childNodes.length - 1;
                sugDiv.style.visibility = 'visible';
				EventUtil.mouseEventHandler(true);
                sug_statue = true;
                tmpTxt = txt.value;
                currentFocus = -1;
            }
        }
    }
}

//resolve the xml string that server post back
view.resolvXml = function(txt){
    try {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    } 
    catch (e) {
        try {
            xmlDoc = document.implementation.createDocument("", "", null);
        } 
        catch (e) {
            return false;
        }
    }
    try {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(txt);
    }
    catch (e) {
        try {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(txt, "text/xml");
        } 
        catch (e) {
            return false;
        }
    }
    var str = "";
    var currentNode = xmlDoc.getElementsByTagName("str")[0];
    if (currentNode.childNodes[0].nodeValue == 'error' || currentNode.childNodes[0].nodeValue == 'null') 
        return false;
    for (var i = 0; i < 10; i++) {
        if (currentNode.nextSibling != null) {
			sid[i] = currentNode.getAttribute('id');
            str += "<div id='sugItem" + i + "' class='slist' style='width:inherit;font-size:13px;'>" + currentNode.childNodes[0].nodeValue + "</div>";
            currentNode = currentNode.nextSibling;
        }
        else {
			sid[i] = currentNode.getAttribute('id');
            str += "<div id='sugItem" + i + "' class='slist' style='width:inherit;font-size:13px;'>" + currentNode.childNodes[0].nodeValue + "</div>";
            break;
        }
    }
    return str;
}

//hide the suggestion div
view.hide = function(){
    var sugDiv = base.$(divName);
	if(sug_statue){
		EventUtil.mouseEventHandler(false);
	}
    sugDiv.innerHTML = "";
    sugDiv.style.visibility = 'hidden';
    sug_statue = false;
}
/*******************************Suggestion Item Object*******************************/
var sugItem = new Object;
//the handler to control the situation when a suggestion item is focused
sugItem.focus = function(item){
    if (currentFocus != -1) {
        sugItem.blur(base.$(divName).childNodes[currentFocus], 1);
    }
    item.style.backgroundColor = "#0099FF";
    item.style.color = "#FFFFFF";
}

//the handler to control the situation when a suggestion item is blured
sugItem.blur = function(item){
    item.style.backgroundColor = "#FFFFFF";
    item.style.color = "#000000";
}

//the handler to control the situation when a suggestion item is selected
sugItem.choose = function(item){
    var sugTxt = item.innerHTML;
    base.$(searchTxt).value = sugTxt;
    view.hide();
	window.open('http://www.onlinedown.net/soft/' + sid[currentFocus] + '.htm');
}

sugItem.tmpchoose = function(item){
    var sugTxt = item.innerHTML;
    base.$(searchTxt).value = sugTxt;
}

sugItem.mouseon = function(){
    oevent = EventUtil.getEvent();
    var item = oevent.srcElement || oevent.target;
    sugItem.focus(item);
    id = item.id;
    currentFocus = parseInt(id.charAt(7));
}

sugItem.mouseout = function(){
    oevent = EventUtil.getEvent();
    var item = oevent.srcElement || oevent.target;
    sugItem.blur(item);
}

sugItem.mouseclick = function(){
    oevent = EventUtil.getEvent();
    var item = oevent.srcElement || oevent.target;
    sugItem.choose(item);
}

sugItem.clickOther = function(){
    oevent = EventUtil.getEvent();
    var item = oevent.srcElement || oevent.target;
    if (item.id == searchTxt)
        return;
    else 
        view.hide();
}
/*******************************Ajax Object*******************************/
var ajax = new Object;
ajax.createXmlHttp = function(){
    var xmlh;
    try {
        xmlh = new XMLHttpRequest();
    } 
    catch (e) {
        try {
            xmlh = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try {
                xmlh = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
                xmlh = null;
            }
        }
    }
    return xmlh;
}

//send a ajax request (POST)
ajax.doRequest = function(para, url, handler){
    xmlHttp = ajax.createXmlHttp();
    if (xmlHttp == null)
        return false;
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.onreadystatechange = handler;
    xmlHttp.send(para);
}

//the onload event of a window
EventUtil.addEventHandler('load', window, function(){
    var oinput = base.$(searchTxt);
    oinput.setAttribute("autocomplete", "off");
    EventUtil.addEventHandler('keyup', oinput, EventUtil.keyEventHandler);
});