/*

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 selectWidth = "160";
var selectWidthBig = "250";
var selectWidthMedium = "90";
var selectWidthSmall = "45";
var selectWidthXSmall = "35";

/* Qui di seguito è scritto lo stile dei nuovi input creati con il codice. Se aggiungo elementi allo script più sotto devo cambiare anche questo.  */

document.write('<style type="text/css">input.styled_big { display: none; } select.styled_big { position: relative; width: ' + selectWidthBig + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled_medium { display: none; } select.styled_medium { position: relative; width: ' + selectWidthMedium + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled_small { display: none; } select.styled_small { position: relative; width: ' + selectWidthSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled_xsmall { display: none; } select.styled_xsmall { position: relative; width: ' + selectWidthXSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled1_big { display: none; } select.styled1_big { position: relative; width: ' + selectWidthBig + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled1_medium { display: none; } select.styled1_medium { position: relative; width: ' + selectWidthMedium + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled1_small { display: none; } select.styled1_small { position: relative; width: ' + selectWidthSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled1_xsmall { display: none; } select.styled1_xsmall { position: relative; width: ' + selectWidthXSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled2_big { display: none; } select.styled2_big { position: relative; width: ' + selectWidthBig + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled2_medium { display: none; } select.styled2_medium { position: relative; width: ' + selectWidthMedium + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled2_small { display: none; } select.styled2_small { position: relative; width: ' + selectWidthSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } input.styled2_xsmall { display: none; } select.styled2_xsmall { position: relative; width: ' + selectWidthXSmall + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>');

/* Lo script qui sotto è lungo perchè ci sono 3 form nella stessa pagina: VACANZE, VOLI e HOTEL. 
Ho suddiviso i className così: VACANZE => '' ; VOLI => '1' ; HOTEL => '2'.
Un'altra variante è la dimensione dei select, che è suddivisa nei seguenti className: '..._big' ; '..._medium' ; '..._small' ; '..._xsmall' .   */

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		inputs = document.getElementsByTagName("select");
		
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled_big") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_big";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled1_big") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_big";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select1" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose1;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled2_big") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_big";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select2" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose2;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled_medium") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_medium";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled1_medium") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_medium";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select1" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose1;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled2_medium") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_medium";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select2" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose2;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled_small") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_small";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled1_small") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_small";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select1" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose1;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled2_small") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_small";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select2" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose2;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled_xsmall") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_xsmall";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled1_xsmall") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_xsmall";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select1" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose1;  // Da cambiare id="" x CATEGORIA
			} else if(inputs[a].className == "styled2_xsmall") {  // Da cambiare className="" x DIMENSIONE e CATEGORIA
				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_xsmall";  // Da cambiare className="" x DIMENSIONE
				span[a].id = "select2" + inputs[a].name;  // Da cambiare id="" x CATEGORIA
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.choose2;  // Da cambiare id="" x CATEGORIA
			}
		}
	},
	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;
				var val = document.getElementById("select" + this.name).childNodes[0].nodeValue;
				if(this.name == "camere") {
					campicam2 = getEl('OpzioniCamera2');
					campicam3 = getEl('OpzioniCamera3');
					selectcampicam2 = document.getElementById("OpzioniCamera2").getElementsByTagName("select");
					selectcampicam3 = document.getElementById("OpzioniCamera3").getElementsByTagName("select");
					if(val==1) {
						getEl('Cam1').innerHTML='Ospiti';
						campicam2.style.display='none';
						campicam3.style.display='none';
						document.getElementById("select" + "adulti2").childNodes[0].nodeValue =0;
						document.getElementById("select" + "bambini2").childNodes[0].nodeValue =0;
						document.getElementById("select" + "neonati2").childNodes[0].nodeValue =0;
						document.getElementById("select" + "adulti3").childNodes[0].nodeValue =0;
						document.getElementById("select" + "bambini3").childNodes[0].nodeValue =0;
						document.getElementById("select" + "neonati3").childNodes[0].nodeValue =0;
						for(n=0; n<selectcampicam2.length ; n++) {
							selectcampicam2[n].disabled=true;
						}
						
					} else if(val==2) {
						getEl('Cam1').innerHTML='Camera 1';
						campicam2.style.display='inline';
						campicam3.style.display='none';
						document.getElementById("select" + "adulti3").childNodes[0].nodeValue =0;
						document.getElementById("select" + "bambini3").childNodes[0].nodeValue =0;
						document.getElementById("select" + "neonati3").childNodes[0].nodeValue =0;
						for(n=0; n<selectcampicam2.length ; n++) {
							selectcampicam2[n].disabled=false;
						}
					} else if(val==3) {
						getEl('Cam1').innerHTML='Camera 1';
						campicam2.style.display='inline';
						campicam3.style.display='inline';
						for(n=0; n<selectcampicam2.length ; n++) {
							selectcampicam2[n].disabled=false;
						}
						for(n=0; n<selectcampicam3.length ; n++) {
							selectcampicam3[n].disabled=false;
						}
					}
				}
				
			}
		}
	},
	choose1: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select1" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	},
	choose2: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select2" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
				var val2 = document.getElementById("select2" + this.name).childNodes[0].nodeValue;
				if(this.name == "camerehotel") {
					campicam2 = getEl('OpzioniCameraHotel2');
					campicam3 = getEl('OpzioniCameraHotel3');
					if(val2==1) {
						getEl('CamHotel1').innerHTML='Ospiti';
						campicam2.style.display='none';
						campicam3.style.display='none';
					} else if(val2==2) {
						getEl('CamHotel1').innerHTML='Camera 1';
						campicam2.style.display='inline';
						campicam3.style.display='none';
					} else if(val2==3) {
						getEl('CamHotel1').innerHTML='Camera 1';
						campicam2.style.display='inline';
						campicam3.style.display='inline';
					}
				}
			}
		}
	}
}
window.onload = Custom.init;