// On récupère le canvas et son contexte 2D
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

// On règle le style du texte
ctx.fillStyle = '#000';
ctx.font = '18px sans-serif';

// On rajoute les textes
ctx.fillText('Hours', 38, 90);
ctx.fillText('Minutes', 173, 90);
ctx.fillText('Seconds', 308, 90);

// Fonction executée toutes les secondes
setInterval(function(){
	ctx.clearRect(0, 0, 410, 75); // efface seulement nos digits

	var now = new Date(); // on récupère la date

	drawPart(35, 35, 95, 35, 30, 20, 15, now.getHours()); // on dessine les heures

	drawPart(175, 35, 235, 35, 30, 20, 15, now.getMinutes()); // on dessine les minutes

	drawPart(315, 35, 375, 35, 30, 20, 15, now.getSeconds()); // on dessine les secondes
}, 1000);

function drawPart(decX, decY, unitX, unitY, outerRadius, innerRadius, singleRadius, partValue) {
	var octValue = partValue.toString(8);

	var octUnit = octValue % 10;
	var octDec =  Math.floor(octValue / 10);

	innerHex(decX, decY, singleRadius, octDec);
	outerHex(decX, decY, innerRadius, outerRadius, octDec);

	innerHex(unitX, unitY, singleRadius, octUnit);
	outerHex(unitX, unitY, innerRadius, outerRadius, octUnit);
}

function outerHex(cx,cy,r1,r2,value) {
  var PI2 = Math.PI*2;
  var rotationAdjustment = -90 * Math.PI/180;
  var sidecount = 6;
  
  for (var i = 0; i < sidecount; i++) {
    var startAngle = PI2/sidecount*i+rotationAdjustment;
    var endAngle = PI2/sidecount*(i+1)+rotationAdjustment;
    
    var cos0 = Math.cos(startAngle);
    var sin0 = Math.sin(startAngle);
    var cos1 = Math.cos(endAngle);
    var sin1 = Math.sin(endAngle);
    
    ctx.beginPath();
    ctx.moveTo(cx+r1*cos0, cy+r1*sin0);
    ctx.lineTo(cx+r2*cos0, cy+r2*sin0);
    ctx.lineTo(cx+r2*cos1, cy+r2*sin1);
    ctx.lineTo(cx+r1*cos1, cy+r1*sin1);
    ctx.closePath();
    
    if(value >= (i + 1)) {
    	ctx.fillStyle = '#000';
    } else {
    	ctx.fillStyle = '#d4d4d4';
	}
    
    ctx.fill();
  }
}

function innerHex(cx, cy, radius, value) {
  var startAngle = -90;
  var edges = 6;
  var angle = 360/edges;
  
  ctx.beginPath();
  
  for (var i = 0; i <= edges; i++) {
    var a = ((angle*i)+startAngle)*(Math.PI/180);
    var x = cx + radius * Math.cos(a);
    var y = cy + radius * Math.sin(a);
    ctx.lineTo(x, y);
  }
  
  if(value == 7) {
    ctx.fillStyle = '#000'
  } else {
    ctx.fillStyle = '#d4d4d4';
  }

  ctx.fill();
}