$(document).ready(function() {

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

  // Audio

  var audio = new Audio('//a.clyp.it/uwz5c5b5.mp3');

  mute.click(function() {
    if (audio.volume === 1) {
      audio.volume = 0;
      mute.html('<i class="fa fa-volume-off"></i>');
    }
    else {
      audio.volume = 1;
      mute.html('<i class="fa fa-volume-up"></i>');
    }
  });

  // Dial

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

  var change = function(v) {
    if (v >= 0) {
      if (v % 60 == 0 && lastValue % 60 == 59)
        multi++;
      if (v % 60 == 59 && lastValue % 60 == 0)
        if (multi > 0)
          multi--;
      text.html(v + (60 * (multi)));
      lastValue = 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 = startTime = 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();
          reset.html('<i class="fa fa-clock-o"></i>')
          text.html('Go!');
          return audio.play();
        }

        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() {
    if (reset.html().indexOf('clock') > -1) {
      audio.pause();
      audio.currentTime = 0;
      reset.html('<i class="fa fa-trash"></i>')
      dial
        .val(startTime % 60)
        .trigger('change');
      return text.html(startTime)
    }
    multi = 0;
    pause();
    dial
      .val(0)
      .trigger('change');
    text.html(0);
  });

});