const canvas = document.getElementById("main_window");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

const windowSize = canvas.getBoundingClientRect(); 

var currentScene;



menu = new MainMenu(ctx);

currentScene = menu;

//menu.select(rect2);

menu.load = () => {
    document.addEventListener("keypress" , e => { menu.keypress(e)});
    menu.user_can_select = true;

    rect1 = new Rectangle(70,20,100,100, "green");
    rect2 = new Rectangle(10,10,50,50, "red");

    rect3 = new Rectangle(10,200,50,50, "red");
    rect4 = new Rectangle(70,200,50,50, "red");

    menu.addElement(rect1);
    menu.addElement(rect2);
    menu.addElement(rect3);
    menu.addElement(rect4);

    menu.makeSelectable(rect1);
    menu.makeSelectable(rect2);
    menu.makeSelectable(rect3);
    menu.makeSelectable(rect4);

    menu.addToSelectable(rect1, {x:0, y:0});
    menu.addToSelectable(rect2, {x:1, y:0});
    menu.addToSelectable(rect3, {x:0, y:1});
    menu.addToSelectable(rect4, {x:1, y:1});

    //rect1.setCenterOrigin();

    rect1.draw_selection = rect1.drawStroke;
    rect2.draw_selection = rect2.drawStroke;
    rect3.draw_selection = rect3.drawStroke;
    rect4.draw_selection = rect4.drawStroke;



    text = new Text("Tessst" ,10,400, "16px serif" , "rgb(100,100,100)");
    menu.addElement(text);
    let center  = text.getCenterXFrom(menu.ctx, rect1.x, rect1.width);
    text.x = center;
    text.y = rect1.y + 150;
    
    
    //img = new Sprite(400,400,400,400,"../../img/test2.jpg");
    //img.img = new Image();
    //img.img.src = "../../img/test2.jpg";
   // menu.ctx.drawImage(img2, 200,200);
    //menu.addElement(img);
};




currentScene.load();
function onFrame() {

    currentScene.drawAll();
    currentScene.updateAll();

    requestAnimationFrame(onFrame);
}

requestAnimationFrame(onFrame);