$(function(){
  $('#person_name').focus();

  $('#person_name').blur(function() {
    $('.name_help').fadeOut(200);
  })
  $('#person_name').focus(function() {
    $('.name_help').fadeIn(200);
    $('#arrow').removeClass();
    $('#arrow').addClass("name_arrow");
  })

  $('#person_postcode').blur(function() {
    $('.postcode_help').fadeOut(200);
  })
  $('#person_postcode').focus(function() {
    $('.postcode_help').fadeIn(200);
    $('#arrow').removeClass();
    $('#arrow').addClass("postcode_arrow");
  })
  
  $('#person_email').blur(function() {
    $('.email_help').fadeOut(200);
  })
  $('#person_email').focus(function() {
    $('.email_help').fadeIn(200);
    $('#arrow').removeClass();
    $('#arrow').addClass("email_arrow");
  })
  
  init_password_field();
  
  $('#person_password_confirmation').closest('.form_row').hide();
  var typing_controls = '<div class="typing_controls">' +
                        '<a href="#" id="show_typing">show typing</a>' +
                        '<a href="#" id="hide_typing" style="display:none">Hide Typing</a>' +
                        '</div>'
  $('#person_password').after(typing_controls);
  $('#show_typing').click(function() {
    var val = $('#person_password').val();
    $('#person_password').remove()
    $('#person_password_label').after(
      '<input id="person_password" maxlength="40" name="person[password]" value="' + val + '" />'
    )
    $(this).hide();
    $('#hide_typing').show();
    init_password_field();
    return false;
  })
  $('#hide_typing').click(function() {
    var val = $('#person_password').val();
    $('#person_password').remove()
    $('#person_password_label').after(
      '<input id="person_password" maxlength="40" name="person[password]" type="password" value="' + val + '" />'
    )
    $(this).hide();
    $('#show_typing').show();
    init_password_field();
    return false;
  })
  $('form#new_person').submit(function(){
    $('#person_password_confirmation').val(
      $('#person_password').val()
    );
  })
});

function init_password_field() {
  $('#person_password').blur(function() {
    $('.password_help').fadeOut(200);
  })
  $('#person_password').focus(function() {
    $('.password_help').fadeIn(200);
    $('#arrow').removeClass();
    $('#arrow').addClass("password_arrow");
  })
}