/**
 * 🧱 Masonry Lite.
 */
class Masonry {
	/**
	 * Create a new Masonry grid.
	 * @param {Element} el
	 * @param {Number}  columns
	 */
  constructor(el, columns) {
		// Settings
    this.grid = el;
		this.columns = parseInt(el.getAttribute('data-masonry'), 10) || columns;
		
		// Observer
		const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
		this.observer = new MutationObserver(this.resize.bind(this));
		this.observerConfig = {
			attributes: true,
			childList: true,
			characterData: true,
			subtree: true,
		};
		
		// Init on page load
		this.resize();

		// And again every time the grid elements change
		this.observer.observe(this.grid, this.observerConfig);
  }

	/**
	 * Resize grid elements.
	 * @return {void}
	 */
	resize() {
		// Stop observing to avoid infinite loops
		this.observer.disconnect();

		const blocks = Array.from(this.grid.children);

		blocks.forEach((block, i) => {
			// Reset
			block.style.marginTop = '';

			// Offset
			const blockAbove = blocks[i - this.columns];

			if (blockAbove) {
				block.style.marginTop = `-${block.offsetTop - blockAbove.offsetTop - blockAbove.offsetHeight}px`;
			}
		});

		// Start watching again
		this.observer.observe(this.grid, this.observerConfig);
	}
}

// DEMO: Init Masonry for all grid elements on page load
// document.querySelectorAll('[data-masonry]').forEach(el => new Masonry(el));



// ------------------------------
// DEMO: Helpers
// ------------------------------

const grid = document.querySelector('#example');
new Masonry(grid, 3);

/**
 * Get a random integer between a minimum and maximum value.
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values
 * @param  {Number} min
 * @param  {Number} max
 * @return {Number}
 */
function random(min, max) {
	min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}



// ------------------------------
// DEMO: Resizable divs
// @see http://interactjs.io/#resizing
// ------------------------------

interact('.grid > div').resizable({
	// resize vertical edges
	edges: { bottom: true, top: true },
	// keep the edges inside the parent
	restrictEdges: { outer: 'parent', endOnly: true },
	// minimum size
	restrictSize: { min: { height: 100 } },
	// smooth
	inertia: true,
}).on('resizemove', (event) => {
	const target = event.target;
	target.style.width  = event.rect.width + 'px';
	target.style.height = event.rect.height + 'px';
});



// ------------------------------
// DEMO: Randomize Block Sizes
// ------------------------------

const randomizeButton = document.querySelector('#randomize');

randomizeButton.addEventListener('click', (event) => {
	event.preventDefault();
	const blocks = Array.from(grid.children);
	blocks.forEach((block) => block.style.height = `${random(100, 300)}px`);
});



// ------------------------------
// DEMO: Add/Remove Blocks
// ------------------------------

// Colors from http://paletton.com/#uid=7000u0kiCFn8GVde7NVmtwSqXtg
const colors = ['#ff6b6b', '#ffbaba', '#ff8f8f', '#ff4c4c', '#e92525', '#ffae6b', '#ffd9ba', '#ffc18f', '#ff9d4c', '#e97e25', '#4ebaba', '#aceded', '#77d5d5', '#2e9c9c', '#168c8c', '#5cdd5c', '#b3f6b3', '#83ea83', '#3dcd3d', '#1dbb1d'];
let lastColor = '#83ea83';

function color() {
	let result;
	
	// Get a new color
	do {
		result = colors[random(0, colors.length)];
	} while (result === lastColor);
	
	// Keep track of the last color
	lastColor = result;
	
	return result;
}

const addButton = document.querySelector('#add');
const removeButton = document.querySelector('#remove');

addButton.addEventListener('click', (event) => {
	event.preventDefault();
	grid.insertAdjacentHTML('beforeend', `<div style="
		height: ${random(100, 300)}px;
		background: ${color()};
	"></div>`);
});

removeButton.addEventListener('click', (event) => {
	event.preventDefault();
	grid.removeChild(grid.firstElementChild);
});