// control party detail page
	var BirthdayChilds = new Class({
		initialize: function(){
			// prefix variable for new the object
			this.childFirstName = 'childFirstName';
			this.childLastName = 'childLastName';
			this.day = 'day';
			this.month = 'month';
			this.year = 'year';
			this.childGender = 'childGender';
			
			this.monthName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

			this.containerBC = $('birthdayPanel'); 		// container of the birthday panel
			this.buttonAddChild = $('buttonAddChild'); 	// button for creation new child
			
			this.numOfBirthdayKids = $('numOfBirthdayKids');// hidden field
			this.maxNumOfBirthdayKids = $('maxNumOfBirthdayKids'); // maximum of birthday children
			
			this.onLoad();
		},
		onLoad: function(){
			// invoke event add child
			this.setupEventButtonAddChild();
			// load
			if($chk(this.numOfBirthdayKids)){
				if(this.getNumOfBirthdayKids()== 0){
					// add birthday child information block
					this.requestNewChild();
				}
			}
		},
		setupEventButtonAddChild: function(){
			if($chk(this.buttonAddChild)){
				this.buttonAddChild.addEvent('click', function(event){
					event.stop();
					if($chk(this.numOfBirthdayKids) && (this.getNumOfBirthdayKids() <= this.getMaxNumOfBirthdayKids()-1)){
						this.requestNewChild();
					} else {
						alert('Cannot add birthday kids more than ' + this.getMaxNumOfBirthdayKids() + '.');
					}
					// remove button
					/*if(this.getNumOfBirthdayKids() == (this.getMaxNumOfBirthdayKids()-1)){
						this.buttonAddChild.setStyle('display', 'none');
						//this.buttonAddChild.removeEvent('click');
					}*/
				}.bindWithEvent(this));
			}
		},
		// get number of children from hidden field
		getNumOfBirthdayKids: function(){
			return String(this.numOfBirthdayKids.get('value')).toInt();
		},
		getMaxNumOfBirthdayKids: function(){
			return this.maxNumOfBirthdayKids.get('value');
		},
		// request to servlet
		requestNewChild: function(){
			var URL = '';
			if($chk($('page')) && $('page').get('value') == 'ChangeBookingDetails.jsp'){
				URL = 'ChangeBookingPartyDetails.do?action=addNewChild';
			} else {
				URL = 'BookingPartyDetails.do?action=addNewChild';
			}

			new Request.JSON({
				url: URL,
				onComplete: function(JSONData){
					if(JSONData != null) {
						this.addNewChild(JSONData.CustomerChild);						
					}
				}.bind(this)
			}).send();
		},
		addNewChild: function(item){
			// increase the number of children
			if(!($chk(this.containerBC)))return;
			//var childId = Math.abs(item.customerChildId);
			var childId = String(item.customerChildId).replace(/-/g, 'Minus');

			var ulTemp  = new Element('ul', {'class': 'birthday-child-profile', 'id': ('birthdayChildPanel' + childId)});
			var liTemp1 = new Element('li').inject(ulTemp);
			var liTemp2 = new Element('li').inject(ulTemp);
			var liTemp3 = new Element('li').inject(ulTemp);
			var liTemp4 = new Element('li').inject(ulTemp);
			var liTemp5 = new Element('li').inject(ulTemp);
			// first name
			var label1 = new Element('label', {'text': 'Birthday Child\'s First Name', 'class': 'label-party-detail2'}).inject(liTemp1);
			new Element('span', {'text': '*', 'class': 'required'}).inject(label1);
			new Element('span', {'text': ':'}).inject(label1);
			new Element('input', {'name': this.childFirstName + childId, 'class': 'input-register'}).inject(liTemp1);
			// last name
			var label2 = new Element('label', {'text': 'Birthday Child\'s Last Name', 'class': 'label-party-detail2'}).inject(liTemp2);
			new Element('span', {'text': '*', 'class': 'required'}).inject(label2);
			new Element('label', {'text': ':'}).inject(label2);
			new Element('input', {'name': this.childLastName + childId, 'class': 'input-register'}).inject(liTemp2);
			// date of birth
			var label3 = new Element('label', {'text': 'Birthday Child\'s Date of Birth', 'class': 'label-party-detail3'}).inject(liTemp3);
			new Element('span', {'text': '*', 'class': 'required'}).inject(label3);
			new Element('span', {'text': ':'}).inject(label3);
			var dropdownDay = new Element('select', {'name': this.day + childId, 'class': 'select-party-detail2'}).inject(liTemp3);
			for(var i = 1; i <= 31; i++) {
				new Element('option', {'value': i, 'html': i}).inject(dropdownDay);
			} 
			var dropdownMonth = new Element('select', {'name': this.month + childId, 'class': 'select-party-detail2'}).inject(liTemp3);
			for(var i = 1; i <= 12; i++) {
				new Element('option', {'value': i, 'html': this.monthName[i-1]}).inject(dropdownMonth);
			}
			var dropdownYear = new Element('select', {'name': this.year + childId, 'class': 'select-party-detail2'}).inject(liTemp3);
			var d = new Date();
			for(var i = 1995; i <= d.getFullYear(); i++) {
				new Element('option', {'value': i, 'html': i}).inject(dropdownYear);
			}
			// gender
			var lable4 = new Element('label', {'text': 'Birthday Child\'s Gender', 'class': 'label-party-detail4'}).inject(liTemp4);
			new Element('span', {'text': '*', 'class': 'required'}).inject(lable4);
			new Element('span', {'text': ':'}).inject(lable4);
			new Element('input', {'type': 'radio', 'class': 'radio-gender', 'name': this.childGender + childId, 'value': 1}).inject(liTemp4);
			new Element('label', {'text': 'Male', 'class': 'label-gender'}).inject(liTemp4);
			new Element('input', {'type': 'radio', 'class': 'radio-gender', 'name': this.childGender + childId, 'value': 2}).inject(liTemp4);
			new Element('label', {'text': 'Female', 'class': 'label-gender'}).inject(liTemp4);
			var removeChild = new Element('a', {'text': 'remove', 'href': '#', 'class': 'label-remove-child'}).inject(liTemp4);
			removeChild.addEvent('click', function(event){
				event.stop();
				// detect number of birthday kids
				if(this.getNumOfBirthdayKids()>1){
					// descrease value of number of birthday kids
					this.numOfBirthdayKids.set('value', this.getNumOfBirthdayKids() - 1);
					var removedElement = ulTemp.dispose();
					// remove childid from session
					var URL = 'BookingPartyDetails.do?action=removeChild&childId='+ childId;
					if($chk($('page')) && $('page').get('value') == 'ChangeBookingDetails.jsp'){
						URL = 'ChangeBookingPartyDetails.do?action=removeChild&childId='+ childId;
					}
					new Request({url: URL}).send();
				}
			}.bindWithEvent(this));
			// line
			//new Element('div', {'class': 'line-party-detail'}).inject(liTemp5);
			// insert li into ul
			liTemp1.inject(ulTemp);
			liTemp2.inject(ulTemp);
			liTemp3.inject(ulTemp);
			liTemp4.inject(ulTemp);
			//liTemp5.inject(ulTemp);
			// insert ul into birthday container
			ulTemp.inject(this.containerBC);
			
			// increase number of guest
			this.numOfBirthdayKids.set('value', this.getNumOfBirthdayKids() + 1);
		}
	});
// add dom ready on this class
window.addEvent('domready', function(){

	// NumericBox
	if($chk($('numberOfGuests'))){
		numericBox($('numberOfGuests'));
	}
	// NumricBox
	if($chk($('partyDetailGuestNumber'))){
		numericBox($('partyDetailGuestNumber'));
	}
	// detect numric key
	function numericBox(textbox){
		textbox.addEvent('keydown', function(key){
			if(key.code == 9){ // tab
				return true;
			} else if(!((key.code>=48 && key.code<=57) || (key.code>=96 && key.code<=105) || (key.code==8) || (key.code==46) || (key.code>=37 && key.code<=40))){
				return false;
			}
		});
	}
	
	// it work on party detail
	new BirthdayChilds();
});