const container = Z.by_id('container');

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

for (let i = 0; i < 100; ++i) {
	container.appendChild(Z.native('div', {
		className: 'image',
		style: {
			background: getRandomColor(),
			aspectRatio: '1 / ' + (Math.random() + 0.5),
		},
	}));
}

const set_number_of_rows = (n) => {
	container.style.gridTemplateColumns = '1fr '.repeat(n);

	container.classList.toggle('tiling', n != 1);
};

let zoom_state = 5;
set_number_of_rows(zoom_state);


Z.document.onwheel = (event) => {
	if (!event.ctrlKey) {
		return;
	}

	event.preventDefault();

	zoom_state += event.wheelDeltaY / 120;
	zoom_state = Math.max(zoom_state, 1);
	set_number_of_rows(zoom_state);
}