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();
    fond.src = "Images/paysage.png";
	perso.src = 'Images/perso.png';

    var ObstaclesList = [
        [0,323,250,13],[295,323,170,13],[510,323,825,13],[1390,323,170,13],
        [0,453,150,13],[605,453,167,13],[1091,445,450,13],
        [0,597,790,13],
    ];

    var StairList = [
        [282,333,7,6,"Left","Down",18],
        [465,336,7,6,"Right","Down",18],
        [1385,336,7,6,"Left","Down",17],
        [150,465,13,11,"Right","Down",11],
        [595,465,13,11,"Left","Down",11],
    ];

    // var LineList = [
    //     [282,333,250,450],
    // ]
    
    for (let stair of StairList) {
        let posx = stair[0];
        let posy = stair[1];
        for (let pas = 0; pas < stair[6]; pas++) {
            ObstaclesList.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 = 285;
    var FeetHitBox = [10,37,15,10] // place it just below your feet
    var HeadHitBox = [10,0,15,10] // place it on your head :)
    var WidthX = 35;
    var WidthY = 35;
    var Hauteur = 0;
    var PositionInitiale = 0;
    var OnGround = false

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

    function ShowHitBox() {
        for (let obs of ObstaclesList) {
            ctx.globalAlpha = 0.5;
            ctx.fillRect(obs[0],obs[1],obs[2],obs[3]);
        }
        ctx.fillRect(PosX+FeetHitBox[0],PosY+FeetHitBox[1],FeetHitBox[2],FeetHitBox[3]);
        ctx.fillStyle = "red"
        ctx.fillRect(PosX+10,PosY,15,10);
    }

    function CheckCollision(Part) {
        var HitBox = []
        if (Part=="Ground" || Part=="Stair") {HitBox=FeetHitBox} else {HitBox=HeadHitBox}
        for (let obs of ObstaclesList) {
            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;
            } 
        }
        return false;
    }

    function boucle() {
        if(clavier.droite){
			PosX=PosX+5;
			if(PosX>1520){PosX=0;}
		}

        if(clavier.gauche){
			PosX=PosX-5;
			if(PosX<0){PosX=1520;}
		}

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

        if (CheckCollision("Ground")!=true) {PosY=PosY*1.03}
        
        if (CheckCollision("Stair")!=false) {PosY=CheckCollision("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 :)")==true) {Hauteur=-1}
			}	
        Hauteur--;
		}

        ctx.save();
        ctx.drawImage(fond,0,0,1560,680);
        ctx.drawImage(perso,PosX,PosY,WidthX,WidthY);
        ShowHitBox()
        // ctx.beginPath();
        // ctx.moveTo(300, 0);
        // ctx.lineTo(10, 300);
        // ctx.stroke();
        ctx.restore();
    }
}