var rooms = {
	
	"":{
		types:["--------------------"],
		typeCallback:function(){},
		occupancy:['--------------------'],
		occupancyCallback:function(){
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.hide();
			cb.empty();
		}
	},
	
	"Single":{
		types:["Standard"],
		typeCallback:function(){},
		occupancy:['1'],
		occupancyCallback:function(){
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.hide();
			cb.empty();
		}
	},
	
	"Double":{
		types:["Standard","Executive"],
		typeCallback:function(){},
		occupancy:['1','2'],
		occupancyCallback:function(){
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.hide();
			cb.empty();
		}
	},
	
	"Twin":{
		types:["Standard","Executive"],
		typeCallback:function(){},
		occupancy:['1','2'],
		occupancyCallback:function(){
			var cb = $('#childBoxes');
			cb.empty();
		}
	},
	
	"Family":{
		types:["Standard","Executive"],
		typeCallback:function(){},
		occupancy:['3','4'],
		occupancyCallback:function(elem){
			
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.show();
			cb.empty();
			
			// Child 1			
			var child1Label = $('<label>Child 1<span>*</span></label>');
			child1Label.attr('for','child1');
			
			var child1 = $('<input type="text">');
			child1.attr('title','Please enter the age of child 1');
			child1.attr('name','4.Child 1 age');
			child1.attr('size','2');
			child1.attr('id','child1');
			child1.addClass('v_number');
			
			// Child 2			
			var child2Label = $('<label>Child 2<span>*</span></label>');
			child2Label.attr('for','child2');
			
			var child2 = $('<input type="text">');
			child2.attr('title','Please enter the age of child 2');
			child2.attr('name','4.Child 2 age');
			child2.attr('size','2');
			child2.attr('id','child2');
			child2.addClass('v_number');
			
			cb.append(child1Label).append(child1).append(child2Label).append(child2);			
			
		}
	},
	
	"Junior Suite":{
		types:["Executive"],
		typeCallback:function(){},
		occupancy:['1','2','3','4'],
		occupancyCallback:function(elem){			
			
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.hide();
			cb.empty();
			
			// Check number of rooms
			var rooms = parseInt(elem.val());
			if(rooms < 3) return;
				
			// Show Box
			cr.show();
			
			// Child 1			
			var child1Label = $('<label>Child 1<span>*</span></label>');
			child1Label.attr('for','child1');
			
			var child1 = $('<input type="text">');
			child1.attr('title','Please enter the age of child 1');
			child1.attr('name','4.Child 1 age');
			child1.attr('size','2');
			child1.attr('id','child1');
			child1.addClass('v_number');
			
			// Child 2			
			var child2Label = $('<label>Child 2<span>*</span></label>');
			child2Label.attr('for','child2');
			
			var child2 = $('<input type="text">');
			child2.attr('title','Please enter the age of child 2');
			child2.attr('name','4.Child 2 age');
			child2.attr('size','2');
			child2.attr('id','child2');
			child2.addClass('v_number');
			
			cb.append(child1Label).append(child1).append(child2Label).append(child2);			
				
			
		}
	},
	
	"Four Poster":{
		types:["Executive"],
		typeCallback:function(){},
		occupancy:['1','2'],
		occupancyCallback:function(){
			var cb = $('#childBoxes');
			var cr = $('#childTable');
			cr.hide();
			cb.empty();
		}
	}
};

$(function(){
	
	// On Room Size Change Excectue Form info change
	$('#roomSize').change(function(e){
		changeForms(e.target);
		$('#roomType').trigger('change');
		$('#roomOccupancy').trigger('change');
		
	});
	
	
	function changeForms(elem)
	{
		
		$elem = (elem instanceof jQuery) ? elem : $(elem);
		var val = $elem.val();
		
		// Check room object exists
		if( rooms[val] == "undefined") return;
		
		// Local Vars
		var roomType = $('#roomType');
		var roomObj = rooms[val];
		var roomOccupancy = $('#roomOccupancy');
		
		var typesOptions = [];
		var occupancyOptions = [];
		
		// Set room types
		var typesLength = roomObj.types.length;
		for(var i=0; i < typesLength; i++) {
			var opt = $('<option></option');
			opt.attr('value',roomObj.types[i]);
			opt.text(roomObj.types[i]);
			typesOptions.push(opt.get(0));
		}
		
		// Set the new options
		setOptions(roomType,typesOptions);
		roomType.change(function(e){ $this = $(e.target); roomObj.typeCallback($this); });
				
		// Set Occupancy
		var occupancyLength = roomObj.occupancy.length;
		for(var i=0; i < occupancyLength; i++) {
			var opt = $('<option></option');
			opt.attr('value',roomObj.occupancy[i]);
			opt.text(roomObj.occupancy[i]);
			occupancyOptions.push(opt.eq(0));
		}
							
		// Set the new options
		setOptions(roomOccupancy,occupancyOptions);
		roomOccupancy.change(function(e){ $this = $(e.target); roomObj.occupancyCallback($this);});
		
	}
	
	/**
	 * setOptions()
	 * @param elem element 
	 * @param values array of option elements
	 */
	function setOptions(elem, values)
	{
		var $elem  = (elem instanceof jQuery) ? elem : $(elem);
		var length = values.length;
		
		// Remove Values
		$elem.empty();
		
		for(var i=0; i < length; i++) {
			$elem.append(values[i]);
		}
		
	}
	
	
	
});
