var _xmlHttpSug = null;
var _urlSug = "/complete?q=";
var _inputSug = null;

var _waitTimmer = null;

var _curIdx = null;
var _curSug = null;
var _cacheSug = new Object();

var _dbgDiv = null;

function installSug(searchBox, dbgDiv) {
    //_formSug = searchForm;
	_inputSug = searchBox;
	_dbgDiv = dbgDiv;

//	searchForm.onsubmit = onSearchSubmit;
	searchBox.autocomplete = "off";
	searchBox.onblur=onSearchBlur;
	searchBox.onkeyup=onSearchKeyup;
	
	var divSug = document.createElement("DIV");
	divSug.id = "completeDiv";
	divSug.style.borderRight = "black 1px solid";
	divSug.style.borderLeft = "black 1px solid";
	divSug.style.borderTop = "black 1px solid";
	divSug.style.borderBottom = "black 1px solid";
	divSug.style.paddingRight = "0";
	divSug.style.paddingLeft = "0";
	divSug.style.paddingTop = "0";
	divSug.style.paddingBottom = "0";
	divSug.style.zIndex = "1";
	
	//set size
//	divSug.style.left = calculateOffset(searchBox,"offsetLeft")+"px";
	divSug.style.left = (searchBox.offsetLeft+5)+"px";
    divSug.style.top = calculateOffset(searchBox,"offsetTop")+(searchBox.offsetHeight-5)+"px";
    divSug.style.width = (searchBox.offsetWidth-2)+"px";
	
	_curIdx = -1; 
	divSug.style.visibility = "hidden";
	divSug.style.position = "absolute";
	divSug.style.backgroundColor = "white";
	document.body.appendChild(divSug);	
	window.onresize = divSugSetSize;
}

function divSugSetSize() {
	var divSug = document.getElementById("completeDiv");
	divSug.style.left = calculateOffset(_inputSug,"offsetLeft")+"px";
    divSug.style.top = calculateOffset(_inputSug,"offsetTop")+(_inputSug.offsetHeight-1)+"px";
}

function onSearchSubmit() {
	if (_curSug && _curIdx >=0) {
		_inputSug.value = _curSug[_curIdx];
//		alert(_inputSug.value);
	}
	document.getElementById("completeDiv").style.visibility = "hidden";
	return true;
}

function onSearchBlur(event) {
	if (_waitTimmer) clearTimeout(_waitTimmer);
	document.getElementById("completeDiv").style.visibility = "hidden";
	_curSug = null; 
}

function onSearchKeyup(event) {
  if (_waitTimmer) clearTimeout(_waitTimmer);
  if (!event && window.event) event = window.event;
  if (!event) return;
  
  // 32 is blank
  if (event.keyCode == 32) {
	launchSug();
  }
  else {
	_curSug = null;	 _curIdx = -1;
	_waitTimmer = setTimeout(launchSug, 100);
  }
}

function onSearchKeyup(event) {
  if (_waitTimmer) clearTimeout(_waitTimmer);
  if (!event && window.event) event = window.event;
  if (!event) return;
  
  // 38 is up cursor key, 40 is down cursor key...  
  if (event.keyCode == 40 || event.keyCode == 38) {
	if (_curSug && _curSug.length > 0) {
		//_dbgDiv.value = _dbgDiv.value + " ( highlightSug: " + _curIdx + ") ";
		
		highlightSug(_curIdx, false);
		if (event.keyCode == 40) _curIdx++;
		else _curIdx--;
		
		if (_curIdx < 0) _curIdx = 0;
		if (_curIdx >= _curSug.length) _curIdx = _curSug.length - 1;
		highlightSug(_curIdx, true); 
	}	
	else {
		launchSug();
	}
  }
  // 32 is blank
  else if (event.keyCode == 32) {
	launchSug();
  }
  else {
	_curSug = null;	 _curIdx = -1;
	_waitTimmer = setTimeout(launchSug, 1000);
  }
}

function launchSug() {
	// clear timmer
	_waitTimmer = null;
	
	var queryTerm = Trim(_inputSug.value);
	if (queryTerm.length == 0) {
		document.getElementById("completeDiv").style.visibility = "hidden";
		return;
	}
	
	// is in cache?
	_curSug = _cacheSug[queryTerm];
	if (!_curSug) {
		// call server
		getSug(queryTerm);
	}
	else {	
		_curIdx = -1; displaySug(); 
	}
}

