/*
	Created by Michael Schuijff <michael@reglobe.nl>
	Copyright Lost Images, The Netherlands
	
	For more information, visit www.michaelschuijff.nl
*/

(function () {
	let target, x, y, distance, element;
	
	document.addEventListener('touchstart', (e) => {
		let touch = e.touches;
		
		if (window.scrolling || target) {
			return;
		}
		
		if (e.touches.length == 1) {
			return;
		}
		
		if (!e.target.matches(':not(.swiping) > .zoomable')) {
			return;
		}
		
		distance = Math.hypot(touch[1].pageX - touch[0].pageX, touch[1].pageY - touch[0].pageY);
		
		x = (touch[0].pageX + touch[1].pageX) / 2,
		y = (touch[0].pageY + touch[1].pageY) / 2;
		
		target = e.target, element = document.createElement('div');

		let backgroundImage;
		
		if (target.src) {
			backgroundImage = 'url(' + target.src + ')';
		} else {
			backgroundImage = target.style.backgroundImage;
		}

		let rect = target.getBoundingClientRect();
		
		Object.assign(element.style, {
			position: 'fixed',
			left: rect.left + 'px', top: rect.top + 'px', width: rect.width + 'px', height: rect.height + 'px',
			background: backgroundImage + ' no-repeat center center', backgroundSize: 'cover',
			transform: null, transition: null, zIndex: 999
		});
		
		target.style.visibility = 'hidden', document.body.appendChild(element);
		document.body.classList.add('disable-scrolling');
	}, { passive: false });
	
	document.addEventListener('touchmove', (e) => {
		if (!target) {
			return;
		}
		
		if (e.cancelable) {
			e.preventDefault();
		}
		
		let left = (e.touches[0].pageX + e.touches[1].pageX) / 2 - x
			, top	 = (e.touches[0].pageY + e.touches[1].pageY) / 2 - y;
			
		let scale = Math.hypot(e.touches[1].pageX - e.touches[0].pageX, e.touches[1].pageY - e.touches[0].pageY) / distance;
		
		if (scale < .8) {
			scale = .8;
		}

		element.style.transform = 'translate(' + left + 'px, ' + top + 'px) scale(' + scale + ')';		
	}, { passive: false });

	function zoomTouchEnd () {
		if (!target) {
			return;
		}
		
		Object.assign(element.style, {
			transition: 'transform .15s', transform: null
		});
		
		setTimeout(() => {
			if (target) {
				target.style.visibility = null;
				target = null;
			}
			
			if (element) {
				element.remove();
				element = null;
			}
		}, 150);

		document.body.classList.remove('disable-scrolling');
	}
	
	document.addEventListener('touchend', zoomTouchEnd);
	document.addEventListener('touchcancel', zoomTouchEnd);
})();