//length of minute Pointer

const len = 200;



//Center of the canvas field



//Size of the field

const fieldx = window.innerWidth-20;

const fieldy = window.innerHeight-20;



const hlen = len/2;   //length of hour pointer

const mlen = len; //length of minutes pointer

const slen = len/4; //length of seconds pointer



//colors of circles

const hColor = "#00FF00";

const mColor = "#008BFF";

const sColor = "#FF00BE";



//colors of pointers

const hpColor = "#000";

const mpColor = "#000";

const spColor = "#000";



//color of font

const tColor = "#7d7d7d";

const tSize = 12;



const nColor = "#000";

const nSize = 30;



//Mathematische Funktionen



function getX(length,rad){

  return length*Math.sin(rad);

}



function getY(length,rad){

  return length*Math.sin(Math.PI/2-rad);

}



function getAngle(amount){

  amount = amount%60;

  var degree = amount*6;

  var rad = (degree%360)/180*Math.PI;

  return rad-Math.PI/2;

}



function getHourAngle(hours){

  hours = hours%12;

  var degree = hours*30;

  var rad = (degree%360)/180*Math.PI;

  return rad-Math.PI/2;

}



//Zeiger zeichnen

function drawHoursPointer(ctx,angle,Center){

  drawPointer(hlen,ctx,angle,Center);

}



function drawMinutesPointer(ctx,angle,Center){

  drawPointer(mlen,ctx,angle,Center);

}



function drawSecondsPointer(ctx,angle, Center){

  drawPointer(slen,ctx,angle,Center);

}



function drawPointer(len,ctx,angle,Center){

  Tmp = getPoint(len,angle);

  Tmp[0]+= Center[0];

  Tmp[1] = Center[1] - Tmp[1];

  NPoint = getPoint(.5,angle-Math.PI/2);

  

  ctx.beginPath();

  ctx.moveTo(Tmp[0]+NPoint[0],Tmp[1]-NPoint[1]);

  ctx.lineTo(Tmp[0]-NPoint[0],Tmp[1]+NPoint[1]);

  ctx.lineTo(Center[0]-NPoint[0],Center[1]+NPoint[1]);

  ctx.lineTo(Center[0]+NPoint[0],Center[1]-NPoint[1]);

  ctx.closePath();

  ctx.fillStyle=hpColor;

  ctx.fill();

  

  ctx.beginPath();

  ctx.moveTo(Center[0],Center[1]);

  ctx.arc(Center[0],Center[1],.5,0,Math.PI*2,true);

  ctx.closePath();

  ctx.fill();

}



//neue Punktabweichung bestimmen

function getPoint(length,angle){

  var x = getX(length,angle+Math.PI/2);

  var y = getY(length,angle+Math.PI/2);

  return new Array(x,y);

}



//Kreise zeichnen

function drawHoursCircle(ctx,angle,Center){

  ctx.beginPath();

  ctx.moveTo(Center[0],Center[1]);

  ctx.arc(Center[0],Center[1],hlen,Math.PI*1.5,angle,false);

  ctx.closePath();

  ctx.fillStyle = hColor;

  ctx.fill();

}



function drawMinutesCircle(ctx,angle,Center){

  ctx.beginPath();

  ctx.moveTo(Center[0],Center[1]);

  ctx.arc(Center[0],Center[1],mlen,Math.PI*1.5,angle,false);

  ctx.closePath();

  ctx.fillStyle = mColor;

  ctx.fill();

}



function drawSecondsCircle(ctx,angle, Center){

  ctx.beginPath();

  ctx.moveTo(Center[0],Center[1]);

  ctx.arc(Center[0],Center[1],slen,Math.PI*1.5,angle,false);

  ctx.closePath();

  ctx.fillStyle = sColor;

  ctx.fill();

}



//Ende der Sommerzeit berechnen

function calculateSTEnd(){

  var ct = new Date();

  ct.setUTCMonth(9);
  ct.setUTCHours(1);

  for(var i = 31; i>0; i--){

    ct.setUTCDate(i);

    if(ct.getDay()==0){

      return ct;

    }

  }

}



