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 ox = 200;

	var o1 = new Obstacle(ox,260,50,25);
	var o2 = new 	Obstacle(ox+100,200,50,25);
	var obstacles = new Array(o1,o2);
	var sol = new Obstacle (0,330,800,30);

	var o;
	var coll = false;

	// var portal2 = new Obstacle(10, 300, 50, 50);
	// var coin2 = new Obstacle(400, 300, 10, 30);

	var backgroundpas = 0;

	var x = 100;
	var y = 30;
	var yinit = 30;
	var compteur = 0; //*Pour le saut
	var compt = 0; //*servira à ralentir la marche du perso
	var pas = 0;

	var droite = true;
	var gravite = false; //*pour savoir si on est en train de tomber. On ne saute pas.

	// var portal = new Image();
	// var coin = new Image();
	// var fond2 = new Image();

	// var pick = new Audio('son/pick.mp3');

	// var telep = false;
	// var ramasse_coin = false;

	//*Chargement de l'image
	fond.src = "Images/decor.png";
	// fond.src = "images/decor1_1.gif";
	perso.src = 'Images/mario-spritesheet.png';
	// Path par rapport au document HTML, pas par rapport au document JS
	// fond2.src = 'Images/fond2.jpg';
	// coin.src = 'Images/coin.png';
	// portal.src = 'Images/portal.png';


	fond.onload = function(){
	setInterval(boucle,20); //*FPS : 1000/20
	}

	function boucle(){


		compt++;
		//*ALLER A DROITE
		if (clavier.droite){
			for (p in obstacles){
				o = obstacles[p];
				if (o.collision(x+5,y,32,64)){
					coll = true; 
					console.log("hzuiruizu");break;
				}
			}
			if (!coll)
				x=x+5;
			if (compt%3==0)
				pas++;
			if(x>300 && backgroundpas<1900){
				x=300;
				backgroundpas+=5;
				ox-=5;
				}
			droite = true;
			coll = false;
		}

		//*ALLER A GAUCHE
	
		else if(clavier.gauche){
			for (p in obstacles){
				o = obstacles[p];
				if (o.collision(x-5,y,32,64)){
					coll = true; break;
				}
			}
			if (!coll)
				x=x-5;
			if (compt%3==0)
				pas++;
			if(x<200 && backgroundpas>90){
				x=200;
				backgroundpas-=5;
				ox+=5;
				}
			droite = false;
			coll = false;
		}
		else
			pas = 0; //*retour en position initiale


//*GRAVITE

		//* si aucune collision alors gravité
		for (p in obstacles){
			o = obstacles[p];
			if (o.collision(x,y*1.05,32,64)){
				coll = true; break;
			}
		}
		if (!coll && !sol.collision(x,y,32,64)){
			y=y*1.05;
		  //y=y+5 par ex pour une gravité à vitesse constante
			gravite = true;
		}
		else {
			gravite = false;
			coll = false;
 		}
			

			
		//*SAUTER
		if (clavier.espace && compteur<=0 && !gravite){
			yinit = y;
			compteur = 40;

		//là il fait la boucle de collision pour le saut
		
			
		}

		if (compteur>=0){
			if (compteur>20){
				for (p in obstacles){
					o = obstacles[p];
					if (o.collision(x,y-20,32,64)){
						coll = true;
						console.log("caca2"); break;
					}
				}
				if (coll){
					compteur = 40-compteur; 
					coll = false;
				}
				y=yinit+(20-compteur)*(20-compteur)/4*1.5-150;
					
			}

						//*saut -- on ne continue pas l'équation si collision avec plateforme vers le bas
			else{
				for (p in obstacles){
					o = obstacles[p];
					if (o.collision(x,y+25,32,64)){
						coll = true;
						console.log("caca"); break;
					}
				}
				if (!coll){
					y=yinit+(20-compteur)*(20-compteur)/4*1.5-150;
					console.log("fesse");	
				}

			}
				 
				
		compteur--;
		coll = false;
		}

//*AUTRES

		//* rétablir le sprite 
		if (pas>=8)
			pas=0;

		//* collision pièce
		// if (coin2.collision(x,y,32,64)&&ramasse_coin==false){
		// 	ramasse_coin = true;
		// 	pick.play();
		// }

		//* collision portail
		// if (portal2.collision(x,y,32,64))
		// 	telep = true;

	//* DESSIN 
	ctx.save();
	// if (telep ==false)

	//*dessine le background et se répète à l'infini
	ctx.drawImage(fond,backgroundpas, 0, 600, 700, 0, 0, 600, 700);
	// if(backgroundpas>1900)
	// 	ctx.drawImage(fond,backgroundpas-2500, 0, 600, 700, 0, 0, 600, 700);
	// if(backgroundpas>2500)
	// backgroundpas=0;
	ctx.fillRect(ox,260,50,25);
	ctx.fillRect(ox+100,200,50,25);
	o1 = new Obstacle(ox,260,50,25);
	o2 = new 	Obstacle(ox+100,200,50,25);
	obstacles = new Array(o1,o2);
	ctx.fillRect(0,330,800,30);

	// else
	// 	ctx.drawImage(fond2,0,0,600,400);
	// if (ramasse_coin==false)
	// 	ctx.drawImage(coin, 400,300, 30,30);
	// if (telep==false)
	// 	ctx.drawImage(portal, 10, 300, 50, 50);
	//ctx.fillRect(450,241,112,25);

	ctx.translate(x+16,y+32);
	//*retourne le personnage
	if (!droite)
		ctx.scale(-1,1)
	//*dessine le personnage
	ctx.drawImage(perso,pas*32,128,32,64,-16,-32,32,64);
	ctx.restore();


	}

}
