
function CountDown(zeitgeist){
  zeitgeist = zeitgeist-1;
  if(zeitgeist < 0){
    zeitgeist = 60;
  }
  
  return zeitgeist;
}	
function degToRad(degree){
	var factor = Math.PI/180;
	return degree*factor;
}
var cds = 60;	
function renderTime(){
 
    //Von der "Bib" Date now obj
    var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
  //style
   if(cds>30){
	ctx.strokeStyle ='green';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='lightgreen';
   }
  if(cds<=31){
    ctx.strokeStyle ='yellow'; 
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='lightyellow';
  }
   if(cds<=21){
    
    ctx.strokeStyle ='lightred';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='red';
    
  }
   if(cds<=11){
     ctx.strokeStyle ='red';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='red';
   }
	
	var now = new Date();
	var today = now.toDateString();
	var time = now.toLocaleTimeString();
	var seconds = now.getSeconds();
	var milliseconds = now.getMilliseconds();
	var newSeconds = seconds+(milliseconds/1000);
	
//Background
	//außen innen
  gradient = ctx.createRadialGradient(250,250,5,  250,250,300);
  gradient.addColorStop(0, 'purple');
  gradient.addColorStop(1, 'black');
  //ctx.fillStyle = 'grey';
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 500, 500);
  

//MilliSeconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad((cds*6)-90));
  ctx.stroke();

//Time
  ctx.font = "20px Arial ";
  ctx.fillStyle ='lightblue';
  ctx.fillText(CountDown(cds),240,260);
  cds = CountDown(cds);
 
	
}

//renderTime(); 


