/*
(c) 2011 McKenna Consultants.

Licenced under the MIT:
http://www.opensource.org/licenses/mit-license.php

**************************************/

/* Usage

<div id="theClock" class="clock"></div>
<script type="text/javascript">
	$(window).ready(function ()
	{
		$('#theClock').MclClock(
				{
					pathToImages:'<%=SkinUrl%>/images'
				})
	});
</script>

// styles
.clockWrapper
{
	width:75px;
	position:relative;
	float:left;
	margin-left:15px;
	margin-top:8px;
}
 
.clock 
{
	width: 75px;
	position: relative;
	top: 0px;
	left: 0px;
}

.clock .sec,
.clock .min,
.clock .hour,
.clock .face
{
	display: block;
	position: absolute;
}

.clock .rotatingWrapper
{
	position: absolute;
	width: 75px;
	height: 75px;
	top: 0px;
	left: 0px;
}

*/
(function ($)
{

	$.fn.mclClock = $.fn.MclClock = function (variables)
	{
		var defaults =
		{
			pathToImages: '',
			dateFormat: 'ddd d MMM yyyy',
			dateText: '',
			container: null,
			hourHand: null,
			minuteHand: null,
			secondHand: null,
			dateContainer: null,
			face: null,
			angleSec: 0,
			angleMin: 0,
			angleHour: 0
		};

		var options = $.extend(defaults, variables);

		//////////////// INIT //////////////// 
		init = function (clockWrapper)
		{
			options.container = $(clockWrapper);
			options.container.wrap("<div class='clockWrapper'></div>");

			// add containing elmements
			options.container.append("<img id='" + clockWrapper.id + "clock' class='face' src='" + options.pathToImages + "/clock.png' />");
			options.container.append("<div class='rotatingWrapper'><img id='" + clockWrapper.id + "hour' class='hour' src='" + options.pathToImages + "/hour.png' /></div>");
			options.container.append("<div class='rotatingWrapper'><img id='" + clockWrapper.id + "min' class='min' src='" + options.pathToImages + "/minute.png' /></div>");
			options.container.append("<div class='rotatingWrapper'><img id='" + clockWrapper.id + "sec' class='sec' src='" + options.pathToImages + "/second.png' /></div>");

			options.container.parent().append("<div id='" + clockWrapper.id + "date' class='date'></div>");

			options.secondHand = $('#' + clockWrapper.id + 'sec');
			options.minuteHand = $('#' + clockWrapper.id + 'min');
			options.hourHand = $('#' + clockWrapper.id + 'hour');
			options.dateContainer = $('#' + clockWrapper.id + 'date');


			$.set(clockWrapper);
			$.doTick(clockWrapper);

			setInterval(function () { $.doTick(clockWrapper) }, 1000);
		}

		$.doTick = function (clockWrapper)
		{
			var d = new Date;

			options.angleSec = (d.getSeconds() * 6);

			options.angleMin = (d.getMinutes() * 6);

			options.angleHour = ((d.getHours() * 5 + d.getMinutes() / 12) * 6);

			options.dateText = d.format(options.dateFormat);

			$.set(clockWrapper);
		}

		$.set = function (clockWrapper)
		{
			options.secondHand = $('#' + clockWrapper.id + 'sec');
			options.minuteHand = $('#' + clockWrapper.id + 'min');
			options.hourHand = $('#' + clockWrapper.id + 'hour');
			options.dateContainer = $('#' + clockWrapper.id + 'date');

			options.secondHand.rotate(options.angleSec);
			options.minuteHand.rotate(options.angleMin);
			options.hourHand.rotate(options.angleHour);

			options.dateContainer.text(options.dateText);
		}

		this.each(function () { init(this); });
	};

})(jQuery);