//------AutoComplete---------------------------
autoComplete = function(name,url){
	this.name=name;
	this.url=url;
	this.searchstr=null;
	this.xmlHttp = null;
	this.option = Array();
	this.optionindex = -1;
	this.on=false;
	if (typeof XMLHttpRequest != 'undefined') { try  {this.xmlHttp = new XMLHttpRequest(); } catch(e) {} }
	if (!this.xmlHttp) {
		try { this.xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { this.xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { this.xmlHttp  = null;} }
	}
	document.getElementById(name).setAttribute('autocomplete', 'off');

	this.setValue=function(){
		document.getElementById(this.name).value=this.option[this.optionindex];
	}

	this.getLeftTop=function() {
		oElement=document.getElementById(this.name);
		if( typeof( oElement.offsetParent ) != 'undefined' ) {
			for( var posX = 0, posY = oElement.offsetHeight; oElement; oElement = oElement.offsetParent ) {
				posX += oElement.offsetLeft;
				posY += oElement.offsetTop;
			}
			return [ posX, posY ];
		} else {
			return [ oElement.x, oElement.y ];
		}
	}

    this.getWidth=function(){
        var curNode = document.getElementById(this.name);
        var width = curNode.offsetWidth;
        return width;
    }

	this.hideOptions=function(){
		if(this.on) {
			document.getElementsByTagName('body')[0].removeChild(document.getElementById(this.name+'_options'));
			this.on=false;
		}
	}

	this.showOptions=function(){
		if(this.on) {
			document.getElementsByTagName('body')[0].removeChild(document.getElementById(this.name+'_options'));
			this.on=false;
		}
		newDiv=document.createElement("div");
		newDiv.id=this.name+'_options';
		newDiv.name=this.name+'_options';
		tmpstr='<div style="cursor:pointer; font-size:12px;">';
		for(i=0;i<this.option.length;i++) {
			tmpstr+='<div id="'+this.name+'_option_'+i+'" style="padding:2px 4px 2px 4px;display:block; color:#000000; background:none;" onClick="autoCompleteItem[\''+this.name+'\'].setValue();" onMouseover="autoCompleteItem[\''+this.name+'\'].optionindex='+i+';this.style.background=\'#000055\';this.style.color=\'#ffffff\';" onMouseout="this.style.background=\'none\';this.style.color=\'#000000\';">'+this.option[i]+'</div>';
		  }
		tmpstr+='</div>';
		newDiv.innerHTML=tmpstr;
		newDiv.style.zIndex='100';
		newDiv.style.border='1px solid';
		newDiv.style.overflow='auto';
		newDiv.style.borderColor='#000000';
		newDiv.style.background='#f4f4f4';
		newDiv.style.position='absolute';
		newDiv.style.width=this.getWidth()+'px';
		newDiv.style.height='140px';
		newDiv.style.top=this.getLeftTop()[1]+'px';
		newDiv.style.left=this.getLeftTop()[0]+'px';
		document.getElementsByTagName('body')[0].appendChild(newDiv);
		this.on=true;

		var self=this;
		if (document.addEventListener) {
			document.getElementById(this.name).addEventListener("blur", function(e) { setTimeout(function() {self.hideOptions()},300); }, true);
		}
		else {
			document.getElementById(this.name).onblur = function(e) { setTimeout(function() {self.hideOptions()},300); };
		}
	}

	this.xmlreq = function(){
		if (this.xmlHttp) {
			var self=this;
			this.xmlHttp.open('GET', ''+this.url+'?val='+this.searchstr, true);
		    this.xmlHttp.onreadystatechange = function () {
				if (self.xmlHttp.readyState == 4 && self.xmlHttp.status == 200) {
					eval('self.option=Array'+self.xmlHttp.responseText+';');
					self.showOptions();
		        }
		    }
		    this.xmlHttp.send(null);
		}
	}

	this.keydown=function(e){
		if(e.keyCode==13){ // return
			this.setValue();
			this.hideOptions();
			if(typeof e.preventDefault!='undefined')
				e.preventDefault();
			else return false;
		}
		else if(e.keyCode==38){ // up
			if(this.optionindex>0) {
				document.getElementById(this.name+'_option_'+this.optionindex).style.color='#000000';
				document.getElementById(this.name+'_option_'+this.optionindex).style.background='none';
				this.optionindex--;
				document.getElementById(this.name+'_option_'+this.optionindex).style.color='#ffffff';
				document.getElementById(this.name+'_option_'+this.optionindex).style.background='#000066';
				document.getElementById(this.name+'_options').scrollTop=document.getElementById(this.name+'_option_'+this.optionindex).offsetHeight*this.optionindex;
			}
		}
		else if(e.keyCode==40){ // down
			if(this.optionindex<this.option.length-1) {
				if(this.optionindex>-1) {
					document.getElementById(this.name+'_option_'+this.optionindex).style.color='#000000';
					document.getElementById(this.name+'_option_'+this.optionindex).style.background='none';
				}
				this.optionindex++;
				document.getElementById(this.name+'_option_'+this.optionindex).style.color='#ffffff';
				document.getElementById(this.name+'_option_'+this.optionindex).style.background='#000066';
				document.getElementById(this.name+'_options').scrollTop=document.getElementById(this.name+'_option_'+this.optionindex).offsetHeight*this.optionindex;
			}
		}
		else {
			this.optionindex=-1;
			this.searchstr=encodeURIComponent(document.getElementById(name).value);
			//if( (e.keyCode<37 || e.keyCode>40) && (e.keyCode!=13) && (e.keyCode!=8) )
			//	this.searchstr+=String.fromCharCode(e.keyCode);
			//if((e.keyCode==8))
			//	this.searchstr=this.searchstr.substr(0,this.searchstr.length - 1);
			if(this.searchstr.length>0){
				//alert(this.searchstr);
				this.xmlreq();
			}
			else this.hideOptions();
		}
	}
}

var autoCompleteItem=Array();

function addAutoComplete(id,url){
	autoCompleteItem[id]=new autoComplete(id,url);
	if (document.addEventListener) {
		document.getElementById(id).addEventListener("keyup", function(e) { autoCompleteItem[id].keydown(e); }, true);
	}
	else {
		document.getElementById(id).onkeyup = function(e) { var e=window.event || e; return autoCompleteItem[id].keydown(e); };
	}
}