window.addEventListener('DOMContentLoaded', function() {
	// Update galleries
	var image_containers = document.querySelectorAll('.wp-block-gallery .wp-block-image');
	for(var i = 0; i < image_containers.length; i++) {
		image_containers[i].addEventListener('click', function(e) {
			console.log('click');
			var image_id = this.querySelector('img').getAttribute('data-id');
			var images = this.parentNode.querySelectorAll('img');
			var image_index = 0;
			for(var j = 0; j < images.length; j++) {
				if(images[j].getAttribute('data-id') == image_id) {
					image_index = j;
					break;
				}
			}
			oc_init_modal_slideshow(image_index, this.parentNode.innerHTML);
		});
	}



	function oc_modal_close() {
		var modal = document.querySelector('.oc-gallery-modal');
		if(modal) modal.remove();
	}
	function oc_modal_close_click(e) {
		document.querySelector('.oc-gallery-modal .modal-close').removeEventListener('click', oc_modal_close_click);
		oc_modal_close();
	}
	function oc_modal_close_keyup(e) {
		if(e.key === 'Escape' || e.key === 'Esc') {
			document.removeEventListener('keyup', oc_modal_close_keyup);
			oc_modal_close();
		}
	}
	function oc_init_modal_slideshow(start_idx, slide_markup) {
		slide_markup = slide_markup.replace(/wp-block-image/g, 'wp-block-image splide__slide');
		var modal = document.createElement('div');
		modal.classList.add('oc-gallery-modal');	
		modal.innerHTML = '<span class="modal-close"></span><div class="slideshow-container"><div class="slideshow splide"><div class="splide__track"><div class="splide__list">' + slide_markup + '</div></div></div></div>';
		document.body.appendChild(modal);

		tippy('.oc-gallery-modal .wp-block-image div.media-credit', {
			placement: 'left',
			theme: 'gutenberg'
		});

		new Splide(modal.querySelector('.slideshow'), { 
			type: 'slide', pagination: false, arrows: true, perPage: 1, start: start_idx
		}).mount();

		document.querySelector('.oc-gallery-modal .modal-close').addEventListener('click', oc_modal_close_click);
		document.addEventListener('keyup', oc_modal_close_keyup);		
	}
});