jQuery(document).ready(function() {
	var attendees_container = jQuery('#attendees');
	var quantity_onLoad = jQuery('#quantity').val();

	// On page load fill attendees table with selected quantity, this is done because if a user
	// refreshes the page the selected quantity may not reset to 1 but the attendes fields will

	for (var i = 1; i <= quantity_onLoad; i++) {
		attendees_container.append('<div><strong>Attende '+i+'</strong><br /><table><tr><td><span class="required">*</span>First Name: <br /> <input type="text" name="attendee_first_name_'+i+'" /></td><td><span class="required">*</span>Last Name: <br /> <input type="text" name="attendee_last_name_'+i+'" /></td><td><span class="required">*</span>Company: <br /> <input type="text" name="attendee_company_'+i+'" /></td></tr><tr><td><span class="required">*</span>Email: <br /> <input type="text" name="attendee_email_'+i+'" /></td><td><span class="required">*</span>Name on Badge: <br /> <input type="text" name="attendee_badge_name_'+i+'" /></td><td colspan="3"><span class="required">*</span>Phone #: <br /> <input type="text" name="attendee_phone_'+i+'" /></td></tr></table></div>');
	}


	// When user changes number of tickets either append
	// or remove the appropriate amount of attende fields

	jQuery('#quantity').change( function() {

		var current_quantity = jQuery('#attendees div').size();
		var selected_quantity = jQuery('#quantity').val();
		var needed_quantity = selected_quantity - current_quantity;
		if (needed_quantity > 0) {
			var tmp_count = current_quantity;
			for (var i = 0; i < needed_quantity; i++) {
				tmp_count++;
				attendees_container.append('<div><strong>Attende '+tmp_count+'</strong><br /><table><tr><td><span class="required">*</span>First Name: <br /> <input type="text" name="attendee_first_name_'+tmp_count+'" /></td><td><span class="required">*</span>Last Name: <br /> <input type="text" name="attendee_last_name_'+tmp_count+'" /></td><td><span class="required">*</span>Company: <br /> <input type="text" name="attendee_company_'+tmp_count+'" /></td></tr><tr><td><span class="required">*</span>Email: <br /> <input type="text" name="attendee_email_'+tmp_count+'" /></td><td><span class="required">*</span>Name on Badge: <br /> <input type="text" name="attendee_badge_name_'+tmp_count+'" /></td><td colspan="3"><span class="required">*</span>Phone #: <br /> <input type="text" name="attendee_phone_'+tmp_count+'" /></td></tr></table></div>');
			}
		} else if (needed_quantity < 0) {
			var to_remove = Math.abs(needed_quantity);
			for (var i = 0; i < to_remove; i++) {
				jQuery('#attendees div:last-child').remove();
			}
		} else { /* Do nothing */ }

	});


	// When user clicks Reset button quantity gets reset to one, we
	// will need to reflect this change on the attende fields as well

	jQuery('#reset').click( function() {

		var current_quantity = jQuery('#attendees div').size();
		var to_remove = Math.abs(1 - current_quantity);
		for (var i = 0; i < to_remove; i++) {
			jQuery('#attendees div:last-child').remove();
		}

	});


});
// Coded by Miguel Sainz Jr.