//---------------------------
function clock(){
//---------------------------
	var PI = Math.PI;
	var now = new Date();
	var ctx = document.getElementById('clock').getContext('2d');
	ctx.save();
	ctx.clearRect(0,0,120,120);
	ctx.translate(60,60);
	ctx.scale(0.4,0.4);
	ctx.rotate(-PI/2);
	ctx.strokeStyle = "black";
	ctx.fillStyle = "white";
	ctx.lineWidth = 8;
	ctx.lineCap = "round";



	// Hour marks
	ctx.save();
	for (var i=0;i<12;i++){
		ctx.beginPath();
		ctx.rotate(PI/6);
		if(i!=3) {
			ctx.moveTo(100,0);
			ctx.lineTo(120,0);
			ctx.stroke();
		}
	}
	ctx.restore();

	// Minute marks
	ctx.save();
	ctx.lineWidth = 5;
	for (i=0;i<60;i++){
		if (i%5!=0) {
			ctx.beginPath();
			ctx.moveTo(117,0);
			ctx.lineTo(120,0);
			ctx.stroke();
		}
		ctx.rotate(PI/30);
	}
	ctx.restore();

	var day = now.getDate();
	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hr  = now.getHours();
	hr = hr>=12 ? hr-12 : hr;

	// write Date
	ctx.save();
	ctx.rotate(PI/2);
	ctx.lineWidth = 3;
	ctx.strokeRect(62,33,38,30);
	ctx.fillStyle = "white";
	ctx.fillRect(63,34,37,29);
	ctx.fillStyle = "black";
	ctx.font = "bold 20pt Arial";
	ctx.textAlign = "center";
//	var dim = ctx.measureText("25");
	ctx.fillText(day,81,58);
	ctx.restore();

	// write Hours
	ctx.save();
	ctx.rotate( hr*(PI/6) + (PI/360)*min + (PI/21600)*sec );
	ctx.beginPath();
		ctx.strokeStyle = "#666";
		ctx.lineWidth = 5;
		ctx.moveTo(0,0);
		ctx.lineTo(82,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.strokeStyle = "#666";
		ctx.lineWidth = 14;
		ctx.moveTo(0,0);
		ctx.lineTo(70,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.lineWidth = 8;
		ctx.strokeStyle = "#fefea6";
		ctx.moveTo(0,0);
		ctx.lineTo(69,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.lineWidth = 5;
		ctx.strokeStyle = "#666";
		ctx.arc(58,0,14,0,PI*2,true);
		ctx.stroke();
	ctx.beginPath();
		ctx.fillStyle = "#fefea6";
		ctx.arc(59,0,13,0,PI*2,true);
		ctx.fill();
	ctx.beginPath();
		ctx.moveTo(58,0);
		ctx.lineTo(46,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.moveTo(58,0);
		ctx.lineTo(66,10);
		ctx.stroke();
	ctx.beginPath();
		ctx.moveTo(58,0);
		ctx.lineTo(66,-10);
		ctx.stroke();
	ctx.restore();

	// write Minutes
	ctx.save();
	ctx.rotate( (PI/30)*min + (PI/1800)*sec )
	ctx.beginPath();
		ctx.strokeStyle = "#666";
		ctx.lineWidth = 5;
		ctx.moveTo(0,0);
		ctx.lineTo(108,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.strokeStyle = "#666";
		ctx.lineWidth = 14;
		ctx.moveTo(0,0);
		ctx.lineTo(96,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.lineWidth = 8;
		ctx.strokeStyle = "#fefea6";
		ctx.moveTo(0,0);
		ctx.lineTo(95,0);
		ctx.stroke();
	ctx.restore();

	// Write seconds
	ctx.save();

	ctx.rotate(sec * PI/30);
	ctx.strokeStyle = "#666";

	ctx.beginPath();
		ctx.lineWidth = 5;
		ctx.moveTo(-40,0);
		ctx.lineTo(108,0);
		ctx.stroke();
	ctx.beginPath();
		ctx.fillStyle = "#666";
		ctx.arc(-40,0,6,0,PI*2,true);
		ctx.fill();
	ctx.beginPath();
		ctx.arc(0,0,12,0,PI*2,true);	//--arc(x, y, radius, startAngle, endAngle, anticlockwise)
		ctx.fill();
	ctx.beginPath();
		ctx.lineWidth = 3;
		ctx.arc(70,0,10,0,PI*2,true);
		ctx.stroke();
	ctx.beginPath();
		ctx.fillStyle = "#fefea6";
		ctx.arc(71,0,8,0,PI*2,true);
		ctx.fill();
	ctx.beginPath();
		ctx.fillStyle = "#ccc";
		ctx.arc(0,0,3,0,PI*2,true);
		ctx.fill();

	ctx.restore();
	
	//..............................
	ctx.restore();
	//..............................
}