$(document).ready(function() {

    $('#SubmitButton').click(function() {
        removeCallOut();
        if ($('#FirstNameText').val() === "") {
            showCallOut('FirstNameText', 'Please enter first name');
        }
        if ($('#LastNameText').val() === "") {
            showCallOut('LastNameText', 'Please enter last name');
        }
        if ($('#ContactNumberText').val() === "") {
            showCallOut('ContactNumberText', 'Please enter contact number');
        }
    });


    //$('body').append('<div id="ValidationMessageDiv"></div>');
    function showCallOut(element, errorMessage) {
        element = '#' + element;
        $(element).addClass('jt ui-state-error').attr('message', errorMessage);

        var firstErrorElement = $('.ui-state-error:first');
        var firstErrorElementTop = firstErrorElement.offset().top;

        $(element).attr('title', 'Mandatory Field')
                .attr('rel', 'div[id="ValidationMessageDiv"]')
                .cluetip({
                    local: true, cursor: 'pointer',
                    cluetipClass: 'jtip', width: '150', //sticky:'true',
                    arrows: true, dropShadow: false, hoverIntent: false
                });

        firstErrorElement.focus();
    }

    function removeCallOut() {
        //$(document).trigger('hideCluetip');
        $('.ui-state-error').unbind('focus.cluetip');
        $('.ui-state-error').removeClass('jt ui-state-error').removeAttr('message')
            .removeAttr('rel').removeAttr('title');
    }

    $('h4').toggle(function() {
        $('.displayNone').slideDown();
    },
    function() {
     $('.displayNone').slideUp();
    }
    );
});