//instead document.getElementById()
var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

//instead document.getElementById().value
var $F = function (id) {
	return $(id).value;
};

var Auto = {
	i:0,keycode:-1,txtObj:null,
    
    okeydown : function(obj)
    {
        this.keycode=window.event.keyCode;
	    this.txtObj=obj;
	    this.okeydown1();
    },

	okeydown1 : function() {
        if(this.keycode!=38 && this.keycode!=40) return;
        
	    var lis = $("autoUl").getElementsByTagName('li');

        switch(this.keycode)
        {
            case 38:  //上键
                var j=--this.i%lis.length;
                if(j<0){ j=0; this.i=j; }
                
                for(var k=0;k<lis.length;k++)
                {
                    lis[k].className ="mouseOut";
                }                
                lis[j].className ="mouseOver";
                this.txtObj.value=lis[j].innerText;
            break;
	        
            case 40:  //下键
                var j=++this.i%lis.length;
                if(j>lis.length){ j=lis.length; this.i=j; }
                
                for(var k=0;k<lis.length;k++)
                {
                    lis[k].className ="mouseOut";
                }
                lis[j].className ="mouseOver";
                this.txtObj.value=lis[j].innerText;
            break;
        }
	},
	
	autoGet : function(value) {
	    if(this.keycode==38 || this.keycode==40) return;
		if(value == '') {
			this.closePop();
		} else {
			// get the return value list from json
			var jsonValue = getListJson(value).skey;
			this.autoCallback(jsonValue);
		}
	},
	
	autoCallback : function(list) {
		//remove the old pop li
		this.closePop();
		if (list.length > 0) {
			for(var i = 0;i < list.length; i++){
				$("autoUl").className = 'autoUl';
				var autoLi = document.createElement("li");
				
				// onmouseout event
				autoLi.onmouseout = function() {
					this.className = 'mouseOut'; 
					Assist.isOnmouseover = false;
				}
				
				// onmouseover event
				autoLi.onmouseover = function() {
					this.className = 'mouseOver';
					Assist.isOnmouseover = true;
				}
				
				// onclick event
				autoLi.onclick = function() {
					Assist.autoPush(this);
				}
				
				liValue = '<div class="resultName">' + list[i].name + '</div>';
				//liValue += '<div class="resultTimes">' + list[i].times + '&nbsp;结果</div>';
				autoLi.innerHTML = liValue;

				$("autoUl").appendChild(autoLi);
			}
			
			//pop the li
			//var closeLi = document.createElement("li");
			//closeLi.style.textAlign = "right";
			//closeLi.innerHTML = '<a href="javascript:void(0);" onclick="Auto.closePop();">关闭</a>';
			//$("autoUl").appendChild(closeLi);
		}
	},
	
	closePop : function() {
		var ul = $("autoUl").childNodes.length;
		for(var i = ul - 1; i >= 0 ; i--) {
			$("autoUl").removeChild($("autoUl").childNodes[i]);
		}
		$("autoUl").className = "borderNull";
	}
}

var Assist = {

	isOnmouseover : false,
	
	// close the auto complete message when onclick the page of the body(input lose focus)
	autoClose : function() {
		if(this.isOnmouseover == false) {
			Auto.closePop();
		}
	},
	
	autoPush : function(obj) {
	    $("skey").value = obj.childNodes[0].firstChild.nodeValue;
	    Auto.closePop();
	    //document.forms[0].submit();
	}

}

// the json test data
/*
function getListJson(name) {

	var skeyJson = {"skey": [  
		{"name": "auto"},  
		{"name": "ajax"},  
		{"name": "abacus"} 
		]  
	};
	return skeyJson;

}
*/