(function($) {
  
    /*

        This function monitors the height of the selected elements and 
        can change the height of another element. The block element to 
        inflate has a default id of '#filler'.
    
        The filler will be inside the wrapper or the footer....
        
<div id="wrapper">
    content
    <div id="filler"></div>
</div>
<div id="footer">footer text</div>

     $.flamefooter('page','filler','footer');

    */

    $.flamefooter = function(wrappername, fillername, footername, oneTimeOnly) {

        var wrapperid     = wrappername || 'wrapper';
        var fillerid      = fillername  || 'filler';
        var footerid      = footername  || 'footer'; 

        if ($('#'+wrapperid).length  != 1) { return false; }
        if ($('#'+fillerid).length   != 1) { return false; }
        if ($('#'+footerid).length   != 1) { return false; }

        function flameFooterAdjust() {

            var wrapperHeight = $('#'+wrapperid).height();
            var fillerHeight  = $('#'+fillerid).height();
            var footerHeight  = $('#'+footerid).height()
            var windowHeight  = $(window).height();
        
            var newfillerheight = (windowHeight - (wrapperHeight - fillerHeight) - footerHeight );
            
            // console.log ('calc: '+newfillerheight+' = ' + windowHeight + ' - ' + ' (' + wrapperHeight + ' - ' + fillerHeight + ')' + ' - ' + footerHeight );

            if (!(newfillerheight > 0)) { newfillerheight = 0; }
            $('#'+fillerid).height(newfillerheight + 'px');
        }
 
        if (oneTimeOnly) { flameFooterAdjust(); return true; }

        $(window).bind("resize", function() {  
            flameFooterAdjust(); 
        });

   
        flameFooterAdjust();
    
        return true;
    };

    $.flamefooter();

})(jQuery);