$(document).ready(function() {

    var options = {
        target: '#message-notification',
        beforeSubmit:   showRequest,
        success:        showResponse,
        data:           {ajax: 'true' }
    };



    $("#contact-form").submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });


    $("#contact-form, #commentform").validate( {
        rules: {
            author: {
                required: true,
                minlength: 2
            },
            name: {
                required: true,
                minlength: 2
            },
            message: "required",
            comment: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            author: "Please enter your name",
            name: "Please enter your name",
            message: "Let us know what you think",
            comment: "Let us know what you think",
            email: {
                required: "Your email address is required",
                email: "Enter a valid email address"
            }
        },
        errorPlacement: function(error, element) {
            error.prependTo( element.parent("label").parent("p") );
        },
        errorClass: "invalid",
        focusInvalid: false,
        wrapper: "div"
    });

    $('#confirmation-box a').live('click', function() {
        $("#contact-form input").each(function() {
            $(this).removeClass('success');
        });
        $('#confirmation-box').remove();
        $("#contact-form").fadeIn('slow');

    });

});

// pre-submit callback
function showRequest(formData, jqForm, options) {
    if($("#contact-form").validate().form()) {
        $("#contact-form").before('<div id="message-notification">Processing, please wait a moment...<img src="/img/ajax-loader.gif" /></div>');
        $("#contact-form").hide();
        $('#message-notification, #commentform').fadeIn();
        return true;
    }
    return false;
}

function showResponse(responseText, statusText, xhr, $form)  {
    $('#message-notification').remove();
    $("#contact-form").before('<div id="confirmation-box">Thank you for getting in touch. We will respond within 24 hours.<a>Would you like to send another message?</a></div>');
    $('#confirmation-box').fadeIn();
    $("#contact-form").resetForm();
}





(function ($) {
    $.fn.cross = function () {
        return this.each(function (i) {
            // cache the copy of jQuery(this) - the start image
            var $$ = $(this);

            // get the target from the backgroundImage + regexp
            var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
            $$.wrap('<span style="position: relative;"></span>')
            // change selector to parent - i.e. newly created span
            .parent()
            // prepend a new image inside the span
            .prepend('<img>')
            // change the selector to the newly created image
            .find(':first-child')
            // set the image to the target
            .attr('src', target);

            // the CSS styling of the start image needs to be handled
            // differently for different browsers
            if ($.browser.msie || $.browser.mozilla) {
                $$.css({
                    'position' : 'absolute',
                    'left' : 0,
                    'background' : '',
                    'top' : this.offsetTop
                });
            } else if ($.browser.opera && $.browser.version < 9.5) {
                // Browser sniffing is bad - however opera < 9.5 has a render bug
                // so this is required to get around it we can't apply the 'top' : 0
                // separately because Mozilla strips the style set originally somehow...
                $$.css({
                    'position' : 'absolute',
                    'left' : 0,
                    'background' : '',
                    'top' : "0"
                });
            } else { // Safari
                $$.css({
                    'position' : 'absolute',
                    'left' : 0,
                    'background' : ''
                });
            }

            // similar effect as single image technique, except using .animate
            // which will handle the fading up from the right opacity for us
            $$.hover(function () {
                $$.stop().animate({
                    opacity: 0
                }, "slow");
            }, function () {
                $$.stop().animate({
                    opacity: 1
                }, "slow");
            });
        });
    };

})(jQuery);

// note that this uses the .bind('load') on the window object, rather than $(document).ready()
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
    $('img.fade').cross();
});