/* --------------------------------------------------------
 Toggle
-------------------------------------------------------- */
// Create "cl" (class) variable object
var cl = {

  // Create "add" function (http://youmightnotneedjquery.com/#add_class)
  add: function (el, c) {
    (el.classList && el.classList.add(c)) || (el.className += ' ' + c);
  },

  // Create "remove" function (http://youmightnotneedjquery.com/#remove_class)
  remove: function (el, c) {
    (el.classList && el.classList.remove(c)) || (el.className = el.className.replace(new RegExp('(^|\\b)' + c.split(' ').join('|') + '(\\b|$)', 'gi'), ' '));
  }

},

/* --------------------------------------------------------
 Tabs (Accordion)
-------------------------------------------------------- */
// Create "tabAccordion" function
tabAccordion = function (e, id) {

  // Create "p" (".tabs") variable
  var p = e.parentNode.parentNode.parentNode;

  // Remove ".tab--active" class from all elements with the ".tab" identifier
  Array.prototype.forEach.call(p.getElementsByClassName('tab'), function (el) {
    cl.remove(el, 'tab--active');
  });

  // Remove ".tab--content--active" class from all element with the ".tabs__content" identifier
  Array.prototype.forEach.call(p.getElementsByClassName('tabs__content'), function (el) {
    cl.remove(el, 'tabs__content--active');
  });

  // Add ".tab--active" and ".tab--content--active" to first/clicked elements
  Array.prototype.forEach.call(p.getElementsByClassName('tab--' + id), function (el) {
    cl.add(el, 'tab--active');
  });
  cl.add(p.getElementsByClassName('tabs__content--' + id)[0], 'tabs__content--active');

};


// Submit a form using AJAX
function submit_xhr_form(ev, form)
{
  // prevent the form from doing a standard post
  ev.preventDefault();
  if (form.dataset.status != 'sent') {
    // set the status of the form to submitted to prevent multiple submissions
    form.dataset.status = 'sent';
    var output = document.querySelector("#form_message_" + form.getAttribute('name'));
    // clear any current response messages and make sure it's hidden
    output.innerHTML = '';
    output.style.visibility = 'hidden';

    var r = new XMLHttpRequest();
    r.open("POST", form.getAttribute('action'), true);

    // catch the ajax response
    r.onload = function (event) {
      var post_response = JSON.parse(r.responseText);
      if (r.status == 200) {
        // the form was submitted successfully
        cl.add(output, 'form-message--success');
        cl.remove(output, 'form-message--error');

        // clear out the form contents
        form.innerHTML = '';

        if (form.hasAttribute('data-job-id')) {
          // for job referral forms load the share section once the form has been sucessfully submitted
          referral_form.load_share_section(form.getAttribute('data-job-id'));
        }
      } else {
        // there was an error submitting the form
        cl.add(output, 'form-message--error');
        cl.remove(output, 'form-message--success');

        if (post_response.hasOwnProperty('invalid_fields')) {
          for (var field of post_response.invalid_fields) {
            if (document.getElementById(field)) {
              cl.add(document.getElementById(field), 'input--validation-fail')
            }
          }
        }

        // reset the reCAPTCHA widget
        if (form.hasAttribute('data-recaptcha-widget-id')) {
          grecaptcha.reset(window[form.getAttribute('data-recaptcha-widget-id')]);
        }
      }

      // build up a list of messages to display
      var post_messages = '';
      for (var message of post_response.messages) {
        post_messages += `<p class="form-message__message">${message}</p>`;
      }
      output.innerHTML = post_messages;
      output.style.visibility = 'visible';
      output.style.display = 'block';
      // scroll to display the message
      output.scrollIntoView(false);

      form.dataset.status = 'ready';
    };

    // send the form data with AJAX
    r.send(new FormData(form));
  }
}

// check if the window size is greater than the size specified, if so - uncheck the tick box.
window.addEventListener('resize', function(){
  if (window.innerWidth > 767) {
    document.getElementById('show-nav').checked = false;
  }
}, false);