function calculateOffset(r,attr){
  var kb=0;
  while(r){
    kb+=r[attr]; 
    r=r.offsetParent;
  }
  return kb
}

function escapeURI(Url){
  if(encodeURIComponent) {
    return encodeURIComponent(Url);
  }
  if(escape) {
    return escape(Url)
  }
}

function Trim(sString)
{
	if (!sString) return sString;
	return sString.replace(/^\s+/,"").replace(/\s+$/,"");
}

function getXMLHTTP(){
  var A=null;
  try{
	//A=new ActiveXObject("Microsoft.XMLHTTP");
    A=new ActiveXObject("Msxml2.XMLHTTP")
  }catch(e){
    try{
      A=new ActiveXObject("Microsoft.XMLHTTP")
    } catch(oc){
      A=null
    }
  }
  if(!A && typeof XMLHttpRequest != "undefined") {
    A=new XMLHttpRequest()
  }
  return A
}

function getSug(terms){
  if(_xmlHttpSug && _xmlHttpSug.readyState != 0){
    _xmlHttpSug.abort()
  }
  _xmlHttpSug=getXMLHTTP();
  if(_xmlHttpSug){
    _xmlHttpSug.open("GET", _urlSug + escapeURI(terms), true);	
//    _xmlHttpSug.open("GET", _urlSug + terms, true);	
    _xmlHttpSug.onreadystatechange = function() {
      if(_xmlHttpSug.readyState == 4 && _xmlHttpSug.responseText) {		
		parserSug(_xmlHttpSug.responseText);
		if (_curSug) {	
			_curIdx = -1; 
			_cacheSug[this.value] = _curSug;
			displaySug(); 
		}
      }
    }
    _xmlHttpSug.send(null);
  }
}

function parserSug(sugString) {	
	var sugFragment = sugString.split("\n");		
	sugTermCnt = Math.floor(sugFragment.length)-1;
	//_dbgDiv.value = _dbgDiv.value + " " + sugTermCnt;
	//_dbgDiv.value = _dbgDiv.value + " " + sugFragment.length;
	//if (sugTermCnt * 3 != sugFragment.length) {
	//	_curSug = new Array(0); return;
	//}

	_curSug = new Array(sugTermCnt);
	for (var i = 0; i < sugTermCnt; i ++) {
		_curSug[i] = sugFragment[i];
	}
}

function displaySug() {
	if (_curSug.length <= 0) return;
		
	var divSug = document.getElementById("completeDiv");
	while(divSug.childNodes.length > 0) {
		divSug.removeChild(divSug.childNodes[0]);
	}
	//_dbgDiv.value = _dbgDiv.value + " ( displaySug ) ";
	
	for (var i = 0; i < _curSug.length; i ++) {
		var spanItem = document.createElement("DIV");
		//spanItem.onmousedown=onMouseDown;
		//spanItem.onmouseover=onMouseOver;
		//spanItem.onmouseout=onMouseOut;

		spanItem.innerHTML = _curSug[i];				
		spanItem.style.width = _inputSug.offsetWidth - 8;
		spanItem.style.overflow = "hidden";
		spanItem.style.textOverflow = "ellipsis";
		spanItem.style.whiteSpace = "nowrap";
		spanItem.style.paddingLeft = "3";
		spanItem.style.paddingRight = "3";		
		highlightStyle(spanItem, false);
		divSug.appendChild(spanItem);	
	}
	divSug.style.visibility = "visible";
}

function highlightSug(idx, highlight) {
	if (idx < 0) return;	
	if (_curSug.length <= 0) return;	
	if (_curSug.length < idx) return;	
	
	var divSug = document.getElementById("completeDiv");
	highlightStyle(divSug.childNodes[idx], highlight);	
}

function highlightStyle(node, highlight) {
	if (highlight) {
      node.style.backgroundColor = "#3366cc";
      node.style.color = "white";	  
	}
	else {
	  node.style.backgroundColor = "white";
      node.style.color = "black";	
	}
}

function onMouseDown() {
}

function onMouseOver() {
	//highlightStyle(this, true);
}

function onMouseOut () {
}