"use strict"
const canvas_bg = document.getElementById("canvas_bg");
const ctx = canvas_bg.getContext("2d");
const ORANGE_COLOR = "#fe8b00ff";
const WHITE_COLOR = "#ffffffff";
const CELL_WIDTH = 256;

const WALLPAPER_FONT = "30px Arial";
const WALLPAPER_COL = 30;
const WALLPAPER_ROW = 50;

const UNDERLINE_COL_START = 25;
const UNDERLINE_COL_END = CELL_WIDTH - UNDERLINE_COL_START;
const UNDERLINE_ROW = 60;

const SIZE_TEXT_FONT = "36px Arial";
const SIZE_TEXT_COL = 25;
const SIZE_TEXT_ROW = 96;

function drawCanvasBg() {
    ctx.clearRect(0, 0, canvas_bg.width, canvas_bg.height);
    ctx.fillStyle = ORANGE_COLOR;
    ctx.fillRect(0, 0, canvas_bg.width, canvas_bg.height);

    var largerSize = Math.max(canvas_bg.width, canvas_bg.height);
    var width = Math.max(3, Math.ceil(largerSize / 1000) + 1);

    ctx.fillStyle = WHITE_COLOR;
    ctx.fillRect(0, 0, width, canvas_bg.height);
    ctx.fillRect(0, 0, canvas_bg.width, width);
    ctx.fillRect(canvas_bg.width - width, 0, canvas_bg.width, canvas_bg.height);
    ctx.fillRect(0, canvas_bg.height - width, canvas_bg.width, canvas_bg.height);

    var lineWidth = 1;
    var lineOffset = 0.5;
    if (largerSize > 5000) {
        lineWidth = 2;
        lineOffset = 0;
    }

    ctx.strokeStyle = WHITE_COLOR;
    ctx.lineWidth = lineWidth;

    var currentColPos = CELL_WIDTH + lineOffset;

    while (currentColPos < canvas_bg.width) {
        ctx.moveTo(currentColPos, 0);
        ctx.lineTo(currentColPos, canvas_bg.height);
        ctx.stroke();
        currentColPos += CELL_WIDTH;
    }

    var currentRowPos = CELL_WIDTH + lineOffset;

    while (currentRowPos < canvas_bg.height) {
        ctx.moveTo(0, currentRowPos);
        ctx.lineTo(canvas_bg.width, currentRowPos);
        ctx.stroke();
        currentRowPos += CELL_WIDTH;
    }

    ctx.font = WALLPAPER_FONT;
    ctx.fillText("WALLPAPER", WALLPAPER_COL, WALLPAPER_ROW);

    ctx.moveTo(UNDERLINE_COL_START + lineOffset, UNDERLINE_ROW);
    ctx.lineTo(UNDERLINE_COL_END + lineOffset, UNDERLINE_ROW);
    ctx.stroke();

    ctx.font = SIZE_TEXT_FONT;
    ctx.fillText(canvas_bg.width + "x" + canvas_bg.height, SIZE_TEXT_COL, SIZE_TEXT_ROW);
}

function onResize() {
    canvas_bg.width = window.innerWidth;
    canvas_bg.height = window.innerHeight;
    drawCanvasBg();
}

onResize();
window.addEventListener("resize", onResize);