//model (default values)
Room = "Room";
Adults = "Adults";
AdultsSub = "Ages 18+";
Children = "Children";
ChildrenSub = "0-17";
ChAge = "Age of Children";

rooms = [{adults: 1, children: []}];

// view
function showRooms(rooms) {

	var tbody = document.getElementById("roomsSelect");
	var tr = document.createElement("tr");
	var trClone;
	var td = document.createElement("td");
	td.className = "people";
	var tdClone;
	var option = document.createElement("option");
	var optionClone;
	var select = document.createElement("select");
	select.className = "people";
	var div =  document.createElement("div");
	var divClone;
	var span =  document.createElement("span");
	var spanClone;
	var i;
	var element;

	var nrooms = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

	var nadults = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

	var nchildren = ["0", "1", "2", "3", "4"];

	var nchildrensAge = ["< 1", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17"];

	var nroomsSelect = select.cloneNode(false);
	for (i in nrooms) {
		optionClone = option.cloneNode(false);
		if (i == 0) {
			optionClone.style.display = "none";
		}
		optionClone.setAttribute("value", i);
		optionClone.appendChild(document.createTextNode(nrooms[i]));
		if (i == rooms.length) {
			optionClone.setAttribute("selected", "selected");
		}
		nroomsSelect.appendChild(optionClone);
	}

	var nadultsSelect = select.cloneNode(false);
	for (i in nadults) {
		optionClone = option.cloneNode(false);
		if (i == 0) {
			optionClone.style.display = "none";
		}
		optionClone.setAttribute("value", i);
		optionClone.appendChild(document.createTextNode(nadults[i]));
		nadultsSelect.appendChild(optionClone);
	}

	var nchildrenSelect = select.cloneNode(false);
	for (i in nchildren) {
		optionClone = option.cloneNode(false);
		optionClone.setAttribute("value", i);
		optionClone.appendChild(document.createTextNode(nchildren[i]));
		nchildrenSelect.appendChild(optionClone);
	}

	var nchildrensAgeSelect = select.cloneNode(false);
	for (i in nchildrensAge) {
		optionClone = option.cloneNode(false);
		optionClone.setAttribute("value", i);
		optionClone.appendChild(document.createTextNode(nchildrensAge[i]));
		nchildrensAgeSelect.appendChild(optionClone);
	}

	while (tbody.firstChild) {
		tbody.removeChild(tbody.firstChild);
	}

	for (i in rooms) {
		trClone = tr.cloneNode(false);

		tdClone = td.cloneNode(false);
		if (i == 0) {
			$(nroomsSelect).bind("change", changeRooms, false);
			tdClone.appendChild(nroomsSelect);
		}
		trClone.appendChild(tdClone);

		tdClone = td.cloneNode(false);
		tdClone.className = tdClone.className + " label";
		tdClone.appendChild(document.createTextNode(Room + " " + (parseInt(i) + 1) + ":"));
		trClone.appendChild(tdClone);

		tdClone = td.cloneNode(false);
		var nadultsSelectClone = nadultsSelect.cloneNode(true);
		nadultsSelectClone.setAttribute("room", i);
		nadultsSelectClone.setAttribute("name", "roomsr[" + i +"][adults]");
		nadultsSelectClone.childNodes[rooms[i].adults].setAttribute("selected", "selected");
		$(nadultsSelectClone).bind("change", changeAdults, false);
		divClone = div.cloneNode(false);
		divClone.appendChild(nadultsSelectClone);
		tdClone.appendChild(divClone);
		divClone = div.cloneNode(false);
		divClone.className = "description";
		divClone.appendChild(document.createTextNode(AdultsSub));
		tdClone.appendChild(divClone);
		trClone.appendChild(tdClone);

		tdClone = td.cloneNode(false);
		tdClone.className = tdClone.className + " child";
		var nchildrenSelectClone = nchildrenSelect.cloneNode(true);
		nchildrenSelectClone.setAttribute("room", i);
		nchildrenSelectClone.childNodes[rooms[i].children.length].setAttribute("selected", "selected");
		$(nchildrenSelectClone).bind("change", changeChildren, false);
		divClone = div.cloneNode(false);
		divClone.appendChild(nchildrenSelectClone);
		tdClone.appendChild(divClone);
		divClone = div.cloneNode(false);
		divClone.className = "description";
		divClone.appendChild(document.createTextNode(ChildrenSub));
		tdClone.appendChild(divClone);

		var childrensAgeDiv = div.cloneNode(false);
		for (var j in rooms[i].children) {
			divClone = div.cloneNode(false);
			spanClone = span.cloneNode(false);
			spanClone.className = "label1";
			spanClone.appendChild(document.createTextNode(ChAge+ " :"));
			divClone.appendChild(spanClone);
			var nchildrensAgeSelectClone = nchildrensAgeSelect.cloneNode(true);
			nchildrensAgeSelectClone.setAttribute("name", "roomsr[" + i +"][children][" + j + "]");
			nchildrensAgeSelectClone.setAttribute("room", i);
			nchildrensAgeSelectClone.setAttribute("child", j);
			$(nchildrensAgeSelectClone).bind("change", changeAge, false);
			nchildrensAgeSelectClone.childNodes[rooms[i].children[j]].setAttribute("selected", "selected");
			divClone.appendChild(nchildrensAgeSelectClone);
			childrensAgeDiv.appendChild(divClone);
		}
		tdClone.appendChild(childrensAgeDiv);
		trClone.appendChild(tdClone);

		tbody.appendChild(trClone);
	}
}

// controller
function changeRooms(event) {
	if (this.value > 0 && this.value < 11 ) {
		if (this.value < rooms.length) {
			while (this.value < rooms.length) {
				rooms.pop();
			}
		} else if (this.value > rooms.length) {
			while (this.value > rooms.length) {
				rooms.push({adults: 1, children: []});
			}
		}
	} else {
		rooms = [{adults: 1, children: []}];
	}
	showRooms(rooms);
}

// controller
function changeAdults(event) {
	var adults = rooms[this.getAttribute("room")].adults;
	if (this.value > 0 && this.value < 11 ) {
		rooms[this.getAttribute("room")].adults = parseInt(this.value);
	} else {
		rooms[this.getAttribute("room")].adults = 1;
	}
	showRooms(rooms);
}

// controller
function changeChildren(event) {
	var children = rooms[this.getAttribute("room")].children;
	if (this.value >= 0 && this.value < 5) {
		if (this.value < children.length) {
			while (this.value < children.length) {
				children.pop();
			}
		} else if (this.value > children.length) {
			while (this.value > children.length) {
				children.push(17);
			}
		}
	} else {
		children = [];
	}
	showRooms(rooms);
}

// controller
function changeAge(event) {
	var children = rooms[this.getAttribute("room")].children;
	if (this.value > -1 && this.value < 18) {
		rooms[this.getAttribute("room")].children[this.getAttribute("child")] = parseInt(this.value);
	} else {
		rooms[this.getAttribute("room")].children[this.getAttribute("child")] = 17;
	}
	
	showRooms(rooms);
}