diff --git a/coolclock.js b/coolclock.js
index d87aab8..a753fcd 100644
--- a/coolclock.js
+++ b/coolclock.js
@@ -76,6 +76,11 @@ CoolClock.prototype = {
// Parse and store the options
this.canvasId = options.canvasId;
this.skinId = options.skinId || CoolClock.config.defaultSkin;
+ // If there is a corresponding nightskin, use that, otherwise just use the reagular skin.
+ if(CoolClock.config.skins[this.skinId+'Night'] != null) this.skinIdNight = this.skinId+'Night';
+ else this.skinId_night = this.skinId;
+ // Variable to keep track of the dayskin when the skin switches to Nightskin
+ this.skinIdDay = this.skinId;
this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius;
this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true;
this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null;
@@ -216,6 +221,12 @@ CoolClock.prototype = {
},
render: function(hour,min,sec) {
+ //Detect day/night and set appropriate skin.
+ if(hour >= 18 || hour < 6) {
+ this.skinId = this.skinIdNight;
+ } else {
+ this.skinId = this.skinIdDay;
+ }
// Get the skin
var skin = CoolClock.config.skins[this.skinId];
if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin];
diff --git a/demos/clock_bg.png b/demos/clock_bg.png
new file mode 100644
index 0000000..216b1fd
Binary files /dev/null and b/demos/clock_bg.png differ
diff --git a/demos/demo3.html b/demos/demo3.html
new file mode 100644
index 0000000..4e31f9f
--- /dev/null
+++ b/demos/demo3.html
@@ -0,0 +1,35 @@
+
+
+ Day/Night Coolclock
+
+
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+
+
+ | New York |
+ |
+ London |
+ |
+ New Delhi |
+ |
+ Tokyo |
+
+
+
+
+
+
diff --git a/moreskins.js b/moreskins.js
index e316181..7cb36b6 100644
--- a/moreskins.js
+++ b/moreskins.js
@@ -208,5 +208,25 @@ CoolClock.config.skins = {
minuteHand: { lineWidth: 2, startAt: -20, endAt: 80, color: "#7c8c03", alpha: .9 },
secondHand: { lineWidth: 2, startAt: 70, endAt: 94, color: "#d93d04", alpha: .85 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 3, fillColor: "red", color: "black", alpha: .7 }
+ },
+
+ Knight: {
+ outerBorder: { lineWidth: 99, radius: 50, color: "white", alpha: 0.4 },
+ smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 0 },
+ largeIndicator: { lineWidth: 8, startAt: 80, endAt: 92, color: "black", alpha: 1 },
+ hourHand: { lineWidth: 12, startAt: -15, endAt: 50, color: "black", alpha: 1 },
+ minuteHand: { lineWidth: 10, startAt: -15, endAt: 75, color: "black", alpha: 1 },
+ secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+ secondDecoration: { lineWidth: 2, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 0 }
+ },
+
+ KnightNight: {
+ outerBorder: { lineWidth: 99, radius: 50, color: "black", alpha: 0.6 },
+ smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "white", alpha: 0 },
+ largeIndicator: { lineWidth: 8, startAt: 80, endAt: 92, color: "white", alpha: 1 },
+ hourHand: { lineWidth: 12, startAt: -15, endAt: 50, color: "white", alpha: 1 },
+ minuteHand: { lineWidth: 10, startAt: -15, endAt: 75, color: "white", alpha: 1 },
+ secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+ secondDecoration: { lineWidth: 2, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 0 }
}
};