/*

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 customFormElements;
var checkboxHeight = "30";
var radioHeight = "30";
var selectWidth = "70";

/* No need to change anything after this */
if(!Custom) {
	var Custom = {
		init: function() {
			//if(is_chrome) return;
			var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
				$('.hoverButton').live('mouseover',function() {
					$(this).find('.leftImage').removeClass('leftImage').addClass('leftImageHover');
					$(this).find('.middleImage').removeClass('middleImage').addClass('middleImageHover');
					$(this).find('.rightImage').removeClass('rightImage').addClass('rightImageHover');
				});
				$('.hoverButton').live('mouseout',function() {
					$(this).find('.leftImageHover').removeClass('leftImageHover').addClass('leftImage');
					$(this).find('.middleImageHover').removeClass('middleImageHover').addClass('middleImage');
					$(this).find('.rightImageHover').removeClass('rightImageHover').addClass('rightImage');
				});
				var loc = window.location.href;
				if (loc.match('admin') != null)
					return;
				var inputs = document.getElementsByTagName("input"), span = Array(), clear = Array(), textnode, option, active;
				for(a = 0; a < inputs.length; a++) {
					if((inputs[a].type != "checkbox" || inputs[a].type == "radio") &&
															   (inputs[a].className.indexOf("styled") != -1) && 
															   (inputs[a].style.display != "none")) {
						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;
						span[a].onmousedown = Custom.pushed;
						span[a].onmouseup = Custom.check;
						span[a].onclick = inputs[a].onclick;
						document.onmouseup = Custom.clear;
					}
				}
				//if(is_chrome) return;
				inputs = document.getElementsByTagName("select");
				for(a = 0; a < inputs.length; a++) {
					
				 if (inputs[a].className.indexOf('nostyle') == -1)
				 {
					 
					var width = $(inputs[a]).width();
					if (width > 220)
						width = 220;
					if ($(inputs[a]).css('width')) {
						width = $(inputs[a]).width();
					}
					var span_width = width;
					var select_width = width+29;
					var resize = true;
					var style = $(inputs[a]).attr('style');

					$(inputs[a]).addClass('styled');

					//if (typeof $(inputs[a]).attr('style') != 'undefined' && style.match('width:') != null)
					//	resize = false;

					//special fix for preview app (since this doesn't use the NEW form stuff
					var n = $(inputs[a]).attr('name');

					if (window.location.href.match('preview_application') && (n == 'processor_type' || n == 'system_memory' || n == 'video_card' || n == 'windows_version' || n == 'internet_connection'))
					{
						$(inputs[a])
							.css('position', 'absolute')
					}

					option = inputs[a].getElementsByTagName("option");
					
				
					if (typeof option[0] != 'undefined') {
						active = option[0].childNodes[0].nodeValue;
					} else {
						active = '--';
					}
					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 nospan = inputs[a].className.indexOf('nospan');
					if(nospan == -1) {
						span[a] = document.createElement("span");
							$(span[a])
							   .addClass('select')
							   .attr('id', 'select'+inputs[a].name)
							span[a].appendChild(textnode);
					} else {
						span[a] = $('#select'+inputs[a].id).get(0);
						span[a].appendChild(textnode);
					}
				
					if (resize)
					{
						$(inputs[a]).css('width', select_width+'px');
						$(span[a]).css('width', span_width+'px');
					}
					else {
						$(span[a]).css('width', width+'px');
					}
					
					$(inputs[a]).before(span[a]);
					if (!inputs[a].onchange) {
						if(nospan == -1){  
							
							inputs[a].onchange = Custom.choose; 
						} else {
							/*
							if($.browser.msie) {
								$(span[a]).css('margin-left',(-1*select_width)+'px');
							}
							*/
							inputs[a].onchange = Custom.chooseid; 
						}
					}
				 }
			}
		},
		pushed: function() {
			element = this.nextSibling;
			$(element).click();
			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++) {
			 if (inputs[b].previousSibling == null)
				continue;

				if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className.match("styled")) {
	//				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
				} else if(inputs[b].type == "checkbox" && inputs[b].className.match("styled")) {
	//				inputs[b].previousSibling.style.backgroundPosition = "0 0";
				} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className.match("styled")) {
					inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				} else if(inputs[b].type == "radio" && inputs[b].className.match("styled")) {
					inputs[b].previousSibling.style.backgroundPosition = "0 0";
				}
			}
		},
		chooseid: function() {
			option = this.getElementsByTagName("option");
			for(d = 0; d < option.length; d++) {
				if(option[d].selected == true) {
					document.getElementById("select" + this.id).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
				}
			}
		},
		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;
				}
			}
		}
	}
}
$(document).ready(Custom.init);