/* ------------------>
   No special class or images required - just change the <meter> value.
   For more information about meter - http://css-tricks.com/html5-meter-element/
<------------------ */

/* This is not needed - only for dynamic demostartion */
var demoValue = 0;
var demoMeter = document.getElementById('demoMeter');
var demoMeterFallback = document.getElementById('demoMeterFallback');
window.setInterval(function(){
  demoValue++;
  if (demoValue > 200) {
    demoValue = 0;
  }
  if (demoValue > 100) {
    demoMeter.value = 200 - demoValue;
    demoMeterFallback.style.width = 200 - demoValue + '%';
  } else {
    demoMeter.value = demoValue;
    demoMeterFallback.style.width = demoValue + '%';
  }
  
}, 25);

var inputButton = document.getElementById('inputMeter');
var meter = document.getElementById('meter');
var meterFallback = document.getElementById('meterFallback');
inputButton.addEventListener('change', function() {
  meter.value = this.value;
  meterFallback.style.width = this.value + '%';
}, false);