const canvas = document.getElementById("drawingCanvas");
const context = canvas.getContext("2d");

window.onload = () => {
    canvas.onmousedown = startDrawing;
    canvas.onmouseup = stopDrawing;
    canvas.onmouseout = stopDrawing;
    canvas.onmousemove = draw;
};

const previousColorElement = null;
let isDrawing = false;

const changeColor = (color, imgElement) => {
    // Change the current drawing color to the specified color
    context.strokeStyle = color;

    // Change the class of the clicked img element to "Selected"
    imgElement.className = "Selected";

    // Reset the class of the previously selected img element to its default state.
    // Set the previousColorElement variable to the current img element.
    if (previousColorElement !== null) {
        previousColorElement.className = "";
    }
    previousColorElement = imgElement;
};

// Track the <img> element for the line thickness that was previously clicked on
var previousThicknessElement;

function changeThickness(thickness, imgElement) {
    // Change the current line thickness
    context.lineWidth = thickness;

    // Change the style of the <img> element that was clicked on
    imgElement.className = "Selected";

    // Return the previously selected <img> element to its normal state
    if (previousThicknessElement != null)
        previousThicknessElement.className = "";

    previousThicknessElement = imgElement;
}

function startDrawing(e) {
    // Start drawing
    isDrawing = true;

    // Create a new path (with the current color and line thickness)
    context.beginPath();

    // By clicking the left mouse button, we place the "brush" on the canvas
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}

function draw(event) {
    // Determine current mouse pointer coordinates
    if (isDrawing == true) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

        // Draw line to new coordinates
        context.lineTo(x, y);
        context.stroke();
    }
}

function stopDrawing() {
    isDrawing = false;
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas() {
    // Find the <img> element
    var imageCopy = document.getElementById("savedImageCopy");

    // Display canvas data in the <img> element
    imageCopy.src = canvas.toDataURL();

    // Show the <div> element, making the image visible
    var imageContainer = document.getElementById("savedCopyContainer");
    imageContainer.style.display = "block";
}