var SelectBox = function()
{
	this.initialize.apply(this, arguments);
};

SelectBox.prototype =
{
	initialize: function(id, inputName, items)
	{
		this.node			= document.getElementById(id);
		this.textInput		= document.createElement('input');
		this.hiddenInput	= document.createElement('input');
		this.buttonBox		= document.createElement('span');
		this.list			= this.node.getElementsByTagName('ul')[0];
		
		this.textInput.setAttribute('readOnly', true);
		this.hiddenInput.type = 'hidden';
		this.hiddenInput.name = inputName;
		
		this.node.appendChild(this.textInput);
		this.node.appendChild(this.hiddenInput);
		this.node.appendChild(this.buttonBox);
		
		if (!this.list)
		{
			this.list = document.createElement('ul');
			this.node.appendChild(this.list);
		}
		
		var self = this;
		
		this.addEventListener(this.buttonBox, 'click', function()
		{
			self.textInput.focus();
		});
		
		this.addEventListener(this.textInput, 'focus', function()
		{
			self.activate();
		});
		
		this.addEventListener(this.textInput, 'blur', function()
		{
			self.inactivate();
		});
		
		this.setItems(items);
	},
	
	setItems: function(items, clear)
	{
		if (!(items instanceof Array))
			items = this.list.getElementsByTagName('li') || [];
		
		if (clear)
		{
			this.selectedIndex	= null;
			this.list.innerHTML	= '';
		}
		
		var self = this;
		var selectedIndex = 0;
		
		for (var i = 0, l = items.length; i < l; i++)
		{
			var item = items[i];
			
			if (typeof(item) != 'object')
				item = {text: item, value: item};
			
			if (!(item.tagName && item.tagName.toLowerCase() == 'li'))
			{
				var li = document.createElement('li');
				
				li[window.ActiveXObject ? 'innerText' : 'textContent'] = item.text;
				li.setAttribute('value', typeof(item.value) == 'undefined' ? item.text : item.value);
				
				if (item.selected)
					li.setAttribute('selected', true);
				
				this.list.appendChild(li);
				item = items[i] = li;
			}
			
			item.index = i;
			
			if (item.getAttribute('selected', 0) != null)
				selectedIndex = i;
			
			this.addEventListener(item, 'mouseover', (function(item)
			{
				return function() { item.className = 'active'; };
			})(item));
			
			this.addEventListener(item, 'mouseout', (function(item)
			{
				return function() { item.className = ''; };
			})(item));
			
			this.addEventListener(item, 'mousedown', (function(item)
			{
				return function()
				{
					self.select(item.index);
					self.inactivate();
				};
			})(item));
		}
		
		this.items = items;
		this.select(selectedIndex);
	},
	
	getItems: function()
	{
		var r = [];
		items = this.list.getElementsByTagName('li');
		
		if (items)
		{
			for (var i = 0, l = items.length; i < l; i++)
			{
				var item	= items[i];
				var obj		= {};
				
				obj.text		= item[window.ActiveXObject ? 'innerText' : 'textContent'];
				obj.value		= item.getAttribute('value', 0);
				obj.selected	= item.getAttribute('selected', 0) != null;
				
				r[i] = obj;
			}
		}
		
		return r;
	},
	
	activate: function()
	{
		this.node.className = 'selectBox selectBoxActive';
	},
	
	inactivate: function()
	{
		this.node.className = 'selectBox';
	},
	
	select: function(index)
	{
		var item = this.items[index];
		
		if (item && index !== this.selectedIndex)
		{
			this.selectedIndex	= index;
			this.selectedItem	= item;
			
			if (typeof(this.originalSelectedIndex) == 'undefined')
				this.originalSelectedIndex = this.selectedIndex;
			
			this.textInput.value	= item[window.ActiveXObject ? 'innerText' : 'textContent'];
			this.hiddenInput.value	= item.getAttribute('value', 0);
			
			if (window.ActiveXObject)
				this.textInput.fireEvent('onchange');
			else
			{
				var event = document.createEvent('HTMLEvents');
				event.initEvent('change', false, false);
				this.textInput.dispatchEvent(event);
			}
		}
	},
	
	reset: function()
	{
		this.selectedIndex = null;
		this.select(this.originalSelectedIndex);
	},
	
	addEventListener: function(obj, name, listener)
	{
		if (window.ActiveXObject)
			obj.attachEvent('on' + name, listener);
		else
			obj.addEventListener(name, listener, false);
	}
};