/*************************
 * Handy way to make <select> elements searchable in realtime.
 * Just add the "searchable" attribute to your <select> element
 * and this will do the work
 */

// list of companion input fields created for each searchable <select>
var selsearch_count = 0;

// hook into window.onload
var selsearch_oldonload = window.onload;
window.onload = selsearch_onload;

// check document for searchable <select> objects
function selsearch_onload() {
	var sels = document.getElementsByTagName('select');
	for (var i=0; i<sels.length; i++) {
		var sel=sels[i];
		if (undefined==sel.attributes.searchable) continue;
		
		// save old blur/focus events and hook in the new ones
		sel._oldonfocus = sel.onfocus;
		sel._oldonblur	= sel.onblur;
		sel._oldonchange= sel.onchange;
		sel.onfocus		= function() { selsearch_focus(this); }
		sel.onblur		= function() { selsearch_blur(this); if (this._oldonblur) this._oldonblur(); else return true; }
		sel.onchange	= function() { selsearch_blur(this); if (this._oldonchange) this._oldonchange(); else return true; }

		// create the new search text field element
		var id = "selsearchfield_"+(++selsearch_count);
		var field = document.createElement('input');
		field.id					= id;
		field.style.position		= 'absolute';
		field.style.visibility		= 'hidden';
		field.style.border			= '1px solid #000';
		field.style.backgroundColor	= '#D0D0D0';
		field.onfocus				= selsearchfield_focus;
		field.onblur				= selsearchfield_blur;
		field.onkeyup				= selsearchfield_key;
		field.onmouseover			= function(){this.focus();}
		field._selectref			= sel;
		field._hidetimer			= false;
		sel._searchfield			= field;
		
		document.body.appendChild(field);
	}

	// chain to previous handler
	if (selsearch_oldonload) selsearch_oldonload();
}

// get the position (relative to document.body) of an element
function getposition(ref) {
	var xy=new Object();
	var x=0, y=0;
	var p=ref; do {
		if (p==document.body) break; x+=p.offsetLeft; y+=p.offsetTop;
	} while (p=p.offsetParent);
	xy.x=x; xy.y=y;
	return xy;
}

// display the companion search field and position it above its select object
function selsearch_focus(ref) {
	if (undefined==ref._searchfield) return;
	var field = ref._searchfield;
	var xy = getposition(ref);
	xy.y -= field.offsetHeight+1;
	field.style.left		= xy.x+'px';
	field.style.top			= xy.y+'px';
	field.style.visibility	= 'visible';
	field.style.width		= ref.offsetWidth+'px';
	field.value				= 'Search';
	
	if (ref._oldonfocus) return ref._oldonfocus();
	else return true;
}

// hide the companion search field
function selsearch_blur(ref) {
	if (undefined==ref._searchfield) return;
	var field = ref._searchfield;
	if (field._hidetimer) clearTimeout(field._hidetimer);
	field._hidetimer = setTimeout('document.getElementById("'+field.id+'").style.visibility = "hidden";', 50);

	return true;
}

function selsearchfield_focus() {
	if (this._hidetimer) { clearTimeout(this._hidetimer); this._hidetimer=false; }
	if (this.value=="Search") { this.value=""; return; }
	this.select();
}
function selsearchfield_blur() {
	if (this.value=="") this.value="Search";
	this.style.visibility = "hidden";
	this._selectref.onchange();
}
function selsearchfield_key(event) {
	ref=this._selectref;

	var key=0;
	if (window.event) key=window.event.keyCode; else if (event.which) key=event.which;
	if (key==27 || key==13) { this.blur(); return; }

	var lwr=this.value.toLowerCase();
	if (lwr.length<2) return;
	
	var i,len=ref.length;
	
	for (i=0; i<len; i++) {
		var opt=ref[i].innerHTML.toLowerCase();
		if (opt.indexOf(lwr)>=0) break;
	}
	if (i>=len) return;
	ref.selectedIndex = i;
}