document.addEventListener('DOMContentLoaded', () => {
    let btn = document.querySelector('.modalButton');
    btn.click();
});


console.log("FAAAAK");

/* 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 addOnHasBeenAdded = false;
let addOnActive = false;
let newAddOn;
let hasPainted = false;

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

const pildid = new Array();
const addOns = new Array();

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


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

    pildid.push(stalinImg);
    pildid.push(veekogudImg);


   //Addons 

    const naziImg = document.getElementById("nazi");
    const lenin = document.getElementById("lenin");
    const redStar = document.getElementById("redStar");
    const stalinAddOn = document.getElementById("stalinAddOn");

    addOns.push(naziImg);
    addOns.push(lenin);
    addOns.push(redStar);
    addOns.push(stalinAddOn);




    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();
    }


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


    else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') {
        addOnActive = true;
        document.body.style.cursor =  "url('img/normalSelect.cur'), auto";

        for (el in addOns) {
            addOns[el].classList.remove("addOnPicked");
        }

        newAddOn = document.getElementById(e.target.id);
        newAddOn.classList.add("addOnPicked");
    }


});



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

    if(addOnActive == true){
        addOnActive = false;
        document.body.style.cursor = "auto";

        for (el in addOns) {
            addOns[el].classList.remove("addOnPicked");
        }

        let xCord = e.offsetX - (newAddOn.clientWidth / 2)
        let yCord = e.offsetY - (newAddOn.clientHeight / 2)
        ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight);


        addOnHasBeenAdded = true;
        if (hasPainted)
            moveOnEnable();
    }
});








/* 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();

    hasPainted = true;
    if (addOnHasBeenAdded)
        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 = "../sonaragastik";
}

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