(function($) {

    $(document).ready(function() {

	// Make each .media section clickable to reach ./<id>/
	[ 'gfx', 'txt', 'vdo' ].forEach(function(id) {
	    $('#' + id)
		.click(function(e) {
		    window.location = `/${id}/`;
		    return false
		})
		.mouseover(function(e) {
		    e.target.style.cursor = 'pointer'
		    return false
		})
		.mouseout(function(e) {
		    e.target.style.cursor = 'not-allowed'
		    return false
		})
	})
	$('.media').mouseout(function(e) {
	    e.target.style.cursor = 'auto'
	    return false
	})

	// EN/FR switch
	$('footer')
	    .append('<button id="lang-switch" title="Read in English">EN</button>')
	$('#lang-switch').click(function(e) {
	    var lang = $('html').attr('lang')
	    setLang(lang == 'fr' ? 'en' : 'fr')
	    return false
	})

	// Use ?lang=XX if available
	var URLParams = new URLSearchParams(window.location.search);
	if (URLParams.has('lang')) {
	    setLang(URLParams.get('lang'))
	}

	// Translate to target lang
	function setLang(lang) {
	    if (lang == 'fr') {
		$('html').attr('lang', 'fr')
		$('#lang-switch').html('EN').attr('title', 'Read in English')
	    } else {
		$('html').attr('lang', 'en')
		$('#lang-switch').html('FR').attr('title', 'Lire en français')
	    }
	}

    });

})($)