function Autocomplete(ainput,alist,apanel,abase)
{
	this.input=ainput;
	this.list=alist;
	this.panel=apanel;
	this.base=abase;
	this.default_value=this.input.value;
	this.original_color=this.input.style.color;
	this.input.style.color='#AAAAAA';

	var $this=this;
	var on_focus=function(){ if($this.input.value==$this.default_value) { $this.input.value=''; } $this.input.style.color=$this.original_color; }
	if("attachEvent" in this.input) this.input.attachEvent('onfocus',on_focus);
	else if("addEventListener" in this.input) this.input.addEventListener('focus',on_focus,true);
	
	var on_focusout=function(){ if($this.input.value=='') { $this.input.value=$this.default_value; $this.input.style.color='#AAAAAA'; } }
	if("attachEvent" in this.input) this.input.attachEvent('onfocusout',on_focusout);
	else if("addEventListener" in this.input) this.input.addEventListener('focusout',on_focusout,true);

	var on_input=function(){ setTimeout(function(){$this.pop($this.input.value);},10);   }
	if("attachEvent" in this.input) this.input.attachEvent('onkeyup',on_input);
	else if("addEventListener" in this.input) this.input.addEventListener('keyup',on_input,true);
}


Autocomplete.prototype.pop=function(value)
{
	while(this.base.firstChild) this.base.removeChild(this.base.firstChild);
	var $this=this;
	var count=0;
	for(var item in this.list) {
		if(this.list[item].toLowerCase().substr(0,value.length) != value.toLowerCase() ) continue;

		var span=document.createElement('span');

		var a=document.createElement('a');
		a.href='javascript:void(0);';
		a.innerHTML=auto_list[item];

		var func=function(event){ $this.complete(event); }
		if("attachEvent" in a) a.attachEvent('onclick',func);
		else if("addEventListener" in a) a.addEventListener('click',func,true);

		span.appendChild(a);
		var br=document.createElement('br');
		span.appendChild(br);

		this.base.appendChild(span);
		count++;
		}
	if(this.input.value.length > 0 && count > 0)
		this.panel.style.display='block';
	else
		this.panel.style.display='none';
}

Autocomplete.prototype.complete=function(evt)
{
	var event = (evt) ? evt : window.event;
	var el=event.target||event.srcElement;
	this.input.value=el.innerText;
	this.input.style.color=this.original_color;
	this.panel.style.display='none';	
}

Autocomplete.prototype.toggle=function()
{
	if(this.panel.style.display=='none') this.panel.style.display='block';
	else this.panel.style.display='none';
}