function PopulateBox()
{
    var box = this.parentNode.parentNode.childNodes[0];
    var div = this.parentNode;

    box.value = this.innerHTML;
    box.focus();
    div.style.display = 'none';
    div.innerHTML = '';    
}

function HideBox()
{
	var div = this.parentNode;
	div.style.display = 'none';
    div.innerHTML = '';    
}

function SetStatus(div, text, showCloseLink)
{
	div.innerHTML = ''
	div.style.display = 'block'
	div.className = 'autoCompleteOptions autoCompleteOptionsWithStatus'
	var statusDiv = document.createElement('div');
	statusDiv.className = 'status';
	statusDiv.innerHTML = text;
	div.appendChild(statusDiv);
	if (showCloseLink == 'True')
	{
		var closeLink = document.createElement('a');
		closeLink.onclick = HideBox;
		closeLink.innerHTML = "Close";
		closeLink.href = "javascript:void(0);";
		div.appendChild(closeLink);
	}
}

function HighlightOption(div, step)
{
	if(div.style.display == 'none') return;
    var min = 0;
    var max = div.childNodes.length - 1;
    if(max < min) return;

	var currentFocus = 0;
    var newFocus = 0;
    for(i=min; i<=max; i++)
    {
        var a = div.childNodes[i];
        if(a.className == 'status')
        {
			continue;
        }
        else if(a.className == 'active')
        {
            a.className = 'inactive';
            newFocus = i + step;
            break;
        }
    }
    
    if(newFocus < min) newFocus = min;
    if(newFocus > max) newFocus = max;
	var newFocusEl = div.childNodes[newFocus];
	newFocusEl.className = 'active';
	newFocusEl.focus();
}

function SetOptionActive()
{
    this.className = 'active';
    this.focus();
}
function SetOptionInactive()
{
    this.className = 'inactive';
}

function ResetOptions(ctrl, useButton)
{
	var divIndex = 1;
    if(useButton == "True")
    {
		ctrl = ctrl.parentNode;
		divIndex = 2;
    }

    var div = ctrl.childNodes[divIndex];
    div.style.display = 'none';
    div.innerHTML = '';    
}

function SelectOptions(ctrl)
{	
	var div = ctrl.childNodes[2];
	var keyCode = event.keyCode;
    switch(keyCode)
    {
		case 38:
        {
            HighlightOption(div, -1);
            break;
        }
        case 40:
        {
            HighlightOption(div, 1);
            break;
        }
    }
}

function UpdateOptions(ctrl, url, threshold, useButton)
{		
	var divIndex = 1;
    if(useButton == "True")
    {
		ctrl = ctrl.parentNode;
		divIndex = 2;
    }
    
    var box = ctrl.childNodes[0];            
    var div = ctrl.childNodes[divIndex];
    var keyCode = event.keyCode;
    switch(keyCode)
    {
		//case 0:
		case 13:		
		case 18:
		case 35:
		case 36:
		case 37:
		case 39:
		{
			break;
		}
        case 38:
        {
            HighlightOption(div, -1);
            break;
        }
        case 40:
        {
            HighlightOption(div, 1);
            break;
        }
        default:
        {			
            var val = box.value.toLowerCase();            
            var length = val.length;
            if(length == 0)
            {
				div.innerHTML = '';
				div.style.display = 'none';
				return;
            }
            if(length < threshold)
            {
				var remaining = threshold - length;
				var statusText = 'Please type ' + remaining + ' more letter';
				if(remaining !=1) statusText += 's';
                SetStatus(div, statusText, 'False');
				return;
            }

			// GET DATA
			if(div.childNodes.length == 0 ||
            (div.childNodes.length == 1 && div.childNodes[0].className == 'status'))
            {
				SetStatus(div, 'Please wait...', 'False');
			}
			ServerRequest(url, div.id + '|' + val, AddOptions);

            break;
        }
    }
}

function AddOptions(serverData)
{
	var data = serverData.split('|');
	var div = document.getElementById(data[0]);
	div.innerHTML = '';
	var match = false;
	for(i=1; i<data.length; i++)
	{
		var text = data[i];
		if(text != '')
		{
			match = true;
			var a = document.createElement('a');
			a.href = '#';
			a.onclick = PopulateBox;
			a.onfocus = SetOptionActive;
			a.onblur = SetOptionInactive;
			a.onmouseover = SetOptionActive;
			a.onmouseout = SetOptionInactive;    
			a.className = 'inactive';
			a.style.display = 'block';
			a.innerHTML = text;
			div.appendChild(a);
		}
	}
	
	if(!match)
	{
		SetStatus(div, 'No match found!', 'True');
	}
}

function ServerRequest(url, vars, callbackFunction)
{
	var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
	request.open("POST", url, true);
	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
	request.onreadystatechange = function()
	{
		if (request.readyState == 4 && request.status == 200)
		{
			if (request.responseText)
			{
				callbackFunction(request.responseText);
			}
		}
	};
	request.send(vars);
}