$form      = $('#credit-card-form');
$card      = $form.find('#credit-card');
$btn       = $form.find('#cc-submit-btn');
$loader    = $form.find('.credit-card__loader');
$firstNum  = $form.find('#first-number');
$lastNum   = $form.find('#last-number');
$firstExp  = $form.find('#first-exp');
$lastExp   = $('#last-exp');
$logo      = $form.find('#card-logo');
$cardNum   = $form.find('.credit-card__number');
$cardMonth = $form.find('.credit-card__month');
$submitBtn = $form.find('#cc-submit-btn');
$cvv       = $form.find('.credit-card__cvv');
$cardWrap  = $form.find('.credit-card__wrap');
$cardFront = $form.find('.card-front');
$firstName = $form.find('.credit-card__first');

var clickCount = 0;
var formHeight = $form.outerHeight();
var btnHeight  = $btn.outerHeight();
var diff       = (formHeight / 2) - (btnHeight / 2);

var tl = new TimelineMax();

var showCheck = function() {
  tl.set('#checkmark', {autoAlpha: 1})
    .fromTo('#circle', 0.6, {drawSVG: '0%'}, {drawSVG: '100%', ease: Power3.easeInOut})
    .fromTo('#check1', 0.3, {drawSVG: '0%'}, {drawSVG: '100%', ease: Power3.easeInOut}, '-=0.1')
    .fromTo('#check2', 0.3, {drawSVG: '0%'}, {drawSVG: '100%', ease: Power3.easeInOut}, '-=0.2');
};

var hideForm = function() {
  TweenMax.to($btn, 0.3, {scale: 0.3, autoAlpha: 0, ease: Back.easeInOut, onComplete: showCheck});
};

function submitCard() {
  TweenMax.to($card, 0.5, {y: -20, autoAlpha: 0, ease: Back.easeInOut});
  TweenMax.to($btn, 1, {y: diff * -1, delay: 0.1, ease: Back.easeInOut});
  $btn.find('#inner-text').text('Processing...');
  TweenMax.to($loader, 1.5, {width: '100%', ease: Power0.easeNone, onComplete: hideForm});
}

// Fade in up
TweenMax.fromTo($card, 0.5, {y: 20, autoAlpha: 0}, {y: 0, autoAlpha: 1, delay: 0.5});
TweenMax.fromTo($btn, 0.5, {y: 20, autoAlpha: 0}, {y: 0, autoAlpha: 1, delay: 0.6});

$firstNum.focus();

// Only allow numbers in number fields
$('.credit-card__number, .credit-card__month, .credit-card__year, .credit-card__cvv').keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && e.ctrlKey === true) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});

// Change cc logo
$firstNum.keyup(function(){
  var visa = /^4/g;
  var amex = /^3/g;
  var mc = /^5/g;
  var discover = /^6/g;
  if (visa.test($(this).val())) {
    $logo.attr({
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/268015/visa.png',
      alt: 'visa'
    });
  } else if (amex.test($(this).val())) {
    $logo.attr({
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/268015/amex.png',
      alt: 'amex'
    });
  } else if (mc.test($(this).val())) {
    $logo.attr({
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/268015/mc.png',
      alt: 'mastercard'
    });
  } else if (discover.test($(this).val())) {
    $logo.attr({
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/268015/discover.png',
      alt: 'discover'
    });
  }
});

// Go to next cc number
$cardNum.keyup(function(){
  if ($(this).val().length === 4) {
    $(this).next().focus();
  }
});
// Go to first exp number
$lastNum.keyup(function(){
  if ($(this).val().length === 4) {
    $firstExp.focus();
  }
});
// Go to next exp number
$cardMonth.keyup(function(){
  if ($(this).val().length === 2) {
    $(this).next().focus();
  }
});
// Go to first name
$lastExp.keyup(function(){
  if ($(this).val().length === 2) {
    $firstName.focus();
  }
});

$submitBtn.click(function(e){
  e.preventDefault();
  
  // Ripple effect
  if ($(this).find(".ink").length === 0) {
    $(this).prepend("<span class='ink'></span>");
  }

  ink = $(this).find(".ink");
  ink.removeClass("animate");

  if (!ink.height() && !ink.width()) {
    d = Math.max($(this).outerWidth(), $(this).outerHeight());
    ink.css({height: d, width: d});
  }

  x = e.pageX - $(this).offset().left - ink.width()/2;
  y = e.pageY - $(this).offset().top - ink.height()/2;

  ink.css({top: y+'px', left: x+'px'}).addClass("animate");
  
  // Functionality
  if (clickCount === 0) {
    // validate front
    $cvv.focus().attr('tabindex', '0');
    $cardFront.attr('tabindex', '-1');
    $cardWrap.addClass('flipped');
    clickCount++;
  } else if (clickCount === 1) {
    // validate back
    $cvv.blur().attr('tabindex', '-1');
    $cardFront.attr('tabindex', '0');
    $cardWrap.removeClass('flipped');
    $(this).find('#inner-text').text('Submit');
    $(this).css('background-color', '#37cc89');
    clickCount++;
  } else if (clickCount === 2) {
    submitCard();
  }
});