$(document).ready(function() {

    var maxNumberOfChars = 2000;


    $('#numberAuthorized').text(maxNumberOfChars);
    $('#numberRemaining').text(maxNumberOfChars);


    $("#FirstName,#LastName,#EmailAddress,#PhoneNumber").keyup(function() {
        validateControl($(this));
    });

    $("#btnSubmit,form").submit(function() {
        $("#FirstName,#LastName,#EmailAddress,#PhoneNumber").each(function() {
            validateControl($(this));
        });
        
        if ($(".InvalidInput").length > 0) {
            alert('Please fill out all required fields marked in red.');
            return false;
        }
        else
            return true;

    });

    //Display the total of the characters in the description field and keep the number under 2000
    $('#Description').keypress(function() {
        if ((maxNumberOfChars - parseInt($(this).val().length) < 0)) {
            var description = 'huh?';

            description = $(this).val();

            $(this).val(description.substr(0, maxNumberOfChars));
        }

        $('#numberRemaining').text(maxNumberOfChars - parseInt($(this).val().length));

    });

});

function validateControl(ctl) {
    var $IsValid = false;
    
    if ($(ctl).val() == '')
        $IsValid = false;
    else
        $IsValid = true;


    if ($(ctl).attr("id") === 'EmailAddress')
        $IsValid = validateEmail($(ctl).val());
    else if ($(ctl).attr("id") === 'PhoneNumber')
        $IsValid = validatePhone($(ctl).val());


    $(ctl).removeClass("ValidInput");
    $(ctl).removeClass("InvalidInput");

    if ($IsValid)
        $(ctl).addClass("ValidInput");
    else
        $(ctl).addClass("InvalidInput");
}
 
function validatePhone(value)
{
    var phoneRegEx = /^(\()?\d{3}(\))?(\-|\.|\s)?\d{3}(\-|\s|\.)?\d{4}$/;

    return (value.match(phoneRegEx) != null);
}

function validateEmail(value)
{
    var emailRegEx = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+\.[a-zA-Z]{2,4}$/;

    return (value.match(emailRegEx) != null);
}