text highlight remake

HTML

<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>

CSS

p{
 position: relative;
 font-size: 16px;   
}
#highlight{
 position: absolute;
 background-color:yellow;
 height:20px;
 z-index:-50;   
}
#cursor{
 position: relative;
 top: -10px;    
}
#click{
  margin-left; 10px;   
}

JavaScript

function highlight(){
    var textLength = $('#container').text().length;
    $('#click').css('border','none'); //remove the border
    $('#cursor').css('left', '0px'); //reset the cursor left
    $('#highlight').width(0);
    $('#highlight').animate({width: $('#container').width()}, textLength * 70);
    $('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
        $('#cursor').animate({left: '+=30'} , textLength * 20);
    });
    setTimeout(function () {   
        $('#click').css('border','1px solid black'); 
     }, textLength*100);
}
 
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120); 
//clearInterval(intervalID);