/*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
Visit http://ryanfait.com/ for more information.
 */

var checkboxHeight = "12";
var radioHeight = "12";
var selectWidth = "128";
var selectWidth2 = "201";
var selectWidth3 = "465";
var selectWidth4 = "88";
var selectWidth5 = "153";

/* No need to change anything after this */

document.write('<style type="text/css">input.styledCheck { display: none; } select.styled { position: relative; width: '
				+ selectWidth
				+ 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } select.styled2 { position: relative; width: '
				+ selectWidth2
				+ 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } select.styled3 { position: relative; width: '
				+ selectWidth3
				+ 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } select.styled4 { position: relative; width: '
				+ selectWidth4
				+ 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } select.styled5 { position: relative; width: '
				+ selectWidth5
				+ 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } </style>');

var Custom = {
	init : function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for (a = 0; a < inputs.length; a++) {
			if ((inputs[a].type == "checkbox" || inputs[a].type == "radio")
					&& inputs[a].className == "styledCheck") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if (inputs[a].checked == true) {
					if (inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight * 2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight * 2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				span[a].onmousedown = Custom.pushed;
				span[a].onmouseup = Custom.check;
				document.onmouseup = Custom.clear;
			}
		}
		inputs = document.getElementsByTagName("select");
		for (a = 0; a < inputs.length; a++) {

			// Suport al class múltiple
			var classStyled = "0";
			var arrayClass = inputs[a].className.split(" ");
			for ( var zz = 0; zz < arrayClass.length; zz++) {
				if (arrayClass[zz] == "styled") {
					classStyled = "";
					break;
				}
				if (arrayClass[zz] == "styled2") {
					classStyled = "2";
					break;
				}
				if (arrayClass[zz] == "styled3") {
					classStyled = "3";
					break;
				}
				if (arrayClass[zz] == "styled4") {
					classStyled = "4";
					break;
				}
				if (arrayClass[zz] == "styled5") {
					classStyled = "5";
					break;
				}
			}
			if (classStyled != "0") {

				// Guardem event HTML
				if (inputs[a].onchange)
					inputs[a].alcambiar = String(inputs[a].onchange);

				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for (b = 0; b < option.length; b++) {
					if (option[b].selected == true) {
						textnode = document
								.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select" + classStyled;

				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;
			}
		}
	},
	pushed : function() {
		element = this.nextSibling;
		if (element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight * 3 + "px";
		} else if (element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight * 3 + "px";
		} else if (element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check : function() {
		element = this.nextSibling;
		if (element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if (element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight * 2
						+ "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight * 2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for (a = 0; a < inputs.length; a++) {
					if (inputs[a].name == group
							&& inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear : function() {
		inputs = document.getElementsByTagName("input");
		for ( var b = 0; b < inputs.length; b++) {
			if (inputs[b].type == "checkbox" && inputs[b].checked == true
					&& inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -"
						+ checkboxHeight * 2 + "px";
			} else if (inputs[b].type == "checkbox"
					&& inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if (inputs[b].type == "radio" && inputs[b].checked == true
					&& inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -"
						+ radioHeight * 2 + "px";
			} else if (inputs[b].type == "radio"
					&& inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose : function() {
		if (this.alcambiar) {
			executa = this.alcambiar;
			executa = executa.substring(executa.indexOf('{') + 1);
			executa = executa.substring(0, executa.indexOf('}'));
			eval(executa);
		}
		option = this.getElementsByTagName("option");
		for (d = 0; d < option.length; d++) {
			if (option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}

// window.onload = Custom.init;
if (window.addEventListener) {
	window.addEventListener('load', Custom.init, false);
	// window.addEventListener('unload', GUnload, false);
} else {
	window.attachEvent('onload', Custom.init);
	// window.attachEvent('onunload', GUnload);
}