@import "bourbon";

$green: #1ff042;

@include keyframes(cursor-blink) {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body{
  background-color: black;
}

.four-oh-four{
  position: relative;
  top: 0;
  left: 0;
  min-height: 100vh;
  min-width: 100vw;
  z-index: 2;
  background-color: black;
  transition: opacity 300ms ease-out;
  background-position: center center;
  background-repeat: no-repeat;
  .dJAX_internal{
    opacity: 0.0;
  }

  form, input{
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: black;
  }
}

.terminal{
  position: relative;
  padding: 4rem;

  .prompt{
    color: $green;
    display: block;
    font-family: 'AndaleMono', monospace;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    white-space: pre-wrap;
    text-shadow: 0 0 2px rgba($green,0.75);
    line-height: 1;
    margin-bottom: 0.75em;

    &:before {
      content: '> ';
      display: inline-block;
    }
  }

  .new-output{
    display: inline-block;
    &:after {
      display: inline-block;
      vertical-align: -0.15em;
      width: 0.75em;
      height: 1em;
      margin-left: 5px;
      background: $green;
      box-shadow: 1px 1px 1px rgba($green,0.65), -1px -1px 1px rgba($green,0.65), 1px -1px 1px rgba($green,0.65), -1px 1px 1px rgba($green,0.65);
      @include animation(cursor-blink 1.25s steps(1) infinite);
      content: '';
    }
  }
}

.kittens{
  p{
    letter-spacing: 0;
    opacity: 0;
    line-height: 1rem;
  }
}

.kitten-gif{
  margin: 20px;
  max-width: 300px;
}

.four-oh-four-form{
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
}

var inputReady = true;
var input = $('.404-input');
input.focus();
$('.container').on('click', function(e){
  input.focus();
});

input.on('keyup', function(e){
  $('.new-output').text(input.val());
  // console.log(inputReady);
});

$('.four-oh-four-form').on('submit', function(e){
  e.preventDefault();
  var val = $(this).children($('.404-input')).val().toLowerCase();
  var href;

   if (val === 'kittens'){
    showKittens();
  }else {
    resetForm();
  }
});

function resetForm(withKittens){
  var message = "Sorry that command is not recognized."
  var input = $('.404-input');

  if (withKittens){
    $('.kittens').removeClass('kittens');
    message = "Huzzzzzah Kittehs!"
  }

  $('.new-output').removeClass('new-output');
  input.val('');
  $('.terminal').append('<p class="prompt">' + message + '</p><p class="prompt output new-output"></p>');

  $('.new-output').velocity(
    'scroll'
  ), {duration: 100}
}

  function showKittens(){
    $('.terminal').append("<div class='kittens'>"+
                 "<p class='prompt'>                               ,----,         ,----,                                          ,---,</p>" +
                 "<p class='prompt'>       ,--.                ,/   .`|       ,/   .`|                     ,--.              ,`--.' |</p>" +
                 "<p class='prompt'>   ,--/  /|    ,---,     ,`   .'  :     ,`   .'  :     ,---,.        ,--.'|   .--.--.    |   :  :</p>" +
                 "<p class='prompt'>,---,': / ' ,`--.' |   ;    ;     /   ;    ;     /   ,'  .' |    ,--,:  : |  /  /    '.  '   '  ;</p>" +
                 "<p class='prompt'>:   : '/ /  |   :  : .'___,/    ,'  .'___,/    ,'  ,---.'   | ,`--.'`|  ' : |  :  /`. /  |   |  |</p>" +
                 "<p class='prompt'>|   '   ,   :   |  ' |    :     |   |    :     |   |   |   .' |   :  :  | | ;  |  |--`   '   :  ;</p>" +
                 "<p class='prompt'>'   |  /    |   :  | ;    |.';  ;   ;    |.';  ;   :   :  |-, :   |   \\ | : |  :  ;_     |   |  '</p>" +
                 "<p class='prompt'>|   ;  ;    '   '  ; `----'  |  |   `----'  |  |   :   |  ;/| |   : '  '; |  \\  \\    `.  '   :  |</p>" +
                 "<p class='prompt'>:   '   \\   |   |  |     '   :  ;       '   :  ;   |   :   .' '   ' ;.    ;   `----.   \\ ;   |  ;</p>" +
                 "<p class='prompt'>'   : |.  \\ |   |  '     '   :  |       '   :  |   '   :  ;/| '   : |  ; .'  /  /`--'  /  `--..`;  </p>" +
                 "<p class='prompt'>|   | '_\\.' '   :  |     ;   |.'        ;   |.'    |   |    \\ |   | '`--'   '--'.     /  .--,_   </p>" +
                 "<p class='prompt'>'   : |     ;   |.'      '---'          '---'      |   :   .' '   : |         `--'---'   |    |`.  </p>" +
                 "<p class='prompt'>;   |,'     '---'                                  |   | ,'   ;   |.'                    `-- -`, ; </p>" +
                 "<p class='prompt'>'---'                                              `----'     '---'                        '---`'</p>" +
                 "<p class='prompt'>                                                              </p></div>");

    
    var lines = $('.kittens p');
    $.each(lines, function(index, line){
      setTimeout(function(){
        $(line).css({
          "opacity": 1
        });

        textEffect($(line))
      }, index * 100);
    });

    $('.new-output').velocity(
      'scroll'
    ), {duration: 100}

    setTimeout(function(){
      var gif;

      $.get('http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=kittens', function(result){
        gif = result.data.image_url;
        $('.terminal').append('<img class="kitten-gif" src="' + gif + '"">');
        resetForm(true);
      });
    }, (lines.length * 100) + 1000);
  }

  function textEffect(line){
    var alpha = [';', '.', ',', ':', ';', '~', '`'];
    var animationSpeed = 10;
    var index = 0;
    var string = line.text();
    var splitString = string.split("");
    var copyString = splitString.slice(0);

    var emptyString = copyString.map(function(el){
        return [alpha[Math.floor(Math.random() * (alpha.length))], index++];
    })

    emptyString = shuffle(emptyString);

    $.each(copyString, function(i, el){
        var newChar = emptyString[i];
        toUnderscore(copyString, line, newChar);

        setTimeout(function(){
          fromUnderscore(copyString, splitString, newChar, line);
        },i * animationSpeed);
      })
  }

  function toUnderscore(copyString, line, newChar){
    copyString[newChar[1]] = newChar[0];
    line.text(copyString.join(''));
  }

  function fromUnderscore(copyString, splitString, newChar, line){
    copyString[newChar[1]] = splitString[newChar[1]];
    line.text(copyString.join(""));
  }


  function shuffle(o){
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
  };