window.addEventListener("load", dessiner);

var vache2;
var timerVache;
var p1x=10,p1y=10,p2x=10,p2y=10,p3x=10,p3y=10;
var Dt=200;
var d1x=5,d1y=5;
var d2x=10,d2y=10;
var d3x=7,d3y=7;
var xMin,xMax,yMin,yMax;
var distV=8000;
var distOk1=false;
var distOk2=false;
var distOk3=false;

function dessiner() {
	// descriptions globales
	ctx_haut = 850;     // hauteur du canvas en point
	ctx_larg = 1200;    // largeur du canvas en point
	var cv=document.getElementById("monDessin");  // cv représente l'objet canvas
	var ctx=cv.getContext("2d");               // ctx représente la surface dessinée
	activerHorloge("idDivHorloge",100,"engrenage.png",20,20);
	vache2 = vache1.cloneNode();
	vache2.setAttribute("id","vache2");
	document.body.appendChild(vache2);
	vache2.left=800;
	idDivHorloge.left=800;
	var pos=getPosition(monDessin);
	xMin=pos.x;
	yMin=pos.y;
	xMax=xMin+ctx_larg-vache1.width+40;
	yMax=yMin+ctx_haut-vache1.height+20;
	timerVache=setInterval(moveVache,20);

	// dimensionnement des éléments
	cv.height=ctx_haut;    // hauteur canvas
	cv.width=ctx_larg;     // largeur canvas
	ctx.width=ctx_larg;
	ctx.height=ctx_haut;
	ctx.beginPath();             // début de trace
	ctx.globalAlpha = 1;         // transparence pour fusion douce des couleurs
	ctx.fillStyle="#000000";     // couleur (ici noir)
	ctx.strokeStyle="#000000";   // couleur du trait
	ctx.lineCap="round";         // forme des extrémités
	ctx.lineJoin="round";        // forme des raccords
	ctx.lineWidth = 24;          // épaisseur du trait

	var choix1=prompt("Choix du dessin (1 à 6)");
	switch (choix1) {
		case "1" :
		ctx.moveTo(400,200);
		ctx.lineTo(800,200);
		ctx.arc(800,400,200,Math.PI*1.5,Math.PI*0.5);
		ctx.lineTo(400,600);
		ctx.arc(400,400,200,Math.PI*0.5,Math.PI*1.5);
		break;

		case "2" :
		ctx.moveTo(200,800);
		ctx.bezierCurveTo(550,250,650,250,1000,800);
		ctx.moveTo(200,800);
		ctx.bezierCurveTo(-300,100,1500,100,1000,800);
		break;

		case "3" :
		ctx.moveTo(400,400);
		ctx.bezierCurveTo(0,200,0,800,400,600);
		ctx.lineTo(800,400);
		ctx.bezierCurveTo(1200,200,1200,800,800,600);
		ctx.lineTo(400,400);
		break;

		case "4" :
		ctx.moveTo(300,200);
		ctx.bezierCurveTo(700,750,500,750,900,200);
		ctx.moveTo(300,200);
		ctx.bezierCurveTo(200,25,1000,25,900,200);
		ctx.moveTo(475,150);
		ctx.arc(475,200,50,Math.PI*1.5,Math.PI*1.499);
		ctx.moveTo(725,150);
		ctx.arc(725,200,50,Math.PI*1.5,Math.PI*1.499);
		ctx.moveTo(475,350);
		ctx.bezierCurveTo(600,475,600,475,725,350);
		break;

		case "5" :
		var choix2=prompt("Choix de la taille du bateau (de 1 à 100)");
		if(choix2<101){
			var s=choix2;
			ctx.lineWidth=s/5;
			ctx.moveTo(6*s,1*s);
			ctx.lineTo(3*s,6*s);
			ctx.lineTo(8*s,6*s);
			ctx.lineTo(6*s,2*s);
			ctx.moveTo(6*s,1*s);
			ctx.lineTo(6*s,7*s);
			ctx.moveTo(1*s,7*s);
			ctx.lineTo(10*s,7*s);
			ctx.lineTo(9*s,8*s);
			ctx.lineTo(2*s,8*s);
			ctx.lineTo(1*s,7*s);
		}else{
			alert("Trop grande taille !");
		}
		break;

		case "6" :
		ctx.lineWidth=3;
		var rouge=255;
		var vert=0;
		for(var x=0;x<128;x+=1){
			ctx.strokeStyle="rgba("+rouge+","+vert+",0,0.7)";
			ctx.arc(600,850,455-x,Math.PI,0);
			ctx.stroke();
			rouge-=2;
			vert+=2;
			ctx.beginPath();
		}
		var bleu=0;
		for(var x=0;x<128;x+=1){
			ctx.strokeStyle="rgba(0,"+vert+","+bleu+",0.7)";
			ctx.arc(600,850,327-x,Math.PI,0);
			ctx.stroke();
			vert-=2;
			bleu+=2;
			ctx.beginPath();
		}
		break;
		default : alert("Mauvais choix !");
	}
	ctx.stroke();
}


