var SexySelect_allSelects = new Object();
var SexySelect_currOpenID = null;

function SexySelect_New(id)
{
	var ss = new SexySelect(id);
	
	SexySelect_allSelects[id] = ss;
	
	return ss;
}

function SexySelect(id)
{
	var sel = document.getElementById(id);
	
	if (!sel.selectedIndex){
		sel.selectedIndex = 0;
	}
	
	// main container + override onchange handler
	
	var sexy = document.createElement("div");

	sexy.className = "sexySelect";
	
	if(sel.onchange)
	{
		sexy.originalOnchange = sel.onchange;
	}
	
	sel.onchange = new Function("SexySelect_onChange('" + id + "', true)");

	sel.sexySelect = sexy;

	// current value (text)
	
	var currVal = document.createElement("div");
	currVal.className = "selected";
	
	currVal.onclick = new Function("SexySelect_onDropDown('" + id + "')");
	currVal.innerHTML = sel.options[sel.selectedIndex].text;

	sexy.currValueElement = currVal;

	sexy.appendChild(currVal);
	
	// Options Container
	
	var optsDiv = document.createElement("div");
	optsDiv.className = "options-container";
	
	optsDiv.style.opacity = "0";
	optsDiv.style.visibility = "hidden";
	
	// options
	
	var opts = document.createElement("div");

	opts.className = "options";
	
	for(var i = 0; i < sel.options.length; i++)
	{
		var opt = document.createElement("div");
		
		opt.setAttribute("id", id + "_" + i);
		
		opt.innerHTML = sel.options[i].text;
		
		opt.onclick = new Function("SexySelect_onClick('" + id + "', " + i + ")");
		opt.onmouseover = new Function("SexySelect_onOptionMouseOver('" + id + "', " + i + ")");
		opt.onmouseout = new Function("SexySelect_onOptionMouseOut('" + id + "', " + i + ")");
		
		opts.appendChild(opt);
	}
	
	optsDiv.appendChild(opts);
	
	sexy.optionsElement = optsDiv;

	sexy.appendChild(optsDiv);
	
	var shadowRight = document.createElement("div");
	shadowRight.className = "shad-right";
	var shadowLeft = document.createElement("div");
	shadowLeft.className = "shad-left";
	
	shadowRight.appendChild(shadowLeft);
	
	optsDiv.appendChild(shadowRight);
	sexy.optionsElement.shadow = shadowRight;

	// insert before real <select>, real select needs to have display:none inline style
	
	sel.parentNode.insertBefore(sexy, sel);
}

function SexySelect_onDropDown(id)
{
	if(SexySelect_currOpenID != null && SexySelect_currOpenID != id)
	{
		var sel = document.getElementById(SexySelect_currOpenID);
		
		sel.sexySelect.optionsElement.shadow.style.visibility = "hidden";
		new Fx.Tween($(sel.sexySelect.optionsElement), {duration:80}).start('opacity','0');
	}

	var sel = document.getElementById(id);
	var opts = sel.sexySelect.optionsElement;
	var optsShadow = sel.sexySelect.optionsElement.shadow;
	var optsFx = new Fx.Tween(opts, {duration:80}); //MooTools object
	
	if(opts.style.visibility == "hidden")
	{
		optsShadow.style.visibility = "hidden";
		optsFx.start('opacity','0','1').chain(
			function(){ 
				$(opts).removeProperty('style'); // IE7 & 8 needs the 'filter' style removed to render text in ClearType
				opts.style.visibility = "visible";
				optsShadow.style.visibility = "visible";
				}
		);
		SexySelect_currOpenID = id;
	}
	else
	{
		optsShadow.style.visibility = "hidden";
		optsFx.start('opacity','1','0');
		SexySelect_currOpenID = null;
	}
}

function SexySelect_onChange(id, stealth)
{
	var sel = document.getElementById(id);
	
	SexySelect_onClick(id, sel.selectedIndex, stealth);
}

function SexySelect_onOptionMouseOver(id, index)
{
	var sel = document.getElementById(id + "_" + index);
	
	sel.className = "mouseOver";
}

function SexySelect_onOptionMouseOut(id, index)
{
	var sel = document.getElementById(id + "_" + index);
	
	sel.className = "mouseOut";
}

function SexySelect_onClick(id, index, stealth)
{
	var sel = document.getElementById(id);
	
	sel.selectedIndex = index;
	
	sel.sexySelect.currValueElement.innerHTML = sel.options[index].text;
	
	if(!stealth) {SexySelect_onDropDown(id);}
	
	if(sel.sexySelect.originalOnchange)
	{
		sel.sexySelect.originalOnchange();
	}
}