@import compass

//  Google Web Font: Source Sans Pro

*
  box-sizing: border-box
  text-rendering: optimizeLegibility

body
  font-family: "Source Sans Pro", sans-serif
  text-align: center
  padding: 1em
  color: #ccc
  font-weight: 200

div
  width: 190px
  text-align: center
  margin: 0 auto
  position: absolute
  top: 50%
  left: 50%
  margin-left: -95px
  margin-top: -65px

h3
  font-weight: 100
  font-size: 28px
  color: #ccc
  line-height: 36px
  margin-bottom: 1em

form
  width: auto
  &.success input
    color: #8CE62C
    border-color: #8CE62C

input
  font-family: "Source Sans Pro", sans-serif
  font-weight: 200
  width: 40px
  height: 50px
  border: 1px solid #CCCCCC
  display: block
  float: left
  margin-right: 10px
  outline: 0
  font-size: 28px
  color: #ccc
  line-height: 40px
  text-align: center
  cursor: pointer
  &:last-child
    margin-right: 0
  &:hover
    color: #9B9B9B
  &:focus
    color: #0091FF
    border-color: #0091FF

.hint
  display: none

ul
  padding-top: 2em
  clear: both
  li
    list-style-type: none

strong
  color: #777
  font-weight: 200

#   JQuery
#   JQuery AutoTab Magic

# Form Parent
form = $(".code_input")

# Form Inputs
formInputs = $(form).children "input"

# Valid Code
validCode = "1234"

#JQuery AutoTab to automatically move forward when maximum length of input is reached.
$(formInputs).autotab_magic()

# Returns the code which is inputted into each of the form inputs
inputCode = ->
  code = [] # Blank array (probably a better way to do this
  $(formInputs).each -> # Selects each form input object
    code.push $(this).val() # Pushes each form input value to the [code] array

  code.join "" # Returns the code array in string form (joined)


# Checks the code which is returned from inputCode()
validateCode = ->
  c = inputCode() # Runs inputCode() to have a code string to validate
  if c is validCode # Checks code against validCode variable
    $(form).removeClass("error").addClass "success" # Adds success class and removes error class from form
    $(".hint").fadeOut() # Hides the hint
    false # End of successful code input
  else if c.length is 4 # Checks if code is 4 digits long
    $(".hint").fadeIn() # Shows the hint
  else
    $(form).addClass("error").removeClass "success" # Adds error class, removes success class from form
    false # End of unsuccessful input


# Clears out all the inputs and sets the focus to the first one
clearInputs = ->
  $(formInputs).first().focus() # Set focus to first input
  $(formInputs).val "" # Sets input values to null
  $(form).removeClass() # Remove classes from form


# Initiates code validation if the key pressed isn't backspace or delete
$(formInputs).keyup -> # On keyup in any of the form inputs
  if event.keyCode is 8 or event.keyCode is 46 # Maps to the backspace and delete key
    clearInputs() # Clears the form
    false # End of backspace event
  else
    validateCode() # Run validation function


# Clears form when clicking any of the form inputs
$(formInputs).click ->
  clearInputs() # Clears form