/**
 * Minimal image lightbox for the office photos.
 * Clicking a .mn-office-img opens it large in a modal overlay.
 */
( function () {
	var imgs = document.querySelectorAll( '.mn-office-img' );
	if ( ! imgs.length ) {
		return;
	}

	var overlay = document.createElement( 'div' );
	overlay.className = 'mn-lightbox';
	overlay.setAttribute( 'role', 'dialog' );
	overlay.setAttribute( 'aria-modal', 'true' );
	overlay.innerHTML =
		'<button class="mn-lightbox__close" type="button" aria-label="Close">&times;</button>' +
		'<img class="mn-lightbox__img" alt="" />';
	document.body.appendChild( overlay );

	var big = overlay.querySelector( '.mn-lightbox__img' );
	var closeBtn = overlay.querySelector( '.mn-lightbox__close' );

	function open( src, alt ) {
		big.src = src;
		big.alt = alt || '';
		overlay.classList.add( 'is-open' );
		document.body.style.overflow = 'hidden';
	}

	function close() {
		if ( ! overlay.classList.contains( 'is-open' ) ) {
			return;
		}
		document.body.style.overflow = '';
		overlay.classList.add( 'is-closing' );
		setTimeout( function () {
			overlay.classList.remove( 'is-open', 'is-closing' );
			big.src = '';
		}, 200 );
	}

	imgs.forEach( function ( img ) {
		img.addEventListener( 'click', function () {
			open( img.currentSrc || img.src, img.alt );
		} );
	} );

	overlay.addEventListener( 'click', function ( e ) {
		if ( e.target === overlay || e.target === closeBtn ) {
			close();
		}
	} );

	document.addEventListener( 'keydown', function ( e ) {
		if ( e.key === 'Escape' && overlay.classList.contains( 'is-open' ) ) {
			close();
		}
	} );
}() );