/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

Visit http://ryanfait.com/ for more information.

*/

/*
Modified by johnny@mobajl.com
This version requires MooTools	
*/

var checkboxHeight = "25";
var radioHeight = "25";

var Custom = {
	init: function(element) {
		if (element != undefined) {
			var inputs = element.getElementsByTagName("input"), span = Array(), textnode, option, active;
		} else {
			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") {
				var previous = $(inputs[a]).getPrevious('span.' + inputs[a].type);
				if (previous != undefined) {
					previous.destroy();
				}
				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]).addEvent('change', Custom.clear);
				$(span[a]).addEvent('mousedown', Custom.pushed);
				$(span[a]).addEvent('mouseup', Custom.check);
				$(document).addEvent('mouseup', Custom.clear);
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				try {
                    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);
                        }
                    }
                    var previous = $("select" + inputs[a].name);
                    if (previous != undefined) {
                        previous.destroy();
                    }
                    span[a] = document.createElement("span");
                    span[a].className = "select";
                    span[a].id = "select" + inputs[a].name;
                    span[a].appendChild(textnode);
                    inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                    inputs[a].onchange = Custom.choose;
                } catch(e) { }
			}
		}
	},
	pushed: function(element) {
		if ((element == undefined) || (element.type == 'mousedown')) {
			element = this;
		}
		var sibling = element.nextSibling;
		if(sibling.checked == true && sibling.type == "checkbox") {
			element.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(sibling.checked == true && sibling.type == "radio") {
			element.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(sibling.checked != true && sibling.type == "checkbox") {
			element.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			element.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function(element) {
		if ((element == undefined) || (element.type == 'mouseup')) {
			element = this;
		}
		var sibling = element.nextSibling;
		if(sibling.checked == true && sibling.type == "checkbox") {
			element.style.backgroundPosition = "0 0";
			sibling.checked = false;
		} else {
			if(sibling.type == "checkbox") {
				element.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				element.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = element.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != element.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			sibling.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";
			}
		}
	},
	toggle: function(element) {
		element.fireEvent('change');
		element.getPrevious().fireEvent('mouseup');
		this.clear();
	},
	toggleSilent: function(element) { // Don't fire 'change' events
		element.checked = !element.checked;
		element.fireEvent('mouseup');
		this.clear();
	},
	choose: function() {
		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;
			}
		}
	}
}