(function () {
	const URL = "https://wiai.stuve-bamberg.de/vc-customization/"

	if (!localStorage.getItem('wiai-eet-howto-seen')) {
	window.addEventListener('load', function () {
		const wrapper = document.createElement('div')
		wrapper.classList.add('wiai-eet-howto')
		document.getElementById('page').replaceWith(wrapper)
		addLanguageChooser(wrapper)

		wrapper.innerHTML += '<div class="wiai-eet-howto-header"><h1><span class="wiai-german">Unser Plan für die Einführungstage</span><span class="wiai-english">Our Plan for the Introductory Days</span></h1></div>'

		const imageWrapper = document.createElement('div')
		imageWrapper.classList.add('wiai-eet-howto-images')
		wrapper.appendChild(imageWrapper)

		const images = [
			['/img/1-Grußworte.jpg', 'Grußworte ansehen: Verschiedene Gesichter der Fakultät brennen darauf, sich euch vorzustellen. Sie geben außerdem wichtige Infos für den erfolgreichen Start ins Studium.'],
			['/img/2-Facheinführungen.jpg', 'Fächer kennenlernen: Damit die Selbstorganisation gut klappt, wird es Zeit, dass ihr euren Studiengang näher kennen lernt – gemeinsam mit euren Fachstudienberater:innen.'],
			['/img/3-Technik.jpg', 'Technik einrichten: Viele IT-Dienste sollen euch das Studium hier einfach machen. Da das nicht immer gelingt, gibt es gleich zu Anfang eine ausführliche Einführung.'],
			['/img/4-Stundenplan.jpg', 'Stundenplan erstellen: Jetzt seid ihr bereit, euren eigenen Stundenplan zu erstellen. Im Stundenplantutorium stehen euch hierfür Kommiliton:innen höherer Semester zur Seite.'],
			['/img/5-Freunde.jpg', 'Freunde treffen: Die Hochschulgruppen der Universität, die Games Night, ein Buddyprogramm und vieles mehr laden zum Kennenlernen und Austauschen ein.'],
			['/img/6-Universität.jpg', 'Universität erkunden: Die Fachschaft, die Studierendenvertretung und viele weitere Einrichtungen der Universität könnt ihr im VC und auf einer virtuellen Karte entdecken.']
		]

		images.forEach(function (image) {
			imageWrapper.innerHTML += `<img class="wiai-eet-howto-image wiai-german" src="${URL}${image[0]}" alt="${image[1]}"/>`	
		})

		const englishImages = [
                        ['/img/1-Grußworte-en.jpg', 'Welcome Adresses: The entire faculty is keen to meet you! A handfull of representatives will introduce themselves and give important information for starting your studies successfully.'],
                        ['/img/2-Facheinführungen-en.jpg', 'Degree Programs: In order for you to have a good start, it is time to have a detailed look at your degree program. Your advisor will cover all relevant documents and regulations.'],
                        ['/img/3-Technik-en.jpg', 'IT Services: There is a multitude of IT services to make your life easier. Sometimes, however, they don\'t, which is why we provide in-depth tutorials for you to get you going.'],
                        ['/img/4-Stundenplan-en.jpg', 'Schedules: Now you are ready to create your own schedule. Our tutors will assist you and answer your questions in the live scheduling tutorials.'],
                        ['/img/5-Freunde-en.jpg', 'Friendships: The university\'s student associations, the Games Night, and a buddy program will help you get in touch with fellow freshmen and other students.'],
                        ['/img/6-Universität-en.jpg', 'University: Meet your “Fachschaft” (Student Council), and explore many university facilities (e.g., the university library) in the VC course or on our virtual map.']
                ]

		englishImages.forEach(function (image) {
                        imageWrapper.innerHTML += `<img class="wiai-eet-howto-image wiai-english" src="${URL}${image[0]}" alt="${image[1]}"/>`
                })

		wrapper.innerHTML += '<a href="#" class="wiai-eet-howto-cta"><span class="wiai-german">Los geht\'s!</span><span class="wiai-english">Let\'s go!</span></a>'

		document.querySelector('.wiai-eet-howto-cta').addEventListener('click', function (event) {
			event.preventDefault()
			localStorage.setItem('wiai-eet-howto-seen', true)
			window.location.reload()
		})
	})
	}

const LANGUAGES = ['german', 'english'];
const LANGUAGE_NAMES = {'german': 'Deutsch', 'english': 'English'};
const LANGUAGE_PREFIXES = {'img[alt="German"]': 'german', 'img[alt="English"]': 'english'};


/**
 * Add a language chooser element to the top of the targetElement.
 */
function addLanguageChooser(targetElement) {
	targetElement.innerHTML += `
<div class="wiai-eet-howto-language-chooser">
	<a href="javascript:document.body.classList.remove('wiai-language-german');document.body.classList.add('wiai-language-english')"
		class="wiai-eet-howto-language-opion wiai-german">English version</a>
	<a href="javascript:document.body.classList.remove('wiai-language-english');document.body.classList.add('wiai-language-german')"
                class="wiai-eet-howto-language-opion wiai-english">Deutsche Variante</a>
</div>`
}

})()