module.exports = function (container) {
  var width = container.clientWidth
  var height = container.clientHeight
  var style

  var label = document.createElement('div')
  label.id = 'energy'
  style = label.style
  style.left = width * 0.15
  style.width = width * 0.45
  style.top = width * 0.075
  style.height = width * 0.05
  style.border = 'solid 5px rgb(150,150,150)'
  style.position = 'absolute'
  container.appendChild(label)

  var bar = document.createElement('div')
  style = bar.style
  style.left = 0
  style.width = width * 0.45
  style.height = '100%'
  style.top = 0
  style.background = 'rgb(50,50,50)'
  style.position = 'absolute'
  label.appendChild(bar)

  var fill = document.createElement('div')
  style = fill.style
  style.left = 0
  style.width = width * 0.45
  style.height = '100%'
  style.top = 0
  style.background = 'rgb(150,150,150)'
  style.transition = 'width 0.2s'
  style.position = 'absolute'
  label.appendChild(fill)

  function blink() {
    var count = 0
    var blinker = setInterval(function () {
      bar.style.background = 'rgb(150,150,150)'
      setTimeout(function () {
        bar.style.background = 'rgb(50,50,50)'
      }, 100)
      count++
      if (count === 4) clearInterval(blinker)
    }, 200)
  }

  function flash() {
    fill.style.background = 'rgb(240,240,240)'
  }

  function unflash() {
    fill.style.background = 'rgb(150,150,150)'
  }

  function update (state) {
    fill.style.width = width * 0.45 * Math.max(state.current,0) / state.total
  }

  function hide () {
    label.style.opacity = 0
  }

  function show () {
    label.style.opacity = 1
  }

  return {
    update: update,
    hide: hide,
    show: show,
    blink: blink,
    flash: flash,
    unflash: unflash
  }
}

@@ -1,8 +1,35 @@
+var _ = require('lodash')%0A%0A
 module.e
@@ -354,54 +354,8 @@
 .05%0A
-  style.border = 'solid 5px rgb(150,150,150)'%0A
   st
@@ -511,32 +511,36 @@
 h = width * 0.45
+ - 2
 %0A  style.height 
@@ -535,33 +535,33 @@
 tyle.height = '1
-0
+2
 0%25'%0A  style.top 
@@ -587,31 +587,31 @@
 und = 'rgb(5
-0,50,50
+5,55,55
 )'%0A  style.p
@@ -758,32 +758,36 @@
 h = width * 0.45
+ - 2
 %0A  style.height 
@@ -790,17 +790,17 @@
 ght = '1
-0
+2
 0%25'%0A  st
@@ -942,16 +942,465 @@
 (fill)%0A%0A
+  var n = 8%0A%0A  _.range(n).forEach( function (i) %7B%0A    var notch = document.createElement('div')%0A    style = notch.style%0A    style.left = i * ((width * 0.45) / n)%0A    style.top = 0%0A    style.height = label.offsetHeight%0A    style.width = (width * 0.45) / n - 12%0A    style.position = 'absolute'%0A    style.border = 'solid 3px rgb(150,150,150)'%0A    style.outline = 'solid 6px rgb(55,55,55)'%0A    style.zIndex = '1000'%0A    energy.appendChild(notch)%0A%0A  %7D)%0A%0A
   functi
@@ -1594,15 +1594,15 @@
 gb(5
-0,50,50
+5,55,55
 )'%0A 
@@ -1882,32 +1882,41 @@
 l.style.width = 
+Math.max(
 width * 0.45 * M
@@ -1953,16 +1953,24 @@
 te.total
+ - 2, 0)
 %0A  %7D%0A%0A  

Add notches to energy bar