$(document).ready(function() {
	// Hide the labels
	$('#container-name > label, #container-email > label, #container-comments > label, #container-phone > label, #container-time > label').hide();

	// Check if person is active
	checkPerson(false);
	// On click person: check if we need to hide something
	$('#contact-person-0, #contact-person-1').click(function() {checkPerson(true)});

	// Check if meeting is active
	checkMeeting(false);
	// On click meeting: check if we need to hide something
	$('#meeting-0, #meeting-1').click(function() {checkMeeting(true)});

	// Replace the team-field by the pictures
	replaceMembers();
});

/* Check person field */
function checkPerson(slide) {

	// If persion is active:
	if($('#contact-person-1:checked').size() > 0) {
		// Show extra person fields:
		if(slide) {
			$('#balloon-person').slideDown('fast');
		} else {
			$('#balloon-person').show();
		}
	// IF person is not active:
	} else {
		// Hide extra person fields
		if(slide) {
			$('#balloon-person').slideUp('fast');
		} else {
			$('#balloon-person').hide();
		}
	}
}

/* Check meeting field */
function checkMeeting(slide) {

	// IF meeting is active:
	if($('#meeting-1:checked').size() > 0) {
		// Show extra meeting fields
		if(slide) {
			$('#balloon-meeting').slideDown('fast');
		} else {
			$('#balloon-meeting').show();
		}
	// If person is not active:
	} else {
		// Hide extra meeting fields
		if(slide) {
			$('#balloon-meeting').slideUp('fast');
		} else {
			$('#balloon-meeting').hide();
		}
	}
}

/* Replace the team by pictures */
function replaceMembers() {

	// Add a new div
	$('#container-person').prepend('<div id="person-images"></div>');

	// Load the persons
	$('#person-images').load(jQueryBaseHref + '/contact/team', function() {
		// Hide the select
		$('#person').hide();

		// Add each option to the persons-div
		$('#person-images > div').each(function() {

			// Get the id of the team-member
			var id = $(this).attr('id');
			id = id.replace('member-', '');

			// Check if it is already checked: if so we activate this person
			if($("input[id=person-"+id+"]").attr('checked') == true) {
				$(this).addClass('active');
			}

			// When the person is clicked: we activate this option in the select
			$(this).click(function() {
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				
				$("input[id=person-"+id+"]").attr('checked', true);
			});
		});
	});


}