/*#############################################################

Name: Niceforms

Version: 0.9

Author: Lucian Slatineanu

Author of modification : Antoine Ughetto / URL : http://blog.makemepulse.com



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 = new Array();

var inputs;

var radios = new Array();

var checkboxes = new Array();

var hovers = new Array();

var buttons = new Array();

var selectText = "please select";



//Theme Variables - edit these to match your theme

var selectRightSideWidth = 21;

var selectLeftSideWidth = 8;

var selectAreaHeight = 21;

var selectAreaOptionsOverlap = 2;

var imagesPath = "images/";



//this function runs when the page is loaded so put all your other onload stuff in here too.

function init_niceforms() {

	

	//check if styles are enabled and only then start replacing elements

	if(findPosX(document.getElementById('stylesheetTest')) == -999) {

		replaceSelects();

		replaceRadios();

		replaceCheckboxes();

	}

	hoverEffects();

	buttonHovers();

}



function replaceRadios() {

	//get all the radio buttons on the page

	var inputs = document.getElementsByTagName('input');

	var j = 0;

	for(var i=0; i < inputs.length; i++) {

		if(inputs[i].type=='radio') {

			radios[j] = inputs[i];

			++j;

		}

	}

	

	//cycle through the radio inputs

	for(var i=0; i <radios.length; i++) {

		

		//make them transparent

		radios[i].className = "transparent";

		

		//get their position

		var x = findPosX(radios[i]);

		var y = findPosY(radios[i]);

		

		//build new div

		var radioArea = document.createElement('div');

		if(radios[i].checked) {radios[i].nextSibling.className = "chosen"; radioArea.className = "radioAreaChecked";}

		else if(!radios[i].checked) {radioArea.className = "radioAreaUnchecked";}

		radioArea.style.left = x + 'px';

		radioArea.style.top = y + 'px';

		radioArea.id = 'myRadio'+i;

		radios[i].onclick = new Function('checkRadio('+i+')');

		radioArea.onclick = new Function('checkRadioByDiv('+i+')');



		//insert div

		document.getElementsByTagName("body")[0].appendChild(radioArea);

	}

}



function replaceCheckboxes() {

	//get all the checkboxes on the page

	var inputs = document.getElementsByTagName('input');

	var j = 0;

	for (var i2=0; i2 < inputs.length; i2++) {

		if(inputs[i2].type=='checkbox') {

			checkboxes[j] = inputs[i2];

			++j;

		}

	}



	//cycle through the checkboxes

	for(var i2=0; i2 < checkboxes.length; i2++) {



		//make them transparent

		checkboxes[i2].className = "transparent";



		//get their position

		var x = findPosX(checkboxes[i2]);

		var y = findPosY(checkboxes[i2]);



		//build new div

		var checkboxArea = document.createElement('div');

		if(checkboxes[i2].checked) {checkboxes[i2].nextSibling.className = "chosen"; checkboxArea.className = "checkboxAreaChecked";}

		else if(!checkboxes[i2].checked) {checkboxArea.className = "checkboxAreaUnchecked";}

		checkboxArea.style.left = x + 'px';

		checkboxArea.style.top = y + 'px';

		checkboxArea.id = 'myCheck'+i2;

		checkboxes[i2].onclick = new Function('checkCheck('+i2+')');

		checkboxArea.onclick = new Function('checkCheckByDiv('+i2+')');



		//insert div

		document.getElementsByTagName("body")[0].appendChild(checkboxArea);

	}

}



function replaceSelects() {

	selects = document.getElementsByTagName("select");

	for(var q = 0; q < selects.length; q++) {

		//create and build div structure



		if(!document.getElementById("mySelectText"+q)){

			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 text = document.createTextNode(selectText);

			center.id = "mySelectText"+q;

			//get width and height

			var vParameter = selects[q].className.split("_");

			

			var selectHeight = 160;			

			var selectWidth = 160;

			

			if(selects[q].getAttribute("width", false) != null){

				selectWidth = parseInt(selects[q].getAttribute("width", false))

			}

			

			if(selects[q].getAttribute("height", false) != null){

				selectWidth = parseInt(selects[q].getAttribute("height", false));

			}

			

			var ismultiple = false;		

				

			

			if (window.attachEvent) {

				if(selects[q].getAttribute("multiple", false) != false ){		

					var ismultiple = true;

				}

			}else{

				if(selects[q].getAttribute("multiple", false) != null){

					var ismultiple = true;

				}

			}

			var selectJavascript = false;

			if(selects[q].getAttribute("js_action", false) != null){

					selectJavascript = selects[q].getAttribute("js_action", false)

			}

			

			center.style.width = selectWidth - 10 + 'px';

			selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';

			button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';

			button.style.marginLeft = - selectWidth - selectLeftSideWidth + 'px';

			button.href = "javascript:showOptions("+q+")";

			button.onkeydown = selectEvent;

			button.className = "selectButton"; //class used to check for mouseover

			selectArea.className = "selectArea";

			selectArea.id = "sarea"+q;

			left.className = "left";

			right.className = "right";

			center.className = "center";

			right.appendChild(button);

			center.appendChild(text);

			selectArea.appendChild(left);

			selectArea.appendChild(right);

			selectArea.appendChild(center);

			//hide the select field

			selects[q].style.display='none';





			var myElem = document.getElementById(selects[q].id)



			myElem.parentNode.insertBefore(selectArea, myElem);





			//build & place options div



			if(document.getElementById("optionsDiv"+q)){

				document.getElementsByTagName("body")[0].removeChild(document.getElementById("optionsDiv"+q))

			}



			var optionsDiv = document.createElement('div');

			optionsDiv.style.width = selectWidth + 1 + 'px';

			//set height

			var totalHeight = selects[q].options.length*18;

			if(selectHeight<totalHeight) {

				optionsDiv.style.height = selectHeight+'px';

			}

			optionsDiv.style.overflow = 'auto';

			optionsDiv.className = "optionsDivInvisible";

			



			optionsDiv.id = "optionsDiv"+q;

			optionsDiv.style.left = findPosX(selectArea) + 'px';

			optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';

			//get select's options and add to options div

			for(var w = 0; w < myElem.options.length; w++) {

				var optionHolder = document.createElement('p');

				if(ismultiple){

					var optionLink = document.createElement('a');

					var optionTxt = document.createTextNode(myElem.options[w].text);



					optionLink.style.padding = "1px 40px 1px 20px";

					optionLink.href = "javascript:selectMe('"+myElem.id+"',"+w+","+q+", 1);";

					if(myElem.options[w].selected) {

						optionLink.className = "backgroundChecked";

						showMyLabel(myElem.id,w,q);

					}else{

						optionLink.className = "backgroundCheck";

					}



				}else{



					var optionLink = document.createElement('a');

					var optionTxt = document.createTextNode(myElem.options[w].text);

					optionLink.href = "javascript:showOptions("+q+"); selectMe('"+myElem.id+"',"+w+","+q+", 0);";

					if(myElem.options[w].selected) {selectMe(myElem.id,w,q, 0);}

				}

				

				if(selectJavascript != false){

					selectJavascriptOption = selectJavascript.replace(/#OBJ#/g, "{id:'"+selects[q].id+"', value:'"+selects[q].options[w].value+"'}");

					optionLink.href = optionLink.href + selectJavascriptOption;

				}



				if(ismultiple){

					optionLink.appendChild(optionTxt);

					optionHolder.appendChild(optionLink);

					optionsDiv.appendChild(optionHolder);

				}else{

					optionLink.appendChild(optionTxt);

					optionHolder.appendChild(optionLink);

					optionsDiv.appendChild(optionHolder);

				}



				//check for pre-selected items





			}

			//insert options div

			document.getElementsByTagName("body")[0].appendChild(optionsDiv);

		}

	}

}

function showOptions(g) {

	for(var q = 0; q < selects.length; q++) {

		if(q != g){

			elem = document.getElementById("optionsDiv"+q);

			elem.className = "optionsDivInvisible";

		}

	}

	elem = document.getElementById("optionsDiv"+g);

	if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}

	else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}

	elem.onmouseout = hideOptions;

}



//Any good solution ?

function hideOptions(e) { //hiding the options on mouseout

	//	if (!e) var e = window.event;

	//	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;

	//	if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};

	//	e.cancelBubble = true;

	//	if (e.stopPropagation) e.stopPropagation();

}

function selectMe(selectFieldId,linkNo,selectNo, multiple) {

	//feed selected option to the actual select field

	selectField = document.getElementById(selectFieldId);

	if(multiple){

		if(selectField.options[linkNo].selected){

			document.getElementById("optionsDiv"+selectNo).getElementsByTagName("p")[linkNo].getElementsByTagName("a")[0].className = "backgroundCheck";

			selectField.options[linkNo].selected = "";

		}else{

			document.getElementById("optionsDiv"+selectNo).getElementsByTagName("p")[linkNo].getElementsByTagName("a")[0].className = "backgroundChecked";

			selectField.options[linkNo].selected = "selected";

		}

	}else{

		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]);



}

function showMyLabel(selectFieldId,linkNo, selectNo){

	

	selectField = document.getElementById(selectFieldId);

	textVar = document.getElementById("mySelectText"+selectNo);

	var newText = document.createTextNode(selectField.options[linkNo].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 checkRadioByDiv(g) {

	radios[g].checked = true;

	checkRadio(g);

	

}

function checkRadio(g) {

	if(radios[g].checked) {

		for (var k = 0; k < radios.length; k++)

		{

			if(k != g) {

				document.getElementById('myRadio'+k).className = "radioAreaUnchecked";

				radios[k].nextSibling.className = "";

			}

			else if(k == g) {

				document.getElementById('myRadio'+k).className = "radioAreaChecked";

				radios[g].nextSibling.className = "chosen";

			}

		}

	}

	else if(!radios[g].checked) {

		document.getElementById('myRadio'+g).className = "radioAreaUnchecked"; 

		radios[g].nextSibling.className = "";

	}

}



function checkCheckByDiv(g) {

	checkboxes[g].checked = !checkboxes[g].checked;

	checkCheck(g);	

}

function checkCheck(g) {

	if(checkboxes[g].checked) {

		for(var k = 0; k < checkboxes.length; k++) {

			if(k == g) {

				document.getElementById('myCheck'+k).className = "checkboxAreaChecked";

				checkboxes[g].nextSibling.className = "chosen";

			}

		}

	}

	else if(!checkboxes[g].checked) {

		document.getElementById('myCheck'+g).className = "checkboxAreaUnchecked";

		checkboxes[g].nextSibling.className = "";

	}

}



function hoverEffects() {

	//get all elements (text inputs, passwords inputs, textareas)

	var elements = document.getElementsByTagName('input');

	var j = 0;

	for (var i4 = 0; i4 < elements.length; i4++) {

		if((elements[i4].type=='text')||(elements[i4].type=='password')) {

			hovers[j] = elements[i4];

			++j;

		}

	}

	elements = document.getElementsByTagName('textarea');

	for (var i4 = 0; i4 < elements.length; i4++) {

		hovers[j] = elements[i4];

		++j;

	}

	

	

	//add focus effects

	for (var i4 = 0; i4 < hovers.length; i4++) {		

		hovers[i4].onfocus = function() {this.className += "Hovered";}

		hovers[i4].onblur = function() {this.className = this.className.replace(/Hovered/g, "");}

		var actionJavascript = false;

		if(hovers[i4].getAttribute("js_action", false) != null){

			actionJavascript = hovers[i4].getAttribute("js_action", false)

			parametersJavascript = actionJavascript.split("=");

			parametersJavascript[1] = parametersJavascript[1].replace(/#OBJ#/g, "{id:'"+hovers[i4].id+"', value:'"+hovers[i4].value+"'}");

			if (window.attachEvent) {

			    hovers[i4].attachEvent(parametersJavascript[0], function() {eval(parametersJavascript[1])});

			  } else {

			    hovers[i4].addEventListener(parametersJavascript[0].replace("on", ""), function() {eval(parametersJavascript[1])}, false);

			  }

		}				

	}

}



function buttonHovers() {

	//get all buttons

	var elements = document.getElementsByTagName('input');

	var j = 0;

	for (var i5 = 0; i5 < elements.length; i5++) {

		if(elements[i5].type=='submit') {

			buttons[j] = elements[i5];

			++j;

		}

	}

	

	//add hover effects

	for (var i5 = 0; i5 < buttons.length; i5++) {



		buttons[i5].onmouseover = function() {this.className += "Hovered";}

		buttons[i5].onmouseout = function() {this.className = this.className.replace(/Hovered/g, "");}

	}

}



function selectEvent(e) {

	if (!e) var e = window.event;

	var thecode = e.keyCode;

	switch(thecode){

		case 40: //down

		var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");

		var linkNo = 0;

		for(var q = 0; q < selects[fieldId].options.length; q++) {

			if(selects[fieldId].options[q].selected) {

				linkNo = q;

			}

		}

		++linkNo;

		if(linkNo >= selects[fieldId].options.length) {

			linkNo = 0;

		}

		selectMe(selects[fieldId].id, linkNo, fieldId);

		break;

		case 38: //up

		var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");

		var linkNo = 0;

		for(var q = 0; q < selects[fieldId].options.length; q++) {

			if(selects[fieldId].options[q].selected) {

				linkNo = q;

			}

		}

		--linkNo;

		if(linkNo < 0) {

			linkNo = selects[fieldId].options.length - 1;

		}

		selectMe(selects[fieldId].id, linkNo, fieldId);

		break;

		default:

		break;

	}

}





//Apply Window onload effects 

if (window.attachEvent) {

    window.attachEvent("onload", function() {init_niceforms()});

  } else {

    window.addEventListener("load", function() {init_niceforms()}, false);

  }