/*
 * jQuery - Improved Contact Form Usability
 * Author: David Drabik
 * Email: djdrabik@gmail.com
 * Date created: 9/2/2011
 *
 * IMPORTANT: Do NOT rely on this script to send message with your contact form.
 * Some users don't have javascript enabled. Always make sure that you can send
 * a message without the use of javascript, then add javascript to make things
 * more appealing, animated, etc.
 *
 * This contact form will wait for the user to submit the form, then sends the
 * values of the fields with a .post().  It will disable the submit button to
 * prevent multiple form submissions and send the message without a page reload.
 */

$(document).ready(function() {

    /*
     * Change these fields to fit your contact form.
     */
    var errorClassName    = 'error';
    var contactFormName   = '#contact-form';
    var responseContainer = '#error-container';
    var loadingImg        = '/inc/img/icons/ajax-loader.gif';
    var errorMsg          = 'Sorry, your message could not be sent at this ' 
                                + 'time. Please try again later.';
    var fields            = new Array(
                                'name', 
                                'email', 
                                'phone', 
                                'zip',
                                'message',
                                'submissionCheck',
                                new Array(
                                    '#contactByEmail:checked', 
                                    '#contactByPhone:checked'));

    /* 
     * IMPORTANT: Don't edit anything below unless you know what you're doing!
     */

    function getVals(fields) {
        var vals = new Object;

        // loop through all fields with recursive function
        $(fields).each(function(i, v) {
            
            if(!$.isArray(v)) {// base
                vals[v] = $('#' + v).val();
                
            } else {// recursive function
                vals['array'] = getVals(v);
            }
        });
        
        return vals;
    }

    // show the message response
    function showResponse(msg) {
        $('img.loading').remove();
        
        $(responseContainer).css('display', 'block');
        $(responseContainer).html('<p class="response">' + msg + '</p>');
        
        if (msg.indexOf('Thank') != -1) { // message submitted
            $(contactFormName).slideUp();
        } else { // highlight field errors
            $(contactFormName + ' [type="submit"]').show();
            $(contactFormName + ' input,'
                + contactFormName + ' textarea').each(function() {
                if (msg.indexOf(this.name) != -1) {
                    $(this).addClass(errorClassName);
                    $('label[for="' 
                        + this.name + '"]').addClass(errorClassName);
                }
            });
        }
    }

    // removes the error class from the field and the label
    $(contactFormName + ' input, '
        + contactFormName + ' textarea').focus(function() {
            $(this).removeClass(errorClassName);
            $('label[for="' + this.name + '"]').removeClass(errorClassName);
    });
    
    // run the script when the contact form is submitted
    $(contactFormName).submit(function(event) {
        
        // prevent contact form processor page from loading
        event.preventDefault();
        
        var submit = contactFormName + ' [type="submit"]';

        // hide the submit button after clicking and insert a loading gif
        $(submit).hide();
        $(submit).after('<img class="loading" src="'+ loadingImg + '" />');
        
        // store the url where the contact form processor is located
        var action = $(this).attr('action');

        // sends variables through post to the processor
        $.post(action, getVals(fields), function(msg) {
            showResponse(msg);
        });
    })
})