/*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.
Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.
You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.
Visit http://ryanfait.com/ for more information.

Modifacations by Menge Webdesign
- document.write css disabled 
	// when you send the right xhtml mime-type with your xhtml docs 'document.write' generates an error
	// css is now in the stylesheet - do not forget this
- all childNodes[x].nodeValue are replaced with innerHTML. NodeValue does not except empty values. InnerHTML does.
- alternative javascript is currently not possible. 
	//deleted create span and add this myself so I can also add other stuff like onclick events
	//select is different if you want something onchange, for example location=this.options[this.selectedIndex].value; 
	//I made a solution by adding an extra parameter to the id: _location. 
	//If the parameter is within the id, then the javascript is executed in the choose functions.
	//Not a very satisfying solution, but it works.
- replace & with & in the select spanbox and other html I use	
	//newoption = newoptionx.replace("&", "&");	
- added css functionality to the selectbox by expanding postname: _width_classextension (fe _width_400)
*/

var checkboxHeight = "20";
var radioHeight = "20";
var selectWidth = "175";


/* No need to change anything after this */

/*document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' 
+ selectWidth + '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 == "styled") {			
				if(inputs[a].type == "checkbox") { spanid = "checkbox" + inputs[a].name }
				if(inputs[a].type == "radio") { spanid = "radio" + inputs[a].name + inputs[a].value; }
				span[a] = document.getElementById(spanid); 
				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].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++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option"); 
				active = option[0].innerHTML; 
				textnode = document.createTextNode(active); 
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) { 
						newoptionx = option[b].innerHTML; 	
						newoption1 = newoptionx.replace(/&amp;/g, "&");	
						newoption2 = newoption1.replace(/&gt;/g, ">");	
						newoption3 = newoption2.replace(/&raquo;/g, ">");	
						newoption4 = newoption3.replace(/&#039;/g, "'");	
						newoption = newoption4.replace(/&nbsp;/g, " ");			
						textnode = document.createTextNode(newoption); 
						option[b].innerHTML = newoption;
					}
				}				
				boxnamex = inputs[a].name; 
				boxname = boxnamex.split("_"); 	
				addclass = "";
				spanid = "select" + inputs[a].name; 
				span[a] = document.getElementById(spanid); 
				if (boxname[1] == "width") { addclass = boxname[2]; } 
				span[a].className = "select"+addclass;	//	alert(span[a].className);
				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") { 
				//alert(inputs[b].previousSibling.type);
				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() {
		option = this.getElementsByTagName("option");
		idname = "select" + this.name;
		select_id = document.getElementById(idname); //alert(select_id);
		sname = this.name.split("_");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				select_id.innerHTML = option[d].innerHTML;
				if (sname[1] == "location") { location = this.value; }
				if (sname[3] == "location") { location = this.value; }
				if (sname[1] == "form") { formname = "form" + sname[2]; formid = document.getElementById(formname); formid.submit(); }
				if (sname[2] == "form") { formname = "form" + sname[3]; formid = document.getElementById(formname); formid.submit(); }
				if (sname[3] == "form") { formname = "form" + sname[4]; formid = document.getElementById(formname); formid.submit(); }
				if (sname[1] == "submit") { document.getElementById('form1').submit(); }
			}
		}
	}
}

addDOMLoadEvent(Custom.init);