function initCompletion(input) {

	input.__completionitems = document.createElement("div");
	input.__completionitems.style.display = "none";
	input.__completionitems.style.borderStyle = "inset";
	input.__completionitems.style.borderWidth = "1px";
	input.__completionitems.style.position = "absolute";
	input.__completionitems.style.textAlign = "left";
	input.__completionitems.style.borderColor = "#ccccff";
	input.__completionitems.style.zIndex = 999;
	
	var focusNo = -1;

	document.body.appendChild(input.__completionitems);

	input.clearCompletionItems = function () {
		this.__completionitems.innerHTML = "";
		this.__completionitems.style.display = "none";
		
		if (document.getElementById("shim") != null) {
			document.body.removeChild(document.getElementById("shim"));
		}
	}

	input.setCompletionWidth = function(w) {
		input.__completionitems.__width = w;
	}
  
	input.showCompletionItems = function (ary, callback) {

		var x = 0; var y = 0;
		for (var o = this; o ; o = o.offsetParent) {
			x += (o.offsetLeft); y += (o.offsetTop);
		} 

		this.clearCompletionItems();

		var ci = this.__completionitems;
	    ci.style.width = (ci.__width ?
			      ci.__width : this.offsetWidth + "px");
		//ci.style.width = "500px";
		ci.style.top = y + this.offsetHeight + "px";
		ci.style.left = x + "px";
		ci.style.display = "block";

	    function __addItem(n) {

			var div = document.createElement("div");
			div.style.cursor = "pointer";
			div.style.backgroundColor = "white";
			div.style.borderColor = "blue";
			div.style.font='normal 11px Osaka';
			div.id = "suggest" + n;
	      
			div.onmouseover = function() {
				for (var i = 0; i < ary.length; ++i) __changeBgColor("suggest" + i, "white");
				this.style.backgroundColor = "#ccccff";
				focusNo = n;
			}

			div.onmouseout = function() {
				this.style.backgroundColor = "white";
				focusNo = -1;
			}
			div.onclick = function() { callback(n); }
			div.innerHTML = ary[n];
			ci.appendChild(div);
		}
		
		function __changeBgColor(targetId, bgColor) {
			if (document.getElementById(targetId) != null)
				document.getElementById(targetId).style.backgroundColor = bgColor;
		}
		
		function __getKeyCode(e){
			if (e != null) return e.which;	// Mozilla(Firefox, NN) and Opera
			else return event.keyCode;		// ie
		}
		
    	for (var i = 0; i < ary.length; ++i)  __addItem(i);
    	
    	if (typeof document.documentElement.style.maxHeight == "undefined") {
	    	iframe = document.createElement("iframe");
			iframe.id = "shim";
			iframe.style.left = ci.style.left;
			iframe.style.top = ci.style.top;
			iframe.style.width = ci.offsetWidth;
			iframe.style.height = ci.offsetHeight;
			iframe.style.position = 'absolute';
			iframe.style.display = 'block';
			iframe.style.zIndex = 998;
			document.body.appendChild(iframe);
		}
    	
    	input.onkeydown = function(e) {
    		keyCode = __getKeyCode(e);
    		
    		if (keyCode == 40) {//up
    		
    			if (focusNo != -1) __changeBgColor("suggest" + focusNo, "white");
    			focusNo = (focusNo >= ary.length - 1) ? -1 : focusNo + 1;
    			if (focusNo != -1) __changeBgColor("suggest" + focusNo, "#ccccff");
    			
    		} else if (keyCode == 38) {//down
    			
    			if (focusNo != -1) __changeBgColor("suggest" + focusNo, "white");
    			focusNo = (focusNo == -1) ? ary.length - 1 : focusNo - 1;
    			if (focusNo != -1) __changeBgColor("suggest" + focusNo, "#ccccff");
    			
    		} else if (keyCode == 13) {//enter
    			
    			if (focusNo == -1) return false;
    			input.value = document.getElementById("suggest"+focusNo).innerHTML;
    			focusNo = -1;
    			this.clearCompletionItems();
    			return false;
    		}
    	}
	}

  return input;
}

