/*#############################################################
Name: Niceforms
Version: 0.9
Author: Lucian Slatineanu
URL: http://www.badboy.ro/

Feel free to use and modify but please provide credits.
#############################################################*/

//global variables that can be used by all the functions on this page.
var selects;
var selectText = "- selecione -";

//this function runs when the page is loaded so put all your other onload stuff in here too.
function init() {
	replaceSelects();
}

function replaceSelects() {
	//get all the select fields on the page
    selects = document.getElementsByTagName('select');
	
	//cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
		
		//create and build div structure
		var selectWrapper = document.createElement('div');
		var selectArea = document.createElement('div');
		var left = document.createElement('div');
		var right = document.createElement('div');
		var center = document.createElement('div');
		var button = document.createElement('a');
		var textButton = document.createElement('a');
		var text = document.createTextNode(selectText);
		//selectArea.onmouseup = function (){document.onmouseup=closeDropDown(i)};
		textButton.id = "mySelectText"+i;
		jsLink = "javascript:showOptions("+i+")";
		button.href=jsLink;
		button.className="block";
		textButton.href=jsLink;
		selectArea.className = "selectArea";
		selectWrapper.className = "selectWrapper";
		left.className = "left";
		right.className = "right";
		center.className = "center";
		textButton.appendChild(text);
		center.appendChild(textButton);
		selectArea.appendChild(button);		
		selectArea.appendChild(left);
		selectArea.appendChild(right);
		selectArea.appendChild(center);
		selectWrapper.appendChild(selectArea);
		
		//hide the select field
        selects[i].style.display='none'; 
		
		//insert select div
		selects[i].parentNode.insertBefore(selectWrapper, selects[i]);
		
		//build & place options div
		var optionsDiv = document.createElement('ul');
		optionsDiv.className = "optionsDivInvisible";
		optionsDiv.id = "optionsDiv"+i;
		
		//get select's options and add to options div
		for(var j=0; j < selects[i].options.length; j++) {
			var optionHolder = document.createElement('li');
			var optionLink = document.createElement('a');
			var optionTxt = document.createTextNode(selects[i].options[j].text);
			optionLink.href = "javascript:selectMe('"+selects[i].id+"',"+j+","+i+");";
			optionLink.appendChild(optionTxt);
			optionHolder.appendChild(optionLink);
			optionsDiv.appendChild(optionHolder);
		}
		
		//insert options div
		selectWrapper.appendChild(optionsDiv);
	}
}

function showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
		document.onmouseup=function(){closeDropDown(g)};
}

function selectMe(selectFieldId,linkNo,selectNo) {
	//feed selected option to the actual select field
	selectField = document.getElementById(selectFieldId);
	for(var k = 0; k < selectField.options.length; k++) {
		if(k==linkNo) {
			selectField.options[k].selected = "selected";
		}
		else {
			selectField.options[k].selected = "";
		}
	}
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].value);
	textVar.replaceChild(newText, textVar.childNodes[0]);
}

function closeDropDown(i) {
	elem = document.getElementById("optionsDiv"+i);
	elem.className = "optionsDivInvisible";
}

window.onload = init;