/*
	Class used to replace a normal HTML select menu with the custom menu
	that allows the user to filter the options
*/
function filterSelect(selectElement)
{	
	if(!selectElement.options)
		return;
	
	this.defaultText = "start typing to narrow results";
	this.options = this.getOptions(selectElement);
	this.replaceNormalSelect(selectElement);
	this.filterOptions("");
}

filterSelect.prototype = {
	getOptions: function(selectElement)
	{
		var options = new Array;
		
		for(var c = 0; c <= selectElement.options.length; c++)
		{
			var op = selectElement.options[c];
			if(!op)
				continue;	
		
			options.push({text:op.text,value:op.value});
		}
		return options;
	},
	
	setDefaultText: function(inputField)
	{
		inputField.value = this.defaultText;
		inputField.style.color = 'gray';
	},
	
	/*
		Create the text field with the "clear filters" link inside it
	*/
	makeInputWithClearLink: function()
	{
		var instance = this;
		
		var inputField = document.createElement("input");
		inputField.type = "text";
		inputField.maxLength=31;
		inputField.tabIndex = 9;
		
		//we want the event handler to have access to this object, but it will be called in the scope of the
		//field it's attached to. So we make an anonymous function that inherits this scope
		//and pass this object into the handler. (python style)
		inputField.onkeyup = function()
		{
			//operating scope when this is called is the input fields event handler
			instance.filterOptions(this.value,instance);
		}
		
		inputField.onfocus = function()
		{
			if(this.value == instance.defaultText)
				this.value = "";
				
			this.style.color = 'black';
		}
		
		inputField.onblur = function()
		{
			if(this.value == '')
			{
				instance.setDefaultText(this);
			}
		}
		
		this.setDefaultText(inputField);
		
		this.inputField = inputField;
		
		var clearLink = document.createElement("a");
		clearLink.href="javascript:;";
		clearLink.innerHTML = "<img src='/g_img/common/clear_search.gif'>";
		clearLink.onclick=function()
		{
			instance.inputField.value = "";
			instance.filterOptions("",instance);
			instance.inputField.focus();
		}
		this.clearLink = clearLink;
		
		var inputDiv = document.createElement("div");
		inputDiv.className = 'pseudoTextInput';
		inputDiv.appendChild(inputField);
		inputDiv.appendChild(clearLink);
		
		return inputDiv;
	},
	
	/*
		Replace an HTML select element with the compound filterable menu widget
	*/
	replaceNormalSelect: function(selectElement)
	{
		this.selectElement = document.createElement("select");
		this.selectElement.name = selectElement.name;
		this.selectElement.size = 10;
		this.selectElement.tabIndex = 10;
		
		var containerDiv = document.createElement("div");
		containerDiv.className = "filterSelect";
		
		containerDiv.appendChild(this.makeInputWithClearLink());
		containerDiv.appendChild(this.selectElement);
	
		selectElement.parentNode.replaceChild(containerDiv,selectElement);
	},
	
	parseSearchTerms: function(searchString)
	{
		searchString=searchString.replace(/^ +(.*) +$/,"$1"); //trim
		return searchString.toLowerCase().split(" ");
	},
	
	/*
		This method is made a bit odd because it's registered as an event handler
		so "this" may refer to the input field, not this object.
		
		Since we're looking for any number of terms occuring anywhere in the options strings
		we just brute-force the search.
	*/
	filterOptions: function(searchString,self)
	{
		if(!self)
			self = this;
			
		if(searchString.length > 0)
			self.clearLink.style.display = 'block';
		else
			self.clearLink.style.display = 'none';
		
		var terms = self.parseSearchTerms(searchString);
		self.selectElement.options.length = 0; 
		
		for(var c in self.options)
		{			
			if(!self.options[c].text)
				continue;	
			
			var label = self.options[c].text;
			var value = self.options[c].value;
			var match = 0;
			
			if(searchString.length > 0)
			{
				for(var n = 0; n < terms.length; n++)
				{
					if(!label.toLowerCase().match(terms[n]) || value == '')
						break;
						
					match++;
				}
			}
			
			if(match == terms.length || searchString.length == 0) //if every term matches
			{		
				var newOption = document.createElement('option');
				newOption.value = value;
				newOption.innerHTML = label;
				self.selectElement.appendChild(newOption);
			}
		}
	
		
	}
};