(function () {
    /* ОПЦИИ */
    var IMAGE_URL = 'https://2ch.hk/to/src/50162/14922528037800.png';
    var OX = 1347, OY = 930;
    var ALPHA = 0.5;
    /* ХУЁПЦИИ */

    var template_canvas = document.createElement('canvas');
    template_canvas.width = window.App.elements.board[0].width;
    template_canvas.height = window.App.elements.board[0].height;

    var ctx_tc = template_canvas.getContext('2d');

    template_image = new Image();
    template_image.onload = function() {
        console.log('Drawing ' + IMAGE_URL + ' @ ' + OX + ',' + OY +'...')
        ctx_tc.globalAlpha = ALPHA;
        ctx_tc.drawImage(template_image, OX, OY);
    }
    template_image.src = IMAGE_URL

    // Copypasta from https://github.com/xSke/Pxls/blob/master/resources/public/app.js
    // Patched version
    window.App.updateTransform = function () {
        this.panX = Math.min(this.width / 2, Math.max(-this.width / 2, this.panX));
        this.panY = Math.min(this.height / 2, Math.max(-this.height / 2, this.panY));
        if (this.use_js_resize) {
            var ctx2 = this.elements.board_render[0].getContext("2d");
            var pxl_x = -this.panX + ((this.width - (window.innerWidth / this.scale)) / 2);
            var pxl_y = -this.panY + ((this.height - (window.innerHeight / this.scale)) / 2);

            ctx2.fillStyle = '#CCCCCC';
            ctx2.fillRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
            ctx2.drawImage(this.elements.board[0], pxl_x, pxl_y, window.innerWidth / this.scale, window.innerHeight / this.scale, 0, 0, window.innerWidth, window.innerHeight);
            ctx2.drawImage(template_canvas, pxl_x, pxl_y, window.innerWidth / this.scale, window.innerHeight / this.scale, 0, 0, window.innerWidth, window.innerHeight); // <- Добавляем вызов
            return;
        }
        this.elements.boardMover
            .css("width", this.width + "px")
            .css("height", this.height + "px")
            .css("transform", "translate(" + this.panX + "px, " + this.panY + "px)");
        if (this.use_zoom) {
            this.elements.boardZoomer.css("zoom", (this.scale * 100).toString() + "%");
        } else {
            this.elements.boardZoomer.css("transform", "scale(" + this.scale + ")");
        }
        this.elements.reticule.css("width", (this.scale + 1) + "px").css("height", (this.scale + 1) + "px");

        var a = this.screenToBoardSpace(0, 0);
        this.elements.grid.css("background-size", this.scale + "px " + this.scale + "px").css("transform", "translate(" + Math.floor(-a.x % 1 * this.scale) + "px," + Math.floor(-a.y % 1 * this.scale) + "px)");
        this.elements.grid.css("opacity", (this.scale - 2) / 6);
    }

})();