/*

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.
JQ'ed by dale tan

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled-form { display: none; } select.styled-form { position: relative; width: ' + selectWidth + 'px; opacity: 0; z-index: 5; }</style>');
var JQ = jQuery.noConflict();
var StyledForm = {
	init: function() {
		var inputs = JQ("input"), span = Array(), textnode, option, active;
		inputs.each(function(a,el) {
			if((JQ(el).is(':checkbox') || JQ(el).is(':radio')) && JQ(el).hasClass('styled-form')) {
				JQ(el).checked = false;
				span[a] = document.createElement("span");
				JQ(span[a]).addClass(JQ(el).attr('type'));
				JQ(span[a]).attr('id','form-span-' + a);
				if(JQ(el).is(':checked')) {
					if(JQ(el).attr('type') == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						JQ(span[a]).css('background-position',position);
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						JQ(span[a]).css('background-position',position);
					}
				}
				JQ(span[a]).insertBefore(JQ(inputs[a]));
				JQ(el).change(StyledForm.clear);
				JQ(span[a]).mousedown(StyledForm.pushed);
				JQ(span[a]).mouseup(StyledForm.check);
			}
		});
		/*
		// forgot -- background images don't work when you need to move them.
		if (JQ.browser.msie && JQ.browser.version < 7 && supersleight) {
			supersleight.limitTo(null);
			supersleight.run();
		}
		*/
//		inputs = JQ("select");
//		inputs.each(function(a,el) {
	//	for(a = 0; a < inputs.length; a++) {
/*
			if(JQ(inputs[a]).hasClass == "styled") {
				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]);
				inputs[a].onchange = Custom.choose;
			}
*/
/*
			if(JQ(inputs[a]).hasClass == "styled") {
				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]);
				inputs[a].onchange = StyledForm.choose;
			}
	//	}
		});
	*/
	},
	pushed: function() {
		$this    = JQ(this);
//		alert($this[0].id)
		$element = $this.next();
		console.log('type: ', $element.attr('type'));
		console.log('this: ', $this);
		console.log('element: ', $element);
		console.log('checked: ', $element.is(':checked'));
		if ($element.is(':checked')) console.log('%a element is checked, #',$element.next().html(), $element.attr('value'));
		if($element.is(':checked') && $element.is(':checkbox')) {
			console.log('checkbox element checked');
			$this.css('background-position','0 -' + checkboxHeight*3 + 'px');
		} else if($element.is(':checked') && $element.is(':radio')) {
			$this.css('background-position','0 -' + radioHeight*3 + 'px');
		} else if($element.not(':checked') && $element.is(':checkbox')) {
			console.log('checkbox element not checked');
			$this.css('background-position','0 -' + checkboxHeight + 'px');
		} else {
			$this.css('background-position','0 -' + radioHeight + 'px');
		}
	},
	check: function() {
		$this    = JQ(this);
		$element = $this.next();
		if($element.is(':checked') && $element.is(':checkbox')) {
			$this.css('background-position', '0 0');
			$element.attr('checked', 'false');
		} else {
			if($element.is(':checkbox')) {
				$this.css('background-position', '0 -' + checkboxHeight*2 + 'px');
			} else {
				$this.css('background-position', '0 -' + radioHeight*2 + 'px');
				group = $element.attr('name');
				value = $element.attr('value');
				inputs = JQ("input");
				inputs.each(function(a,el) {
					if(JQ(el).attr('name') == group && JQ(el).attr('value') != value) {
						JQ(el).prev().css('background-position', '0 0');
					}
				});
			}
			$element.attr('checked', 'true');
		}
	},
	clear: function() {
		inputs = JQ("input");
		inputs.each(function(b,el) {
			if(JQ(el).is(':checkbox') && JQ(el).is(':checked') && JQ(el).hasClass('styled')) {
				JQ(el).prev().css('background-position', '0 -' + checkboxHeight*2 + 'px');
			} else if(JQ(el).is(':checkbox') && JQ(el).hasClass('styled')) {
				JQ(el).prev().css('background-position', '0 0');
			} else if(JQ(el).is(':radio') && JQ(el).is(':checked') && JQ(el).hasClass('styled')) {
				JQ(el).prev().css('background-position', '0 -' + radioHeight*2 + 'px');
			} else if(JQ(el).is(':radio') && JQ(el).is(':checked') && JQ(el).hasClass('styled')) {
				JQ(el).prev().css('background-position', '0 -' + radioHeight*2 + 'px');
			} else if(JQ(el).is(':radio') && JQ(el).hasClass('styled')) {
				JQ(el).prev().css('background-position', '0 0');
			}
		});
	},
	choose: function() {
		option = JQ("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				JQ("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
};
JQ(window).load(StyledForm.init);