/*#############################################################
Name: Niceforms
Version: 0.9
Author: Lucian Slatineanu
URL: http://www.badboy.ro/

Feel free to use and modify but please provide credits.

Modified by: Basti
URL: http://www.arraystudio.com
#############################################################*/



//global variables that can be used by all the functions on this page.
var selects;
var selectText = "please select";

//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 = getSelects();

	//cycle trough the select fields
    for(var i=0; i < selects.length; i++) {

		//create and build div structure
		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');
		
		//start basti
		//var text = document.createTextNode(selectText);
		var text = document.createTextNode(selects[i].options[selects[i].selectedIndex].text);
		//end basti
		
		center.id = "mySelectText"+i;
		//button.href="javascript:showOptions("+i+")";
		selectArea.className = "selectArea";
		left.className = "left";
		right.className = "right";
		center.className = "center";
		right.appendChild(button);
		center.appendChild(text);
		selectArea.appendChild(left);
		selectArea.appendChild(right);
		selectArea.appendChild(center);
		
		//start basti
		if(document.addEventListener)
		{
			//these are for Mozilla
			eval("selectArea.addEventListener('click', function (e) { e.stopPropagation(); if(isAnyOptionVisible() != "+i+" && isAnyOptionVisible() >= 0) { showOptions(isAnyOptionVisible());} showOptions("+i+"); }, true)");
			document.addEventListener('click', function (e) {showOptions(isAnyOptionVisible());}, false);
		}
		else if(document.attachEvent)
		{
			//these are for IE
			eval("selectArea.attachEvent('onclick', function (e) { if (!e) var e = window.event; e.cancelBubble = true; if(isAnyOptionVisible() != "+i+" && isAnyOptionVisible() >= 0) { showOptions(isAnyOptionVisible());} showOptions("+i+"); } )");
			document.attachEvent('onclick', function (e) {showOptions(isAnyOptionVisible());});
		}
		//end basti
		
		//hide the select field
        selects[i].style.display='none';

		//insert select div
		selects[i].parentNode.insertBefore(selectArea, selects[i]);

		//build & place options div
		var optionsDiv = document.createElement('div');
		optionsDiv.className = "optionsDivInvisible";
		optionsDiv.id = getOptionsDivId(i);
		optionsDiv.style.left = findPosX(selectArea) + 'px';
		optionsDiv.style.top = findPosY(selectArea) + 19 + 'px';

		createOptions(selects, i, optionsDiv);

		//insert options div
		document.getElementsByTagName("body")[0].appendChild(optionsDiv);
          if(window.addEventListener){
            selects[i].addEventListener('DOMNodeInserted', updateOptionsDiv , false);
            selects[i].addEventListener('DOMNodeRemoved', removeOptionsDiv , false);
		  } else {
			
			selects[i].before = function(func, advice){
			  var oldfunc = this[func];
			  this[func] = function(){			    			    
				advice.apply(this,arguments);
				oldfunc.apply(this,arguments);
			  }
		    }
						
			
		    selects[i].before('add', function() {
		      var index = getSelectIndex(this.id);
              var optionsDiv = document.getElementById(getOptionsDivId(index));

			  var text = arguments[0].text;
			  var selectId = this.id;
			  var j = this.childElementCount == 0 ? 0 : this.childElementCount - 1;			  
			  if (j == 0) {        			  	      
			    showSelectedOption(index, text);
			  
			  }
			  var optionHolder = createOption(text, selectId, index, j);    
			  optionsDiv.appendChild(optionHolder);
		    });
			
		    selects[i].before('remove', function() {			
		      var removeIndex = getSelectIndex(this.id);
		      var optionsDiv = document.getElementById(getOptionsDivId(removeIndex));
		      optionsDiv.removeChild(optionsDiv.firstChild);
		    });
		  }
	}
}

function removeOptionsDiv(event) {
    removeIndex = getSelectIndex(this.id);
    optionsDiv = document.getElementById(getOptionsDivId(removeIndex));
    optionsDiv.removeChild(optionsDiv.firstChild);
}

function updateOptionsDiv(event) {
    
    index = getSelectIndex(this.id);
    optionsDiv = document.getElementById(getOptionsDivId(index));

    text = event.target.text;
    selectId = this.id;
    j = this.childElementCount == 0 ? 0 : this.childElementCount - 1;
    if (j == 0) {        
        showSelectedOption(index, text);
    }
    optionHolder = createOption(text, selectId, index, j);
    
    optionsDiv.appendChild(optionHolder);
}

function showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(!elem)
		{
			return;
		}
		
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}

//start basti
function isAnyOptionVisible()
{
	var g=0;
	
	while(elem = document.getElementById("optionsDiv"+g))
	{
		if(elem.className=="optionsDivVisible")
			return g;
		g++;
	}
	
	return -1;
}
//end basti

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].text);
	textVar.replaceChild(newText, textVar.childNodes[0]);*/
        showSelectedOption(selectNo, selectField.options[linkNo].text);

        var f = selectField.onchange;
        if (f != undefined) selectField.onchange();
        //if (selectField.onchange != undefined) selectField.onchange();
}

function showSelectedOption(selectNo, text) {
    //show selected option
    textVar = document.getElementById("mySelectText"+selectNo);
    var newText = document.createTextNode(text);
    textVar.replaceChild(newText, textVar.childNodes[0]);
}

function findPosY(obj) {
	var posTop = 0;
	while (obj.offsetParent) {
		posTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop;
}
function findPosX(obj) {
	var posLeft = 0;
	while (obj.offsetParent) {
		posLeft += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft;
}

function getSelects() {
    return document.getElementsByTagName('select');
}

function getOptionsDivId(i) {
    return "optionsDiv"+i;
}

function getSelectIndex(id) {
    selects = getSelects();
    //cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
        if (selects[i].id == id) return i;
    }
    // no deberia pasar
    return -1;
}

function createOptions(select, i, optionsDiv) {
    //get select's options and add to options div
    for(var j=0; j < selects[i].options.length; j++) {
        text = selects[i].options[j].text;
        selectId = selects[i].id;
        optionHolder = createOption(text, selectId, i, j);
        optionsDiv.appendChild(optionHolder);
    }
}

function createOption(text, selectId, i, j){
    var optionHolder = document.createElement('p');
    var optionLink = document.createElement('a');
    var optionTxt = document.createTextNode(text);

    //start basti
    //optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+");";
    optionLink.href = "javascript:selectMe('"+selectId+"',"+j+","+i+");";
    //end basti

    optionLink.appendChild(optionTxt);
    optionHolder.appendChild(optionLink);
    return optionHolder;
}

function refreshSelectOptions() {
    selects = getSelects();
    //cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
        optionsDiv = document.getElementById(getOptionsDivId(i));
        while (optionsDiv.childElementCount > 0) optionsDiv.removeChild(optionsDiv.firstElementChild);
        createOptions(selects, i, optionsDiv);
    }
}

if(window.addEventListener){
  window.onload = init;
}