(function () {
	if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
		return;
	}

	var selector = 'body.single .wp-block-post-featured-image, body.single .wp-block-post-content .wp-block-image';

	var ICON_ON = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M10 2a8 8 0 1 1-5.29 14.01l-3.35 3.35a1 1 0 0 1-1.42-1.42l3.35-3.35A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 3h2v2h2v2h-2v2H9v-2H7V9h2V7z"/></svg>';
	var ICON_OFF = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M10 2a8 8 0 1 1-5.29 14.01l-3.35 3.35a1 1 0 0 1-1.42-1.42l3.35-3.35A8 8 0 0 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM7 9h6v2H7V9z"/></svg>';

	function bind(wrapper) {
		var img = wrapper.querySelector('img');
		if (!img) return;
		if (wrapper.dataset.tsaiMagnify === 'bound') return;
		wrapper.dataset.tsaiMagnify = 'bound';

		var computed = window.getComputedStyle(wrapper);
		if (computed.position === 'static') {
			wrapper.style.position = 'relative';
		}

		var btn = document.createElement('button');
		btn.type = 'button';
		btn.className = 'tsai-magnify-toggle';
		btn.setAttribute('aria-pressed', 'false');
		btn.setAttribute('aria-label', 'Enable image magnify');
		btn.innerHTML = ICON_OFF;

		btn.addEventListener('click', function (e) {
			e.preventDefault();
			e.stopPropagation();
			var active = wrapper.classList.toggle('is-magnify-active');
			btn.setAttribute('aria-pressed', active ? 'true' : 'false');
			btn.setAttribute('aria-label', active ? 'Disable image magnify' : 'Enable image magnify');
			btn.innerHTML = active ? ICON_ON : ICON_OFF;
			if (!active) {
				img.style.transformOrigin = 'center center';
			}
		});

		wrapper.appendChild(btn);

		wrapper.addEventListener('mousemove', function (e) {
			if (!wrapper.classList.contains('is-magnify-active')) return;
			var rect = wrapper.getBoundingClientRect();
			if (rect.width === 0 || rect.height === 0) return;
			var x = ((e.clientX - rect.left) / rect.width) * 100;
			var y = ((e.clientY - rect.top) / rect.height) * 100;
			img.style.transformOrigin = x + '% ' + y + '%';
		});

		wrapper.addEventListener('mouseleave', function () {
			img.style.transformOrigin = 'center center';
		});
	}

	function init() {
		document.querySelectorAll(selector).forEach(bind);
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}
})();