Knob - Timer Countdown

by bizamajig

HTML

<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<input type="text" id="fero" class="" value="51000" data-width="80" data-thickness="0.2" />
<input type="text" id="fero-time" class="" value="51000" data-width="180" data-thickness="0.2" />
<div id="fero3">ouha</div>
<input type="text" id="main1" class="knob1" value="0" data-width="120" data-thickness="0.4" />
<input type="text" id="main2" class="knob1" value="60000" data-width="120" data-thickness="0.4" data-fgColor="green" />
<input type="text" id="main3" class="knob1" value="80000" data-width="120" data-thickness="0.4" data-fgColor="red" />

JavaScript

jQuery(document).ready(function ($) {
      function pad(num, size) {
          return ('000000000' + num).substr(-size);
      }

      function hmsToSecondsOnly(str) {
          var p = str.split(':'),
              s = 0,
              m = 1;

          while (p.length > 0) {
              s += m * parseInt(p.pop(), 10);
              m *= 60;
          }
            console.log(s);
          return s;
      }

      var docElem = document.getElementById('fero');
      var docElem2 = document.getElementById('fero-time');
      var docElem3 = document.getElementById('fero3');

      var max1 = 45 * 60 * 1000;
      $('.knob1').knob({
          'min': 0,
              'max': max1,
              'step': 15 * 1000,
              'readOnly': false,
              'linecap': 'round',
              'displayInput': true,
              'angleOffset': -125,
              'angleArc': 250,
      });
      /*
      $('#inp1-min').trigger('configure', {
          'format': function (v) {
              docInp1min.value = v;
              updateData1('min');
              return v;
          }
      });
      $('#inp1-std').trigger('configure', {
          'format': function (v) {
              docInp1std.value = v;
              updateData1('std');
              return v;
          }
      });
      $('#inp1-max').trigger('configure', {
          'format': function (v) {
              docInp1max.value = v;
              updateData1('max');
              return v;
          }
      });
      */

      $('#main1').trigger('configure', {
          'parse': function (v) {
              //should return back value parsed from string - in clock we do time parsing to seconds and multiply by 1000
              return (hmsToSecondsOnly(v + '') + 0) * 1000;
          },
              'format': function (v) {
              if (v == 0) {
                  var text1 = 'OFF';
                  docElem.value = v;
                  docElem2.value = text1;
                  docElem3.innerHTML...