// Create canvas element
//var clock = document.createElement("canvas");
//document.getElementById("canvas").appendChild(clock);
//document.getElementById("clock").appendChild(clock);
//var c = clock.getContext("2d");
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

// Set size
//var w = clock.width = ;
//var h = clock.height = ;

var w = canvas.width;
var h = canvas.height;

var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

// Define offset as distance between clock and edge of canvas
var margin = 1;
var offset = margin + 1;

// Get centre point
var centre = Math.round(h / 2);

// Get radius of clock face
var r = centre - offset;

// Get radius of outer circle (the round gap between the clock and date sections - 0.1 times bigger)
//var r2 = r + Math.round(0.1 * r);
var r2 = r + 0.1 * r;

// Get the angles at which to start and stop drawing the date section around the clock
// a = acos(r / r2) / pi
//   = acos(0.91667) / pi
//   = 0.41114 / pi
//   = 0.13087
var a = Math.acos(r / r2) / Math.PI;
var a1 = (1.5 + a) * Math.PI;
var a2 = (0.5 - a) * Math.PI;
//var a = 0.13087;
//var a1 = 5.12353; // var a1 = (1.5 + a) * Math.PI;
//var a2 = 1.15966; // var a2 = (0.5 - a) * Math.PI;

//var xCentre = floor((w - r - r2) / 2);
//var yCentre = floor((h - r - r2) / 2);



//c.font = "0px Arial #fff";
//c.fillText("Monday 14th", floor(($_GET["width"] - r - r2) / 2), 20);

//drawNumbers(c, r, centre);
//drawTime(c, r, centre, "white", "white", "red");

//setInterval(drawClock(c, r, centre, "white", "white", "red"), 1000);

//setInterval(alert("sec"), 1000);
//setInterval(function(){ alert("Hello"); }, 3000);
//drawClock(c, r, centre, "white", "white", "red");

var hourColour = "white";
var minuteColour = "white";
var secondColour = "red";

var firstRun = true;

c.translate(centre, centre);

c.lineWidth = 0.02 * r;

//drawFace();
//drawDate();

//var currentDate;
var currentDay = 0;

var drawStroke = true;

drawClock();
drawDate(c, r, r2, a, a1, a2);
drawStroke = false;
setInterval(drawClock, 1000);

function drawClock() {
	drawFace();
		drawNumbers(c, r, centre);
		drawTime(c, r, hourColour, minuteColour, secondColour);
	
	var newDay = new Date().getDate();
	if (currentDay != newDay) {
		drawDate(c, r, r2, a, a1, a2);
		currentDay = newDay;
	}
}

function drawFace() {
	// Draw clock
	c.beginPath();
	var pos;
	var rad = r - 1 - r * 0.02;
	//if (firstRun) {
	//	pos = centre;
	//	//c.strokeStyle = "white";
	//	rad = r;
	//}
	//else {
	//	pos = 0;
	//	//c.strokeStyle = "black";
	//	rad = r - 1;
	//}
	
	if (drawStroke) {
		rad = r;
	}
	
	//c.arc(pos, pos, rad, 0, 2 * Math.PI);
	c.arc(0, 0, rad, 0, 2 * Math.PI);
	//c.strokeStyle = "white";
	c.fillStyle = "black";
	c.fill();
	
	if (drawStroke) {
		c.strokeStyle = "white";
		c.stroke();
	}
	
	//if (firstRun) {
	//	c.strokeStyle = "white";
	//	c.stroke();
	//}
}

function drawDate(c, radius, radius2, angle, angle1, angle2) {
	// Draw date
	c.fillStyle = "black";
	c.strokeStyle = "white";
	c.beginPath();
	//c.arc(centre, centre, r2, a1, a2, false);
	
	//if (drawStroke) {
	//	r2 = r2 + 1;
	//}
	
	var dateWidth = w;
	
	if (!drawStroke) {
		radius = radius - 1 - radius * 0.02;
		radius2 = radius2 + 1 + radius * 0.02;
		angle = Math.acos(radius / radius2) / Math.PI;
		angle1 = (1.5 + angle) * Math.PI;
		angle2 = (0.5 - angle) * Math.PI;
		dateWidth = dateWidth - 1 - radius;
	}
	
	c.arc(0, 0, radius2, angle1, angle2, false);
	c.strokeStyle = "black";
	//c.arc(dateWidth - radius - offset, centre, radius, 0.5 * Math.PI, 1.5 * Math.PI, true);
	c.arc(dateWidth - radius - offset - centre, 0, radius, 0.5 * Math.PI, 1.5 * Math.PI, true);
	c.closePath();
	c.fill();
	
	
	if (drawStroke) {
		c.strokeStyle = "white";
		c.stroke();
	}
	
	drawDateText(c, r);
}

