https://www.above.com/js/coolclock.js?1790916611

1/*
2CoolClock by Simon Baird (simon dot baird at gmail dot com)
3Version 1.0.5 (07-Jul-2008)
4See http://simonbaird.com/coolclock/
5
6Copyright (c) Simon Baird 2006-2008
7
8Redistribution and use in source and binary forms, with or without modification,
9are permitted provided that the following conditions are met:
10
11Redistributions of source code must retain the above copyright notice, this
12list of conditions and the following disclaimer.
13
14Redistributions in binary form must reproduce the above copyright notice, this
15list of conditions and the following disclaimer in the documentation and/or other
16materials provided with the distribution.
17
18Neither the name of the Simon Baird nor the names of other contributors may be
19used to endorse or promote products derived from this software without specific
20prior written permission.
21
22THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
23EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
24OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
25SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
26INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
27TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
28BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
29CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
30ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
31DAMAGE.
32*/
33
34window.CoolClock = function(canvasId,displayRadius,skinId,showSecondHand,gmtOffset) {
35	return this.init(canvasId,displayRadius,skinId,showSecondHand,gmtOffset);
36}
37
38CoolClock.findAndCreateClocks = function() {

39	var canvases = document.getElementsByTagName("canvas");
40	for (var i=0;i<canvases.length;i++) {
41		var fields = canvases[i].className.split(" ")[0].split(":");
42		if (fields[0] == "CoolClock") {
43			new CoolClock(canvases[i].id,fields[2],fields[1],fields[3]!="noSeconds",fields[4]);
44		}
45	}
46}
47
48// borrowed from behaviour.js
49// actually doesn't work right unless it's at the end of html document
50// hence can't have a body onload
51// this is a bug. FIXME
52// maybe have a setTimeout hack??
53CoolClock.addLoadEvent = function(func){
54	var oldonload = window.onload;
55	if (typeof window.onload != 'function')
56		window.onload = func;
57	else
58		window.onload = function() {
59			oldonload();
60			func();
61		}
62}
63
64CoolClock.config = {
65	clockTracker: {},
66	tickDelay: 1000,
67	longTickDelay: 15000,
68	defaultRadius: 85,
69	renderRadius: 100,
70	defaultSkin: "swissRail",
71	skins:	{
72		// more skins in moreskins.js
73		// try making your own...
74
75		swissRail: {
76			outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 },
77			smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 },
78			largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 },
79			hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
80			minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
81			secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
82			secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
83		},
84		chunkySwiss: {
85			outerBorder: { lineWidth: 4, radius:97, color: "black", alpha: 1 },
86			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
87			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
88			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
89			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
90			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
91			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
92		},
93		chunkySwissOnBlack: {
94			outerBorder: { lineWidth: 4, radius:97, color: "white", alpha: 1 },
95			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
96			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
97			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
98			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
99			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
100			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
101		}
102
103	}
104};
105
106CoolClock.prototype = {
107	init: function(canvasId,displayRadius,skinId,showSecondHand,gmtOffset) {
108		this.canvasId = canvasId;
109		this.displayRadius = displayRadius || CoolClock.config.defaultRadius;
110		this.skinId = skinId || CoolClock.config.defaultSkin;
111		this.showSecondHand = typeof showSecondHand == "boolean" ? showSecondHand : true;
112		this.tickDelay = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay"];
113
114		this.canvas = document.getElementById(canvasId);
115
116		this.canvas.setAttribute("width",this.displayRadius*2);
117		this.canvas.setAttribute("height",this.displayRadius*2);
118
119		this.canvas.style.width = this.displayRadius*2 + "px";
120		this.canvas.style.height = this.displayRadius*2 + "px";
121
122		this.renderRadius = CoolClock.config.renderRadius; 
123
124		this.scale = this.displayRadius / this.renderRadius;
125		this.ctx = this.canvas.getContext("2d");
126		this.ctx.scale(this.scale,this.scale);
127
128		this.gmtOffset = gmtOffset != null ? parseFloat(gmtOffset) : gmtOffset;
129
130		CoolClock.config.clockTracker[canvasId] = this;
131		this.tick();
132		return this;
133	},
134
135	fullCircle: function(skin) {
136		this.fullCircleAt(this.renderRadius,this.renderRadius,skin);
137	},
138
139	fullCircleAt: function(x,y,skin) {
140		with (this.ctx) {
141			save();
142			globalAlpha = skin.alpha;
143			lineWidth = skin.lineWidth;
144			beginPath();
145			if (document.all)
146				// excanvas doesn't scale line width so we will do it here
147				lineWidth = lineWidth * this.scale;
148			arc(x, y, skin.radius, 0, 2*Math.PI, false);
149			if (document.all)
150				// excanvas doesn't close the circle so let's color in the gap
151				arc(x, y, skin.radius, -0.1, 0.1, false);
152			if (skin.fillColor) {
153				fillStyle = skin.fillColor
154				fill();
155			}
156			else {
157				// XXX why not stroke and fill
158				strokeStyle = skin.color;
159				stroke();
160			}

161			restore();
162		}
163	},
164
165	radialLineAtAngle: function(angleFraction,skin) {
166		with (this.ctx) {
167			save();
168			translate(this.renderRadius,this.renderRadius);
169			rotate(Math.PI * (2 * angleFraction - 0.5));
170			globalAlpha = skin.alpha;
171			strokeStyle = skin.color;
172			lineWidth = skin.lineWidth;
173			if (document.all)
174				// excanvas doesn't scale line width so we will do it here
175				lineWidth = lineWidth * this.scale;
176			if (skin.radius) {
177				this.fullCircleAt(skin.startAt,0,skin)
178			}
179			else {
180				beginPath();
181				moveTo(skin.startAt,0)
182				lineTo(skin.endAt,0);
183				stroke();
184			}
185			restore();
186		}
187	},
188
189	render: function(hour,min,sec) {
190		var skin = CoolClock.config.skins[this.skinId];
191		this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2);
192
193		this.fullCircle(skin.outerBorder);
194
195		for (var i=0;i<60;i++)
196			this.radialLineAtAngle(i/60,skin[ i%5 ? "smallIndicator" : "largeIndicator"]);
197				
198		this.radialLineAtAngle((hour+min/60)/12,skin.hourHand);
199		this.radialLineAtAngle((min+sec/60)/60,skin.minuteHand);
200		if (this.showSecondHand) {
201			this.radialLineAtAngle(sec/60,skin.secondHand);
202			if (!document.all)
203				// decoration doesn't render right in IE so lets turn it off
204				this.radialLineAtAngle(sec/60,skin.secondDecoration);
205		}
206	},
207
208
209	nextTick: function() {
210		setTimeout("CoolClock.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay);
211	},
212
213	stillHere: function() {
214		return document.getElementById(this.canvasId) != null;
215	},
216
217	refreshDisplay: function() {
218		var now = new Date();
219		if (this.gmtOffset != null) {
220			// use GMT + gmtOffset
221			var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60));
222			this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds());
223		}
224		else {
225			// use local time
226			this.render(now.getHours(),now.getMinutes(),now.getSeconds());
227		}
228	},
229
230	tick: function() {
231		if (this.stillHere()) {
232			this.refreshDisplay()
233			this.nextTick();
234		}
235	}
236}
237
238CoolClock.addLoadEvent(CoolClock.findAndCreateClocks);
239