// ----------------
// Variables
// ----------------
$bg: #81a687;
$blue: #3acaff;
$pink: #ff005a;
$pink-light: #ff4184;
$outer-height: 160px;
$outer-padding: 23px;
$btn-height: 114px;
$timing-function: ease;
$timing-speed: .5s;


* {
  box-sizing: border-box;
}

button {
  outline: none;
  cursor: pointer;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(to right, #566a39 0%,#75986f 100%);
}

.pen-wrapper {
  display: flex;
  width: 100%;
  height: calc(100vh - 85px);
  justify-content: center;
  align-items: center;
}
.pen-title {
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  padding: 20px 0;

  a {
    text-decoration: underline;
    font-size: .75em;
    cursor: pointer;
  }
}



// ----------------
// Button Wrapper
// ----------------
.button-wrapper {
  position: relative;
  display: inline-block;
  padding: $outer-padding;
  min-width: $outer-height;
  min-height: $outer-height;
  border-radius: $btn-height;
  box-shadow: 0px -2px 2px rgba(255, 255, 255, 0.22), 
              inset 0px -2px 6px rgba(0, 0, 0, 0.2);
  
  &.is_fixed_size {
    width: $outer-height;
    height: $outer-height;
  }
}


// ----------------
// Button 
// ----------------
.button {
  position: relative;
  height: $btn-height;
  min-width: $btn-height;
  padding: 0 34px;
  border-radius: ($btn-height / 2);
  box-shadow: inset 0px -1px 6px 0px rgba(255, 255, 255, 0.73);
  background: $pink;
  background: linear-gradient($pink-light 0%, $pink 100%, $pink 100%);
  border: none;
  font-size: 45px;
  color: white;
  line-height: $btn-height;
  font-weight: 700;

}


// ----------------
// Button text
// ----------------
.button__text {
  position: relative;
  display: block;
  height: $btn-height;
  white-space: nowrap;
  opacity: 1;
}

.button__text--download {
  width: 270px;
  transition: opacity $timing-speed $timing-function,
              width $timing-speed $timing-function;
  
  &.is_animated {
    overflow: hidden;
    width: 0px;
    opacity: 0;
  }
}

.button__text--progress {
  margin-right: -35px;
  margin-left: -35px;
  width: $btn-height;
  font-size: 40px;
  opacity: 0;
  transition: opacity $timing-speed $timing-function;
  
  sub {
    font-size: .5em;
    font-weight: normal;
  }

  &.is_animated {
    opacity: 1;
  }
}

.button__text--complete {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  border-radius: 50%;
  height: $btn-height;
  width: $btn-height;
  box-shadow: inset 0px -1px 6px 0px rgba(255, 255, 255, 0.73);
  background: $blue;
  transform: scale(1.5);
  transition: transform $timing-speed $timing-function;
  
  &.is_animated {
    transform: scale(1);
  }
}


.button__icon--cloud-download,
.button__icon--checkmark {
  position: relative;
  top: 7px;
}


// ----------------
// Pie loader
// ----------------
.pie-loader {
  position: absolute;
  top: 0; 
  left: 0;
  z-index: -1;
  width: $outer-height;
  height: $outer-height;
  opacity: 1;
  transition: opacity .1s $timing-function;
  
  svg {
    width: 100%;
    height: 100%;
  }
  circle {
    fill: $blue;
    stroke: $blue;
    stroke-width: ($outer-height / 2);
    stroke-dasharray: 0 252;
    transition: all .1s linear;
  }
  
  &.is_hidden {
    opacity: 0;
  }
}

;(function($){
  
  var btnStartTxt = '<span class="button__text button__text--download">Download <svg class="icon button__icon--cloud-download"><use xlink:href="#icon-cloud-download"></use></svg></span>';
  var btnProgressTxt = '<span class="button__text button__text--progress">0<sub>%</sub></span>';
  var btnEndTxt = '<span class="button__text button__text--complete"><svg class="icon button__icon--checkmark"><use xlink:href="#icon-checkmark"></use></svg></span>';

  var isActive = false;
  
  var stageStep = function( $el, delay, returnFunction ) {
    var delay = ( typeof delay !== 'undifined' ) ? delay : 0;
    setTimeout(function(){
      $el.addClass('is_animated');
    },10);
    if (typeof returnFunction === 'function') {
      setTimeout(function(){ 
        returnFunction();
      }, delay);
    }
  };

  var calcDownload = function(current) {
    // you can use this to add in your logic for calculating the progress of the download.
    // current == the current download percentage
    // return the current percentage of the download
    return current + (Math.floor(Math.random() * (2 - 0 + 1) + 0));
  };

  var initCounter = function($el, returnFunction) {
    var wrapper = $el.parent('div');
    var timerInterval = (1000 / 33);
    var counter = 0;
    var circle = (252 / 100);
    
    var timer = setInterval(function(){
      counter = calcDownload(counter);
      $('.button__text--progress', wrapper).html(counter+'<sub>%</sub>');
      $('.pie-loader circle', wrapper).css('stroke-dasharray', (counter * circle) + ' 252');
      if (counter === 100 || counter > 100 ) {
        clearTimeout(timer);
        $('.pie-loader', wrapper).addClass('is_hidden');
        returnFunction();
      }
    }, timerInterval);
  };


  function clickHandler() {
    if (isActive) {return;}

    isActive = true;
    var btn = $(this);

    stageStep( btn.find('.button__text--download'), 500, function(){
      btn.html(btnProgressTxt);
      btn.parent('div').addClass('is_fixed_size');
      stageStep( btn.find('.button__text--progress'), 500, function(){
        initCounter(btn, function(){
          btn.append(btnEndTxt);
          stageStep( btn.find('.button__text--complete'));
          btn.find('.button__text--progress').remove();
        });
      });
    });
  };

  function reset() {
    isActive = false;
    $('.button').html( btnStartTxt );
    $('.pie-loader').removeClass('is_hidden')
      .find('circle').removeAttr('style')
      .parents('.button-wrapper').removeClass('is_fixed_size');
  }

  $('.reset').on('click', reset);
  $('.button').on('click', clickHandler);

}(jQuery));