var childrenPerRoom=new Array();
var adultsPerRoom=new Array();
var childAgesPerRoom=new Array();
var numRooms=0;
var maxChildren=0;


adultsPerRoom[0]=2;
childrenPerRoom[0]=0;


    numRooms=1;
    reBox();

    function setChildAge(room, child, age) {
        if (childAgesPerRoom[room] == null) {
            childAgesPerRoom[room] = new Array();
        }
        childAgesPerRoom[room][child] = age;
    }

    function setNumAdults(room, numAdults) {
        adultsPerRoom[room] = numAdults;
    }

    function setNumChildren(room, numChildren) {
        childrenPerRoom[room] = numChildren;
        reBox();
    }

    function setNumRooms(x) {
        numRooms = x;

        for (i = 0; i < x; i++) {
            if (adultsPerRoom[i] == null) {
                adultsPerRoom[i] = 2;
            }
            if (childrenPerRoom[i] == null) {
                childrenPerRoom[i] = 0;
            }
        }
        reBox();
    }

 
    function reBox() {
        maxChildren = 0;
        for (var i = 0; i < numRooms; i++) {
            if (childrenPerRoom[i] > maxChildren) {
                maxChildren = childrenPerRoom[i];
            }
        }

        var x = '';
          
        
       x +="<div style='margin-bottom:20px;'>";
	   x +="<div style='float:left;width:120px;margin-left:60px;'>Adults (age 19+)</div>";
	   x +="<div>Children (0-18)</div>";
	   for (i=0;i<numRooms;i++) {
	   	   j= i+1;
		   x +="<div style='clear:both'></div>";
		   x +="<div style='float:left;width:50px;'>Room " + j +"</div>";
		   x +="<div style='float:left;width:50px;margin-left:10px;'>";
		   x +=generateSelectBox('adultsroom'+j,'setNumAdults('+i+',this.value)',1,4,adultsPerRoom[i]);
		   x +="</div>";
		   x +="<div style='float:left;width:50px;margin-left:70px;'>";
		   x +=generateSelectBox('childrenroom'+j,'setNumChildren('+i+',this.value)',0,3,childrenPerRoom[i]);
		   x +="</div>";
	   }
			
			
            var boxHeader = false;
            for (var i = 0; i < numRooms; i++) {
            
                if (childrenPerRoom[i] > 0) {
                
                if (!boxHeader) {
                
                x += '<div style="margin-top:30px;"><div style="margin-top:20px;margin-bottom:20px;color:blue;">Please provide the ages of children in each room. Children ages should be their age at the time of travel.</div>';
                
                x += '<div style="margin-bottom:10px;">';
				for ( j=0; j < maxChildren;j++) {
					if (j ==0) {
						x+= '<div style="float:left;margin-left:75px; width:50px;">Child ' + (j+1) + '</div>';
					}
					else {
						x+= '<div style="float:left;margin-left:10px; width:50px;">Child ' + (j+1) + '</div>';
					}
				}
				x += '<div style="clear:both"></div>';
				x += '</div>';

                }
                boxHeader = true;
                
                
                x += '<div style="float:left; widows:50px;">Room '+(i+1)+'</div>';
                for (k=0;k<childrenPerRoom[i];k++) {
                	var def = -1;
                	if (childAgesPerRoom[i] != null) {
                		if (childAgesPerRoom[i][k] != null) {
                			def = childAgesPerRoom[i][k];
                		}
                	}
	                if (k==0) {
		                x += '<div style="float:left;margin-left:30px; width:50px;">';
	                }
	                else {
		                x += '<div style="float:left;margin-left:10px; width:50px;">';
		            }
		           // alert('<select name="child_'+(1+k)+'_room_'+(1+i)+'">');
//		            alert("child "+(1+k) +" in room " + (1+i));
		            x += '<select name="childage_'+(1+k)+'_room_'+(1+i)+'" onchange="setChildAge('+i+','+k+',this.value)" id="take_'+(1+k)+'_'+(1+i)+'" class="validate[required]">';
		            x += '<option value=""'+(def == -1 ? ' selected' : '')+'>-?-</option>';
		            x += '<option value="0"><1</option>';
		            for (q =1; q < 18; q++) {
		                
		               	x += '<option value="'+q+'"'+(def == q ? ' selected' : '')+'>'+q+'</option>';
		            }
		            x += '</select></div>';
	                
	            }
                x += '<div style="clear:both"></div>';
                
            
                }
            }
            if (boxHeader) {
                x += '</div>';
            }
        
		$("#showroom").html(x);
		
    }

    function generateSelectBox(name, onchange, min, max, selected) {
        var x = '<select name="' + name + '"';
        if (onchange != null) {
            x += ' onchange="' + onchange + '"';
        }
        x +='>\n';
        for (var i = min; i <= max; i++) {
            x += '<option value="' + i + '"';
            if (i == selected) {
                x += ' selected';
            }

            x += '>' + i + '\n';
        }
        x += '</select>';
        return x;
    }