// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

// wait until window, stylesheets, images, links, and other media assets are loaded
window.onload = function() {

 // All ready, start!
 init();

 };

});






// We manipulate a few of the DOM elements via JavaScript in order to minimise the amount of editing that would otherwise have to be done to the DOM elements every time the ratio/size of the image is altered




function init() {

	// Get the image size
	var img = document.querySelector("#image").getBBox();
	// Update the <symbol> tag's viewbox based on the image size
	document.getElementById("Source").setAttribute("viewBox", "0 0 " + img.width + " " + img.height);

	// Calculate the ratio of the image
	var ratio = calculateRatio(img.width, img.height);

	// Get the main SVG tag
	var svg = document.getElementById("svg");

	var container = document.getElementById("container");

	// Update its height to match the image ratio
	container.style.height = updateHeight(container.offsetWidth, ratio) +"px";
	TweenMax.set(filterMaskArea, {
		attr:{
			height:function(){
				return updateHeight(container.offsetWidth, ratio);
			}
		}
	});
	
	
	// Start listening for the mouse
	container.addEventListener("mouseenter", onEnter);
	container.addEventListener("mouseleave", onLeave);
	
	function onEnter(e) {
		// console.log(e.target.id);
		container.addEventListener("mousemove", onMove);
	}

	function onLeave(e) {
		container.removeEventListener("mousemove", onMove);
	}
	
	function onMove(e) {
		var width = e.clientX - container.getBoundingClientRect().left;
		
		TweenMax.set(filterMaskArea, {
			attr:{
				width:width
			}
		})
				
	}
	


	// Calculate the aspect ratio of the image.
	function calculateRatio(w,h) {
		return Math.max(w,h) / Math.min(w,h);
	}


	// Return an updated height based on  width/ratio
	function updateHeight(width, ratio) {
		return Math.round(width / ratio);
	}




	// Create X squares of a size along a grid the size of the image
	var squareSize = 20;
	var squares = {
		ttlHorz: squaresPerLength(svg.getBBox().width, squareSize),
		ttlVert: squaresPerLength(svg.getBBox().height, squareSize),
	}


	function squaresPerLength(width, size) {
		return width / size;
	}


	var g = document.getElementById("grid");
	var arr = [];

	// Loop thru the total squares and create the grid
	for(var i = 0; i < squares.ttlHorz; i++) {
		for(var j = 0; j < squares.ttlVert; j++) {
		var square = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		square.setAttribute("width", squareSize);
		square.setAttribute("height", squareSize);
		square.setAttribute("x", i * squareSize);
		square.setAttribute("y", j * squareSize);

			arr.push(square);
			g.appendChild(square);
		}
	}




	function shuffle(array) {
			var currentIndex = array.length, temporaryValue, randomIndex;

			// While there remain elements to shuffle...
			while (0 !== currentIndex) {

					// Pick a remaining element...
					randomIndex = Math.floor(Math.random() * currentIndex);
					currentIndex -= 1;

					// And swap it with the current element.
					temporaryValue = array[currentIndex];
					array[currentIndex] = array[randomIndex];
					array[randomIndex] = temporaryValue;
			}

			return array;
	}



	function randomIntFromInterval(min,max)
	{
					return Math.floor(Math.random()*(max-min+1)+min);
	}


	var newArr = shuffle(arr)

	// Animate the squares
	TweenMax.staggerTo(newArr, 1.5, {
		autoAlpha:0,
		repeat:-1,
		repeatDelay:3,
		yoyo:true,
		ease:Power3.easeInOut,
		cycle:{
			delay:[0,0.15,0.3,0.45,0.6,0.75,0.9],
			x:function() {
				return randomIntFromInterval(-50,50);
			},
			y:function() {
				return randomIntFromInterval(-50,50);
			}
		}
	});
	
	TweenMax.to(container, 0.3, {autoAlpha:1});
};