$(document).ready(function() {

    // cache references to the input elements into variables
    var passwordField = $('#l_password');
    var emailField = $('#l_email');
    // get the default value for the email address field
    var emailFieldDefault = emailField.val();

    // add a password placeholder field to the html
    passwordField.after('<input id="passwordPlaceholder" type="text" value="Password" tabindex="1" autocomplete="off" class="inpText"/>');
    var passwordPlaceholder = $('#passwordPlaceholder');

    // show the placeholder with the prompt text and hide the actual password field
    passwordPlaceholder.show();
    passwordField.hide();

    // when focus is placed on the placeholder hide the placeholder and show the actual password field
    passwordPlaceholder.focus(function() {
        passwordPlaceholder.hide();
        passwordField.show();
        passwordField.focus();
    });
    // and vice versa: hide the actual password field if no password has yet been entered
    passwordField.blur(function() {
        if(passwordField.val() == '') {
            passwordPlaceholder.show();
            passwordField.hide();
        }
    });

    // when focus goes to and moves away from the email field, reset it to blank or restore the default depending if a value is entered
    emailField.focus(function() {
        if(emailField.val() == emailFieldDefault) {
            emailField.val('');
        }
    });
    emailField.blur(function() {
        if(emailField.val() == '') {
            emailField.val(emailFieldDefault);
        }
    });

});