/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

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

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "40";
var totalSpanPadding = 31;
var more_space = 5;
//fallback for hidden elements
var defHeight = 23;
var defWidth = 140;


/* No need to change anything after this */


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; min-width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
                var c1 = "styled";
                var c2 = "cus___";
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		var onchs = [];
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && (new RegExp('\\b'+c1+'\\b').test(inputs[a].className)) && !(new RegExp('\\b'+c2+'\\b').test(inputs[a].className)) ) {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;
                                span[a].id = "select_" + inputs[a].id;

				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]);
                                var onch = new String (inputs[a].getAttribute('onchange'));
                                if(onch.indexOf('unction') == 1){
                                    var start = Number(onch.indexOf('{')) + 2;
                                    var stop = Number(onch.lastIndexOf('}')) -1;
                                    onch = onch.substr(start, (stop-start));
                                }else{
                                    onch =inputs[a].getAttribute('onchange');
                                }
                                onchs[inputs[a].id] = onch;
                                inputs[a].onchange = function(){eval(onchs[this.id]);Custom.clear();}
//				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
                                //pass on the onclick event
                                if(inputs[a].onclick)
                                    span[a].onclick = inputs[a].onclick;

                                inputs[a].className += ' ' + c2;
			}
                    
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(new RegExp('\\b'+c1+'\\b').test(inputs[a].className) && !(new RegExp('\\b'+c2+'\\b').test(inputs[a].className))) {
				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";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
                                        var onch = new String (inputs[a].getAttribute('onchange'));
                                        if(onch.indexOf('unction') == 1){
                                            var start = Number(onch.indexOf('{')) + 2;
                                            var stop = Number(onch.lastIndexOf('}')) -1;
                                            onch = onch.substr(start, (stop-start));
                                        }else{
                                            onch =inputs[a].getAttribute('onchange');
                                        }
                                        onchs[inputs[a].id] = onch;
					inputs[a].onchange = function(){eval(onchs[this.id]);Custom.choose(this);}
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}

                                //set element widths, accomodate for larger padding in span vs select arrow size
                                if (span[a].offsetWidth > inputs[a].offsetWidth){
                                    inputs[a].style.width = span[a].offsetWidth + (totalSpanPadding - 20) + more_space + 'px';
                                    span[a].style.width = span[a].offsetWidth - totalSpanPadding + (totalSpanPadding - 20) + more_space + 'px';
                                }
                                if (inputs[a].offsetWidth > span[a].offsetWidth){
                                    span[a].style.width = inputs[a].offsetWidth - totalSpanPadding + (totalSpanPadding - 20) + more_space + 'px';
                                    inputs[a].style.width = inputs[a].offsetWidth + (totalSpanPadding - 20) + more_space + 'px';
                                }
                                if(!inputs[a].offsetWidth){
                                    span[a].style.width = defWidth - totalSpanPadding + (totalSpanPadding - 20) + more_space + 'px';
                                    inputs[a].style.width = defWidth + (totalSpanPadding - 20) + more_space + 'px';
                                }

                                if(!inputs[a].offsetHeight){
                                    inputs[a].style.height = defHeight + 'px';
                                    span[a].style.height = defHeight + 'px';

                                }else
                                    inputs[a].style.height = span[a].offsetHeight + 'px';


                                inputs[a].className += ' ' + c2;
			}
                    
		}
		document.onmouseup = Custom.clear;
	},
	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;
		}
                if(element.onchange)
                    element.onchange();
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
                var c1 = "styled";
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && new RegExp('\\b'+c1+'\\b').test(inputs[b].className) ) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && new RegExp('\\b'+c1+'\\b').test(inputs[b].className)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && new RegExp('\\b'+c1+'\\b').test(inputs[b].className)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && new RegExp('\\b'+c1+'\\b').test(inputs[b].className)) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function(obj) {
                obj.style.width = 'auto';
		option = obj.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + obj.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
                                var sel_span = document.getElementById("select" + obj.name);
                                //obj.style.width = document.getElementById("select" + obj.name).offsetWidth + 'px';
                                //set element widths, accomodate for larger padding in span vs select arrow size
                                if (obj.offsetWidth > sel_span.offsetWidth)
                                    sel_span.style.width = obj.offsetWidth - totalSpanPadding + 'px';
                                if (sel_span.offsetWidth > obj.offsetWidth)
                                    obj.style.width = sel_span.offsetWidth + 'px';
                                }
			}
	},
        jscss: function(a,o,c1,c2){
          switch (a){
            case 'swap':
              o.className=!jscss('check',o,c1)?o.className.replace(c2,c1):
              o.className.replace(c1,c2);
            break;
            case 'add':
              if(!jscss('check',o,c1)) o.className+=o.className?' '+c1:c1;
            break;
            case 'remove':
              var rep=o.className.match(' '+c1)?' '+c1:c1;
              o.className=o.className.replace(rep,'');
            break;
            case 'check':
              return new RegExp('\\b'+c1+'\\b').test(o.className);
            break;
          }
       }
}
window.onload = Custom.init;