/* Inital Setup*/

const canvas = document.getElementById('drawing-board');
const toolbar = document.getElementById('toolbar');
const ctx = canvas.getContext('2d');

let canvasOffsetX = canvas.offsetLeft;
let canvasOffsetY = canvas.offsetTop;

let CurImage = document.getElementById("stalin");

canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;



function copyImageToCanvas(image, x, y) {
   ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
}

// Initial Drawring
setTimeout(() => {
    copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
}, 300);


window.onresize = () => {
    canvasOffsetX = canvas.offsetLeft;
    canvasOffsetY = canvas.offsetTop;    
    canvas.width = window.innerWidth - canvasOffsetX;
    canvas.height = window.innerHeight - canvasOffsetY;
    copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
}




/* EventHandlers and stuff*/

let isPainting = false;
let lineWidth = 5;
let startX;
let startY;

toolbar.addEventListener('click', e => {

    const stalinImg = document.getElementById("stalin");
    const veekogudImg = document.getElementById("veekogud");

    const pildid = new Array();
    pildid.push(stalinImg);
    pildid.push(veekogudImg);

    if (e.target.id === "stalin" || e.target.id === "veekogud") {
        for (el in pildid) {
            pildid[el].classList.remove("picked");
        }
        let newPicked = document.getElementById(e.target.id);
        newPicked.classList.add("picked");

        // Draw New Pick
        CurImage = newPicked;
        copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
        moveOnDisable();
    }


    if (e.target.id === 'clear') {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
        moveOnDisable();
    }

});



/* Drawing stuff from here */
toolbar.addEventListener('change', e => {
    if(e.target.id === 'stroke') {
        ctx.strokeStyle = e.target.value;
    }

    if(e.target.id === 'lineWidth') {
        lineWidth = e.target.value;
    }
    
});



const draw = (e) => {
    if(!isPainting) {
        return;
    }

    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    ctx.lineTo(e.clientX -  canvasOffsetX, e.clientY);
    //ctx.lineTo(e.clientX -  abiOffset, e.clientY);
    ctx.stroke();

    moveOnEnable();
}



canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    startX = e.clientX;
    startY = e.clientY;
});



canvas.addEventListener('mouseup', e => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
});


canvas.addEventListener('mousemove', draw);



// Move On Stuff


function moveOnEnable(){
    const btn = document.querySelector(".moveOn");
    btn.disabled = false;
    btn.onclick = () => location.href = "";
}

function moveOnDisable(){
    const btn = document.querySelector(".moveOn");
    btn.disabled = true;
}