var Start = false
var PlayButton = [690,760,390,430]
window.onload = function(){
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var clavier = new Clavier();

	var fond = new Image();
	var perso = new Image();
	var key = new Image();
    var noir = new Image();

    fond.src = "Images/castle.png";
	perso.src = 'Images/spritesheet.png';
	key.src = 'Images/key.png';
    noir.src = 'Images/unnoirbiensucre.png';

    var GroundList = [
        [0,0,1700,13],
        [435,110,575,13],
        [940,200,194,13],
        [0,170,285,13],
        [570,230,285,13],
        [285,255,145,13],
        [285,385,175,13],[500,385,75,13],
        [0,480,280,13],
        [460,555,830,13],
        [855,330,135,13],
        [1290,465,250,13],
        [570,440,290,13],
        [0,600,400,13],
    ];

    var ObstaclesList = [
        [0,0,10,700],
        [1300,0,10,80],
        [275,170,10,320],
        [435,0,10,125],
        [940,200,10,140],
        [460,560,10,125],
        [570,230,10,220],
        [845,230,10,220],
        [1000,0,10,125],
        [1510,0,10,700],
    ];

    var StairList = [
        [500,390,8,6,"Left","Down",34],
        [1350,35,8,6,"Left","Down",28],
    ];

    var DoorList = [
        [90,285,27,40,"House1"],
        [1333,532,40,70,"Cave"],
    ]

    var key1 = [50,100,50,50,false]
    var key2 = [875,275,50,50,false]
    var finish = false
    var keywa = new Obstacle(key1[0],key1[1],key1[2],key1[3]);
    var keywaa = new Obstacle(key2[0],key2[1],key2[2],key2[3]);
    var bruh1 = new Obstacle(635,110,10,140);
    var bruh2 = new Obstacle(620,450,10,110);
    var finishLine = new Obstacle(1350,400,75,65);

    for (let stair of StairList) {
        let posx = stair[0];
        let posy = stair[1];
        for (let pas = 0; pas < stair[6]; pas++) {
            GroundList.push([posx,posy,stair[2],stair[3]]);
            if (stair[4] == "Right") {posx += stair[2];}
            if (stair[4] == "Left") {posx -= stair[2];}
            if (stair[5] == "Up") {posy -= stair[3];}
            if (stair[5] == "Down") {posy += stair[3];}
        }    
    }

    var PosX = 0;
    var PosY = 550;
    var FeetHitBox = [10,37,15,10] // place it just below your feet
    var HeadHitBox = [10,0,15,10] // place it on your head :)
    var BodyRightHitBox = [25,10,10,20]
    var BodyLeftHitBox = [0,10,10,20]
    var BodyHitBox = [13,12,10,20]
    var compt = 0;
    var pas = 0;
    var AnimationPosition = 704;
    var WidthX = 65;
    var WidthY = 65;
    var Hauteur = 0;
    var PositionInitiale = 0;
    var OnDoor = "";

    fond.onload = function(){setInterval(boucle,20); }

    function CtxFill(Element,X,Y,Color,Shadow) {
        ctx.globalAlpha = Shadow; ctx.fillStyle = Color;
        if (typeof(Element[0])=="string") {ctx.font = Element[1]+"px "+Element[2]; ctx.fillText(Element[0],X,Y);}
        if (typeof(Element[0])=="number") {ctx.fillRect(X,Y,Element[0],Element[1]);}
    }

    function ShowHitBox() {
        for (let obs of GroundList) {CtxFill([obs[2],obs[3]],obs[0],obs[1],"black",0.5)}
        for (let obs of ObstaclesList) {CtxFill([obs[2],obs[3]],obs[0],obs[1],"red",0.5)}
        for (let obs of DoorList) {CtxFill([obs[2],obs[3]],obs[0],obs[1],"yellow",0.5)}
        CtxFill([FeetHitBox[2],FeetHitBox[3]],PosX+FeetHitBox[0],PosY+FeetHitBox[1],"green",0.5)
        CtxFill([FeetHitBox[2],FeetHitBox[3]],PosX+FeetHitBox[0],PosY,"green",0.5)
        CtxFill([FeetHitBox[2],FeetHitBox[3]],PosX+FeetHitBox[0],PosY+FeetHitBox[1],"green",0.5)
        CtxFill([BodyRightHitBox[2],BodyRightHitBox[3]],PosX+BodyRightHitBox[0],PosY+BodyRightHitBox[1],"green",0.5)
        CtxFill([BodyLeftHitBox[2],BodyLeftHitBox[3]],PosX+BodyLeftHitBox[0],PosY+BodyLeftHitBox[1],"green",0.5)
        CtxFill([BodyHitBox[2],BodyHitBox[3]],PosX+BodyHitBox[0],PosY+BodyHitBox[1],"green",0.5)
    }

    
    function CheckCollision(Class,Part) {
        var HitBox = []
        var CollisionElement = []
        if (Part=="Ground" || Part=="Stair") {HitBox=FeetHitBox} else {HitBox=HeadHitBox}
        if (Class == "Obstacle") {
            if (Part=="Right") {CollisionElement=ObstaclesList;HitBox=BodyRightHitBox}
            if (Part=="Left") {CollisionElement=ObstaclesList;HitBox=BodyLeftHitBox}
        } else {CollisionElement=GroundList}
        for (let obs of CollisionElement) {
            var sol = new Obstacle(obs[0],obs[1],obs[2],obs[3]);
            if (sol.collision(PosX+HitBox[0],PosY+HitBox[1],HitBox[2],HitBox[3])) {
                if (Part=="Stair") {
                    return obs[1]-37;
                }
                return true;
            } 
        }
        if (Class=="Obstacle") {
            if (!key1[4]&&bruh1.collision(PosX+HitBox[0],PosY+HitBox[1],HitBox[2],HitBox[3])) {return true}
            if (!key2[4]&&bruh2.collision(PosX+HitBox[0],PosY+HitBox[1],HitBox[2],HitBox[3])) {return true}
        }
       
        return false;
    }
    
    function CheckKey() {
       
        if (keywa.collision(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3])) {key1[4] = true} 
        if (keywaa.collision(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3])) {key2[4] = true} 

    }
    function CheckENDDDDD() {
        if (finishLine.collision(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3])) {finish =  true}
    } 



    function boucle() {
        var moving = false;
        compt++;
        if(clavier.droite){
            if (CheckCollision("Obstacle","Right") == false) {
                PosX=PosX+5;
            }
            if (compt%3==0)pas++;
            AnimationPosition = 704
            moving = true
		}

        if(clavier.e){
            if (OnDoor!="") {
                window.location.href = OnDoor +".htm";
            }
        }

        
        if(clavier.gauche){
            if (CheckCollision("Obstacle","Left") == false) {
                PosX=PosX-5;
            }
            if (compt%3==0)pas++;
            AnimationPosition = 576
            moving = true
		}

        if (clavier.espace && CheckCollision("NotObstacle","Ground")==true && Hauteur<=0){
			PositionInitiale = PosY;
			Hauteur = 40;
		} 

        if (CheckCollision("NotObstacle","Ground")!=true) {PosY=PosY*1.03}
        if (PosY>700) {PosX = 0;PosY = 550;}
        
        if (CheckCollision("NotObstacle","Stair")!=false) {PosY=CheckCollision("NotObstacle","Stair")}
        
        if (Hauteur>=0){
			if (Hauteur>15){
				PosY=PositionInitiale+(20-Hauteur)*(20-Hauteur)/4*1.5-150;
                if (CheckCollision("here is a text you have to write but useless :)","this one too")==true) {Hauteur=-1}
			}	
        Hauteur--;
		}
        if (pas>=9) pas=0;
        ctx.save();
        ctx.drawImage(fond,0,0,1560,680);
        if (moving) {ctx.drawImage(perso,(pas*64)+15,AnimationPosition,50,64,PosX-5,PosY-25,WidthX,WidthY);   
        } else {ctx.drawImage(perso,15,128,50,64,PosX-5,PosY-25,WidthX,WidthY)}
        if (!key1[4]) {ctx.drawImage(key,key1[0],key1[1],key1[2],key1[3]);CtxFill([10,140],635,110,"red",0.5)}
        ctx.globalAlpha = 1;
        if (!key2[4]) {ctx.drawImage(key,key2[0],key2[1],key2[2],key2[3]);CtxFill([10,110],620,450,"red",0.5)}
        CtxFill([75,65],1350,400,"yellow",0.5)
        CheckKey();
        CheckENDDDDD()
        if (finish==true) {
            ctx.globalAlpha = 1;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(noir, 0, -100, 1560, 1000);
            CtxFill(["Congratulation for finishing the game !!!", 40, "Arial"], 370, 200, "white", 1);
        }
        ctx.restore();
        }
}

window.onclick = function(evt){
    var canvas = document.getElementById('canvas');
    if (PlayButton[0]<=evt.clientX-canvas.offsetLeft&&
        evt.clientX-canvas.offsetLeft<=PlayButton[1]&&
        evt.clientY-canvas.offsetTop>=PlayButton[2]&&
        evt.clientY-canvas.offsetTop<=PlayButton[3])
        Start = true;
}