function SuggestClient(city, input, width, div){
	this.city = city;
	this.id = "suggest_" + input.form.name + "_" + input.name;
	this.tableId = this.id + "Table";
	this.width = width;
	this.input = input;
	this.input.setAttribute("autocomplete", "off");
	if(!this.input) alert("input not exists!");
	this.dataFromServer = "";
	this.currRow = null;
	
	this.div = div;
	if(this.width) this.div.style.width = this.width + "px";

	
	this._createDiv = function(){
		this.div = document.createElement("div");
		this.div.id = "_" + this.id + "Div";
		this.div.className = "suggestStyle";
		if(this.width) this.div.style.width = this.width + "px";
		//var theParent = null;//this.input.parentElement ? this.input.parentElement : this.input.parentNode;
		var theParent;
		if(!theParent) theParent = document.body;
		theParent.appendChild(this.div);
	}
	
	this._calcPosition = function(){
		var left = this.input.offsetLeft;
		var top = this.input.offsetTop;
		var parent = this.input;
		while(parent = parent.offsetParent){
			top += parent.offsetTop;
			left += parent.offsetLeft;
		}
		this.div.style.left = left + "px";
		this.div.style.top = top + this.input.offsetHeight + "px";
	}
	
	this._captureEvent = function(){
		this.input.obj = this;
		
		this.input.oldSize = this.input.value.length;
		this.input.onkeyup = function(evt){
			evt = evt ? evt : window.event;
			var charCode = (evt.charCode) ? evt.charCode : (evt.which ? evt.which : evt.keyCode);
			if(charCode == 40){
				if(this.obj.div.style.visibility == "visible"){
					this.obj._pressDown();
				}
			}
			else if(charCode == 38){
				if(this.obj.div.style.visibility == "visible"){
					this.obj._pressUp();
				}
			}
			else if(charCode == 27){
				if(this.obj.div.style.visibility == "visible"){
					this.obj._pressEsc();
				}
			}
			var dataChanged = this.value.length != this.oldSize;
			this.oldSize = this.value.length;
			if(dataChanged && charCode != 13){
				this.obj._dataChanged(this.value);
			}
		}

		/*
		this.input.onblur = function(evt)
		{
		    
		}
		this.input.onchange = function(evt)
		{
			this.obj.hide();
		}
		this.input.onfocus=function(evt)
		{
		    this.isblur = false;
			this.obj._dataChanged(this.value);
		}
		*/
		

		this.input.onkeypress = function(evt){
			evt = evt ? evt : window.event;
			var charCode = (evt.charCode) ? evt.charCode : (evt.which ? evt.which : evt.keyCode);
			if(charCode == 13){
				if(this.obj.div.style.visibility == "visible"){
					return this.obj._pressEnter();
				}
			}
		}
		
		/*  ÏûºÄÄÚ´æ¹ý´ó
		*/
		if(!SuggestClient.prototype.setOnResize){
			SuggestClient.prototype.setOnResize = 1;
			this.oldBodyResize = document.body.onresize;
			document.body.obj = this;
			document.body.onresize = function(){
				if(document.body.obj.oldBodyResize) 
					document.body.obj.oldBodyResize();
				if(document.body.obj.div.style.visibility == "visible"){
					document.body.obj._calcPosition();
				}
			}
		}
		else{
			this.oldBodyResize2 = document.body.onresize;
			document.body.obj2 = this;
			document.body.onresize = function(){
				if(document.body.obj2.oldBodyResize2) 
					document.body.obj2.oldBodyResize2();
				if(document.body.obj2.div.style.visibility == "visible"){
					document.body.obj2._calcPosition();
				}
			}
		}
		if(!SuggestClient.prototype.setOnClick){
			SuggestClient.prototype.setOnClick = 1;
			this.oldDocumentClick = document.onclick;
			document.obj = this;
			document.onclick = function(){
				if(document.obj.oldDocumentClick) 
					document.obj.oldDocumentClick();
				if(document.obj.div.style.visibility == "visible"){
					document.obj.hide();
				}
			}
		}
		else{
			this.oldDocumentClick2 = document.onclick;
			document.obj2 = this;
			document.onclick = function(){
				if(document.obj2.oldDocumentClick2) 
					document.obj2.oldDocumentClick2();
				if(document.obj2.div.style.visibility == "visible"){
					document.obj2.hide();
				}
			}
		}
		
	}
	
	this._dataChanged = function(keyword){
        if( location.hostname.toLowerCase() == "localhost" )
	    	ajaxGet("/InternationalAirTicketQueryWeb/Query/InterGetCitys.aspx?id=" + this.id + "&k=" + keyword + "&c=" + this.city);
        else
	    	ajaxGet("/International/Query/InterGetCitys.aspx?id=" + this.id + "&k=" + keyword + "&c=" + this.city);
	}

	this._pressDown = function(){
		var tbl = document.getElementById(this.tableId);
		if(!this.currRow){
			this.currRow = tbl.rows[0];
		}
		else{
			var index = this.currRow.rowIndex + 1;
			if(index > tbl.rows.length-1) 
				index = tbl.rows.length-1;
			this.currRow = tbl.rows[index];
		}
		this._rowOver(this.currRow);
	}
	
	this._pressUp = function(){
		if(!this.currRow) return;
		var index = this.currRow.rowIndex - 1;
		if(index < 0)
			index = 0;
		var tbl = document.getElementById(this.tableId);
		this.currRow = tbl.rows[index];
		this._rowOver(this.currRow);
	}
	
	this._pressEnter = function(){
		if(this.currRow){
			this._rowClick(this.currRow);
			return false;
		}
		else{
			this.hide();
			return true;
		}
	}

	this._pressEsc = function(){
		this.hide();
	}

	this.hide = function(){
		this.dataFromServer = "";
		this.div.style.visibility = "hidden";
	}
	
	this.show = function(){
		this._calcPosition();
		this.div.style.visibility = "visible";
	}
	
	// server call
	this.showData = function(data){
		if(data == this.dataFromServer) return;
		this._setDivContent(data);
		this.dataFromServer = data;
	}
	
	this._setDivContent = function(data){
		if(data == ""){
			this.div.innerHTML = "";
			this.dataFromServer = "";
			this.hide();
			return;
		}
		var tableContent = "";
		var resultAry = data.split(",");
		for(var i = 0; i < resultAry.length; i++){
			var itemAry = resultAry[i].split("=");
			tableContent += "<tr onmouseover='" + this.id + "._rowOver(this);' onclick='" + this.id + "._rowClick(this);'><td>" + itemAry[0] + "</td><td align='right'>" + itemAry[1] + "</td></tr>";
		}
		var content = "<div align='right' style='float:right;padding-right:3px;width:100%'><a href='javascript:" + this.id + ".hide();'><img src='images/point_2.gif' border=0 height=9 width=9></a></div>";
		content += "<table width='100%' style='font-size: 12px; color: #999999;'><tbody id='" + this.tableId + "'>"
			+ tableContent + "</tbody></table>";
		this.div.innerHTML = content;
		this.show();
	}
	
	// private
	this._rowOver = function(row){
		var tbl = document.getElementById(this.tableId);
		this.currRow = row;
		for(i = 0; i < tbl.rows.length; i++){
			if(i == this.currRow.rowIndex){
				tbl.rows[i].className = this.div.className + "_row2";
			}
			else{
				tbl.rows[i].className = this.div.className + "_row1";;
			}
		}
	}
	
	this._rowClick = function(row){
		this.currRow = row;
		var value = row.cells[0].innerHTML;
		this.input.value = value;
		this.hide();
	}
	
	this._createStyle = function(){
		document.write("<style type=\"text/css\">");
		document.write(".suggestStyle{z-index:9; position:absolute; visibility:hidden; background: #ffffff; border: 1px dotted #72A9CF; padding-left: 4px; padding-top: 3px; text: left; font-size: 12px; color: #999999; line-height: 20px; text-align: left;}");
		document.write(".suggestStyle_row1{background-color:#fff; color:#999; padding-left:6px; padding-right:6px; font-size:12px;}");
		document.write(".suggestStyle_row2{background-color:#edf2fb; color:#000; padding-left:6px; padding-right:6px; font-size:12px;}");
		document.write("</style>");
	}

	//this._createStyle();
	//this._createDiv();
	this._captureEvent();
}
