window.addEventListener('load', function() {
	$.getScript('vue.js', function() {
		let data = {
			step: 1,
			page: 'home',
			rulesAccepted: false,
			boardID: 0,
			boardName: '',
			charactername: '',
			password: '',
			passwordApply: '',
			error: {
				charactername: false,
				password: false,
				passwordApply: true,
				creation: false
			},
			messages: [
				{
					id: 'ACCOUNT_ALREADY_EXISTS',
					message: 'Zu deinem Forenaccount existiert bereits ein Charakter.',
					class: 'warning'
				},
				{
					id: 'CREATION_SUCCESSFULLY',
					message: 'Account wurde erfolgreich erstellt.',
					class: 'success'
				},
				{
					id: 'FAILED_REGISTER',
					message: 'Es ist ein Fehler aufgetreten, bitte versuche es erneut.',
					class: 'error'
				},
				{
					id: 'FAILED_WRONG_DATA',
					message:
						'Überprüfe nochmal deinen Charakternamen oder dein Passwort und versuche es erneut.',
					class: 'warning'
				}
			],
			messageID: '',
			message: {
				text: '',
				class: ''
			},
			charCreationDone: false
		};

		let app = new Vue({
			el: '.sv-body',
			data: data,
			methods: {
				setactive: setactive,
				getactive: getactive,
				post: post,
				init: init,
				checkCharacter: checkCharacter,
				checkPassword: checkPassword,
				creationError: creationError,
				prepareDataForSending: prepareDataForSending,
				setData: setData
			}
		});

		Vue.nextTick(function() {
			$('.sv-loading').fadeOut(400, function() {
				$('.sv-loading').remove();
				init();
				$('.sv-body').fadeIn(400);
			});
		});

		function post(path, params, method = 'post') {
			const form = document.createElement('form');
			form.method = method;
			form.action = path;

			for (const key in params) {
				if (params.hasOwnProperty(key)) {
					const hiddenField = document.createElement('input');
					hiddenField.type = 'hidden';
					hiddenField.name = key;
					hiddenField.value = params[key];

					form.appendChild(hiddenField);
				}
			}

			document.body.appendChild(form);
			form.submit();
		}

		function prepareDataForSending() {
			let _data = {
				username: data.charactername,
				password: data.password,
				passwordRe: data.passwordApply,
				forumname: data.boardName,
				forumid: data.boardID
			};

			post('https://srv1.statev.de:22007/register', _data);
		}

		function setactive(val) {
			data.page = val;
			savestep();
		}

		function setData(i, val) {
			data[i] = val;
		}

		function getactive() {
			return data.page;
		}

		function savestep() {
			createCookie('step', data.step, 365);
		}

		function checkCharacter() {
			let charactername = data.charactername;

			data.error.charactername = false;
			if (charactername.length < 5 || charactername.length > 30) {
				data.error.charactername = true;
			}
			createCookie('charactername', data.charactername, 365);
			creationError();
		}

		function checkPassword() {
			let password = data.password;
			let password2 = data.passwordApply;
			data.error.password = false;
			data.error.passwordApply = false;

			if (password.length < 8) {
				data.error.password = true;
				data.error.passwordApply = true;
			}

			if (password != password2) {
				data.error.passwordApply = true;
			}

			createCookie('password', data.password, 365);
			creationError();
		}

		function creationError() {
			if (
				data.error.charactername == true ||
				data.error.password == true ||
				data.error.passwordApply == true
			) {
				return true;
			} else {
				return false;
			}
		}

		function init() {
			data.step = readCookie('step');
			if (data.step == undefined) {
				data.step = 1;
			}
			data.charactername = readCookie('charactername');
			data.password = readCookie('password');
			data.boardName = readCookie('boardUserName');

			if (data.messageID.length != 0) {
				let message = data.messages.find(item => item.id === data.messageID);
				data.message.text = message.message;
				data.message.class = message.class;

				/* TEMPORARY */
				data.page = 'character';
				if (data.messageID == 'CREATION_SUCCESSFULLY') {
					eraseCookie('charactername');
					eraseCookie('password');
					eraseCookie('boardUserName');
					data.step = 5;
					savestep();
					setTimeout(function() {
						window.location.replace(
							'https://statev.de/forum/list/index.php?thread/4168-tutorial-wie-komme-ich-auf-den-server/'
						);
					}, 3000);
				}

				if (
					data.messageID == 'CREATION_SUCCESSFULLY' ||
					data.messageID == 'ACCOUNT_ALREADY_EXISTS'
				) {
					data.charCreationDone = true;
				}
			}
		}

		function createCookie(name, value, days) {
			var expires;

			if (days) {
				var date = new Date();
				date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
				expires = '; expires=' + date.toGMTString();
			} else {
				expires = '';
			}
			document.cookie =
				encodeURIComponent(name) +
				'=' +
				encodeURIComponent(value) +
				expires +
				'; path=/';
		}

		function readCookie(name) {
			var nameEQ = encodeURIComponent(name) + '=';
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) === ' ') c = c.substring(1, c.length);
				if (c.indexOf(nameEQ) === 0)
					return decodeURIComponent(c.substring(nameEQ.length, c.length));
			}
			return null;
		}

		function eraseCookie(name) {
			createCookie(name, '', -1);
		}
	});
});