/*
 * assembled by joerg keller (nov 2011)
 * develop@joergkeller.net
 * feel free to copy, use and modify
 *
 * HTML-Code needed:
 * <div style="position: relative">
 * <canvas id="myClockBkg"></canvas>
 * <canvas id="myClock" style="position: absolute;></canvas>
 * </div>
 */

$(function(){
	
	var canvas = document.getElementById("myClockBkg");
    var context = canvas.getContext("2d");
	
	canvas.width = 150;
	canvas.height = 150;
	
	// Grundeinstellungen    
   	var centerX = 75;
   	var centerY = 75;
   	var radius = 50;
	var offset = 1.5;
	
    context.strokeStyle = "black";
	
	for(i=1; i<=12; i++){
		context.beginPath();
		   	
    	offset += (2 / 12);
    	if(offset >= 2) offset -= 2;
    	startAngle = offset * Math.PI;
    	endAngle = (offset - 0.01) * Math.PI;
    	
   		context.arc(centerX, centerY, radius, startAngle, endAngle, true);
   		context.lineWidth = 3;
		context.stroke();
	}
	
	myClock();
});


function moveClock() {
	takt = setTimeout("myClock()", 1000);
}

function myClock() {
	
	var canvas = document.getElementById("myClock");
    var context = canvas.getContext("2d");
	context.clearRect(0, 0, canvas.width, canvas.height);
	var timeNow = new Date();
	
	canvas.width = 150;
	canvas.height = 150;
	
	// Grundeinstellungen    
   	var centerX = 75;
   	var centerY = 75;
   	var radius = 50;
	
	var startPoint = (timeNow.getSeconds() * (2 / 60)) + 1.5;
	if(startPoint >= 2) startPoint = startPoint - 2;
   	var startAngle = startPoint * Math.PI;
   	var endPoint = startPoint - 0.05;
   	if(endPoint < 0) endPoint = 2 + endPoint;
   	var endAngle = endPoint * Math.PI;
   	var counterclockwise = true;
   	
   	context.shadowColor = "#222222";
    context.shadowBlur = 5;
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.strokeStyle = "black";
   	
   	context.beginPath();  
   	context.arc(centerX, centerY, radius, startAngle, endAngle, counterclockwise);
   	context.lineWidth = 3;
	context.stroke();

	context.save();
	context.translate(centerX, centerY);
	var minRotateAngle = (timeNow.getMinutes() * (2 / 60)) + 1;
	if(minRotateAngle >= 2) minRotateAngle = minRotateAngle - 2;
	context.rotate(minRotateAngle * Math.PI);
	context.beginPath();
	context.moveTo(0, 0);
	context.lineTo(0, 0 + 45);
	context.lineWidth = 2;
	context.stroke();
	
	context.restore();
	context.save();
	
	context.translate(centerX, centerY);
	var hourRotateAngle = (timeNow.getHours() * (2 / 12)) + (timeNow.getMinutes() * ((2 / 12) / 60)) + 1;
	if(hourRotateAngle >= 2) hourRotateAngle = hourRotateAngle - 2;
	context.rotate(hourRotateAngle * Math.PI);
	context.beginPath();
	context.moveTo(0, 0);	
	context.lineTo(0, 0 + 30);
	context.lineWidth = 4;
	context.stroke();
	
	context.restore();

	moveClock();	   	
}