/*
 *   © Marek Mojzík
 *     22.07.2009
 */

function createPseudoSelect(id)
{
	var os = document.getElementById(id);
	var ps = document.createElement("div");
	os.parentNode.insertBefore(ps, os);
	ps.className = "pseudoselect";
	ps.appendChild(os);
	var spanArrow = document.createElement("span");
	ps.appendChild(spanArrow);
	spanArrow.className = "pseudoselect-arrow";
	var span = document.createElement("span");
	span.className = "pseudoselect-selected";
	ps.appendChild(span);
	var ul = document.createElement("ul");
	ps.appendChild(ul);
	ps.id = id;

	var highlight = null, selected = null;
	var openclose = function()
	{
		if(ps.className == "pseudoselect")
		{
			if(highlight) highlight.className = "";
			highlight = selected;
			highlight.className = "pseudoselect-highlight";

			ps.className += " pseudoselect-opened";
			document.documentElement.onmousedown = openclose;
		}
		else
		{
			ps.className = ps.className.replace(/\s+pseudoselect\-opened/, "");
			document.documentElement.onmousedown = null;
		}

	};
	ps.onclick = openclose;
	ps.onmousedown = function(e)
	{
		var event = e || window.event;
		if(event.stopPropagation) event.stopPropagation();
		event.cancelBubble = true;
	};
	for(var i = 0, o; o = os.options[i]; i++)
	{
		var li = document.createElement("li");
		ul.appendChild(li);
		li.innerHTML = o.text;
		li.option = o;
		li.index = i;
		li.onmousemove = function()
		{
			if(highlight) highlight.className = "";
			highlight = this;
			highlight.className = "pseudoselect-highlight";
		};
		li.onclick = function(e)
		{
			var event = e || window.event;
			os.selectedIndex = this.index;
			selected = this;
			span.innerHTML = selected.innerHTML;
			openclose();
			if(os.onchange) os.onchange();
			if(event.stopPropagation) event.stopPropagation();
			event.cancelBubble = true;
		};
		o.li = li;
	}
	selected = os.options[os.selectedIndex].li;
	span.innerHTML = selected.innerHTML;
}

createPseudoSelect("sort");