// Calc for the resizing the grid
let mainWrapperSize = 480; //in pixles
let mainWrapperColumns = 16; //num
let mainWrapperRows = 16; //num
let individualRowSize = mainWrapperSize/mainWrapperRows;
let individualColumnSize = mainWrapperSize/mainWrapperColumns;

//main body
let mainbody = document.querySelector("body");


let clearGridBtn = document.createElement("button");
clearGridBtn.setAttribute("id","clearGrid");
clearGridBtn.textContent = "Click me to clear the grid :)";
mainbody.appendChild(clearGridBtn);



//Parent DIv Properties
let parentDiv = document.createElement("div");
parentDiv.setAttribute("id","mainWrapper");
parentDiv.style.display = "grid";
parentDiv.style.width = mainWrapperSize + "px";
parentDiv.style.gridTemplateColumns = "repeat("+ mainWrapperColumns + "," + individualColumnSize + "px)";
parentDiv.style.gridTemplateRows = "repeat("+ mainWrapperRows + "," + individualRowSize + "px)";
parentDiv.style.border = "1px solid red";
parentDiv.style.fontSize = "10px";
parentDiv.style.backgroundColor = "lightblue";
mainbody.appendChild(parentDiv);

// inner Child Divs properties

for (let y = 1; y <= 16; y++) {
    for (var x = 1; x <= 16; x++) {
        let childDiv = document.createElement("div");
        childDiv.classList.add("old-background");
        childDiv.setAttribute("id", ("R" + y + "C" + x));
        childDiv.textContent = "R" + y + "C" + x;
        childDiv.setAttribute("style", "height:auto;width:auto");
        childDiv.style.border = "1px solid black";
        parentDiv.appendChild(childDiv);
    }
}

// change color over hover function
function changeColor1() {
    console.log(this.id);
    const cDivChange = document.getElementById(this.id);
    cDivChange.style.backgroundColor = "pink";
    // cDivChange.classList.add = "new-background";
}
//Clear grid function
function clearGrid(){
    console.log(this.id);
    let childDivGrabber = document.getElementsByClassName("old-background");
    childDivGrabber.forEach(cDG => cDG.backgroundColor="white");
    // console.log(childDivGrabber.id);
    // childDivGrabber.style.backgroundColor = "white";
    }
// event listners
const cDivs = document.querySelectorAll('.old-background');
cDivs.forEach(cD => cD.addEventListener('mouseenter',changeColor1));
clearGridBtn.addEventListener("click",clearGrid);