//Anfang der Sommerzeit berechnen

function calculateSTStart(){

  var ct = new Date();

  ct.setUTCMonth(2);
  ct.setUTCHours(1);

  for(var i = 31; i>0; i--){

    ct.setUTCDate(i);

    if(ct.getDay()==0){

      return ct;

    }

  }

}





//komplette Uhr mit Kreisen zeichnen

function drawCircleClockBerlin(){

  var ct = new Date();

  var stStart = calculateSTStart();

  var stEnd =  calculateSTEnd();

  

  if(ct>stStart && ct<stEnd){

    drawCircleClock(2);
    printText("BERLIN",2);

  }

  else {

    drawCircleClock(1);
    printText("BERLIN",1);

  }



}





//komplette Uhr mit Kreisen zeichnen

function drawCircleClock(tsd){

  var canvas = document.getElementById("clock");

  canvas.width=fieldx;
  canvas.height=800;  
  var CenterC =  new Array(fieldx/2,350);

  
  
  var ctx = canvas.getContext("2d");


  Center = CenterC.slice(); 
  ctx.clearRect(0,0,1000,2000);
  
  
  var currentTime = new Date();

  var hours = currentTime.getUTCHours()+tsd;

  currentTime.setHours(hours);



  var minutes = currentTime.getUTCMinutes();      

  var seconds = currentTime.getUTCSeconds();

 

  var mangle = getAngle(minutes); 

  var hangle = getHourAngle(hours);

  var sangle = getAngle(seconds);

      

  CenterH = CenterC.slice();

  

  CenterM = CenterH.slice();

  Tmp = getPoint(hlen,hangle);

  CenterM[0]+=Tmp[0];

  CenterM[1]-=Tmp[1]; 

  

  CenterS = CenterM.slice();

  Tmp = getPoint(mlen,mangle);

  CenterS[0]+=Tmp[0];

  CenterS[1]-=Tmp[1]; 

  
  ctx.shadowColor = "#404040";
  ctx.shadowBlur = 7;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;

  

  if(minutes!="0"){

    drawMinutesCircle(ctx, mangle,CenterM);

  }



  if(hours!="0"){

    drawHoursCircle(ctx, hangle,CenterH);

  }

  

  if(seconds!="0"){

    drawSecondsCircle(ctx, sangle,CenterS);

  }



  drawMinutesPointer(ctx, mangle,CenterM);	

  drawHoursPointer(ctx, hangle,CenterH);

  drawSecondsPointer(ctx,sangle,CenterS);

}



//Zeit als String der Form hh:mm:ss

function timeToString(date,tsd){



  var hours = date.getHours();

  var minutes = date.getUTCMinutes();      

  var seconds = date.getUTCSeconds();





  var text = "";

  if(hours<10){

    text+="0";

  }

  text+=hours;

  text+=":";

  

  if(minutes<10){

    text+="0";

  }

  text+=minutes;

  text+=":";

  

  if(seconds<10){

    text+="0"

  }

  text+=seconds;

return text;

}

function dateToString(date,tsd){


   

  var day = date.getDate();

  var month = date.getMonth()+1;      

  var year = date.getFullYear();





  var text = "";

  if(day<10){

    text+="0";

  }

  text+=day;

  text+=".";

  

  if(month<10){

    text+="0";

  }

  text+=month;

  text+=".";

  

  text+=year;

return text;

}

//Raleway webfont
WebFontConfig = {
    google: { families: [ 'Raleway:100:latin' ] }
  };
  
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

function printText(name,tsd){

  var canvas = document.getElementById("clocktext");

  var context = canvas.getContext("2d");
  var currentTime = new Date();
  context.clearRect(0,0,1000,1000);

  
  context.fillStyle    = '#6b6b6b';
  context.font         = '40px Raleway';
  context.textBaseline = 'top';
  context.fillText(timeToString(currentTime,2), 0, 0);
  context.fillText("— ",145,0);
  context.fillText(dateToString(currentTime,2),190,0);


}