$(document).ready(function(e) {
	// изменения clip-path блоков при наведении на соответственно:
	// changesMatrix[0] - 1 и 4 блок; changesMatrix[1] - 3 и 6 блок; changesMatrix[2] - 2 и 5 блок
	let changesMatrix = [
			[
				"polygon(0 0, 95% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 95% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 100% 0, 100% 100%, 5% 100%)",
				"polygon(0 0, 100% 0, 95% 100%, 0 100%)",
				"polygon(5% 0, 100% 0, 95% 100%, 0% 100%)",
				"polygon(5% 0, 100% 0, 100% 100%, 0 100%)"
			],
			[
				"polygon(0 0, 100% 0, 95% 100%, 0 100%)",
				"polygon(5% 0, 100% 0, 95% 100%, 0 100%)",
				"polygon(5% 0, 100% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 95% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 95% 0, 100% 100%, 5% 100%)",
				"polygon(0 0, 100% 0, 100% 100%, 5% 100%)",
			],
			[
				"polygon(0 0, 100% 0, 95% 100%, 0 100%)",
				"polygon(5% 0, 95% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 100% 0, 100% 100%, 5% 100%)",
				"polygon(0 0, 95% 0, 100% 100%, 0 100%)",
				"polygon(0 0, 100% 0, 95% 100%, 5% 100%)",
				"polygon(5% 0, 100% 0, 100% 100%, 0 100%)",
			]
	];

	function applyClipPaths($blocks, arrayOfBlockIndexes, arrayOfChanges) {
		$.each(arrayOfBlockIndexes, function(idx, value) {
			$blocks.eq(value).on("mouseover", function(e) {
				$blocks.each(function(blockIdx) {
					$(this).css({
						"clip-path": arrayOfChanges[blockIdx]
					})
				})
			})
		})
	}

	if(window.innerWidth > 1024) {
		let $blocks = $(".block");

		applyClipPaths($blocks, [0, 3], changesMatrix[0]);
		applyClipPaths($blocks, [2, 5], changesMatrix[1]);
		applyClipPaths($blocks, [1, 4], changesMatrix[2]);

		// возврат в нормальное состояние после убирания hover'а
		$blocks.on("mouseleave", function(e) {
			$blocks.each(function(idx) {
				$(this).css({
					"clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
				})
			})
		})
	}

});