/* Variable declarations */
var examplePhone = 'ex: 3805551212 OR username',
    examplePass  = 'Your password goes here',
    exampleColor = '#999999',
    liveColor    = '#000000';

/* Function declarations */

$(document).ready(function() {
    /* Object initializations */
    $('#username').val(examplePhone).css('color', exampleColor);
    $('#password').val(examplePass).css('color', exampleColor);

    $.validator.addMethod('validatePasswordEntry', function(value, element) {
        return (value != '' && value != examplePass);
    }, 'You must enter a password');
    $('#login-form').validate({
       rules: {
           username: {
               required: true
           },
           password: {
               validatePasswordEntry: true
           }
       }
    });

    /* Event handlers */
    // Display example phone number in phone textfield
    $('#username').focus(function() {
        if($(this).val() == examplePhone) {
            $(this).val('').css('color', liveColor);
        }
    });

    $('#username').blur(function() {
        if($(this).val().length < 1) {
            $(this).val(examplePhone).css('color', exampleColor);
        }
    });

    $('#password').focus(function() {
        if($(this).val() == examplePass) {
            $(this).val('').css('color', liveColor);
        }
    });

    $('#password').blur(function() {
        if($(this).val().length < 1) {
            $(this).val(examplePass).css('color', exampleColor);
        }
    });
});