NAME = Analog Clock

CAN_EDIT_STYLE = 1
CAN_EDIT_BACKGROUND_IMAGE = [$DEFINITION]/background.png

CAN_EDIT_IMAGE_1 = [$DEFINITION]/dial.png
CAN_EDIT_IMAGE_2 = [$DEFINITION]/hourHand.png
CAN_EDIT_IMAGE_3 = [$DEFINITION]/minuteHand.png
CAN_EDIT_IMAGE_4 = [$DEFINITION]/secondHand.png

BEGIN_BODY_ONLOAD

	<div id="[$DEF_name]Div" style="display: block;
	[$STYLE_background]
	[$STYLE_background-color]
	[$STYLE_height]
	[$STYLE_width]
	[$STYLE_border]
	[$STYLE_position_element]
	[$STYLE_transform]
	min-height: 10px;
	overflow: hidden;
	">

		<div id="[$DEF_name]Div" style="display: block;
		[$STYLE_position_content]
		[$STYLE_reflection]
		">

			<div style="display: block;
			position: absolute; 
			z-index: 4;
			width: 100%;
			height: 100%;
			">
				<img id="[$DEF_name]SecondHand" src="[$DEFINITION]/secondHand.png[$IMGVERSION]" style="
				width: 100%;
				height: 100%;
				">
			</div>

			<div style="display: block;
			position: absolute; 
			z-index: 3;
			width: 100%;
			height: 100%;
			">
				<img id="[$DEF_name]MinuteHand" src="[$DEFINITION]/minuteHand.png[$IMGVERSION]" style="
				width: 100%;
				height: 100%;
				">
			</div>

			<div style="display: block;
			position: absolute; 
			z-index: 2;
			width: 100%;
			height: 100%;
			">
				<img id="[$DEF_name]HourHand" src="[$DEFINITION]/hourHand.png[$IMGVERSION]" style="
				width: 100%;
				height: 100%;
				">
			</div>

			<div style="display: block;
			position: absolute; 
			z-index: 1;
			width: 100%;
			height: 100%;
			">
				<img src="[$DEFINITION]/dial.png[$IMGVERSION]" style="
				width: 100%;
				height: 100%;
				">
			</div>

		</div>
		
	</div>

END_BODY_ONLOAD

BEGIN_ONLOAD

	[$DEF_name]Load();
	
END_ONLOAD

BEGIN_DEFINITION
	
	var [$DEF_name]IntervalID 	= 0;
	var [$DEF_name]Interval 	= 1000 * [$DEF_interval];
	
	function [$DEF_name]Load()
	{
		var CurrentTimestamp 		= new Date();
		var CurrentHours 			= CurrentTimestamp.getHours();
		var CurrentMinutes 			= CurrentTimestamp.getMinutes();
		var CurrentSeconds 			= CurrentTimestamp.getSeconds();
		
		delete CurrentTimestamp;
		
		if (CurrentHours > 12) CurrentHours -= 12;
		
		ha = 90 + (CurrentHours * 30) +  CurrentMinutes * 0.5;
		hd = 0;
		hs = 1.0;

		ma = 90 + CurrentMinutes * 6;
		md = 0;
		ms = 1.0;
		
		{
			iv = [$DEF_interval];
			
			if ((iv == 5)
				||(iv == 10)
				||(iv == 15)
				||(iv == 20)
			)
			CurrentSeconds = Math.floor( CurrentSeconds / iv ) * iv;
		}
		
		sa = 90 + CurrentSeconds * 6;
		sd = 0;
		ss = 1.0;
		
		[$DEF_name]SecondHand.style.webkitTransform 	= "rotate(" + sa + "deg) skew(" + sd + "deg) scale(" + ss + ")";
		[$DEF_name]MinuteHand.style.webkitTransform		= "rotate(" + ma + "deg) skew(" + md + "deg) scale(" + ms + ")";
		[$DEF_name]HourHand.style.webkitTransform 		= "rotate(" + ha + "deg) skew(" + hd + "deg) scale(" + hs + ")";
		
		if ([$DEF_name]IntervalID)
		{
			clearInterval( [$DEF_name]IntervalID );
			[$DEF_name]IntervalID = 0;
		}
		
		if ([$DEF_name]Interval)
			[$DEF_name]IntervalID = setInterval([$DEF_name]Load, [$DEF_name]Interval);
	}

END_DEFINITION

BEGIN_DEF
	
	DEF_name = 
	DEF_interval = 30
	
END_DEF

BEGIN_STYLE

	STYLE_background = none;
	STYLE_width = 150px;
	STYLE_height = 150px;
	STYLE_background-color = rgba(127, 127, 127, 1.0);
	STYLE_transform = none;
	STYLE_border = none;
	STYLE_position_element = absolute; top: 0px; left: 0px;
	STYLE_position_content = 0px 0px;
	STYLE_reflection = none;

END_STYLE
