function statusChangeCallback(response) {
	if (response.status === 'connected') {
		updateStatusLogin();
	} else if (response.status === 'not_authorized') {
		updateStatusLogout();
	} else {
		updateStatusLogout();
	}
}

function checkLoginState() {
	FB.getLoginStatus(function(response) {
		statusChangeCallback(response);
	});
}

window.fbAsyncInit = function() {
	FB.init({
		appId: '534300686691400',
		version    : 'v2.2',
		status: true, // check login status
		cookie: true, // enable cookies to allow the server to access the session
		xfbml: true  // parse XFBML
	});

	FB.getLoginStatus(function(response) {
		statusChangeCallback(response);
	});
};

(function(d, s, id){
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) { return; }
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));

function updateStatusLogin() {
	FB.api('/me', function(response) {
		document.getElementById('status').innerHTML = 'Thanks for logged in, ' + response.name + '!';

		document.getElementById('id').innerHTML = response.id;
		document.getElementById('name').innerHTML = response.name;
		document.getElementById('email').innerHTML = response.email;
		document.getElementById('gender').innerHTML = response.gender;
	});
}

function updateStatusLogout() {
	document.getElementById('status').innerHTML = 'Please log into this app.';

	document.getElementById('id').innerHTML = 'ID ...';
	document.getElementById('name').innerHTML = 'Name ...';
	document.getElementById('email').innerHTML = 'Email ...';
	document.getElementById('gender').innerHTML = 'Gender ...';
}