renderLoginScreen = function(  ) {
	var $loginScreen = $('<div></div>').addClass('loginScreen');
	
	getRenderableSegment().append(
		$( '<div></div>' ).addClass('title').html( texts['titel'] )
	).appendTo( $loginScreen );
	getRenderableSegment().append(
		$( '<div></div>' ).addClass('description').html( texts['beschrijving'] )
	).appendTo( $loginScreen );
	
	
	var $loginControlsContainer = $( '<div></div>' ).addClass('loginControlsContainer');
	getRenderableSegment().append( $loginControlsContainer ).appendTo( $loginScreen );

	var $innerLoginControls= $('<div></div').addClass('loginControls').append(
		$( '<div></div>' ).addClass('instruction').html( texts['instructie'] ),
		$( '<input>' ).addClass('loginField').attr('type', 'text').attr( 'placeholder', texts['invoer-tekst'] )
			.on( 'keydown', setFeedback),
		$( '<button></button>' ).addClass('loginButton').html( texts['knop-tekst'] )
			.on( 'click', login ),
		$( '<div></div>' ).addClass('feedback').html( '' )
	).appendTo( $loginControlsContainer );
	
	getRenderableSegment().addClass('space').appendTo( $loginScreen );
	
	var $information = $( '<div></div>' ).addClass('information');
	getRenderableSegment().append( $information ).appendTo( $loginScreen );
	
	var $privacyBlock = $('<div></div>').addClass('privacy container').append(
		$('<div></div>').addClass('privacy title').html( texts['privacy-titel'] ),
		$('<div></div>').addClass('privacy content').html( texts['privacy'] )
	).appendTo( $information );

	$privacyBlock.append(getPrivacyCheckboxDom());

	$('body').empty().append($loginScreen);
}

getRenderableSegment = function( ) {
	return $('<div></div>').addClass('loginSegment');
}

getPrivacyCheckboxDom = function() {
	let checkboxDiv = document.createElement('div');
	checkboxDiv.setAttribute('class', 'privacy-checkbox-container')

	let checkbox = document.createElement('input');
	checkbox.setAttribute('type','checkbox')
	checkbox.setAttribute('id', 'privacy-checkbox');
	checkbox.setAttribute('name','privacy-checkbox')

	let checkboxLabel = document.createElement('label');
	checkboxLabel.setAttribute('for','privacy-checkbox')
	checkboxLabel.textContent = texts['privacy-checkbox-text'];

	checkboxDiv.appendChild(checkbox);
	checkboxDiv.appendChild(checkboxLabel);

	return checkboxDiv;
}

login = function() {
	var token = $('.loginField').val().slice(0,32);
	token = token.padStart(32-8, '0');
	var url = 'map.html?token=43941173wEwwTvDFrXQkuNzrSyDjjjbs'.slice(0, -(token.length))+token;
	
	if(privacyCheckboxIsChecked()) {
		var loginAttempt = $.ajax({ url: url, method: 'GET' });
		loginAttempt.then(function() { window.location.href = url; });
		loginAttempt.catch(function() {
			 setFeedback( texts['inloggen-mislukt'] );
		 });
	} else {
		setFeedback( texts['privacy-checkbox-error'] );
	}
}

setFeedback = function(text) {
	if (typeof text !== 'string') {
		$('.feedback').fadeOut(1000);
	} else {
		$('.feedback').html(text);
		$('.feedback').stop(true, false).fadeIn(10);
	}
}

privacyCheckboxIsChecked = function() {
	let checkbox = document.getElementById('privacy-checkbox');
	
	return checkbox.checked;
}

var texts = {
	'titel': '<h1>Duursaam Benoordenhout</h1>',
	
	'beschrijving': '<p>Welkom bij het DuurSaam BenoordenHout hulpmiddel voor  verkenning naar een aardgasvrije woning. Je kunt hier gegevens over je eigen woning invoeren en vervolgens toetsen welke maatregelen voor jouw persoonlijke situatie interessant kunnen zijn. Je kunt hieronder inloggen met de persoonlijke code.</p>',
	
	'instructie': '<p>Voer hier je code in, en klik op "Inloggen".</p>',
	
	'invoer-tekst': 'Hier uw code',
	
	'knop-tekst': 'Inloggen',
	
	'inloggen-mislukt': '<p>Het is niet gelukt om met deze code in te loggen. Controleer de code en probeer het opnieuw.</p>',
	
	'privacy-titel': '<h2>Jouw privacy</h2>',
	
	'privacy': '<p>Door je aan te melden bij deze applicatie en in te loggen met je persoonlijke huishouden-gebonden code, ga je akkoord met de verwerking van de door jou ingevulde gegevens ten behoeve van het verduurzamingstraject in Benoordenhout.</p><p>Het is altijd mogelijk om alle gegevens te verwijderen. Ga voor meer informatie en de volledige privacy statement naar: <a href="https://www.duursaambenoordenhout.nl/" target="_blank">duursaambenoordenhout.nl</a></p>',

	'privacy-checkbox-text': 'Ja, ik ga akkoord met het verwerken van de gegevens die ik in deze applicatie invoer.',

	'privacy-checkbox-error': '<p>Let op! Voordat je inlogt, is het noodzakelijk dat je akkoord gaat met het verwerken van de gegevens die je invult. Lees de privacy informatie onderin.</p>'
};

$( document ).ready(function() {
    renderLoginScreen();
});