I need to refactor this code, targeted to Google Chrome (current+) to make it manageable going forward.

Here is a working JSBin of the idea.

The messiness comes from determining the accurate number of lines of text, and the real heights of elements. I know I am passing this information around too much, without enough structure, and recalculating too many things. I also know it is messy, especially inside scal_el and run_scan.

function scan_el(el_fin_callback,el,mask,sub_mask,real_height,real_width,push,lines,line) {
        line = line || 0;
        if(line >= lines) {
                el_fin_callback();
                return; // scan finished
        }
        var current_line = real_height*line;    
        var line_os = $(el).offset();
        line_os.top += current_line;
        if(lines > 1) {
                $(mask)[0].style.height = real_height+'px';
        }
        $(sub_mask).css( { 
                'height' : $(el).height()-real_height-current_line } );
        $(mask).offset(line_os);
        line_os.top += real_height;
        var length = Math.ceil($(el).text().length*real_width)+push;
        if(lines > 1) {
                length = $(el).width();
        }
        $(sub_mask).offset(line_os);
        function next_line() { // callback after scan complete
                scan_el(el_fin_callback,el,mask,sub_mask,real_height,real_width,push,lines,line+1);
        }
        run_line_scan(length,mask,next_line);
}