function SearchField(container, callback){
	var remove_on_blur = true;
	var sel_line = -1;
	var items = null;
	var inner = "<div 	class='search_field_left'></div>" +
			    "<input class='search_field_input' type='text' size='17' />"+
			    "<div 	class='search_field_icon'></div>"+
			    "<div 	class='search_field_right'></div>";			     
	container.innerHTML = inner;
	var input = container.childNodes[1];
	var button = container.childNodes[2];
	
	var ss = document.createElement("div");
	ss.className = "search_suggest";
	ss.onmouseover = function() {
		remove_on_blur = false;		
	}
	ss.onmouseout = function() {
		remove_on_blur = true;
	}
	document.body.appendChild(ss);
	
	input.onkeyup = function(e){			
		e = e || window.event				
		var keynum = e.keyCode || e.which;				
		switch(keynum){
			case 13: search(); break;
			case 38: step(-1);break;
			case 40: step(1);break;
			default: 
			if(this.value != "" && this.value.length >= 1){ //Search after 1 letters.
				Ajax.get("search_suggest", {val: this.value}, function(json){
					items = json.items;
   					hideSS();
   					var pos = Utils.getPos(container);
   					ss.style.display = "block"; 
   					ss.style.top = (pos.y+20)+"px";
   					ss.style.left = pos.x+"px";
   					  					
   					for(var i in items) {   						
   						var line = document.createElement("div")
   						line.index = i;
   						line.style.border = "1px solid #FFF";
   						line.style.cursor = "pointer";
   						line.innerHTML = items[i].name;
   						line.onclick = function() {
							sel_line = this.index;
							search(); 
   						}   						
   						line.onmouseover = function() {
   							sel_line = this.index;
   							ss.childNodes[sel_line].style.border = "1px solid #000";
   						}   						
   						line.onmouseout = function() {
   							sel_line = this.index;
   							ss.childNodes[sel_line].style.border = "1px solid #FFF";
   						}   						
   						ss.appendChild(line);   						   							        	
   					}
				});
			}
		}		
	}
	
	function search(){
		if(sel_line >-1)
			window.location = "/cgi-bin/mygeolog.cgi?f=display_page&member_id="+items[sel_line].id;			
		else if(input.value != ""){
			window.location = "/cgi-bin/mygeolog.cgi?f=frontpage_search&name="+input.value;
		}	
		hideSS();	
	}
	function step(dir){
		if(ss.childNodes){
			if(sel_line >= 0 && sel_line <= items.length-1 && ss.childNodes[sel_line])
				ss.childNodes[sel_line].style.border = "1px solid #FFF";
			sel_line = (sel_line > items.length-1) ? (items.length-1) : (sel_line+dir);
			if(sel_line < -1)
				sel_line = -1;
			if(sel_line >= 0 && sel_line <= items.length-1 && ss.childNodes[sel_line])
				ss.childNodes[sel_line].style.border = "1px solid #000";
		}
	}
	function hideSS(){
		while(ss.firstChild)
			ss.removeChild(ss.firstChild);
		sel_line = -1;
		ss.style.display = "none";
	}
	input.onblur = function(){
		if (remove_on_blur)
			hideSS();
	}
	input.onfocus = function(){
		this.value = "";
	}
	button.onclick = function() {
		search();	
	}
}