function drawDateText(c, radius) {
	var d = new Date();
	var dayOfWeek = d.getDay();
	var day = d.getDate();
	var suf = suffix(day);
	var m = d.getMonth()
	var year = d.getFullYear();
	
	//var line1 = weekday[dayOfWeek] + " " + day + suf;
	var line1 = weekday[dayOfWeek] + " " + day;
	var line2 = month[m] + " " + year;
	var sufX = c.measureText(line1).width;
	//sufX = Math.round(sufX / 2);
	//alert(sufX);
	c.fillStyle = "white";
	c.font = "bold " + 0.55 * radius + "px arial";
	//c.font = 0.4 * radius + "px arial";
	
	var dateWidth = w - 3 * radius;
	var xPos = radius + 0.25 * radius + Math.round(dateWidth / 2);
	var yPos = Math.round(radius * 0.35);
	//var yPos = radius * 0.3;
	//c.textBaseline = "top";
	c.fillText(line1, xPos, -yPos - 0.15 * radius);
	//yPos = Math.round(radius / 2);
	//c.textBaseline = "bottom";
	c.fillText(line2, xPos, yPos - 0.15 * radius);
	
	var url = "www.solutionsoftware.co.uk";
	c.font = 0.3 * radius + "px arial";
	yPos = radius - 0.2 * radius;
	//c.textBaseline = "bottom";
	c.fillText(url, xPos, yPos);
	
	//c.textBaseline = "top";
	//c.font = 0.2 * radius + "px arial";
	//c.fillText(suf, sufX, 10);
	//c.fillText(suf, xPos + sufX, yPos);
}

function suffix(day) {
	var result;
	
	switch (day) {
		case 1:
		case 21:
		case 31:
			result = "st";
			break;
		case 2:
		case 22:
			result = "nd";
			break;
		case 3:
		case 23:
			result = "rd";
			break;
		default:
			result = "th";
			break;
	}
	
	return result;
}

function drawNumbers(c, radius, centre) {
	var ang;
	var num;
	c.beginPath();
	c.font = radius * 0.15 + "px arial";
	c.textBaseline = "middle";
	c.textAlign = "center";
	c.fillStyle = "white";
	
	//if (firstRun) {
	//	c.translate(centre, centre);
	//	c.moveTo(centre, centre);
	//	firstRun = false;
	//}
	
	//c.translate(34, 34)
	
	for (num = 1; num < 13; num++) {
		ang = num * Math.PI / 6;
		c.rotate(ang);
		c.translate(0, -radius * 0.85);
		c.rotate(-ang);
		c.fillText(num.toString(), 0, 0);
		//c.fillText(roman(num), 0, 0);
		c.rotate(ang);
		c.translate(0, Math.round(radius * 0.85));
		c.rotate(-ang);
	}
	
	//c.translate(-centre, -centre);
}

function drawTime(c, radius, hourColour, minuteColour, secondColour) {
	//c.translate(centre, centre);
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	
	// Hour
	hour = hour % 12;
	hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
	drawHand(c, hour, radius * 0.5, radius * 0.07, centre, hourColour);
	
	// Minute
	minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
	drawHand(c, minute, radius * 0.8, radius * 0.07, centre, minuteColour);
	
	// Second
	second = (second * Math.PI / 30);
	drawHand(c, second, radius * 0.9, radius * 0.02, centre, secondColour);
	var tail = second + Math.PI;
	drawHand(c, tail, radius * 0.25, radius * 0.02, centre, secondColour);
	//c.translate(-centre, -centre);
	
	c.beginPath();
	c.arc(0, 0, r * 0.1, 0, 2 * Math.PI);
	c.fillStyle = secondColour;
	c.fill();
}

function drawHand(c, position, length, width, centre, colour) {
	// Move to centre
	//c.translate(centre, centre);
	
	c.beginPath();
	c.strokeStyle = colour;
	c.lineWidth = width;
	c.lineCap = "round";
	c.moveTo(0, 0);
	c.rotate(position);
	c.lineTo(0, -length);
	c.stroke();
	c.rotate(-position);
}

function roman(value) {
	var result;
	
	switch(value) {
		case 1:
			result = "I";
			break;
		case 2:
			result = "II";
			break;
		case 3:
			result = "III";
			break;
		case 4:
			result = "IV";
			break;
		case 5:
			result = "V";
			break;
		case 6:
			result = "VI";
			break;
		case 7:
			result = "VII";
			break;
		case 8:
			result = "VIII";
			break;
		case 9:
			result = "IX";
			break;
		case 10:
			result = "X";
			break;
		case 11:
			result = "XI";
			break;
		default:
			result = "XII";
			break;
	}
	
	return result;
}