/* 

	SearchField 
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info

	changes by Richard van der Meer (http://www.tres.nl/)
	
*/

this.searchfield = function(id, defaultText, suggestion, suggestionText) {

	var field = document.getElementById(id);	

	field.defaultText = defaultText;
	field.suggestion = suggestion;
	field.suggestionText = suggestionText;

	var classInactive = "sf_inactive";
	var classActive = "sf_active";
	var classText = "sf_text";
	var classSuggestion = "sf_suggestion";
	this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
	if(field && !safari) {
		field.value = field.defaultText;
		field.c = field.className;		
		field.className = field.c + " " + classInactive;

		field.onfocus = function(){
			this.className = this.c + " "  + classActive;
			this.value = (this.value == "" || this.value == this.defaultText) ?  "" : this.value;
		};

		field.onblur = function(){
			this.className = (this.value != "" && this.value != this.defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive;
			this.value = (this.value != "" && this.value != this.defaultText) ?  this.value : this.defaultText;
			this.clearList();
		};

		if (field.suggestion){
			
			field.selectedIndex = 0;
						
			field.setAttribute("autocomplete", "off");
			var div = document.createElement("div");
			var list = document.createElement("ul");
			list.style.display = "none";
			list.style.zIndex = 1;
			div.className = classSuggestion;
			list.style.width = field.offsetWidth + "px";
			div.appendChild(list);
			field.parentNode.appendChild(div);

			field.listRef = list;

			field.onkeypress = function(e){
				
				var key = getKeyCode(e);
		
				if(key == 13){ // enter
					selectList(this);
					this.selectedIndex = 0;
					return false;
				};	
			};
				
			field.onkeyup = function(e){
			
				var key = getKeyCode(e);
		
				switch(key){
				case 13:
					return false;
					break;			
				case 27:  // esc
					this.value = "";
					this.selectedIndex = 0;
					this.clearList();
					break;				
				case 38: // up
					this.navList("up");
					break;
				case 40: // down
					this.navList("down");		
					break;
				default:
					this.startList();
					break;
				};
			};
			
			field.startList = function() {
				var arr = this.getListItems(this.value);
				if(this.value.length > 0){
					this.createList(arr);
				} else {
					this.clearList();
				};	
			};
			
			field.getListItems = function(value){
				var arr = new Array();
				var src = this.suggestionText;
				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");
				for(i=0;i<arrSrc.length;i++){
					if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
						arr.push(arrSrc[i]);
					};
				};				
				return arr;
			};
			
			field.createList = function(arr){				
				this.resetList();
				var fieldRef = this;

				if(arr.length > 0) {
					for(i = 0; i < Math.min(arr.length, 10); i++) {
						li = document.createElement("li");
						a = document.createElement("a");
						a.href = "javascript:void(0);";
						a.i = i+1;
						a.innerHTML = arr[i];
						li.i = i+1;

						li.onmouseover = function() {
							navListItem(document.getElementById(id), this.i);
						};
						a.onmousedown = function(){
							var el = document.getElementById(id);
							el.selectedIndex = this.i;
							selectList(el, this.i);		
							return false;
						};					
						li.appendChild(a);
						this.listRef.setAttribute("tabindex", "-1");
						this.listRef.appendChild(li);	
					};	
					this.listRef.style.display = "block";				
				} else {
					this.clearList();
				};
			};	
			
			field.resetList = function(){
				var li = this.listRef.getElementsByTagName("li");
				var len = li.length;
				for(var i=0;i<len;i++){
					this.listRef.removeChild(li[0]);
				};
			};
			
			field.navList = function(dir){			
				this.selectedIndex += (dir == "down") ? 1 : -1;
				li = this.listRef.getElementsByTagName("li");
				if (this.selectedIndex < 1) this.selectedIndex =  li.length;
				if (this.selectedIndex > li.length) this.selectedIndex =  1;
				navListItem(this, this.selectedIndex);
			};
			
			this.navListItem = function(field, index){	
				field.selectedIndex = index;
				li = field.listRef.getElementsByTagName("li");
				for(var i=0;i<li.length;i++){
					li[i].className = (i==(field.selectedIndex-1)) ? "selected" : "";
				};
			};
			
			this.selectList = function(field, list){
				li = field.listRef.getElementsByTagName("li");	
				a = li[field.selectedIndex-1].getElementsByTagName("a")[0];
				field.value = a.innerHTML.replace("&amp;", "&");
				field.clearList();
			};			
			
		};
	};
	
	field.clearList = function(list){
		if(field.listRef){
			field.listRef.style.display = "none";
			selectedIndex = 0;
		};
	};

	this.getKeyCode = function(e){
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		return code;
	};
	
};

// script initiates on page load. 

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};