// ==UserScript==
// @name         pxls.space template
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        http://pxls.space/
// ==/UserScript==

/**
 * Created by Abupidr on 07-Apr-17.
 */

(function () {
    'use strict';
    function toHtml(str) {
        var htmlObject = document.createElement('div');
        htmlObject.innerHTML = str;
        return htmlObject.firstChild;
    }

    const params = (location.search || "?").substr(1).split("&").map(x => x.split("=").map(a => unescape(a))).reduce((o, [k, v]) => Object.assign(o, {[k]: v}), {});
    var img = document.createElement("img");
    img.src = params.template;
    img.className = "place-canvas";
    Object.assign(img.style, {
        transform: `translate(${params.ox}px,${params.oy}px)`,
        position: "absolute",
        top: 0,
        left: 0,
        width: params.tw ? `${params.tw}px` : undefined,
        pointerEvents: "none",
        zIndex: 5,
        opacity: 0.5,
    });
    try {
        img.style.imageRendering = "pixelated";
        if (!img.style.imageRendering || img.style.imageRendering == "none")
            img.style.imageRendering = "-moz-crisp-edges";
        if (!img.style.imageRendering || img.style.imageRendering == "none")
            img.style.imageRendering = "grisp-edges";
    }
    catch (e) {
    }

    const v = document.querySelector(".board-mover");
    if (!v) return;
    v.appendChild(img);
    const cb = document.querySelector(".bubble-container");

    var slider = document.createElement("input");
    slider.setAttribute("id", "slider-control");
    slider.setAttribute("type", "range");
    slider.setAttribute("min", "0");
    slider.setAttribute("max", "1");
    slider.setAttribute("step", "0.01");
    Object.assign(slider.style, {
        marginLeft: "24px",
        padding: "8px 16px",
    });
    cb.appendChild(slider);

    var handleSliderEvent = function (event) {
        img.style.opacity = event.target.value;
    };

    slider.addEventListener("change", handleSliderEvent);
    slider.addEventListener("input", handleSliderEvent);

    console.log("/r/place template added");
})();