Break webview into sane files

Webview/index.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var digits = [];
+
+function getEpoch() {
+  return Date.now().toString().slice(0,-3);
+}
+
+function createDigit() {
+  var digit = document.createElement('digit');
+  digit.innerHTML = '\
+  <flap-top>          <n></n>   </flap-top>\
+  <flap-top-flip>     <n></n>   </flap-top-flip>\
+  <flap-bottom>       <n></n>   </flap-bottom>\
+  <flap-bottom-flip>  <n></n>   </flap-bottom-flip>';
+  return digit;
+}
+
+function flipDigitTo(digit, currentVal, updatedVal) {
+  var topFlapNum        = digit.querySelector('flap-top > n'),
+      topFlapFlip       = digit.querySelector('flap-top-flip'),
+      topFlapFlipNum    = topFlapFlip.querySelector('n'),
+      bottomFlapNum     = digit.querySelector('flap-bottom > n'),
+      bottomFlapFlip    = digit.querySelector('flap-bottom-flip'),
+      bottomFlapFlipNum = bottomFlapFlip.querySelector('n');
+
+  topFlapNum.innerHTML = updatedVal;
+  bottomFlapNum.innerHTML = currentVal;
+
+  topFlapFlipNum.innerHTML = currentVal;
+  topFlapFlip.style.display = 'block';
+
+  setTimeout(function() {
+    topFlapFlip.style.display = 'none';
+  }, 300);
+
+  setTimeout(function() {
+    bottomFlapFlipNum.innerHTML = updatedVal;
+    bottomFlapFlip.style.display = 'block';
+  }, 300);
+
+  setTimeout(function() {
+    bottomFlapNum.innerHTML = updatedVal;
+    bottomFlapFlip.style.display = 'none';
+  }, 450);
+
+  digit.setAttribute('current-val', updatedVal);
+}
+
+function updateClock() {
+  var epoch = getEpoch(),
+      staggerDelay,
+      currentVal,
+      updatedVal,
+      i;
+
+  for (i = 0; i < epoch.length; i+=1) {
+    if(i === epoch.length-1) {
+      staggerDelay = 0;
+    } else {
+      staggerDelay = Math.random() * 400;
+    }
+    currentVal = digits[i].getAttribute('current-val');
+    updatedVal = epoch[i];
+    if(currentVal !== updatedVal) {
+      setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
+    }
+  }
+}
+
+function setupClock() {
+  var epoch = getEpoch(),
+      staggerDelay,
+      digit,
+      i;
+
+  for (i = 0; i < epoch.length; i+=1) {
+    digit = createDigit();
+    staggerDelay = Math.random() * 400;
+    document.body.appendChild(digit);
+    setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
+  }
+  digits = document.querySelectorAll('digit');
+}
+
+setupClock();
+setInterval(updateClock, 1000);