function closest (el: Element, predicate: (e: Element) => boolean) {
	do if (predicate(el)) return el;
	while (el = el && <Element>el.parentNode);
}

document.addEventListener('DOMContentLoaded', function() {
	// Load CSS
	document.getElementsByTagName('head')[0].innerHTML += (<any>window)['app.css'];
	
	// In order to be able to style SVG elements with CSS, and register events with javascript, we must use inline SVG (we can't use an img tag)
	// For this purpose, the SVG file contents are embedded in a javascript file
	document.getElementById('zones-map').innerHTML = (<any>window)['climate-zones-map.svg'];
	
	document.querySelectorAll("[data-activate-modal]").forEach(elt => {
		elt.addEventListener('click', e => {
			document.getElementById(elt.getAttribute('data-activate-modal')).classList.toggle('is-active', true);
		});
	});
	
	document.querySelectorAll('.modal-close, .modal-card-head .delete').forEach(elt => {
		elt.addEventListener('click', e => {
			closest(elt, e => e.classList.contains('modal')).classList.toggle('is-active', false);
		});
	});
	
	let zoneSelector = <HTMLSelectElement>document.getElementById('zone-selector');
	document.querySelectorAll('.climate-zone').forEach(elt => {
		elt.addEventListener('click', e => {
			let zoneName = elt.getAttribute('id');
			zoneSelector.value = zoneName;
			closest(elt, e => e.classList.contains('modal')).classList.toggle('is-active', false);
		});
	});
});