var colBg = "#f1f1f1";
var colHr = "#97BF4F";
var colMin = "#999";
var colSec = "#666";
var colMil = "#333";

var PI = Math.PI;
function DrawSlice(x,y,r,a,step,fillColor,maskColor,target){
	var canvas = document.getElementById(target);
	var ctx = canvas.getContext("2d");
	
	ctx.beginPath();
	ctx.fillStyle=maskColor;
	ctx.arc(x,y,r,0,2*PI,true);
	ctx.fill();
	
	ctx.beginPath();
	ctx.fillStyle = fillColor;
	ctx.strokeStyle = maskColor;
	ctx.lineWidth = 1;
	ctx.arc(x,y,r,step*a-PI/2,step*a-PI/2+PI,true);
	ctx.fill();
	if(step*a-PI/2 > PI/2){
		ctx.beginPath();
		ctx.fillStyle=fillColor;
		ctx.arc(x,y,r,3*PI/2,PI/2,false);
		ctx.fill();
		
	}else{
	//application du masque Gauche:
		ctx.beginPath();
		ctx.fillStyle=maskColor;
		ctx.arc(x,y,r,3*PI/2,PI/2,true);
		ctx.fill();
		ctx.stroke();
	}
	
	if(r > 20){
		ctx.beginPath();
		ctx.fillStyle=maskColor;
		ctx.arc(x,y,r-20,0,2*PI,true);
		ctx.fill();
	}
}

function chrono(){
	var date = new Date();
	var canvas = document.getElementById("chrono");
	
	//on filtre les navigateurs ne comprenant pas les canvas
	if(canvas.getContext){
		var ctx = canvas.getContext("2d");
		ctx.clearRect(0,0,500,500);
	
		//part des heures
		DrawSlice(100,100,100,PI/12,date.getHours(),colHr,colBg,"chrono");
		//Part des minutes
		DrawSlice(100,100,70,PI/30,date.getMinutes()+1,colMin,colBg,"chrono");
		//part des secondes
		DrawSlice(100,100,40,PI/30,date.getSeconds()+1,colSec,colBg,"chrono");
		//part des dixièmes de seconde
		DrawSlice(100,100,10,PI/5,Math.floor(date.getMilliseconds()/100)+1,colMil,colBg,"chrono");
		
		//on affiche l'heure au format texte
		var hours = date.getHours();
		if(hours < 10) hours = "0"+hours;
		var minutes = date.getMinutes();
		if(minutes < 10) minutes = "0"+minutes;
		var seconds = date.getSeconds();
		if(seconds < 10) seconds = "0"+seconds;
		document.getElementById("clocktext").innerHTML = 
			"<span id='hour'>"+hours+
			"</span> : <span id='minute'>"+minutes+
			"</span>' <span id='second'>"+seconds+
			"</span>\" <span id='millisecond'>"+Math.floor(date.getMilliseconds()/100)+"</span>";
		
	}
	setTimeout("chrono()",100);
}