<!--
///////////////////////////////////////////////////////////////////////
//     This VML Clock was designed by Erik Arvidsson for WebFX       //
//                                                                   //
//     For more info and examples see: http://webfx.eae.net          //
//     or send mail to http://webfx.eae.net/contact.html#erik        //
//                                                                   //
//     Feel free to use this code as long as this disclaimer is      //
//     intact.                                                       //
///////////////////////////////////////////////////////////////////////
-->

<public:component tagName="clock">

<public:defaults viewLinkContent="true" viewInheritStyle="false"/>

<public:attach event="oncontentready"		onevent="initVMLClock()"/>
<public:attach event="onresize"				onevent="resizeObjects()"/>
<public:attach event="onpropertychange"		onevent="propertyChanged()"/>

<public:property name="secondsPointerColor"	value="red"/>
<public:property name="minutesPointerColor"	value="black"/>
<public:property name="hoursPointerColor"	value="black"/>
<public:property name="plateColor"			value="white"/>
<public:property name="plateStrokeColor"	value="black"/>
<public:property name="tickColor"			value="black"/>

<public:property name="showQuarterTicks"	value="false"/>
<public:property name="showFiveMinuteTicks"	value="false"/>
<public:property name="showMinuteTicks"		value="false"/>

<public:property name="timezoneOffset"/>

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>

