jQuery contextLoader - a DOM - contextual loader for your web app!

gistfile1.js

 /*
    ======================
    USAGE
    ======================
    createLoadPane is a simple function that handles creation and positioning, 
    as well as text options for adding "contextual loaders" into the dom -- 
    a loader that covers a certain area where content    may be loading via ajax.
    
    This works with the box-model and takes the basic discrepencies into account. 

    It's NOT tested on IE, and may fail in earlier versions where the box model is sad and pathetic.
    (feel free to remix this is if you want to go the extra mile.)

    Styling is simple, you can add anything except for padding and borders, 
    and you can add extra classes for loading animations, or to unstyle the text.

    Initialize as many as you want, you'll have to be responsible for managing/destroying 
    them once they've been created with your own technique ( jQuery's $("#id").remove() works well. ).
    
    It will take into account padding or no padding, whether long hand or shorthand, and update the dimensions/coords in sync.
    DO NOT add padding or borders of your own, padding is unnecessary since it centers content on its own, 
    this will make it look slightly off.

    Usage:
    createLoadPane(".module_box", "cool_gif_class", "Load dat' bidnezz");

    ======================
    CSS
    ======================

    .context_loader {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        text-transform: uppercase;
        text-align: center;
        z-index: 9999;
        opacity: 0.9;
        font-size: 90%;
        vertical-align: middle;
        box-shadow: inset 0 0 3px #444;
    }

    ======================
    LOADING ICONS:
    ======================
        http://www.loadinfo.net/
        http://preloaders.net/
        http://www.ajaxload.info/
        */

        var createLoadPane = function(elem, img_type, loading_text) {
            var
            id               = "loader_" + Math.round( Math.random() * 50 + 100 ),
            loader_html      = '<div id="'+ id + '" class="context_loader"><p>' + ( loading_text || "Loading..." ) + '</p></div>',
            elem_padding     = $(elem).css("padding"),
            elem_padding_arr = elem_padding.split(/px/),
            padding_first    = parseInt( elem_padding_arr[0] ),
            padding_w        = ( parseInt(elem_padding_arr[1]) || padding_first) + ( parseInt(elem_padding_arr[3]) || padding_first),
            padding_h        = (padding_first || 0) + ( parseInt(elem_padding_arr[4]) || padding_first),
            width            = $(elem).width() + padding_w,
            height           = $(elem).height() + padding_h,
            elem_top         = $(elem).offset().top,
            elem_left        = $(elem).offset().left;

            $("body").append( loader_html );
            $("#"+id).hide().width( Math.round(width) ).height( Math.round(height) )
            .css({
                "top": elem_top + "px",
                "left": elem_left + "px",
                "lineHeight": (height) + "px"
            }).addClass( img_type ).text( loading_text ).fadeIn(200);
            return;
        }