const characters = "01".split('');
const fontSize = 10;
const font = fontSize + 'px arial';
const fillStyle = 'rgba(0, 0, 0, 0.05)';
const colorGreen = '#0f0';
const randomThreshold = 0.975;
let canvas;
let ctx;

$(document).ready(function () {
    canvas = document.getElementById('matrixCanvas');
    ctx = canvas.getContext('2d');

    prepareMatrix();
    disableDragging();
});

$(window).resize(function () {
    prepareMatrix();
});

function disableDragging() {
    const nonDraggableElements = document.getElementsByClassName('non-draggable');

    for (let i = 0; i < nonDraggableElements.length; i++) {
        const anchor = nonDraggableElements[i];

        anchor.ondragstart = function () {
            return false;
        };
    }
}

function prepareMatrix() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    const numberOfColumns = Math.ceil(canvas.width / fontSize);
    const drops = Array(numberOfColumns).fill(1);

    function draw() {
        ctx.fillStyle = fillStyle;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = colorGreen;
        ctx.font = font;

        for (let i = 0; i < drops.length; i++) {
            const text = characters[Math.floor(Math.random() * characters.length)];

            ctx.fillText(text, i * fontSize, drops[i] * fontSize);

            if (drops[i] * fontSize > canvas.height && Math.random() > randomThreshold)
                drops[i] = 0;

            drops[i]++;
        }
    }

    setInterval(draw, 33);
}