const initDrag = (header, modal, container) => {
	let drag = false;

	let mouseX, mouseY, modalX, modalY;

	const onStart = (e) => {
		e = e || window.event;
		e.preventDefault();
		mouseX = e.clientX;
		mouseY = e.clientY;
		drag = true;
	};

	const onDrag = (e) => {
		e = e || window.event;
		e.preventDefault();
		if (!drag) {
			return;
		}
		modalX = mouseX - e.clientX;
		modalY = mouseY - e.clientY;
		mouseX = e.clientX;
		mouseY = e.clientY;

		let posX = (modal.offsetLeft - modalX),
			posY = (modal.offsetTop - modalY);

		let minX = modal.offsetWidth / 2,
			minY = modal.offsetHeight / 2;

		let maxX = container.offsetWidth - minX,
			maxY = container.offsetHeight - minY;

		posX = Math.max(minX, Math.min(maxX, posX));
		posY = Math.max(minY, Math.min(maxY, posY));

		posX = posX / container.offsetWidth * 100;
		posY = posY / container.offsetHeight * 100;

		modal.style.left = posX + "%";
		modal.style.top = posY + "%";
	};

	const onEnd = () => {
		drag = false;
	};

	header.onmousedown = onStart;
	container.onmousemove = onDrag;
	container.onmouseup = onEnd;
};

$$('.modal-header').each(function() {
	let header = $(this);
	let modal = header.closest('.modal');
	let container = header.closest('.modal-container');
	initDrag(
		header[0], modal[0], container[0]
	);

	let close = header.find('.modal-close');
	close.on('click', function() {
		container.remove();
	});
});