@@ -234,10 +240,6 @@ - - - @@ -284,6 +286,34 @@ } closeButton.addEventListener("click", hideDemo); minimizeButton.addEventListener("click", hideDemo); + + // Junkbot "feeding" interaction + var junkbotArea = document.querySelector("#junkbot-area"); + var junkbotImg = document.querySelector("#junkbot-img"); + var cursorHasBin = true; + junkbotArea.style.cursor = "url(images/about/junkbot-bin.png) 16 16, auto"; + junkbotImg.src = "images/about/junkbot.gif"; + junkbotImg.addEventListener("mouseenter", function (event) { + // console.log("mouseenter, cursorHasBin =", cursorHasBin); + if (!cursorHasBin) { + return; + } + junkbotImg.src = "images/about/junkbot-collecting-bin.gif"; + junkbotArea.style.cursor = ""; + cursorHasBin = false; + // TODO: make non-looping version of GIF and increase timeout + // or do this differently, because setTimeout isn't reliable! + // It's not firing in Firefox sometimes (while loading the page?) + // and may not fire if the tab is in the background (is switched away from). + // console.log("setting timeout"); + setTimeout(function () { + // console.log("timeout"); + junkbotImg.src = "images/about/junkbot.gif"; + junkbotArea.style.cursor = "url(images/about/junkbot-bin.png) 16 16, auto"; + cursorHasBin = true; + }, 1000); + }); + document.querySelector("#feeding-text").removeAttribute("hidden");