/*
Code based on: http://www.webreference.com/programming/javascript/gr/column5/index.html
Modified by Peter Bryant (for RimuHosting.com and Pingability.com)

sample usage:
<script type='text/javascript' src='<%=request.getContextPath() %>/js/autocomplete.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/JTZ.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>

<input id="tz" type="text" name="id"/>
<br/>
<div id="theDiv"></div>

<script>
var ac = new AutoComplete(
              document.getElementById('tz'),
              document.getElementById('theDiv'),
              250 // max size of dropdown
              // the function that is called to queue up the ajax request
              , function (text) {
                  DWRUtil.useLoadingMessage();
                  JTZ.getTimeZoneIds(text
                    , {callback:onZoneInfo});
              }
          );
// this is the function called by the ajax framework (dwr) after the remote
// call completes.  it them updates the autocomplete list
function onZoneInfo(zones) {
    ac.repopulate(zones);
}
</script>
*/

function AutoComplete(oText, oDiv, nMaxSize, fLoad){
	// initialize member variables
	this.oText = oText; // the text box
	this.oDiv = oDiv; // a hidden <div> for the popup auto-complete
	this.nMaxSize = nMaxSize;
	this.fLoad = fLoad;
	// attach handlers to the text-box
	this.oText.AutoComplete = this;
	this.oText.onkeyup = function() {this.AutoComplete.onchange();};
	this.oText.onblur = function() {this.AutoComplete.oDiv.style.visibility = "hidden";};
}

AutoComplete.prototype.onchange = function() {
	var txt = this.oText.value;
	// invoke the loader function
	this.fLoad(txt);
}

AutoComplete.prototype.repopulate = function(aStr) {
	// count the number of strings that match the text-box value.
	var nCount = aStr.length;
	
	// if a suitable number then show the popup-div
	if(this.nMaxSize >0 && nCount>this.nMaxSize || nCount==0) {
		this.oDiv.innerHTML = "";
		this.oDiv.style.visibility = "hidden";
		return;
	}
	
	// clear the popup div.
	while ( this.oDiv.hasChildNodes() ) {
		this.oDiv.removeChild(this.oDiv.firstChild);
	}
	// add each string to the popup-div
	var i, n = aStr.length;
	for ( i = 0; i < n; i++ ) {
		var oDiv = document.createElement('div');
		oDiv.className = "acNoHighlight";
		this.oDiv.appendChild(oDiv);
		oDiv.innerHTML = aStr[i];
		oDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
		oDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
		oDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
		oDiv.AutoComplete = this;
	}
	this.oDiv.style.visibility = "visible";
}

AutoComplete.prototype.onDivMouseDown = function() {
	// set the text-box value to the word
	this.AutoComplete.oText.value = this.innerHTML;
}

AutoComplete.prototype.onDivMouseOver = function() {
	// assumes the existence of a CSS style called AutoCompleteHighlight
	this.className = "acHighlighted";
}

AutoComplete.prototype.onDivMouseOut = function() {
	// assumes the existence of a CSS style called AutoCompleteBackground
	this.className = "acNoHighlight";
}
/*
A minimal style is:
#theDiv {
	left: 0;
	position:absolute;
	top: 0;
}

.acHighlighted {
	cursor: pointer;
}

A minimal-ish style is:
#theDiv {
	left: 0;
	position:absolute;
	top: 0;
	visibility:hidden;
	background: rgb(223,203,167);
	border: 1px solid rgb(0,51,204);
	opacity: .9;

}

#theDiv div {
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 8px;
	border-bottom: 1px dotted rgb(0,51,204);
}

.acNoHighlight {
}

.acHighlighted {
	background-color: rgb(191,156,96);
	cursor: pointer;
}
*/