///////////////////////////////////////////////////////////
// Avoid PHP code here. So we can use this very intelligent
// script outside of Joomla! framework with a minimum of
// effort.

/** The id of clock 'div'. */
var CLOCK_DIV_ID = "clock";

/** The clock number width (in <i>em</i>). */
var CLOCK_NUMBER_WIDTH = "1.7em";

///////////////////////////////////////////////////////////
// The following parameters are user specific.

/** Font family used by the clock. */
var fontFamily = "verdana, helvetica, arial, sans-serif";

/** Font size used by the clock. */
var fontSize = "10px";

/** Colour of clock numbers. */
var colnumbers = "#000000";

/** Colour of hour watch hand. */
var colhours = "#000000";

/** Colour of minute watch hand. */
var colminutes = "#000000";

/** Colour of second watch hand. */
var colseconds = "#000000";

/** The clock width. In the current implementation it equals the height. */
var width = 80;

/**
 * The numbers style chosen for this clock.
 * This is an index in <code>clocknum</code> array object.
 */
var numstyle = 0;

//
///////////////////////////////////////////////////////////

/**
 * Common or default clock style.
 * <p>
 * Do not forget to close this with a semicolon ';'.
 * </p>
 */
var comstyle = "position:absolute;top:0px;left:0px;visibility:hidden;";

/** Length of second hand. */
var secln = width / 2;

/** Length of minute hand. */
var minln = width / 2;

/**
 * Length of hour hand.
 * <p>
 * Just a bit smaller than second resp. minute hand.
 * </p>
 */
var hourln = width / 3;

/** The clock numbers style. '&middot' stands for 'middle dot'. */
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>']
];

/** Convenience variable which contains <code>MATH.PI</code>. */
var pi = Math.PI;

/** Convenience variable which contains <code>MATH.PI / 2</code>. */
var pi2 = pi / 2;

/**
 * The offset is computed on-the-fly. This a clock number box width divided by 2.
 * <p>
 * As the clock number box width is given in <i>em</i>, we let the navigator to make
 * the conversion in <i>px</i>.
 * </p>
 */
var offset;

/** The clock y-coordinate offset. By default, this value is zero. */
var dy = 0;

/** The clock x-coordinate offset. By default, this value is zero. */
var dx = 0;

/**
 * Sets current width.
 * By doing so, udpates <code>minln</code>, <code>hourln</code> and <code>secln</code>
 * as well.
 */
function setWidth(width) {
	this.width = width;
	secln = minln = width / 2;
	hourln = width / 3;
}

/**
 * Returns a suitable time for given <code>Date</code>. Returned array has following
 * format: <code>[hour, minute, second]</code>.
 */
function getTime(time) {
    var second = time.getSeconds();
    var minute = time.getMinutes();
    var hour = time.getHours();
    return [hour, minute, second];
}

/**
 * Creates 12 'div' elements inside the element 'datehour' for the clock numbers.
 * <p>
 * Created elements have an index of z-index of 1000 (the bigger the number is, the more ahead the element lies).
 * </p>
 */
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;
}

/** Whether the given value is empty. */
function isEmpty(value) {
	return value == null || (value + "").replace(/^\s+|\s+$/, '') == '';
}

/**
 * Displays the clock numbers by positioning their layer and making it visible.
 */
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";
	}
}

/**
 * Create watch hands (minute, hour and second).
 */
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;
}

/**
 * Updates watch hands.
 */
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";
	}
}

/** Sets dimension (width and height) of <code>CLOCK_DIV_ID</code>. */
function setParentDimension() {
	var clockDiv = document.getElementById(CLOCK_DIV_ID);
	clockDiv.style.width = width + offset[0] + "px";
	clockDiv.style.height = width + offset[1] + "px";
}

/**
 * This is the main method. Creates the clock but does not update it.
 * <p>
 * To do so, you have to call <code>updateClock()</code>.
 * </p>
 */
function createClock() {
	offset = null;
	createClockNumbers();
	createWatchHands();
	// Sets <code>offset</code>.
	displayClock();
	setParentDimension();
}