#js [javascript]
$(document).ready(function() {

	renderProgressBar = function() {
		var pcComplete = parseInt($('#arrivedMembers').text()) / parseInt($('#totalMembers').text()) * 100;
		$('#progressBar').progressbar({value: pcComplete})
	}

	renderProgressBar();

	$('input:checkbox').change(function() {
		var checked = this.checked;
		console.log("member " + this.value + " = " + checked);

		$.ajax({
			type: "POST",
			url: "/member/toggle-arrived",
			data: "id="+this.value,
			dataType: 'json',
			success: function(response){
				if(response.status == 'error') {
					alert(response.msg);
				} else {
					$('#alerts').text(response.msg);
					var prevArrived = parseInt($('#arrivedMembers').text());
					if (checked) {
						$('#arrivedMembers').text(prevArrived+1);
					} else {
						$('#arrivedMembers').text(prevArrived-1);
					}
					renderProgressBar();
				}
			}
		});
	});
});

#html [html]
<div id="progressBar"></div>
<div id="progressData" class="ui-helper-hidden">
	<p id="totalMembers"><?php echo $door_list->getNbMembers() ?></p>
	<p id="arrivedMembers"><?php echo $door_list->getNbMembersArrived() ?></p>
</div>