$(document).ready(function() {

  var dial = $('.dial');
  var startPauseBtn = $('.start-pause');
  var reset = $('.reset');
  var multi = 0;
  var flipCounter = 0;
  var text
    , timer
    , lastTime
    , running;

  dial.knob({
    'max': 59
  , 'stopper': false
  , 'fgColor': '#000'
  , 'change': function(v) {
      change(v);
    }
  });

  var change = function(v) {
    if (v >= 0) {
      if (v % 60 == 0 && lastTime % 60 == 59)
        multi++;
      if (v % 60 == 59 && lastTime % 60 == 0)
        if (multi > 0)
          multi--;
      text.html(v + (60 * (multi)));
      lastTime = v;
      dial.trigger('change');
    }
  }

  setTimeout(function() {
    text = $('<span class="text">0</span>')
      .attr('style', dial.attr('style'))
      .insertAfter('.dial')
      .css({
        'color': '#000'
      , 'margin-top': '70px'
      , 'cursor': 'pointer'
      });

    text.click(startPause);

    dial.hide();
  },0);

  var pause = function() {
      running = false;
      startPauseBtn.html('<i class="fa fa-play"></i>');
      clearInterval(timer);
  };

  var startPause = function () {
    var time = parseInt(text.html());
    if (!running && time > 0) {
      running = true;
      startPauseBtn.html('<i class="fa fa-pause"></i>');
      timer = setInterval(function() {
        dial
          .val(parseInt(dial.val())-1)
          .trigger('change');
        text.html(parseInt(dial.val()) + (60 * (multi)));

        if (text.html() === '0') {
          pause();
          return text.html('Go!');
        }

        if (dial.val() === '0' && multi > 0) {
          flipCounter++;
          if (flipCounter === 2) {
            dial.val((60 * multi) - 1).trigger('change');;
            text.html((60 * multi) - 1);
            multi--;
            flipCounter = 0;
          }
        }
      }, 1000);
    }
    else pause();
  }

  startPauseBtn.click(startPause);

  reset.click(function() {
    multi = 0;
    pause();
    dial
      .val(0)
      .trigger('change');
    text.html(0);
  });

});