// We can append new div objects to the HTML structure with this function
function appendPassenger( content, target ) {
	if( content != '' && target != ''){
		if( target.append(content) ){
			return true;
		}
		return false;
	}
	return false;
}

// We can delete the other passengers by this function
function deletePassenger( object ){
	if( object != "" ){
		objectId = $(object).attr('id');					
		$('#'+objectId).fadeOut(300, function(){ $('#'+objectId).remove()});
		return true
	}
	return false;
}		

$(document).ready(function() {	
	
	// Check the status of the travelAlone radio button
	$('input[name=travelAlone]').change(function (){
		travelAlone = $('input[name=travelAlone]:checked').val();	
		if( travelAlone == 0 ){
			// If the value of the radio button has changed -> Display the passengers fieldset
			$('#passengersField').show();
			$('#addButton').css('display', 'block');
			
			var i = 2;			
			$('#addButton').click(function(event) {
				// If the user click on the addButton -> we append a new div to the html with an individual id
				var newPassenger = '<div id="passenger' + i + '" class="passenger">' +
				'<p><label>Utas neve: </label><input type="text" name="passenger-name' + i + '" class="input"/></p>' +
				'<p><label>Utas születési dátuma: </label><input type="date" name="passenger-birth' + i + '" class="input"/></p>' +
				'<button class="deleteButton" onClick="deletePassenger( $(this).parent() ); return false;">Utas törlése</button>' +
				'</div>';
				appendPassenger( newPassenger, $('#passengers') );
				i++;
				return false;
			});
		}
		else if( travelAlone == "" || travelAlone == 1 ){
			// If there is only one passenger -> hide the addPassenger button
			$('#passengersField').hide();
		}
	});
});