v\:* {
	behavior:	url(#default#VML);
}

body {
	overflow:	hidden;
	background:	transparent;
}
	
</style>
<script>


function updatePointers() {
	var now = new Date();
	var s = now.getUTCSeconds();
	var m = now.getUTCMinutes() - element.timezoneOffset % 60;
	var h = now.getUTCHours() - Math.floor(element.timezoneOffset / 60);
	
	secondsPointer.style.rotation = s * 6;
	minutesPointer.style.rotation = m * 6 + s / 10;
	hoursPointer.style.rotation = h * 30  + m / 2;
}

function initVMLClock() {
	if (element.timezoneOffset == "" || element.timezoneOffset == null)
		element.timezoneOffset = new Date().getTimezoneOffset();
	
	createTicks();
	
	resizeObjects();
	updateColors();
	updatePointers();
	
	
	window.setInterval(updatePointers, 1000);
}

function resizeObjects() {
	var size = Math.min(element.offsetWidth, element.clientHeight);
	clock.style.pixelWidth = size - 2*(size * 0.045);
	clock.style.pixelHeight = size - 2*(size * 0.045);
	clock.style.left = size * 0.04 + (document.body.clientWidth - size) / 2;
	clock.style.top = size * 0.04 + (document.body.clientHeight - size) / 2;
	
	clock.childNodes.item(0).childNodes.item(0).weight = size * 0.04;

	secondsPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.01;
	minutesPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.02;
	hoursPointer.childNodes.item(0).childNodes.item(0).weight = size * 0.04;
		
	var ticks = document.getElementById("ticks-container").childNodes;
	var showQuarterTicks = size > 32 && element.showQuarterTicks != "false";
	var showFiveMinuteTicks = size > 32 && element.showFiveMinuteTicks != "false";
	var showMinuteTicks = size > 100 && element.showMinuteTicks != "false";
	
	for (var i = 0; i < ticks.length; i++) {
		if (ticks[i].className == "quarter-tick") {
			ticks[i].style.display = showQuarterTicks ? "" : "none";
			ticks[i].firstChild.weight = size * 0.005;
		}
		else if (ticks[i].className == "five-minute-tick") {
			ticks[i].style.display = showFiveMinuteTicks ? "" : "none";
			ticks[i].firstChild.weight = size * 0.0025;
		}
		else {
			ticks[i].style.display = showMinuteTicks ? "" : "none";
			ticks[i].firstChild.weight = size * 0.0025;
		}
	}
	
}

function propertyChanged() {
	var pName = event.propertyName;
	
	switch (pName) {
		case "secondsPointerColor":
		case "minutesPointerColor":
		case "hoursPointerColor":
		case "plateColor":
		case "plateStrokeColor":
		case "tickColor":
			updateColors();
			break;
		
		case "showQuarterTicks":
		case "showFiveMinuteTicks":
		case "showMinuteTicks":
			resizeObjects();	
			break;
	}
}

function updateColors() {
	plate.setAttribute("fillcolor", plateColor);
	plateStroke.setAttribute("color", plateStrokeColor);
	secondsStroke.setAttribute("color", secondsPointerColor);
	minutesStroke.setAttribute("color", minutesPointerColor);
	hoursStroke.setAttribute("color", hoursPointerColor);

	var ticks = document.getElementById("ticks-container").childNodes;
	for (var i = 0; i < ticks.length; i++)
		ticks[i].setAttribute(tickColor);
}

function createTicks() {
	var ticksContainer = document.getElementById("ticks-container");
	for (var i = 0; i < 60; i++) {
		ticksContainer.appendChild(createTick(i));
	}
}

function createTick(min) {
	var line = document.createElement("v:line");
	var stroke = document.createElement("v:stroke");
	stroke.setAttribute("endcap", "round");
	stroke.color = element.tickColor;
	line.appendChild(stroke);
		
	var strokeLength;
	if (min % 15 == 0) {
		line.className = "quarter-tick";
		strokeLength = 50;
	}
	else if (min % 5 == 0) {
		line.className = "five-minute-tick";
		strokeLength = 30;
	}
	else {
		line.className = "minute-tick";
		strokeLength = 10;
	}
	
	var v = min / 60 * 2 * Math.PI - Math.PI / 2;
	var x1 = Math.round(500 + 450 * Math.cos(v));
	var y1 = Math.round(500 + 450 * Math.sin(v));
	var x2 = Math.round(500 + (450 - strokeLength) * Math.cos(v));
	var y2 = Math.round(500 + (450 - strokeLength) * Math.sin(v));
	
	line.setAttribute("from", x1 + "," + y1);
	line.setAttribute("to", x2 + ","  + y2);
	
	//alert(line.outerHTML)
	
	return line;
}

</script>


</head>
<body>

<v:group id="clock" coordsize="1000 1000" style="position: absolute; width: 150px; height: 150px;">
	
	<v:oval id="plate" style="width: 100%; height: 100%" fillcolor="white">
		<v:stroke id="plateStroke" weight="10px" color="black"/>
	</v:oval>		

	<v:group style="width: 100%; height: 100%" id="ticks-container"/>

	<v:group id="secondsPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
		<v:line from="500,500" to="500,50">
			<v:stroke id="secondsStroke" weight="2px" endcap="round" color="red"/>
		</v:line>
	</v:group>

	<v:group id="minutesPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
		<v:line from="500,500" to="500,80">
			<v:stroke id="minutesStroke" weight="4px" endcap="round" color="black"/>
		</v:line>
	</v:group>

	<v:group id="hoursPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
		<v:line from="500,500" to="500,180">
			<v:stroke id="hoursStroke" weight="7px" endcap="round" color="black"/>
		</v:line>
	</v:group>
	
	

<!--	
	<v:group style="width: 100%; height: 100%">
		<v:line class="quarter-tick" from="50,5" to="50,10">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="quarter-tick" from="50,95" to="50,90">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="quarter-tick" from="5,50" to="10,50">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="quarter-tick" from="95,50" to="90,50" strokeweight="7px">
			<v:stroke endcap="round" color="black"/>
		</v:line>
		
		<v:line class="five-min-tick" from="50,5" to="50,10">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="50,95" to="50,90">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="5,50" to="10,50">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="95,50" to="90,50" strokeweight="7px">
			<v:stroke endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="50,5" to="50,10">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="50,95" to="50,90">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="5,50" to="10,50">
			<v:stroke weight="7px" endcap="round" color="black"/>
		</v:line>
		<v:line class="five-min-tick" from="95,50" to="90,50" strokeweight="7px">
			<v:stroke endcap="round" color="black"/>
		</v:line>
	</v:group>
-->

</v:group>

</body>
</html>

</public:component>