get fb avatar by name

by gion_13

HTML

<input type="text" id="name"/>
<br/>
<span class="name"></span>'s facebook avatar picture : 
<br/>
<img src="" id="avatar" />

CSS

#avatar{
    border : 2px;
    width : 100px;
    height : 100px;
}

#avatar.loading{
    background-image : url('http://www.aptivate.me/includes/loading.gif');
    background-repeat : no-repeat;
    background-position : center;
}

.name{
    font-weight : bold;
}

JavaScript

var counter = 0;
$('#name').keyup(function(e){
    var name = $.trim($(this).val());
    $('.name').text(name);
    $('#avatar').addClass('loading');
    getId(name,function(id){
        $('#avatar')
            .attr('src','http://graph.facebook.com/'+ id +'/picture')
       //     .attr('alt',name + "'s fb avatar picture")
            .removeClass('loading');
    },counter++);
});


function getId(name,callback,c){
    if(getId.cache[name])
        callback(getId.cache[name]);
    else
        $.getJSON('http://graph.facebook.com/' + name,function(response){
 //           if(c !== counter)
  //              return;
            getId.cache[name] = response.id;
            callback(getId.cache[name]);
        });
}
getId.cache = [];