var CLOCK_DIV_ID = "clock";


var CLOCK_NUMBER_WIDTH = "1.7em";



var fontFamily = "verdana, helvetica, arial, sans-serif";


var fontSize = "10px";


var colnumbers = "#000000";


var colhours = "#000000";


var colminutes = "#000000";


var colseconds = "#000000";


var width = 80;


var numstyle = 0;




var comstyle = "position:absolute;top:0px;left:0px;visibility:hidden;";


var secln = width / 2;


var minln = width / 2;

var hourln = width / 3;


var clocknum = [
	['','1','2','3','4','5','6','7','8','9','10','11','12'],
	['','I','II','III','IIII','V','VI','VII','VIII','IX','X','XI','XII'],
	['','&middot;','&middot;','-','&middot;','&middot;','<span style="font-size:60%">|</span>','&middot;','&middot;','-','&middot;','&middot;','<span style="font-size:60%">||</span>']
];


var pi = Math.PI;


var pi2 = pi / 2;


var offset;


var dy = 0;


var dx = 0;


function setWidth(width) {
	this.width = width;
	secln = minln = width / 2;
	hourln = width / 3;
}


function getTime(time) {
    var second = time.getSeconds();
    var minute = time.getMinutes();
    var hour = time.getHours();
    return [hour, minute, second];
}


function createClockNumbers() {
	var clockDiv = document.getElementById(CLOCK_DIV_ID);
	var innerHTML = '';
	for (var i = 1; i < 13; i++) {
		innerHTML += '<div id="cnum' + i + '" style="' + comstyle + 'width:' + CLOCK_NUMBER_WIDTH + ';';
		// Set <code>line-height</code> to <code>CLOCK_NUMBER_WIDTH</code>.
		// So <code>vertical-align:middle</code> will work
		innerHTML += 'height:' + CLOCK_NUMBER_WIDTH + ';line-height:' + CLOCK_NUMBER_WIDTH + ';'
		innerHTML += 'vertical-align:middle;text-align:center;';
		if (isEmpty(fontFamily) == false) {
			innerHTML += 'font-family:' + fontFamily + ';';
		}
		if (isEmpty(fontSize) == false) {
			innerHTML += 'font-size:' + fontSize + ';';
		}
		innerHTML += 'color:' + colnumbers + ';">' + clocknum[numstyle][i] + '<\/div>';
	}
	clockDiv.innerHTML += innerHTML;
}


function isEmpty(value) {
	return value == null || (value + "").replace(/^\s+|\s+$/, '') == '';
}


function displayClock() {
	for (var i = 1; i < 13; i++) {
		var element = document.getElementById("cnum" + i);
		if (isEmpty(offset)) {
			offset = [element.offsetWidth, element.offsetHeight];
		}
		var halfWidth = width / 2;
		element.style.top = dy + halfWidth * (1 + Math.sin(i * pi / 6 - pi2)) + "px";
		element.style.left = dx + halfWidth * (1 + Math.cos(i * pi / 6 - pi2)) + "px";
		element.style.visibility = "visible";
	}
}


function createWatchHands() {
	var datehour = document.getElementById(CLOCK_DIV_ID);
	var innerHTML = '';
	for (var i = 0; i < hourln; i++) {
		innerHTML += '<div id="chour' + i + '" style="' + comstyle + 'width:2px;height:2px;padding:0px;font-size:2px;background-color:' + colhours + ';"><\/div>';
	}
	for (var i = 0; i < minln; i++) {
		innerHTML += '<div id="cmin' + i + '" style="' + comstyle + 'width:2px;height:2px;padding:0px;font-size:2px;background-color:' + colminutes + ';"><\/div>';
	} 
	for (var i = 0; i < secln; i++) {
		innerHTML += '<div id="csec' + i + '" style="'+ comstyle + 'width:1px;height:1px;padding:0px;font-size:1px;background-color:' + colseconds + ';"><\/div>';
	}
	datehour.innerHTML += innerHTML;
}


function updateClock(time) {
	var theTime = getTime(time);
	var hour = theTime[0];
    if (hour > 11) {
        hour -= 12;
    }
	var aSecond = pi * theTime[2] / 30 - pi2;
	var aMinute = pi * theTime[1] / 30 - pi2;
	var aHour = pi * theTime[0] / 6 + pi * parseInt(theTime[1]) / 360 - pi2;
	var halfWidth = width / 2;
	var offsetHalfWidth = offset[0] / 2;
	var offsetHalfHeight = offset[1] / 2;
	for (var i = 0; i < secln; i++) {
		var element = document.getElementById("csec" + i);
		element.style.top = dy + halfWidth + offsetHalfHeight + i * Math.sin(aSecond) + "px";
		element.style.left = dx + halfWidth + offsetHalfWidth + i * Math.cos(aSecond) + "px";
		element.style.visibility = "visible";
	}
	for (var i = 0; i < minln; i++) {
		var element = document.getElementById("cmin" + i);
		element.style.top = dy + halfWidth + offsetHalfHeight + i * Math.sin(aMinute) + "px";
		element.style.left = dx + halfWidth + offsetHalfWidth + i * Math.cos(aMinute) + "px";
		element.style.visibility = "visible";
	}
	for (var i = 0; i < hourln; i++) {
		var element = document.getElementById("chour" + i);
		element.style.top = dy + halfWidth + offsetHalfHeight + i * Math.sin(aHour) + "px";
		element.style.left = dx + halfWidth + offsetHalfWidth + i * Math.cos(aHour) + "px";
		element.style.visibility = "visible";
	}
}


function setParentDimension() {
	var clockDiv = document.getElementById(CLOCK_DIV_ID);
	clockDiv.style.width = width + offset[0] + "px";
	clockDiv.style.height = width + offset[1] + "px";
}


function createClock() {
	offset = null;
	createClockNumbers();
	createWatchHands();
	// Sets <code>offset</code>.
	displayClock();
	setParentDimension();
}