/*

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.

*/

var checkboxHeight = "25";
var checkboxMargin= -2;

var radioHeight = "25";
var radioMargin= -2;

var selectWidth = "190";

/* No need to change anything after this */

var Custom = {
	init: function() {
		var span = Array(), images = Array(),spanLeftSelect = Array(), spanRightSelect = Array(), textboxLeft = Array(), textboxRight = Array(), textnode, option, active;
		var inputs = document.getElementsByTagName("input");

		for(a = 0; a < inputs.length; a++) {
			if(( (inputs[a].type == "checkbox" && inputs[a].className == "checkbox") || (inputs[a].type == "radio" && inputs[a].className == "radio"))) {
				// we exclude ie
				if (!document.all) {
					span[a] = document.createElement("span");
	
					span[a].className = inputs[a].type;
					images[a] = document.createElement('img');
					images[a].src='/content/img/transp19x25.gif';
					span[a].appendChild(images[a]);
	
					if(inputs[a].checked == true) {
						if(inputs[a].type == "checkbox") {
							position = "0 -"+(checkboxHeight*2+checkboxMargin)+"px";
							span[a].style.backgroundPosition = position;
						} else {
							position = "0 -"+(radioHeight*2+radioMargin)+"px";
							span[a].style.backgroundPosition = position;
						}
					}
					else{
						if(inputs[a].type == "checkbox") {
							position = "0 "+(-checkboxMargin)+"px";
							span[a].style.backgroundPosition = position;
						} else {
							position = "0 "+(-radioMargin)+"px";
							span[a].style.backgroundPosition = position;
						}				
					}
					inputs[a].parentNode.insertBefore(span[a], inputs[a]);

					//inputs[a].observe('change',Custom.clear);
					Element.observe(inputs[a], 'change', Custom.clear);
					
					//span[a].observe('mousedown',Custom.pushed);
					Element.observe(span[a], 'mousedown', Custom.pushed);
					
					//span[a].observe('mouseup',Custom.check);
					Element.observe(span[a], 'mouseup', Custom.check);
	
					document.observe('mouseup',Custom.clear);
				}
			}
			else if((inputs[a].type == "text" || inputs[a].type == "password" ) && inputs[a].className == "textbox"){

				textboxLeft[a] = document.createElement("div");

				if(inputs[a].disabled){
					textboxLeft[a].className = "textboxLeftDisabled";
				}
				else{
					textboxLeft[a].className = "textboxLeft";
				}

				if(inputs[a].id==''||inputs[a].id==null){
					var num=0;
					var cElement = document.getElementById('customtextbox_ctx'+num);
					var eExists = false;
					if( cElement != null)
						eExists = true;

					while(eExists)
					{
						num++;
						cElement = document.getElementById('customtextbox_ctx'+num);
						if( cElement != null){
							eExists = true;
						}else{
							eExists=false;
						}
					}

					textboxLeft[a].id='customtextbox_ctx'+num;	
					inputs[a].id = 'ctx_'+num;
				}
				else
				{
					textboxLeft[a].id='customtextbox_'+inputs[a].id;
				}

				textboxLeft[a].style.width=(Element.getWidth(inputs[a])+8)+'px';

				textboxRight[a] = document.createElement("div");
				textboxRight[a].className = "textboxRight";

				inputs[a].parentNode.insertBefore(textboxLeft[a], inputs[a]);
				textboxLeft[a].appendChild(inputs[a]);
				textboxLeft[a].appendChild(textboxRight[a]);

				inputs[a].onstatechange = Custom.onstatechange;
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "select") {

				if(inputs[a].id==''||inputs[a].id==null)
				{
					var num=0;
					var cElement = document.getElementById('customselect_'+num);
					var eExists = false;
					if( cElement != null)
						eExists = true;

					while(eExists)
					{
						num++;
						cElement = document.getElementById('customselect_'+num);
						if( cElement != null){
							eExists = true;
						}else{
							eExists=false;
						}
					}

					inputs[a].id='customselect_'+num;
				}

				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");
				if(inputs[a].disabled)
					span[a].className = "selectDisabled";
				else
					span[a].className = "select";

				spanLeftSelect[a] = document.createElement('span');
				spanLeftSelect[a].className = "leftSelect";
				spanRightSelect[a] = document.createElement('span');
				spanRightSelect[a].className = "rightSelect";
				spanRightSelect[a].appendChild(textnode);
				spanRightSelect[a].id = "rightSelect" + inputs[a].id;

				span[a].appendChild(spanLeftSelect[a]);
				span[a].appendChild(spanRightSelect[a]);

				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				span[a].style.width = Element.getWidth(inputs[a])+'px';
				span[a].id = "select" + inputs[a].id;

				spanRightSelect[a].style.width = (Element.getWidth(inputs[a])-4)+'px';

				//inputs[a].observe('change',Custom.choose);
				Element.observe(inputs[a],'change',Custom.choose);
				
				inputs[a].update = Custom.choose;
				inputs[a].onstatechange = Custom.onstatechange;

				inputs[a].onkeydown = Custom.choose;
				inputs[a].onkeyup = Custom.choose;
				inputs[a].onkeypress = Custom.choose;

				inputs[a].onmouseout = Custom.mouseOut;
				inputs[a].onmousemove = Custom.mouseIn;

			}
		}
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + (checkboxHeight*3+checkboxMargin) + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + (radioHeight*3+radioMargin) + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + (checkboxHeight+checkboxMargin) + "px";
		} else {
			this.style.backgroundPosition = "0 -" + (radioHeight+radioMargin) + "px";
		}
		if(element.onmousedown)
			element.onmousedown();
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 "+(-checkboxMargin)+"px";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + (checkboxHeight*2+checkboxMargin) + "px";
			} else {
				this.style.backgroundPosition = "0 -" + (radioHeight*2+radioMargin) + "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 "+(-radioMargin)+"px";
					}
				}
			}
			element.checked = true;
		}
		if(element.onclick)
			element.onclick();
		if(element.onchange)
			element.onchange();
	},
	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 == "checkbox") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + ((checkboxHeight*2)+checkboxMargin) + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "checkbox") {
				inputs[b].previousSibling.style.backgroundPosition = "0 "+(-checkboxMargin)+"px";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "radio") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + ((radioHeight*2)+radioMargin) + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "radio") {
				inputs[b].previousSibling.style.backgroundPosition = "0 "+(-radioMargin)+"px";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("rightSelect" + this.id).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	},
	mouseIn:function() {
		if(!this.disabled)
			document.getElementById("select" + this.id).className = "selectHover";
	},
	mouseOut:function(){
		if(!this.disabled)
			document.getElementById("select" + this.id).className = "select";
	},
	onstatechange:function(){
		if(this.type=='text'){
			if(this.disabled==true)
				document.getElementById("customtextbox_" + this.id).className = "textboxLeftDisabled";
			else
				document.getElementById("customtextbox_" + this.id).className = "textboxLeft";
		}
		else{
			if(this.disabled==true)
				document.getElementById("select" + this.id).className = "selectDisabled";
			else
				document.getElementById("select" + this.id).className = "select";
		}
	}
};

if (document.all) {
	document.write('<style type="text/css">select.select { position: relative; opacity: 0; filter: alpha(opacity=0); z-index: 1; height:21px;margin:4px 0px 0px 0px; } .formTable input.textbox{ border:0;margin:0; }</style>');
} else {
	document.write('<style type="text/css">input.checkbox { display: none; } input.radio { display: none; } select.select { position: relative; opacity: 0; filter: alpha(opacity=0); z-index: 1; height:21px;margin:4px 0px 0px 0px; } .formTable input.textbox{ border:0;margin:0; }</style>');
}
Event.observe(window, 'load',function() { Custom.init(); } );