//
//
// Container is positioned absolute and the stickers scroll
const stickerSpawners = document.querySelectorAll("[data-sticker]");
const container = document.getElementById("sticker-container");
var throttleSpawn = _.throttle(spawnSticker, 400);

Array.from(stickerSpawners).forEach((spawner) => {
	spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
});

function spawnSticker(e) {
	let position = { x: e.pageX, y: e.pageY };
	let content = e.target.dataset.sticker;
	container.appendChild(createSticker(content, position));
}

//
// Container is positioned fixed and the stickers remain in overlay
// (useful for the fixed header)
const fixedStickerSpawners = document.querySelectorAll("[data-sticker-fix]");
const fixedContainer = document.getElementById("sticker-fix-container");
var throttleFixedSpawn = _.throttle(spawnFixedSticker, 400);

Array.from(fixedStickerSpawners).forEach((spawner) => {
	spawner.addEventListener("mousemove", (e) => throttleFixedSpawn(e));
});

function spawnFixedSticker(e) {
	let position = { x: e.clientX, y: e.clientY };
	let content = e.target.dataset.stickerFix;
	fixedContainer.appendChild(createSticker(content, position));
}

//
//
// the sticker element is the same for both function

function createSticker(content, position) {
	sticker = document.createElement("div");
	sticker.classList.add("sticker");
	sticker.innerHTML = content;
	sticker.style.left = position.x + "px";
	sticker.style.top = position.y + "px";

	sticker.style.transform = `
    translate(-50%, -50%)
    rotate(${Math.random() * 40 - 20}deg)
    `;

	return sticker;
}