/*

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 = "190";


/* No need to change anything after this */

var isIE = navigator.appName == 'Microsoft Internet Explorer' || false;

if(!isIE)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; } .disabled { opacity: 0.5; filter: alpha(opacity=50); } #bespokeformwrap span.checkbox {display:block;position:relative;z-index:332;} #bespokeformwrap span.radio {display:block;position:relative;z-index:333;} #bespokeformwrap label {display:block;position:relative;z-index:33;} </style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input");
		var span = Array();
		var textnode, option, active;
		for(var a = 0; a < inputs.length; a++) {
			var elClass = inputs[a].getAttribute("class");
			elClass = elClass? elClass : inputs[a].getAttribute("classname");
			//console.log(elClass)
			var isClassNameStyled = false;
			if (elClass == "styled") isClassNameStyled = true;

			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && isClassNameStyled) {
				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;
				
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			
			var elClass = inputs[a].getAttribute("class");
			elClass = elClass? elClass : inputs[a].getAttribute("classname");
			var isClassNameStyledInline = false;
			if (elClass == "styled") isClassNameStyledInline = true;
			
			if(isClassNameStyledInline) {
				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")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		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;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			var elClass = inputs[b].getAttribute("class");
			elClass = elClass? elClass : inputs[b].getAttribute("classname");
			var isClassNameStyledB = false;
			if (elClass == "styled") isClassNameStyledB = true;
			
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && isClassNameStyledB) {
				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 && isClassNameStyledB) {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && isClassNameStyledB) {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	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;
			}
		}
	}
}
if(!isIE)window.onload = Custom.init;
/*
$(document).ready(function(){
	Custom.init();
	//$('span.checkbox').css('background','red')
	$('#bespokescripttype span.radio').click(function(){
		$('.bespokescripttype span.radio').css('background-position','0px 0px');
		$(this).css('background-position','0px -50px');
		$('.bespokescripttype span.radio input').attr('checked',false)
		$(this).next().attr('checked',true);
	});
	$('#rcolformbox2 span.radio').click(function(){
		$('#rcolformbox2 span.radio').css('background-position','0px 0px');
		$(this).css('background-position','0px -50px');
		$('#rcolformbox2 span.radio input').attr('checked',false)
		$(this).next().attr('checked',true);
	});
	$('#rcolformbox4 span.radio').click(function(){
		$('#rcolformbox4 span.radio').css('background-position','0px 0px');
		$(this).css('background-position','0px -50px');
		$('#rcolformbox4 span.radio input').attr('checked',false)
		$(this).next().attr('checked',true);
	});
	$('#rcolformbox3 span.radio').click(function(){
		$('#rcolformbox3 span.radio').css('background-position','0px 0px');
		$(this).css('background-position','0px -50px');
		$('#rcolformbox3 span.radio input').attr('checked',false)
		$(this).next().attr('checked',true);
	});
	//alert('ppppppp')
	$('span.checkbox').click(function(){
		//alert('oi')
		alert($(this).next().attr('checked'))
		if($(this).next().attr('checked')){
			$(this).css('background-position','0px -50px');
			$(this).next().attr('checked',true);
		} else {
			$(this).css('background-position','0px 0px');
			$(this).next().attr('checked',false);
		}
	});
});
*/
/*
$(document).ready(function(){
	Custom.init();
	$('span.checkbox').click(function(){
		if($(this).next().attr('checked') && ($(this).next().attr('type') == 'checkbox')){
			$(this).css('background-position',"0 -" + checkboxHeight*3 + "px");
		} else if($(this).next().attr('checked') && ($(this).next().attr('type') == 'radio')){
			$(this).css('background-position',"0 -" + radioHeight*3 + "px");
		} else if (($(this).next().attr('checked') != true) && ($(this).next().attr('type') == 'radio')){
			$(this).css('background-position',"0 -" + checkboxHeight + "px");
		} else{
			$(this).css('background-position',"0 -" + radioHeight + "px");
		}
		//Custom.check();
	});
	$('span.radio').click(function(){
		Custom.pushed();
		Custom.check();
	});
});
*/