(function() {
  var stripe = Stripe('pk_live_72zkzzEaFIcUb1dxfVDb0NBK');

  // Create an instance of Elements
  var elements = stripe.elements();
  var card = elements.create('card', {style: {}});
  var button = document.getElementById('donateButton')
  var emailInput = document.getElementById('stripeEmail');
  var emailErrors = document.getElementById('email-errors');

  var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  function isValidEmail(email) {
    return emailRegex.test(email);
  }
  function checkValidEmail() {
    var emailValue = emailInput.value;
    var isValid = isValidEmail(emailInput.value);
    if (isValid) {
      setLastClass(emailErrors, 'isHidden');
    } else {
      setLastClass(emailErrors, 'isVisible');
    }
    return isValid;
  }
  function setLastClass(node, cls) {
    var classes = node.className.split(' ');
    classes[classes.length - 1] = cls;
    node.className = classes.join(' ');
  }

  emailInput.addEventListener('blur', checkValidEmail, false);

  card.mount('#stripeElementsContainer');

  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');

    var classes = displayError.className.split(' ');
    if (event.error) {
      setLastClass(displayError, 'isVisible');
      displayError.textContent = event.error.message;
    } else {
      setLastClass(displayError, 'isHidden');
    }
  });

  var form = document.getElementById('registrationForm');
  form.addEventListener('submit', function(event) {
    // This only cancels user invoked submit events. Weird eh?
    event.preventDefault();
    doFormSubmit();
  });

  button.addEventListener('click', function(evt) {
    evt.preventDefault();// stop it jumping
    if (checkValidEmail()) {
      doFormSubmit();
    }
  }, true);

  var blockSubmit = false;

  function updateButtonLabel() {
    if (blockSubmit) {
      button.textContent = 'Processing...';
    } else {
      button.textContent = 'Donate Now';
    }
  }

  function doFormSubmit() {
    if (blockSubmit) {
      return;
    }
    blockSubmit = true;
    updateButtonLabel();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        blockSubmit = false;
        updateButtonLabel();
        // Inform the user if there was an error
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server
        stripeTokenHandler(result.token);
      }
    });
  }

  function stripeTokenHandler(token) {
    // Receive the Stripe token
    var zip = '';
    if (token.card && token.card.country === "US") {
      zip = token.card.address_zip;
    }

    [
      {value: 'id', input: 'stripeToken'},
      {value: 'type', input: 'stripeTokenType'}
    ].forEach(function(item) {
      document.getElementById(item.input).value = token[item.value];
    });

    if (token.card) {
      [
        {value: 'address_zip', input: 'stripeZip'},
        {value: 'exp_month', input: 'stripeExpMonth'},
        {value: 'exp_year', input: 'stripeExpYear'},
        {value: 'last4', input: 'stripeCardLast4'}
      ].forEach(function(item) {
        document.getElementById(item.input).value = token.card[item.value];
      });
    }
    document.getElementById('registrationForm').submit();
  }
})();

function showForm() {
  var node = document.getElementById('form_toggle');
  var classes = node.className.split(' ');
  classes[classes.length - 1] = 'form_shown';
  node.className = classes.join(' ');
  fbq('track', 'InitiateCheckout');
}