// Functions to control the fancifulness of the Soccer Registration.
// Main functions here are sliding down the registration form, and adding a 
// extra child when the user clicks the link.

var form_container = '#registration-form';
var register_button = '#register-button';
var registration_form = '#soccer-registration';
var add_child_button = '.add-child';
var error_container = '#form-errors';

$(function () {
    //$(form_container).hide();
	
	$(register_button).bind("click", function() {
		form_show();		
	});

	$(add_child_button).bind("click", function() {
		add_child();
		return false;	
	});

	$(registration_form).validate({
		errorLabelContainer: error_container,
		wrapper: "li",
		rules: {
			parent_first_name: {
				required:true
			},
			parent_last_name: {
				required:true
			},
			number: {
				required:true
				//number: true
			},
			email: {
				required:true,
				email: true
			}
		}
	});


	$('a.external').each( function() {
		$(this).attr('target', '_blank');
	});


});

function form_show() {
	// Check if the form is visible.
	if($(form_container).is(':visible')) {
		// Do nothing
	} else {
		// Form isn't visible. Show the form.
		$(register_button).fadeOut('slow');
		$(form_container).slideDown('slow');
	}
}

function remove_child(id) {
	$('#' + id).remove();
	return false;
}

function add_child() {

	var field_container = '#children-forms';
	var id = '#id';

	// First, get the number of the children currently there.
	var count = $(id).val();
	var new_id = parseInt(count) + 1;

	$(field_container).append('<div id="'+ new_id +'">' +
								'<div>' + 
									'<label for="child-name-' + new_id +'">Child\'s Full Name</label>' + 
									'<input type="text" class="required" title="Child\'s name is required" name="childs_name[' + new_id +']" id="child-name-' + new_id +'" />' + 
								'</div>' + 

								'<div>' + 
									'<label for="child-age-' + new_id +'">Child\'s Date of Birth</label>' + 
									'<input type="text" name="childs_age[' + new_id +']" id="child-age-' + new_id +'" />' + 
								'</div>' +
								'<div>' +
									'<label>Uniform Size</label>' +
									'<select name="size[0]">' +
											'<option value="S">Small</option>' +
											'<option value="M">Medium</option>' +
											'<option value="L">Large</option>' +
											'<option value="XL">Extra Large</option>' +
									'</select>' +
								'</div>' +

								'<div>' +
									'<label for="club'+ new_id +'">Club playing for</label>' +
									'<input type="text" name="club[' + new_id +']" id="club'+ new_id +'" />' +
								'</div>' +

								'<div>' +
									'<label for="position'+ new_id +'">Position</label>' +
									'<input type="input" name="position[' + new_id +']" id="position'+ new_id +'" />' +
								'</div>' +
								'<div>' +
										'<label for="medical_cond'+ new_id +'">Any medical condition?</label>' +
										'<input type="input" name="medical_cond['+ new_id +']" id="medical_cond'+ new_id +'" />' +
									'</div>' +
								'<div>' +
								'<p><span class="remove-child" onClick="remove_child(' + new_id +');">- Remove child</span></p>' +
								'</div>');
	$('#id').val(new_id);

}