function DropDownWrapper(parentElement)
{
	this.ParentElement = parentElement;
	this.ParentContainer = this.ParentElement.parentElement;
	this.SelectElement = this.ParentElement;

	this.ShowPopupMenu = function()
	{
		for (var i = 0; i < this.SelectElement.options.length; i++)
		{
			if (this.InputElement.value == "" || this.SelectElement.options[i].label.toLowerCase().indexOf(this.InputElement.value.toLowerCase()) != -1)
			{
				System.ClassList.Add(this.SelectElement.options[i].li, "uwt-visible");
			}
			else
			{
				System.ClassList.Remove(this.SelectElement.options[i].li, "uwt-visible");
			}
		}
		System.ClassList.Add(this.MenuElement, "uwt-visible");
	};
	this.HidePopupMenu = function()
	{
		System.ClassList.Remove(this.MenuElement, "uwt-visible");
	};

	var div = document.createElement("div");
	div.className = "uwt-combobox";
	div.ni = this;
	div.tabIndex = 0;

	this.ParentElement.replaceWith(div);
	div.appendChild(this.SelectElement);

	var input = document.createElement("input");
	input.id = this.SelectElement.id + "_input";
	
	input.ni = this;
	input.type = "text";
	input.addEventListener("focus", function()
	{
		this.ni.InputElement._prev_value = this.ni.InputElement.value;
		this.ni.InputElement.value = "";
		this.ni.ShowPopupMenu();
	});
	input.addEventListener("blur", function()
	{
		this.ni.InputElement.value = this.ni.InputElement._prev_value;
		if (!this.ni.SelectElement.hasAttribute("multiple"))
		{
			this.ni.HidePopupMenu();
		}
	});
	input.addEventListener("keydown", function(e)
	{
		if (e.keyCode == KeyboardKeys.Enter)
		{
			this.__accepted = true;
			//this.ni.SetValue(this.ni.GetHighlightedOption().value);
			this.ni.HidePopupMenu();
			this.parentElement.focus();
			
			e.preventDefault();
			e.stopPropagation();
			return false;
		}
	});
	input.addEventListener("keyup", function(e)
	{
		if (this.__accepted == true)
		{
			this.__accepted = false;

			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		if (e.keyCode == KeyboardKeys.Escape)
		{
			this.ni.HidePopupMenu();
		}
		else
		{
			this.ni.ShowPopupMenu();
		}
	});
	div.appendChild(input);
	this.InputElement = input;

	var ul = document.createElement("ul");
	this.MenuElement = ul;
	ul.className = "uwt-menu uwt-popup";
	for (var i = 0; i < this.SelectElement.options.length; i++)
	{
		var li = document.createElement("li");
		li.className = "uwt-menu-item uwt-menu-item-command uwt-visible";
		this.SelectElement.options[i].li = li;

		var a = document.createElement("a");
		a.href = "#";
		
		var spanTitle = document.createElement("span");
		spanTitle.className = "uwt-title";
		spanTitle.innerHTML = this.SelectElement.options[i].label;
		a.appendChild(spanTitle);

		var spanDescription = document.createElement("span");
		spanDescription.className = "uwt-description";
		spanDescription.innerHTML = "";
		a.appendChild(spanDescription);

		if (this.SelectElement.options[i].hasAttribute("data-description"))
		{
			spanDescription.innerHTML = this.SelectElement.options[i].getAttribute("data-description");
		}
		a.option = this.SelectElement.options[i];
		a.ni = this;
		a.addEventListener("click", function()
		{
			this.ni.InputElement.value = this.option.label;

			if (this.ni.SelectElement.hasAttribute("multiple"))
			{
			}
			else
			{
				this.ni.SelectElement.value = this.option.value;

				for (var j = 0; j < this.ni.MenuElement.children.length; j++)
				{
					if (this.ni.MenuElement.children[j].children[0] == this)
					{
						System.ClassList.Add(this.ni.MenuElement.children[j], "uwt-selected");
					}
					else
					{
						System.ClassList.Remove(this.ni.MenuElement.children[j], "uwt-selected");
					}
				}
				System.ClassList.Remove(this.ni.MenuElement, "uwt-visible");
			}
		});
		li.appendChild(a);

	
		if (i == this.SelectElement.selectedIndex)
		{
			this.InputElement.value = a.option.label;
			System.ClassList.Add(li, "uwt-selected");
		}

		ul.appendChild(li);
	}
	div.appendChild(ul);

	this.ParentElement.style.display = "none";
}

function DropDown(id)
{
	this.ID = id;
	this.IsOpen = false;
	
	var Container = document.getElementById("DropDown_" + id);
	Container.Parent = this;
	if (Container.className == "DropDown SelectionRequired")
	{
		Container.onmousedown = function(e)
		{
			if (e.button == 0)
			{
				// open the dropdown
				if (this.Parent.IsOpen)
				{
					this.Parent.Close();
				}
				else
				{
					this.Parent.Open();
				}
			}
			e.preventDefault();
			e.stopPropagation();
		};
		Container.onmouseup = function(e)
		{
			e.preventDefault();
			e.stopPropagation();
			return false;
		};
		Container.oncontextmenu = function(e)
		{
			e.preventDefault();
			e.stopPropagation();
			return false;
		};
	}
	
	var Button = document.getElementById("DropDown_" + id + "_Button");
	Button.Parent = this;
	Button.onmousedown = function(e)
	{
		if (e.button == 0)
		{
			// open the dropdown
			if (this.Parent.IsOpen)
			{
				this.Parent.Close();
			}
			else
			{
				this.Parent.Open();
			}
		}	
		e.preventDefault();
		e.stopPropagation();
	};
	Button.onmouseup = function(e)
	{
		e.preventDefault();
		e.stopPropagation();
		return false;
	};
	
	var ItemList_Items = document.getElementById("DropDown_" + id + "_ItemList_Items");
	ItemList_Items.Parent = this;
	ItemList_Items.onmousedown = function(e)
	{
		e.preventDefault();
		e.stopPropagation();
	};
	ItemList_Items.oncontextmenu = function(e)
	{
		e.preventDefault();
		e.stopPropagation();
		return false;
	};
	
	var Search = document.getElementById("DropDown_" + id + "_ItemList_Search");
	Search.onmousedown = function(e)
	{
		// e.preventDefault();
		e.stopPropagation();
	};
	
	this.Select = function(index)
	{
		// Selects the item with the specified index.
		var dd_Text = document.getElementById("DropDown_" + this.ID + "_Text");
		var dd_Input = document.getElementById("DropDown_" + this.ID + "_Input");
		
		var menuItemsContainer = document.getElementById("DropDown_" + this.ID + "_ItemList_Items");
		var menuItems = menuItemsContainer.getElementsByTagName("A");
		var menuItem = menuItems[index];
		
		if (dd_Text)
		{
			dd_Text.innerHTML = menuItem.innerHTML;
		}
		else if (dd_Input)
		{
			dd_Input.value = menuItem.innerHTML;
			dd_Input.focus();
			dd_Input.select();
		}
	};
	this.Open = function()
	{
		DropDown.CloseAll();
		
		var dd = document.getElementById("DropDown_" + this.ID);
		var dd_Button = document.getElementById("DropDown_" + this.ID + "_Button");
		var dd_DropDown = document.getElementById("DropDown_" + this.ID + "_ItemList");
		var dd_ItemList_Search = document.getElementById("DropDown_" + this.ID + "_ItemList_Search");
		var dd_Text = document.getElementById("DropDown_" + this.ID + "_Text");
		var dd_Input = document.getElementById("DropDown_" + this.ID + "_Input");
		
		if (dd.className == "DropDown SelectionRequired")
		{
			dd.className = "DropDown SelectionRequired Opened";
		}
		else if (dd.className == "DropDown")
		{
			dd.className = "DropDown Opened";
		}
		
		dd_DropDown.style.width = dd.offsetWidth + "px";
		
		dd_Button.className = "Button Pressed";
		
		dd_ItemList_Search.focus();
		dd_ItemList_Search.value = "";
		this.UpdateFilter();
		
		dd_DropDown.style.display = "block";
		
		this.IsOpen = true;
		
		if (dd_Input) dd_Input.select();
		/*
		if (dd_Input)
		{
			dd_ItemList_Search.value = dd_Input.value;
		}
		else if (dd_Text)
		{
			dd_ItemList_Search.value = dd_Text.innerHTML;
		}
		dd_ItemList_Search.select();
		*/
	};
	this.Close = function()
	{
		var dd = document.getElementById("DropDown_" + this.ID);
		var dd_Button = document.getElementById("DropDown_" + this.ID + "_Button");
		var dd_DropDown = document.getElementById("DropDown_" + this.ID + "_ItemList");
		
		if (dd.className == "DropDown SelectionRequired Opened")
		{
			dd.className = "DropDown SelectionRequired";
		}
		else if (dd.className == "DropDown Opened")
		{
			dd.className = "DropDown";
		}
		
		dd_DropDown.style.width = dd.offsetWidth;
		
		dd_Button.className = "Button";
		
		dd_DropDown.style.display = "none";
		
		this.IsOpen = false;
	};
	
	// go through and initialize all of the links in the menu items, for menu items that are already created
	var menuItemsContainer = document.getElementById("DropDown_" + this.ID + "_ItemList_Items");
	var menuItems = menuItemsContainer.getElementsByTagName("A");
	for (var i = 0; i < menuItems.length; i++)
	{
		menuItems[i].Index = i;
		menuItems[i].Parent = this;
		menuItems[i].onmousedown = function(e)
		{
			e.preventDefault();
			e.stopPropagation();
			return false;
		};
		menuItems[i].onmouseup = function(e)
		{
			if (e.button == 0)
			{
				this.Parent.Select(this.Index);
				this.Parent.Close();
			}
			e.preventDefault();
			e.stopPropagation();
			return false;
		};
		menuItems[i].oncontextmenu = function(e)
		{
			e.preventDefault();
			e.stopPropagation();
			return false;
		};
	}
	
	this.UpdateFilter = function()
	{
		var dd_Search = document.getElementById("DropDown_" + this.ID + "_ItemList_Search");
		// filter the text in the text box
		var menuItemsContainer = document.getElementById("DropDown_" + this.ID + "_ItemList_Items");
		var menuItems = menuItemsContainer.getElementsByTagName("A");
		for (var i = 0; i < menuItems.length; i++)
		{
			if (dd_Search.value == "" || menuItems[i].innerHTML.toLowerCase().indexOf(dd_Search.value.toLowerCase()) != -1)
			{
				menuItems[i].style.display = "block";
			}
			else
			{
				menuItems[i].style.display = "none";
			}
		}
	};
	
	// set up the search text box
	var dd_Search = document.getElementById("DropDown_" + this.ID + "_ItemList_Search");
	dd_Search.Parent = this;
	dd_Search.onkeyup = function()
	{
		this.Parent.UpdateFilter();
	};
}
DropDown.CloseAll = function()
{
	var dropdowns = document.getElementsByClassName("DropDown");
	for (var i = 0; i < dropdowns.length; i++)
	{
		dropdowns[i].Parent.Close();
	}
};

// add a global hook to close all the dropdown lists when the mouse button is pressed
document.addEventListener("mousedown", function(e)
{
	DropDown.CloseAll();
});

window.addEventListener("load", function(e)
{
	/*
	// find DropDownButtons to trigger
	var dropdowns = document.getElementsByClassName("DropDownButton");
	for (var i = 0; i < dropdowns.length; i++)
	{
		(function(index)
		{
			dropdowns[index].addEventListener("mousedown", function(ee)
			{
				if (dropdowns[index].className == "DropDownButton")
				{
					dropdowns[index].className = "DropDownButton Opened";
				}
				else if (dropdowns[index].className == "DropDownButton Opened")
				{
					dropdowns[index].className = "DropDownButton";
				}
			});
		})(i);
	}
	
	*/
	// retrofit SELECT elements
	var selects = document.getElementsByTagName("SELECT");
	for (var i = 0; i < selects.length; i++)
	{
		selects[i].NativeObject = new DropDownWrapper(selects[i]);
	}
});