$(document).ready(function()
{
    $(".do-check #username").blur(function()
    {
         //remove all the class add the messagebox classes and start fading
         $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
         //check the username exists or not from ajax
         $.post("/user/exist",{ username:$(this).val() } ,function(data)
         {
            if(data=='yes') //username exists
            {
                $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                {
                    //add message and change the class of the box and start fading
                    $(this).html('Username '+$("#username").val() +' is taken.').addClass('messageboxerror').fadeTo(900,1);
                });
            }
            else
            {
                $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
                {
                    //add message and change the class of the box and start fading
                    $(this).html('Username available!').addClass('messageboxok').fadeTo(900,1);
                });
            }
        });
    });
});