var checkboxHeight = "25";
var radioHeight = "25";

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

function doStyle(formName) {
		var inputs = document.getElementById(formName).getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") &&  inputs[a].className == "styled" ) {
				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;
					}
				}
								
				//alert(inputs[a].click);																			
				span[a].click = inputs[a].click;																			
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = 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 == "styled") {
													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 && inputs[b].className == "styled") {
													inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";	
													/*alert('1a');		*/
												} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {				
													inputs[b].previousSibling.style.backgroundPosition = "0 0";
													/*alert('1b');		*/
												}
											}
											};	
				/*inputs[a].onchange = 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 == "styled") {
				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 && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {				
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
};	*/
				span[a].onmousedown = 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";
		}
	};
				
				span[a].onmouseup = 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";
				//alert(element.id );
				$(element).trigger('click');
				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";						
						//span[a].click = inputs[a].click;
					}
				}
			}
			element.checked = true;
		}
	};
				
				document.onmouseup = 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 == "styled") {
				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 && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				//alert('2c');
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {				
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
				//alert('2u');
			}
		}
};	
			}			
			else {
				if((inputs[a].type== "text" || inputs[a].type== "password") && ( inputs[a].className == "inputDate" || inputs[a].className == "styled") ){
					leftImg = document.createElement("div");
					leftImg.className = "textLeft";
					inputs[a].parentNode.insertBefore(leftImg, inputs[a]);
					inputs[a].className = "inputTextNoBorder";
					cImg = document.createElement("div");
					cImg.className = "textMid";					
					inputs[a].parentNode.insertBefore(cImg, inputs[a]);					
					inputs[a].previousSibling.appendChild(inputs[a]);					
					rightImg = document.createElement("div");
					rightImg.className = "textRight";
					inputs[a].parentNode.parentNode.insertBefore(rightImg,inputs[a].parentNode.nextSibling)
				}				
			}
		}
		inputs = document.getElementById(formName).getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "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);
					}
				}
				
				leftimg = document.createElement("div");	
				leftimg.className = "selectLeft";
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;				
				span[a].appendChild(leftimg);
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				span[a].style.width = (inputs[a].style.width <=0) ? inputs[a].offsetWidth : inputs[a].style.width ;						
			}
		}	
		inputs = document.getElementById(formName).getElementsByTagName("textarea");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
					elWidth = (inputs[a].style.width <=0) ? inputs[a].offsetWidth : parseInt(inputs[a].style.width) ;									
					elWidth= elWidth+15;
					topImg = document.createElement("div");
					topImg.className = "textareaTop";					
					topLeft = document.createElement("div");
					topLeft.className = "textareaTopLeft";					
					inputs[a].parentNode.insertBefore(topImg, inputs[a]);					
					topImg.style.width = elWidth+'px';					
					topImg.appendChild(topLeft);
					cImg = document.createElement("div");
					cImg.className = "textareaMid"
					cLeft = document.createElement("div");
					cLeft.className = "textareaMidLeft";
					inputs[a].parentNode.insertBefore(cImg, inputs[a]);
					cImg.style.width = elWidth+'px';
					inputs[a].style.border = "0";
					inputs[a].style.marginTop = "5px";
					inputs[a].style.marginLeft = "5px";
					cImg.appendChild(cLeft);
					cLeft.appendChild(inputs[a]);
					bottomImg = document.createElement("div");
					bottomImg.className = "textareaBottom";					
					bottomLeft = document.createElement("div");
					bottomLeft.className = "textareaBottomLeft";	
					inputs[a].parentNode.parentNode.parentNode.appendChild(bottomImg);									
					bottomImg.style.width = elWidth+'px';
					bottomImg.appendChild(bottomLeft);					
			}
		}
		
}

function set(el) {			
	option = el.getElementsByTagName("option");
	for(d = 0; d < option.length; d++) {
		if(option[d].selected == true) {
			document.getElementById("select" + el.name).childNodes[1].nodeValue = option[d].childNodes[0].nodeValue;
		}
	}
}

function toggle(el,bitStatus) {
	var status;
	
	status = (bitStatus == 0) ? "none" : "table-row" ;
	if(bitStatus ==0) {
		$("#" + el).fadeOut("slow", function(el) { $(this).css("display","none") });
	}
	else {
		$("#" + el).fadeIn("slow", function(el) { $(this).css("display","table-row") });
	}	
	
	
}