// this is some jquery to say when the document is ready, run whatever is
// inside this function
$(function() {

  // function to check whether the form is valid or not
  function isValid() {
    // removes the has-error class from anything that has it
    // basically, this removes all the error states from our form
    $('.has-error').removeClass('has-error')

    // the form starts off valid, but if anything is invalid, it becomes false
    var valid = true

    // saves the username input, label and text into variables
    var usernameInput = $("#username")
    var usernameLabel = $("#username-label")
    var username = usernameInput.val()

    // same as above
    var avatarUrlInput = $("#avatar_url")
    var avatarUrlLabel = $("#avatar_url-label")
    var avatarUrl = avatarUrlInput.val()

    // same as above
    var emailInput = $("#email")
    var emailLabel = $("#email-label")
    var email = emailInput.val()

    // same as above
    var passwordInput = $("#password")
    var passwordLabel = $("#password-label")
    var password = passwordInput.val()

    // checks if the username is null or blank
    if(username == null || username.length < 1) {
      // if username invalid, valid is false
      valid = false
      // add error class to input and label
      usernameInput.addClass('has-error')
      usernameLabel.addClass('has-error')
    }

    // same as above, but with avatarUrl
    if(avatarUrl == null || avatarUrl.length < 1) {
      valid = false
      avatarUrlInput.addClass('has-error')
      avatarUrlLabel.addClass('has-error')
    }

    // same as above, but with email
    if(email == null || email.length < 1) {
      valid = false
      emailInput.addClass('has-error')
      emailLabel.addClass('has-error')
    }

    // same as above, but with password
    if(password == null || password.length < 1) {
      valid = false
      passwordInput.addClass('has-error')
      passwordLabel.addClass('has-error')
    }

    // returns true if everything is valid, or false if one input isn't
    return valid
  }

  // attaches a click event to the clear button, that sets the text
  // of all our inputs to blank
  $("#clear-button").on("click", function(ev) {
    // prevent default button functionality that would submit
    ev.preventDefault()

    // removes all the errors
    $('.has-error').removeClass('has-error')

    // gets all inputs in the form and sets their values to blank
    $('input[type="text"], input[type="email"], input[type="password"]').val('')
  })

  // attaches a submit event to the form itself, so when it's submitted,
  // it will validate the form
  $("#signup-form").on("submit", function(ev) {
    // this requires some knowledge of submit events.
    //
    // so when a form submits, if the event returns true, the form will
    // be submitted and we'll POST to our server. if it returns false,
    // it won't send any data.

    // therefore, if our form is valid, we'll return true and send the data,
    // otherwise we won't.

    // NOTE: If someone disables JavaScript, the form will just submit :(
    return isValid()
  })
})