$(document).ready(function () {
	// SKILLS
	let skills = [
		{
			name: 'C#',
			percentage: 95
		},
		{
			name: '.NET',
			percentage: 95
		},
		{
			name: 'Entity Framework',
			percentage: 80
		},
		{
			name: 'MediatR',
			percentage: 85
		},
		{
			name: 'NodeJS',
			percentage: 95
		},
		{
			name: 'SQL',
			percentage: 75
		},
		{
			name: 'MongoDB',
			percentage: 75
		},
		{
			name: 'Angular8+',
			percentage: 90
		},
		{
			name: 'React',
			percentage: 70
		},
		{
			name: 'Vue',
			percentage: 50
		}
	]
		// Sort by descending percentage
		.sort((a, b) => b.percentage - a.percentage);
	$("#skills").html("");
	$.each(skills, (index, skill) => {
		$("#skills").append(`
<div class="bar flex">
	<div class="bar fill" style="width:${skill.percentage}%">
      <div class="tag bold flex">${skill.name}</div>
   </div>
   <span>${skill.percentage}%</span>
</div>
		`)
	});


	// EDUCATIONS
	let educations = [
		{
			school: "Linux Foundation",
			timeframe: "Feb 2021 - Nov 2021",
			fields_of_study: [
				{
					name: "OpenJS Node.js Application Developer (JSNAD)",
					description: "Het <a href='https://learn.microsoft.com/en-us/certifications/exams/az-900/'>Microsoft AZ-900 Azure Fundamentals examen</a> is ontworpen om de " +
						"basiskennis van cloud computing en de basisprincipes van Azure-services van een individu te testen. Het examen behandelt onderwerpen zoals cloudconcepten, " +
						"core Azure services, beveiliging, privacy, compliance, pricing en support en Azure resourcemanagement. Ik heb me voorbereid op het examen met behulp van het " +
						"<a href='https://learn.microsoft.com/en-us/'>Microsoft Learn platform</a>, samen met de officieel verstrekte labs en hands-on ervaring met Azure." +
						"<br>" +
						"Certificaat: <a href='https://goffincedric.be/assets/cedric-goffin-azure-az-900-azure-fundamentals'>pdf</a>"
				}
			],
			location: {
				name: "Microsoft - AZ-900",
				url: "https://learn.microsoft.com/en-us/certifications/exams/az-900/"
			}
		},
		{
			school: "Linux Foundation",
			timeframe: "Feb 2021 - Nov 2021",
			fields_of_study: [
				{
					name: "OpenJS Node.js Application Developer (JSNAD)",
					description: "<a href='https://training.linuxfoundation.org/certification/jsnad/'>Deze certificatie</a> testte uitgebreid de vaardigheden en kennis van core NodeJS APIs, zoals Buffers & streams, Events, Child processes, module system, ... " +
						"Andere getestte kennisgebieden hielden in: Unit testing, diagnostics, performantie, innerlijke werking van de Node binary en het Node ecosysteem. " +
						"Ik heb me op deze certificering voorbereid door de aanvullende cursus <a href='https://training.linuxfoundation.org/training/nodejs-application-development-lfw211/'>Node.js Application Development (LFW211)</a>, samen met tal van andere kennisbronnen (zowel theoretisch als praktisch materiaal)." +
						"<br>" +
						"Certificaat: <a href='https://goffincedric.be/assets/cedric-goffin-nodejs-jsnad-certificate.pdf'>pdf</a>" +
						"Cursus: <a href='cedric-goffin-nodejs-application-development-lfw211-certificate.pdf'>pdf</a>"
				}
			],
			location: {
				name: "Linux Foundation - JSNAD",
				url: "https://training.linuxfoundation.org/certification/jsnad/"
			}
		},
		{
			school: "Karel de Grote Hogeschool",
			timeframe: "Sept 2016 - Aug 2019",
			fields_of_study: [
				{
					name: "Bachelor - Toegepaste Informatica: Applicatieontwikkeling",
					description: "Deze opleiding was hoofdzakelijk georiënteerd rond het gebruik van Java en object georiënteerd programmeren. In het 2de jaar worden we ook wegwijs gemaakt met C# en de " +
						"integratie hiervan in webapplicaties m.b.v. frameworks zoals ASP.NET MVC, ASP.NET WebAPI en Entity Framework. Verder werd er ook een brede basis " +
						"gelegd voor tal van andere technologieën: Oracle SQL, MSSQL, Angular 2+, Cisco networking, UML en een breed aanbod aan managementvakken. " +
						"Tijdens het laatste jaar van de opleiding zijn we verder ingegaan webtechnologieën zoals Java Spring Boot met Thymeleaf en frameworks zoals Angular 7. " +
						"Deze hebben we ook geïntegreerd in enkele grote projecten om bekend te raken met deze frameworks. Verder zijn we ook afgeweken van klassieke relationele databanken en " +
						"hebben we leren werken met MongoDB databanken. </br>" +
						"Als kers op de taart hebben <a>Thomas Verhoeven</a> en ik stage gelopen bij <a href='https://stacked.be/'>Stacked</a>. " +
						"Daar konden we ons al eens goed onderdompelen in het bedrijfsleven. Op 8 weken hebben we het Tech Dive Platform in elkaar gestoken met behulp van een MEVN stack. " +
						"Uiteindelijk ben ik met onderscheiding afgestudeerd en heb ik de opleiding volledig voltooid volgens het modeltraject van 3 jaar."
				}
			],
			location: {
				name: "Antwerpen - Campus Groenplaats",
				url: "https://www.google.com/maps/place/Campus+Groenplaats+-+KdG+(Karel+de+Grote+Hogeschool)/@51.2181825,4.3998886,17z/data=!4m12!1m6!3m5!1s0x47c3f6ea98a8ce0f:0xf69cda1e60b9ce83!2sKarel+de+Grote+Hogeschool!8m2!3d51.2022912!4d4.3904732!3m4!1s0x47c3f6f6d16cb7fb:0xfc5f09fa2a5e0ae9!8m2!3d51.2181531!4d4.4009028"
			}
		},
		{
			school: "Heilig Graf Turnhout",
			timeframe: "Sept 2014 - Aug 2016",
			fields_of_study: [
				{
					name: "TSO - IT & Netwerken",
					description: "Tijdens mijn laatste 2 jaren in het secundair onderwijs heb ik me al goed kunnen onderdompelen in de wereld van het programmeren. " +
						"Ik leerde er in VB.NET basisapplicaties maken en tijdens het laatste jaar ook VB.NET, HTML5 en CSS3 te combineren met ASP.NET om webapplicaties te maken. " +
						"Verder werd ik ook onderwezen om met Linux om te gaan, kreeg ik de basiskennis Bash scripting, een Windows server op te zetten, basis pc-onderdelen te begrijpen, ... Voor mijn geïntegreerde proef " +
						"moesten we in ASP.NET een responsive website maken voor een organisatie naar keuze. Ik besloot om deze te maken voor het orkest van mijn muziekschool: " +
						"<a href=\"http://gip3cedricgoffin.azurewebsites.net/\" class='highlight'>GIP website</a>"
				}
			],
			location: {
				name: "Turnhout - Campus Patersstraat",
				url: "https://www.google.com/maps/place/Heilig+Graf+secundair+onderwijs+-+campus+Patersstraat/@51.3248802,4.9492606,17z/data=!3m1!4b1!4m5!3m4!1s0x47c6b3d5b9b39f47:0x30ffea8a9e6a2bf1!8m2!3d51.3248769!4d4.9514493"
			}
		},
		{
			school: "Koninklijk Atheneum Ekeren",
			timeframe: "Sept 2010 - Aug 2014",
			fields_of_study: [
				{
					name: "ASO - Wetenschappen & Wiskunde",
					description: "Mijn secundaire opleiding begon in Ekeren. Ik ben altijd al gefascineerd geweest door wetenschappen, " +
						"hoe alles in elkaar steekt, hoe en waarom dingen werken zoals ze werken. Een wetenschappelijk georiënteerde richting " +
						"leek me dan ook de perfecte keuze. Na enkele jaren begon ik me te realiseren dat ik liever een opleiding wilde volgen " +
						"in de informatica. Ik hield me toen al bezig kleine applicaties ineen te steken."
				}
			],
			location: {
				name: "Ekeren",
				url: "https://www.google.com/maps/place/Koninklijk+Atheneum+Ekeren/@51.2764033,4.4199533,17z/data=!3m1!4b1!4m5!3m4!1s0x47c409cdadc738d5:0xb1fc8845b68dee16!8m2!3d51.2764!4d4.422142"
			}
		},
	];
	$("#educations-list").html("");
	$.each(educations, function (index, education) {
		let fields = "";
		$.each(education.fields_of_study, function (field_index, field) {
			fields += "<div>" +
				"   <strong>" + field.name + "</strong><br>" +
				"   <p id=\"" + index + "-" + field_index + "\" class=\"phone-desc hidden\"> " + field.description + "</p>" +
				"</div>" +
				"<span data_id=\"" + index + "-" + field_index + "\" class=\"toggle-show more\">Toon <span id=\"more-less-" + index + "-" + field_index + "\">meer</span> <i class='mdi mdi-arrow-down'></i><br></span>"
		});
		$("#educations-list").append(
			"<div class=\"waypoint experience\" data-animation=\"slide-up\">" +
			"   <div class=\"col-md-4\">" +
			"       <h4 class=\"school\">" + education.school + "</h4>" +
			"       <p class=\"experience-period\">" + education.timeframe + "</p>" +
			"   </div>" +
			"   <div class=\"col-md-8\">" +
			fields +
			"       <span class=\"highlight location\"><a href=\"" + education.location.url + "\" target=\"_blank\"><i class=\"mdi mdi-map-marker-radius\"></i> " + education.location.name + "</a></span>" +
			"   </div>" +
			"</div>"
		)
	});
	$(".toggle-show").on('click', function () {
		if (this.classList.contains("more")) {
			$(this).removeClass("more").addClass("less");
			$("#" + $(this).attr("data_id")).removeClass("hidden").addClass("shown");
			$("#more-less-" + $(this).attr("data_id")).text("minder");
		} else {
			$(this).removeClass("less").addClass("more");
			$("#" + $(this).attr("data_id")).removeClass("shown").addClass("hidden");
			$("#more-less-" + $(this).attr("data_id")).text("meer");
		}
	});


	// WORK EXPERIENCE (TIMELINE)
	let work_experiences = [
		{
			position: ".NET Developer",
			company: "Cheops, Kontich, België",
			timeframe: "Januari 2023 - Heden",
			description: "",
			technologies: [
				".NET 6+",
				".NET Framework 4.6.1+",
				"Entity Framework",
				"MediatR",
				"Dapper",
				"MS SQL",
				"Azure Cloud",
				"Docker",
				"Node.js",
				"OAuth 2.0 + JWT",
				"Angular2+",
				"React",
				"Gitlab",
				"Unit Testing"
			]
		},
		{
			position: "Full Stack Developer",
			company: "RMDY NV, Kontich, Belgium",
			timeframe: "December 2019 - December 2022",
			description: "<p>" +
				"Bij RMDY had ik mijn eerste ervaringen met het werken in zowel interne development teams voor " +
				"interne/externe klanten als een consultant. Door de variatie en ervaring van deze projecten ben ik in staat " +
				"flexibel te zijn in veel verschillende situaties en ontwikkelteams, zowel kleine als grote. " +
				"Enkele hoogtepunten tot nu toe zijn:" +
				"</p><ul>" +
				"<li>Gateway: Naarmate de behoefte aan een gecentraliseerd authenticatie-/gebruikersbeheer systeem groeide, " +
				"kreeg ik de taak om een oplossing te ontwikkelen. Dit systeem werd met 2 andere medewerkers gekickstarted, " +
				"maar werd al snel een tijdje mijn verantwoordelijkheid. Ik was betrokken bij het hele proces, " +
				"van de eerste analyse en het opzetten van de architectuur, tot de daadwerkelijke ontwikkeling en testing, " +
				"evenals ondersteuning, onderhoud en momenteel training van nieuwere werknemers om te leren hoe ze de " +
				"gateway kunnen gebruiken en integreren in hun eigen projecten." +
				"<li>Project onder NDA: Het opgeleverde product bevatte zowel een backend, frontend als mobiele applicatie " +
				"die op dit moment nog in testfase zijn bij de doelgroep. Het frontend-framework werd gebruikt in combinatie " +
				"met het Ionic-framework, zodat zowel Android als iOS-apps konden worden gegenereerd vanuit dezelfde codebase " +
				"die werd gebruikt voor de webapp. De finale release werd mooi binnen de ingeschatte tijd opgeleverd met nog " +
				"ruimte voor change request van de klant en optimalisaties, voordat de eerste tests konden beginnen." +
				"<li>Consultancy@Digipolis: Momenteel werk ik als webontwikkelaar binnen digipolis. Mijn huidige " +
				"taken omvatten een volledige refactor van meerdere applicaties die door Antwerpen worden gebruikt. " +
				"Ik werk voornamelijk aan de Angular2+ frontend applicaties, maar ben mij momenteel aan het heroriënteren " +
				"binnen Digipolis als backend .NET developer." +
				"</ul>",
			technologies: [
				"Node.js",
				"Express",
				"MongoDB",
				"Google APIs",
				"OAuth 2.0 + JWT",
				"NPM package development",
				"Angular2+",
				"Vue.js",
				"Gitlab",
				"Docker",
				".NET",
				"Unit Testing"
			]
		},
		{
			position: "Google Cloud Platform Developer",
			position_note: "(Studentenjob)",
			company: "XTi, Kontich, België",
			timeframe: "June 2019 - July 2019",
			description: "<p>" +
				"Samen met Thomas Verhoeven heb ik gewerkt bij XTi aan een intern onderzoeksproject, betreffende een uitbereiding van de cloud kennis van XTI. " +
				"Voor ons onderzoek over GCP, was XTi hoofdzakelijk bezig met het ontwikkelen van applicaties voor Amazon Web Services, " +
				"maar vanwege de diversificatie en competitie onder de verschillende cloud service providers, wilde XTi hun opties verkennen bij de concurrenten van Amazon Web Services. " +
				"</p><p>" +
				"Ons test project omvatte een kleine immo web scraper, die periodiek websites zou scrapen en resultaten zou cachen, passend bij een gegeven set van filters. Deze filters zouden afhangen van de voorkeuren van gebruikers en naar welke zoekertjes de gebruiker geïnteresseerd was. " +
				"Gebruikers zouden ook op de hoogte gebracht worden wanneer er een nieuw resultaat gevonden werd, dat voldeed aan hun zoekvoorwaarden, of wanneer oude resultaten veranderd waren. " +
				"</p><p>" +
				"In de loop van de komende 4 weken, ontwikkelden we de applicatie en pasten we deze aan om het te laten draaien op App Engine (Flex en standard environments) en maakten we de code meer modulair voor het gebruik in Cloud Functions en Cloud Run. " +
				"Door dit onderzoek raakten we meer en meer bekend met het gebruik van de Google Cloud-infrastructuur, de limitaties en voordelen ervan, ... " +
				"Als extra bonus, hebben we ook opgepikt hoe we Docker containers konden opzetten en aanpassen en hoe we Docker files konden gebruiken voor deployment. " +
				"Dat was iets dat tot dan toe altijd voor ons afgehandeld werd." +
				"</p>",
			technologies: [
				"App Engine (Flex & Standard)",
				"Cloud Functions",
				"Cloud Run",
				"Cloud Scheduler",
				"Cloud Firestore",
				"Java Spring + Selenium",
				"Docker"
			]
		},
		{
			position: "Full Stack Javascript Developer",
			position_note: "(Stage Kdg)",
			company: "Stacked, Edegem, België",
			timeframe: "April 2019 - Juni 2019",
			description: "<p>" +
				"Voor deze <a href='https://www.rmdy.be/experimenteren-met-echte-technologieen-enter-rmdy-stages/'>stage bij Stacked</a>, kregen Thomas Verhoeven en ik de opdracht een web-app te ontwikkelen, " +
				"genaamd 'Tech Dive Platform'. Dit platform zou later worden gebruikt voor mensen om zich te registreren voor de Tech Dives van RMDY. " +
				"De behoefte aan een beheerd platform groeide toen RMDY een groeiende trend opmerkte in het aantal mensen dat kwam opdagen voor hun Tech Dives, " +
				"en dit al sinds ze hun <a href='https://www.rmdy.be/succesvolle-opkomst-voor-onze-eerste-publieke-tech-dive/'>eerste publieke Tech Dive</a> organiseerden. " +
				"</p><p>" +
				"Terwijl we druk in de weer waren met het ontwikkelen van het Tech Dive Platform, raakten we ook meer en meer bekend met concepten zoals code review, " +
				"scrum en agile werkmethode, ... Kortom, onderwerpen die slechts kort aan bod kwamen bij KdG. We hebben er ook geleerd Vue.js te gebruiken, " +
				"een framework dat lijkt op Angular 2+. Leren werken met deze nieuwe technologieën was de voornaamste reden waarom ik deze specifieke stageplaats gekozen had. " +
				"Op deze manier konden we ons perspectief over de huidige en relevante technologieën verbreden, naast de technologieën die we tijdens onze opleiding bij KdG hebben geleerd te gebruiken. " +
				"</p><p>" +
				"Nadat het eindproduct was afgeleverd, vertrok ik met een tevreden gevoel, wetende dat ik tijdens deze stage nieuwe en interessante concepten geleerd heb en blij was dat ik deze kans heb kunnen grijpen." +
				"</p>",
			technologies: [
				"Vue.js + PWA",
				"Node.js + Express",
				"MongoDB",
				"Google APIs",
				"OAuth 2.0 + JWT"
			]
		},
		{
			position: "Website onderhoud",
			position_note: "(Studentenjob)",
			company: "Anubis Care Brasschaat",
			timeframe: "Okt 2016 - Heden",
			description: "<p>" +
				"Bij Anubis Care houd ik me hoofdzakelijk bezig met het onderhouden van de website. Enkele taken die hiertoe behoren zijn:<br>" +
				"<ul>" +
				"   <li>Producten & trainingen toevoegen, aanpassen, verwijderen" +
				"   <li>SEO" +
				"   <li>Kleine wijzigingen aan pagina layouts/site structuur doorvoeren" +
				"</ul>" +
				"Verder voer ik ook nog andere taken uit in Exact Online. Dit gaat dan vooral om productbeheer, voorraadwijzigingen, ..." +
				"</p>",
			technologies: [
				"Wordpress",
				"WooCommerce",
				"Yoast SEO",
				"Exact Online"
			]
		},
		{
			position: "Stagair",
			position_note: "(middelbare stage)",
			company: "Soudal NV Turnhout",
			timeframe: "Okt 2015 - Nov 2015 (2 weken)",
			description: "<p>" +
				"Tijdens mijn stage bij Soudal NV, was mijn primaire taak webforms creëren in Sharepoint:<br>" +
				"<ul>" +
				"   <li>Production process security & issues form:<br>" +
				"       Dit webform had als doel om problemen (ongevallen, voorzorgsmaatregelen, ...) tijdens het productieproces te kunnen melden, samen met een mogelijke oplossing en prioriteit." +
				"   <li>People directory:<br>" +
				"       Een webform waarop alle medewerkers getoond werden. Mogelijkheid tot filteren op verscheidene variabelen." +
				"</ul>" +
				"</p>",
			technologies: [
				"Sharepoint",
				"Infopath",
				"VB.NET"
			]
		},
	];
	$("#timeline").html("");
	$.each(work_experiences, function (index, job) {
		let technologies = "<li class=\"list-inline-item\"><span class=\"badge badge-primary badge-pill\">" +
			job.technologies.join("</span></li><li class=\"list-inline-item\"><span class=\"badge badge-primary badge-pill\">") +
			"</span></li>";

		$("#timeline").append(
			"<article class=\"resume-timeline-item position-relative waypoint\" data-animation=\"slide-in-" + ((index % 2 === 0) ? "right" : "left") + "\">" +
			"   <div class=\"resume-timeline-item-header mb-2\">" +
			"       <div class=\"d-flex flex-column flex-md-row\">" +
			"           <h3 class=\"resume-position-title font-weight-bold mb-1\">" + job.position +
			((job.position_note !== undefined) ? "           <small class=\"text-muted\">" + job.position_note + " </small>" : "") +
			"           </h3>" +
			"       <div class=\"resume-company-name ml-auto\">" + job.company + "</div>" +
			"   </div>" +
			"   <div class=\"resume-position-time\">" + job.timeframe + "</div></div>" +
			"   <div class=\"resume-timeline-item-desc\">" +
			job.description +
			"       <h4 class=\"resume-timeline-item-desc-heading font-weight-bold mb-0\">Gebruikte technologieën:</h4>" +
			"       <ul class=\"list-inline\">" +
			technologies +
			"       </ul>" +
			"    </div>" +
			"</article>"
		)
	});


	// PROJECTS
	let projects = [
		{
			project_id: "integratie_KdG_2018",
			card_title: "Integratieproject KdG 2018",
			card_tag: "C# + ASP.NET",
			filter: {
				name: "C#",
				data_name: "c-sharp"
			},
			title: "Politieke Barometer",
			tag: "SOCIALE MEDIA ANALYSE",
			detail: "De politieke barometer is een webapplicatie die als doel had om trends rond personen, thema's en organisaties te vinden en analyseren en deze op een overzichtelijke wijze aan gebruikers te tonen. " +
				"Deze website was een groepsopdracht voor KdG, in samenwerking met <a href=\"https://textgain.com\" target=\"_blank\" class=\"highlight\">Textgain</a>, <a href=\"http://www.treecompany.be\" target=\"_blank\" class=\"highlight\">Tree Company</a> en <a href=\"https://www.nodebox.net\" target=\"_blank\" class=\"highlight\">Nodebox</a>. " +
				"Ik was verantwoordelijke voor het back-end gedeelte: C#, MSSQL, WebAPI, MVC, Entity Framework Code First + Migrations, ... Verder heb ik ook nog meegewerkt aan een kleine android applicatie voor dit project.",
			// link: "",
			// bullets: [
			//     "",
			//     ""
			// ],
			slides: 4
		},
		{
			project_id: "tdp_stacked_2019",
			card_title: "Internship project Stacked 2019",
			card_tag: "Vue.js, Node.js, MongoDB",
			filter: {
				name: "JAVASCRIPT",
				data_name: "js"
			},
			title: "Tech Dive Platform",
			tag: "MANAGED EVENT PLATFORM",
			detail: "Het Tech Dive Platform is een platform waar gebruikers, die bekend zijn met de Tech Dives georganiseerd door RMDY, zichzelf kunnen registreren en zich kunnen aanmelden om talks van toekomstige Tech Dives bij te wonen. " +
				"De startpagina bevat een dynamisch gridsysteem dat de onderwerpen, het uurrooster, ... kan veranderen naargelang de volgende geplande Tech Dive. " +
				"Voor dit project besloot ik te werken aan zowel front-end als back-end, vanwege de nieuwe technologieën die aan beide kanten van de applicatie aan bod kwamen.",
			// link: "",
			// bullets: [
			//     "",
			//     ""
			// ],
			slides: 5
		}
	];
	$("#project-filter").html("").append("<div class=\"filter active\" data-filter=\"all\">ALL</div>");
	$("#project-filter-float-bar").html("").append("<div class=\"filter active\" data-filter=\"all\">ALL</div>");
	$("#gallery").html("");
	let filters = [];
	$.each(projects, function (index, project) {
		if ($("#project-filter").html().indexOf(project.filter.data_name) === -1) {
			let filter_text = "<div class=\"filter\" data-filter=\"." + project.filter.data_name + "\">" + project.filter.name + "</div>";
			$("#project-filter").append(filter_text);
			$("#project-filter-float-bar").append(filter_text);
		}

		$("#gallery").append("<div class=\"mix " + project.filter.data_name + "\" data-my-order=\"1\" style=\"display: inline-block;\" data-bound>" +
			"   <div>" +
			"       <div class=\"card\" style='background: url(\"../img/thumb-" + index + ".jpg\") center center/cover;'></div>" +
			"       <div class=\"text\">" +
			"           <div class=\"bold\">" + project.card_title + "</div>" +
			"           <span class=\"highlight\">" + project.card_tag + "</span>" +
			"       </div>" +
			"       <div class=\"button\" id=\"" + index + "\">LEARN MORE</div>" +
			"   </div>" +
			"</div>")
	});

	$('#gallery .button').on('click', function () {
		$('body').css({
			overflow: "hidden"
		});
		fillModal(this.id);
		$('.modal-wrap').addClass('visible');
	});

	$('.close').on('click', function () {
		$('body').css({
			overflow: "initial"
		});
		$('.modal-wrap, #modal .button').removeClass('visible');
	});

	$('.mask').on('click', function () {
		$('body').css({
			overflow: "initial"
		});
		$('.modal-wrap, #modal .button').removeClass('visible');
	});

	let carousel = $('#carousel'),
		slideWidth = $(window).width() * 0.9 > 700 ? 700 : $(window).width() * 0.9,
		imgWidth,
		imgHeight,
		threshold = slideWidth / 3,
		dragStart,
		dragEnd;

	setDimensions();

	$('#next').click(function () {
		shiftSlide(-1)
	});
	$('#prev').click(function () {
		shiftSlide(1)
	});

	carousel.on('mousedown', function () {
		if (carousel.hasClass('transition')) return;
		dragStart = event.pageX;
		$(this).on('mousemove', function () {
			dragEnd = event.pageX;
			$(this).css('transform', 'translateX(' + dragPos() + 'px)');
		});
		$(document).on('mouseup', function () {
			if (dragPos() > threshold) {
				return shiftSlide(1)
			}
			if (dragPos() < -threshold) {
				return shiftSlide(-1)
			}
			shiftSlide(0);
		});
	});

	function setDimensions() {
		if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
			slideWidth = $(window).innerWidth();
		}
		$('.carousel-wrap, .slide').css('max-width', slideWidth);
		$('.modal').css('max-width', slideWidth);
		$('#carousel').css('left', slideWidth * -1)
	}

	function dragPos() {
		return dragEnd - dragStart;
	}

	function shiftSlide(direction) {
		if (carousel.hasClass('transition')) return;
		dragEnd = dragStart;
		$(document).off('mouseup');
		carousel.off('mousemove')
			.addClass('transition')
			.css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
		setTimeout(function () {
			if (direction === 1) {
				$('.slide:first').before($('.slide:last'));
			} else if (direction === -1) {
				$('.slide:last').after($('.slide:first'));
			}
			carousel.removeClass('transition');
			carousel.css('transform', 'translateX(0px)');
		}, 700)
	}

	function fillModal(id) {
		$('#modal .title').text(projects[id].title);
		$('#modal .detail').html(projects[id].detail);
		$('#modal .tag').text(projects[id].tag);
		if (projects[id].link) $('#modal .button').addClass('visible')
			.parent()
			.attr('href', projects[id].link);

		$.each($('#modal li'), function (index, value) {
			$(this).text(projects[id].bullets[index]);
		});

		let tmpImg = new Image();
		tmpImg.src = "../img/slides/nl/" + projects[id].project_id + "-0.png";
		imgWidth = tmpImg.width;
		imgHeight = tmpImg.height;

		$("#carousel").html("")
			.css({
				height: imgHeight / (imgWidth / slideWidth)
			})
			.append(("<div class=\"slide\" style=\"width: " + slideWidth + "px;\"></div>").repeat(projects[id].slides));
		$.each($('#modal .slide'), function (index, value) {
			$(this).css({
				background: "url('../img/slides/nl/" + projects[id].project_id + '-' + (index + projects[id].slides - 1) % projects[id].slides + ".png') center center/cover",
				backgroundSize: 'cover'
			});
		});
	}

	$(window).resize(function () {
		slideWidth = $(window).width() * 0.9 > 700 ? 700 : $(window).width() * 0.9;
		threshold = slideWidth / 3;
		setDimensions();

		$("#carousel").css({
			height: imgHeight / (imgWidth / slideWidth)
		});
		$(".slide").css({
			width: slideWidth
		});
	});
});