Namespaced timer, polished slider

src/app/main.coffee

 timebars = require './timebars.coffee'
 nesstarloader = require './nesstarloader.coffee'
 
-timeBarAnim = undefined
 window.nesstartimebars = {}
 
 window.nesstartimebars.main = (containerId, dataDesc) ->
@@ -20,16 +19,6 @@ window.nesstartimebars.main = (containerId, dataDesc) ->
   , dataDesc)
 
   window.nesstartimebars.toggleAnimation = (containerId) ->
-    if timeBarAnim?
-      clearInterval timeBarAnim
-      timeBarAnim = undefined
-      document.getElementById(containerId + "playBtn")
-        .innerHTML = "<i class='fa fa-play'></i>"
-    else
-      timeBarAnim = setInterval ->
-        timebars.nextFrame containerId
-      , timebars.speed()
-      document.getElementById(containerId + "playBtn")
-        .innerHTML = "<i class='fa fa-pause'></i>"
+    timebars.toggleAnim(containerId)
 
   undefined

src/style/timebars.scss

@@ -17,6 +17,7 @@
   .controls {
     display: table;
     border-spacing: 5px;
+    height: 45px;
 
     button {
       display: table-cell;
@@ -25,23 +26,26 @@
     .dragdealer {
       @include rounded();
       width: 100%;
+      font-size: 14px;
       display: table-cell;
       background: #e1e1e1;
       position: relative;
       .handle {
         @include rounded();
-        padding-left: 1em;
-        padding-right: 1em;
+        height: 100%;
+        width: 75px;
         background: #c00;
         color: white;
         font-weight: bold;
-        line-height: 30px;
         position: absolute;
         cursor: pointer;
+        text-align:center;
+        border:1px solid silver;
+        vertical-align:middle; //now we can center vertically like in a TD
+        line-height: 35px;
       }
     }
   }
-
   .axisLabels {
     path, line {
       display: none;
@@ -119,19 +123,16 @@
     }
   }
 
- .leftLabel {
-    font-size: 200%;
-    position: absolute;
-    left: 0.5em;
-    bottom: 2em;
-  }
-
- .rightLabel {
+ .inlineLabel {
     font-size: 200%;
     position: absolute;
-    right: 1em;
-    bottom: 2em;
-    text-align: right;
+    bottom: 70px;
+    &.left {
+      left: 20px;
+    }
+    &.right {
+      right: 20px;
+    }
   }
 
   .poster {