Tampermonkey userscript to display the original (bigger) screenshots on demozoo parties while mouseover entries

demozoo_original_screenshots.js

// ==UserScript==
// @name         Demozoo Original Screenshots
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://demozoo.org/parties/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=demozoo.org
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // based out of Pouet Plus

var bg_color = "#EAEAEA";
var border_color = "#D5D5D5";
var font_color = "#000000";
var font_face = "tahoma";
var font_size = "11px";

function locate(event) {
	var posx, posy;
	var d = find_div();
	if (d) {
		posx = event.clientX + window.pageXOffset;
		posy = event.clientY + window.pageYOffset;
		d.style.top = (posy - 223) + "px";
		d.style.left = (posx + 15) + "px";
	}
}

function find_div() {
	return document.getElementById("link_tt");
}

function addImage(tt_image, tt_div) {
	tt_div.innerHTML = "";
    tt_div.appendChild(tt_image);
}

function create_div(event,elem,pElem) {
    //console.log(elem);
    //console.log(pElem);
	var tt_div = document.createElement("div");
	tt_div.setAttribute("id", "link_tt");
	tt_div.setAttribute("style", "background:" + bg_color + ";border:1px solid " + border_color + ";padding:2px;color:" + font_color + ";font-family:" + font_face + ";font-size:" + font_size + ";position:absolute;z-index:1000;");
	//var demo_num = elem.href.replace(/.*?which=([0-9]*).*/,'$1');
	var tt_image = new Image();
    var str=elem.src;
    var tidx = 34; // https://media.demozoo.org/screens/t/77/66/03d6.316229.png replace /t/ with /o/ to get the original image instead of the thumbnail
    var endpath = str.substring(0, tidx) + 'o' + str.substring(tidx + 1);
    console.log(endpath);
    tt_image.src = endpath;
    tt_image.setAttribute("style", "max-width:550px");
    //setImageSource(tt_image, demo_num, "jpg");
	tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, ["gif","png","jpg"]);
    addImage(tt_image, tt_div);
	tt_div.style.display = 'none';
	document.body.appendChild(tt_div);
	locate(event);
}

function tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, imageTypes) {
    var fired = false;
	tt_image.addEventListener("error",function(){
        if (fired) {
            return;
        }
        fired = true;
		if (imageTypes.length == 0) {
			console.log("We have run out of image types to try!");
		} else {
			var ext = imageTypes.pop();
            // It seems just updating the src was enough to unregister my error event listener (Chrome 32), so now I am going to create and replace the whole image element.
            tt_image = new Image();
            var newpath = endpath.substring(0, endpath.length-3) + ext;
            console.log(newpath);
			tt_image.src = newpath;
            tt_image.setAttribute("style", "max-width:550px");
            //setImageSource(tt_image, demo_num, ext);
            addImage(tt_image, tt_div);
            tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, imageTypes.slice(0));
		}
	},false);
	tt_image.addEventListener("load",function(){
		tt_div.style.display = '';
	},false);
}

function kill_window() {
    var div = find_div();
    if (div) {
		div.parentNode.removeChild(div);
    }
}

var timer = null;
function resetTimeout(fn) {
    if (timer) {
		clearTimeout(timer);
		timer = null;
    }
    if (fn) {
		timer = setTimeout(fn,300);
    }
}

function create_event(elem) {
//    console.log(elem.parentNode.parentNode.parentNode);
	var pElem = elem.parentNode.parentNode.parentNode;
    pElem.addEventListener("mouseenter", function(event) { resetTimeout(function(){ create_div(event,elem,pElem); }); }, false);
	pElem.addEventListener("mouseleave", function() { resetTimeout(null); kill_window(); }, false);
	pElem.addEventListener("mousemove", function(event) { locate(event); }, true);
}

//var links = document.getElementsByTagName("a");
var links = document.getElementsByClassName("media--thumbnail");
for (var i = 0; i < links.length; i++) {
	if (
        links[i].childNodes[1].src != undefined
	) {
		create_event(links[i].childNodes[1]);
	}
}

})();