function moveVache(){
	if(p1x+d1x>xMax){
		p1x=2*xMax-d1x-p1x;
		d1x=-d1x;
	}else{
		if (p1x+d1x<0){
			p1x=-(p1x+d1x);
			d1x=-d1x;
		}else{
			p1x+=d1x;
		}
	}
	if(p2x+d2x>xMax){
		p2x=2*xMax-d2x-p2x;
		d2x=-d2x;
	}else{
		if (p2x+d2x<0){
			p2x=-(p2x+d2x);
			d2x=-d2x;
		}else{
			p2x+=d2x;
		}
	}
	if(p3x+d3x>xMax){
		p3x=2*xMax-d3x-p3x;
		d3x=-d3x;
	}else{
		if (p3x+d3x<0){
			p3x=-(p3x+d3x);
			d3x=-d3x;
		}else{
			p3x+=d3x;
		}
	}
	if(p1y+d1y>yMax){
		p1y=2*yMax-d1y-p1y;
		d1y=-d1y;
	}else{
		if (p1y+d1y<0){
			p1y=-(p1y+d1y);
			d1y=-d1y;
		}else{
			p1y+=d1y;
		}
	}
	if(p2y+d2y>yMax){
		p2y=2*yMax-d2y-p2y;
		d2y=-d2y;
	}else{
		if (p2y+d2y<0){
			p2y=-(p2y+d2y);
			d2y=-d2y;
		}else{
			p2y+=d2y;
		}
	}
	if(p3y+d3y>yMax){
		p3y=2*yMax-d3y-p3y;
		d3y=-d3y;
	}else{
		if (p3y+d3y<0){
			p3y=-(p3y+d3y);
			d3y=-d3y;
		}else{
			p3y+=d3y;
		}
	}

	if (((p1x-p2x)*(p1x-p2x)+(p1y-p2y)*(p1y-p2y))<distV&&distOk1===false){
		distOk1=true;
		if (d1x*d2x<0){
			d1x=-d1x; d2x=-d2x;
		}
		if (d1y*d2y<0){
			d1y=-d1y; d2y=-d2y;
		}
	}
	if (((p1x-p2x)*(p1x-p2x)+(p1y-p2y)*(p1y-p2y))>distV){
		distOk1=false;
	}

	if (((p1x-p3x)*(p1x-p3x)+(p1y-p3y)*(p1y-p3y))<distV&&distOk2===false){
		distOk2=true;
		if (d1x*d3x<0){
			d1x=-d1x; d3x=-d3x;
		}
		if (d1y*d3y<0){
			d1y=-d1y; d3y=-d3y;
		}
	}
	if (((p1x-p3x)*(p1x-p3x)+(p1y-p3y)*(p1y-p3y))>distV){
		distOk2=false;
	}

	if (((p2x-p3x)*(p2x-p3x)+(p2y-p3y)*(p2y-p3y))<distV&&distOk3===false){
		distOk3=true;
		if (d2x*d3x<0){
			d2x=-d2x; d3x=-d3x;
		}
		if (d2y*d3y<0){
			d2y=-d2y; d3y=-d3y;
		}
	}
	if (((p2x-p3x)*(p2x-p3x)+(p2y-p3y)*(p2y-p3y))>distV){
		distOk3=false;
	}

	vache1.style.left=p1x;
	vache1.style.top=p1y;
	vache2.style.left=p2x;
	vache2.style.top=p2y;
	idDivHorloge.style.left=p3x;
	idDivHorloge.style.top=p3y;
}