Add prototype, spectrum and controls

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="user-scalable=yes,initial-scale=1" />
     <style>
 * { color: #fff; }
-body { transition: all 0.8s; }
+html, body, body > div { margin: 0; height: 100%; }
 
 div { text-align: center; }
 
@@ -15,9 +15,30 @@ h1 {
   font-size: 4em;
 }
 h2 { font-family: courier; }
+
+.spectrum {
+  height: 50px;
+  background-color: #000;
+  overflow: hidden;
+}
+.spectrum > div {
+  width: 1px;
+  height: 100%;
+  display: inline-block;
+}
     </style>
     <script type="text/javascript">
-Date.prototype.toColor = function() {
+Date.today = function() {
+  now = new Date();
+  now.setHours(0);
+  now.setMinutes(0);
+  now.setSeconds(0);
+  now.setMilliseconds(0);
+
+  return now.getTime();
+};
+
+Date.prototype.toHexColor = function() {
   var hours, minutes, seconds;
 
   total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
@@ -26,29 +47,98 @@ Date.prototype.toColor = function() {
   return "#" + ("000000" + hex.toString(16)).substr(-6)
 };
 
-document.addEventListener("DOMContentLoaded", function() {
+Date.prototype.toRgbColor = function() {
-  var time = document.querySelector('time')
+  return "rgb(" + Math.round(this.getHours() * 255 / 24) + ", " + Math.round(this.getMinutes() * 255 / 60) + ", " + Math.round(this.getSeconds() * 255 / 60) + ")";
-  var h2 = document.querySelector('h2')
+};
 
-  function process() {
+Date.prototype.toHslColor = function() {
-    var d = new Date();
+  return "hsl(" + Math.round(this.getHours() * 360 / 24) + ", " + Math.round(this.getMinutes() + 20) + "%, " + Math.round(this.getSeconds() + 20) + "%)";
-    color = d.toColor();
-
-    time.textContent = d.toLocaleTimeString();
-    h2.textContent = color;
-
-    document.body.style.background = color;
 }
 
-  process();
+function WhatColorIsIt(mainDiv, toColor) {
-  setInterval(process, 1000);
+  this.mainDiv = mainDiv
+  this.toColor = toColor;
+  this.running = false;
+
+  this.mainDiv.style.transition = 'all 0.8s';
+
+  this.spectrumDiv = document.createElement('div');
+  this.spectrumDiv.className = 'spectrum';
+
+  this.controlsDiv = document.createElement('div');
+  this.controlsDiv.className = 'controls';
+  this.controlsDiv.style.cursor = 'pointer';
+  this.controlsDiv.textContent = '>';
+  this.controlsDiv.addEventListener('click', this.toggle.bind(this));
+
+  this.timeDiv = document.createElement('div');
+  this.timeDiv.className = 'time';
+  this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
+
+  this.mainDiv.appendChild(this.spectrumDiv);
+  this.mainDiv.appendChild(this.timeDiv);
+  this.mainDiv.appendChild(this.controlsDiv);
+
+  this.current();
+};
+
+WhatColorIsIt.prototype.spectrum = function(today) {
+  var tomorrow = today + 86400000;
+  var increment = (tomorrow - today) / this.spectrumDiv.offsetWidth;
+
+  for(var i = today; i < tomorrow; i += increment) {
+    color = document.createElement('div');
+    color.style.background = this.toColor(new Date(i));
+    color.dataset.timestamp = i;
+
+    color.addEventListener('mouseenter', function(e) {
+      this.process(new Date(parseInt(e.target.dataset.timestamp)))
+    }.bind(this));
+
+    this.spectrumDiv.appendChild(color);
+  }
+
+  this.spectrumDiv.addEventListener('mouseenter', this.stop.bind(this));
+  this.spectrumDiv.addEventListener('mouseleave', this.start.bind(this));
+};
+
+WhatColorIsIt.prototype.current = function() {
+  this.process(new Date());
+};
+
+WhatColorIsIt.prototype.process = function(d) {
+  color = this.toColor(d);
+
+  this.timeDiv.querySelector('time').textContent = d.toLocaleTimeString();
+  this.timeDiv.querySelector('h2').textContent = color;
+
+  this.mainDiv.style.background = color;
+}
+
+WhatColorIsIt.prototype.run = function() {
+  this.spectrum(Date.today());
+  this.start();
+};
+WhatColorIsIt.prototype.start = function() {
+  this.running = true;
+  this.controlsDiv.textContent = '||';
+  this.current();
+  this.interval = setInterval(this.current.bind(this), 1000);
+};
+WhatColorIsIt.prototype.stop = function() {
+  this.running = false;
+  this.controlsDiv.textContent = '>';
+  clearInterval(this.interval);
+};
+WhatColorIsIt.prototype.toggle = function() { this.running ? this.stop() : this.start() }
+
+document.addEventListener("DOMContentLoaded", function() {
+  new WhatColorIsIt(document.getElementById('whatcolorisit'),
+      function(d) { return d.toHslColor(); }).run();
 });
     </script>
   </head>
   <body>
-    <div>
+    <div id="whatcolorisit"></div>
-      <h1><time></time></h1>
-      <h2></h2>
-    </div>
   </body>
 </html>