<div class="modal">
  <h1 class="modal-heading">Sign in the box below.</h1>
  <div class="signature-panel"></div>
  <div class="controls-panel">
      <a href="" class="btn submit-button btn--disabled">Submit</a>
      <a href="#nogo" class="btn btn--secondary clear-button">Clear</a>
      <a href="" class="link cancel-link">Cancel</a>
      <a href="" class="link skip-link">Skip for now</a>
  </div>
</div>

$color-scheme-1: #C7BE9C;
$color-scheme-2: #FAFAAB;
$color-scheme-3: #616125;
$color-scheme-4: #6E8ECE;
$color-scheme-5: #ABDAFA;
$white: #fff;
$black: #333;

* {
  box-sizing: border-box;
}

%clearfix:after {
  content: '';
  clear: both;
  display: table;
}
  
html {
  height: 100%;
}

body {
  background: linear-gradient(45deg, lighten($color-scheme-4, 2%), $white);
  font-family: 'Rubik';
  font-weight: 400;
  height: 100%;
}

.modal {
  background-color: $white;
  max-width: 50rem;
  min-height: 15rem;
  box-shadow: 1px 1px 7px #ccc;
  margin: 0 auto;
  opacity: 0;
  animation: drop-in 1s;
  animation-fill-mode: forwards;
}

.modal-heading {
  opacity: 0;
  animation: appear 0.5s ease-out;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  font-weight: 300;
  padding: 1rem;
  color: $color-scheme-4;
}

.signature-panel {
  background-color: lighten($color-scheme-4, 34%);
}

.controls-panel {
  @extend %clearfix;
  padding: 1rem;
}

.btn {
  animation: appear .2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.btn, .link {
  background-color: $color-scheme-5;
  color: $white;
  display: block;
  margin: 0 0.3rem;
  padding: 1rem 2rem;
  text-decoration: none;
  
  @media(min-width: 570px) {
    float: left;
  }
}

.btn--disabled {
  background-color: grey;
}


.btn:hover,
.btn:active {
  background-color: lighten($color-scheme-5, 5%);
}

.btn--secondary {
  background-color: $color-scheme-4;
}

.btn--secondary:hover,
.btn--secondary:active {
  background-color: lighten($color-scheme-4, 5%);
}

@for $i from 1 through 2 {
  .btn:nth-child(#{$i}) {
    animation-delay: calc(0.3 * #{$i}s);
  }
  
  .link:nth-child(#{$i}) {
    animation-delay: calc(0.3 * #{$i}s);
  }
}

.link {
  background-color: $white;
  color: $color-scheme-3;
  text-decoration: none;
}

.link:hover, 
.link:active {
  color: $color-scheme-4;
}

.controls-panel {
}

.skip-link {
  @media(min-width: 570px) {
    float: right;
  }
}

@keyframes drop-in {
  0% {
    transform: translateY(-1rem);
  }
  
  50% {
    transform: translateY(4rem);
  }
  
  100% {
    transform: translateY(3rem);
    opacity: 1;
  }
}

@keyframes appear {
  0% {
  }
  
  100% {
    opacity: 1;
  }
}

$(document).ready(function(){
  $('.signature-panel').jSignature();
  
  $('.clear-button').on('click', function(e) {
    e.preventDefault();
    $('.signature-panel').jSignature("reset");
  });
  
  $('.submit-button').on('click', function(e) {
    e.preventDefault();
    if(isValidSignature()) {
      $('.submit-button').removeClass('btn--disabled');
    } else {
      $('.submit-button').addClass('btn--disabled');
    }
  });
  
  $(".signature-panel").bind("change", function(event){
    if(isValidSignature()) {
      $('.submit-button').removeClass('btn--disabled');
    } else {
      $('.submit-button').addClass('btn--disabled');
    }
  });
  
  $('.cancel-link').on('click', function(e) {
    e.preventDefault();
  });
  
  $('.skip-link').on('click', function(e) {
    e.preventDefault();
  });
});

function isValidSignature() {
  var canvas = $('.signature-panel canvas')[0];
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var filledCount = 0;
    var totalCount = 0;
    for(var i = 0; i < imageData.data.length; i++) {
      if(imageData.data[i] > 0) {
        filledCount++;
      } 
      totalCount++;
    }
    var percentRequired = 0;
    if(window.innerWidth < 330) {
      percentRequired = 3;
    } else if (window.innerWidth > 330 && window.innerWidth < 400) {
      percentRequired = 2;
    } else {
      percentRequired = 0.95;
    }
    console.log(`total filled: ${filledCount / totalCount * 100} / ${percentRequired}`);
    return ((filledCount / totalCount) * 100) > percentRequired;
}