//start
//suggestInit();

var suggestInputConfig = {
	text_id:"inputSelect", 
	box_width:"0",
	suggestDivId:"suggest_item_"
}

function SuggestInput(config) {
	config = config || new Object();
	
	for(var prop in suggestInputConfig) {
		if(config[prop]==null) {
			config[prop]=suggestInputConfig[prop];
		}
	}

	var SUGGEST_SERVLET_URL = '/search/auto/keywordautoservlet.jsp';
	var SUGGEST_ITEM_PREFIX = "suggest_item_" + config.suggestDivId;
	
	var INPUT_ID = config.text_id;
	var BOX_WIDTH = config.box_width;
	
	var inputText  = null; //the main input text element
	var suggestDiv = null; //a visible pendant to select box
	var suggestIframe = null;
	
	var scripting=false;
	var inputword='';
	
	var selectIndex = -1;
	var suggestList = null;

	init();
	//entrance point
	function init(){
		if (window.addEventListener) {
			window.addEventListener('load', suggestRunner, false);
			document.addEventListener("click", hideSuggest, false);
		}else	if (window.attachEvent) {
			window.attachEvent('onload', suggestRunner);
			document.attachEvent("onclick", hideSuggest);
		}
	}
	
	
	//main function of suggest
	function suggestRunner() {
		if (document.createElement("DIV") && $(INPUT_ID)!=null) { //otherwise nothing happens
			scripting=true;

			inputText = $(INPUT_ID);
			
			inputText.setAttribute("autocomplete","OFF");
			inputText.onkeyup=function(e){
				if (!e) e=event; 
				showSelection(inputText.value,e);
			}
			
			suggestDiv = document.createElement("DIV");	
			suggestDiv.id = "suggestDiv" + config.suggestDivId;	
			suggestDiv.className="suggestBoxContainer"
			suggestDiv.style.display="none"
			suggestDiv.style.zIndex = 500;
			document.body.appendChild(suggestDiv)
			positionSugguestDiv();		
					
			//use iframe to hide the html select element		
			suggestIframe = document.createElement('IFRAME');    	
			suggestIframe.frameBorder = 0;
			suggestIframe.scrolling = "no";
			suggestIframe.style.display="none"    	
			document.body.appendChild(suggestIframe);
	    	
			//when use form submit, hide suggestBox first
//			var form = inputText.parentNode;		
//			while(!!form){
//				if(form.tagName=="FORM") break;
//				else form = form.parentNode;	
//			}
//			/*
//			if(!!form && !!suggestDiv){
//				form._submit = form.submit;
//				form.submit = function(){
//					hideSuggest();		
//					form._submit();
//				}
//			}
//			*/
//			
//			if (window.addEventListener) {
//				if(!!form && !!suggestDiv) 
//					form.addEventListener('submit', hideSuggest, false);
//				window.addEventListener('scroll', positionSugguestDiv, false);
//				window.addEventListener('resize', positionSugguestDiv, false);
//			}else if(window.attachEvent) {
//				if(!!form && !!suggestDiv) 
//					form.attachEvent('onsubmit', hideSuggest);
//				window.attachEvent('onscroll', positionSugguestDiv);
//				window.attachEvent('onresize', positionSugguestDiv);
//			}	
		}
	} 
	
	function hideSuggest(){		
		if(!!suggestDiv && !!suggestDiv.style) 
			suggestDiv.style.display="none";
		if(!!suggestIframe && !!suggestIframe.style) 
			suggestIframe.style.display="none";
	}
	
	function showSuggest(){
		if(!!suggestDiv && !!suggestDiv.style) 
			suggestDiv.style.display="block";
		if(!!suggestIframe && !!suggestIframe.style) 
			positionSugguestIframe();
	}
	 
	 
	//find coords where the suggest div will appear		
	function positionSugguestDiv(){
			//find coords where the suggest div will appear
		var pos2=findPos(inputText); 
		pos2.push(inputText.offsetHeight); 
		pos2.push(inputText.offsetWidth)
			
		suggestDiv.style.top=(pos2[1]+pos2[2])+'px';
		suggestDiv.style.left=pos2[0]+'px';
		suggestDiv.style.width= (BOX_WIDTH!=0 ?BOX_WIDTH: pos2[3])+'px';
			
		positionSugguestIframe();
	}
	
	
	function positionSugguestIframe(){
	    if (!suggestDiv || !suggestIframe) return;    
	    
	    suggestIframe.style.zIndex = suggestDiv.style.zIndex - 1;
	    suggestIframe.style.top = suggestDiv.style.top;
	    suggestIframe.style.left = suggestDiv.style.left;  
	    suggestIframe.style.width = suggestDiv.offsetWidth;
	    suggestIframe.style.height = suggestDiv.offsetHeight;
	    suggestIframe.style.position = "absolute";
	    suggestIframe.style.display = "block";
	}
	
	
	//build suggest box div
	function buildDiv() {
		selectIndex = -1;    	
		
		var html = '';	
		for(i=0;i<suggestList.length;i++) {		
			html += '<div class="suggestBox" style="width:100%;font-size:0.8em;" id="'+ SUGGEST_ITEM_PREFIX + i + '" ';	
			html += 'onmouseover="this.className=\'mouse_over\';" ';	
			html += 'onmouseout="this.className=\'suggestBox\';" ';		
			html += 'onclick="$(\'' + INPUT_ID + '\').value=this.innerHTML; $(\'' + suggestDiv.id + '\').style.display=\'none\';" >';		
			html += suggestList[i];	
			html += '</div>';	
		}
		
		suggestDiv.innerHTML = html;	
	}
	
	//set value to text
	function setInputValue(ev) {
		if (!scripting) return;
	
		var len = (!suggestList)?0:suggestList.length;	
		if(len==0) return;	
		
		if(ev.keyCode==40) selectIndex++;
		if(ev.keyCode==38) selectIndex--;
		
		if(selectIndex<0) selectIndex=0;
		if(selectIndex+1>len) selectIndex=len-1;
		
		for(var i=0;i<len;i++){
			if(selectIndex==i) {
				$(SUGGEST_ITEM_PREFIX+i).className="mouse_over";
				inputText.value = $(SUGGEST_ITEM_PREFIX + i).innerHTML;
			} else {
				$(SUGGEST_ITEM_PREFIX + i).className="suggestBox";	
			}
		}
	}
	
	//create and show suggest box div
	function showSelection(t,ev) {
		if (!scripting) return;
		
		if(suggestDiv.style.display!="none") {
			//Dw Arrow , Up Arrow
			if(ev.keyCode==40 || ev.keyCode==38) { setInputValue(ev); return; }
			//Esc, Enter
			if(ev.keyCode==27 || ev.keyCode==13) { hideSuggest(); return false;}
		}
		
		//if(t==inputword) return;	
		
		inputword = t;		
		if (t==""){	hideSuggest(); return; }
		
		var param = {				
			params:'word='+ encodeURIComponent(inputword),
			onComplete: function(transport){
				try {
					suggestList =  eval('(' +(transport.responseText)+ ')');
				}catch(err) {
					suggestList==null;
				}				
				if(suggestList==null || typeof suggestList!='object' ||
				 suggestList.constructor!=Array || suggestList.length==0){				
					hideSuggest();
					return;
				} else {
					buildDiv();											
					showSuggest();
				}
			}
		}

		Ajax.dispatch(SUGGEST_SERVLET_URL, param);
	}
	
	
}

//util functions
function $(element) {
  if (typeof element == 'string'){
    element = document.getElementById(element);
  }
  return element;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	} 
	return [curleft,curtop];
}