$(document).ready(function(){
    var topOffset = 0;
    var maxCellPosHeight = 0;
    var $cells = $("#grid").children();


    /* Precalculate some values based on the unit cell */
    var $unitCell = $("<div />").addClass("cell").appendTo("body");
    var uw = $unitCell.width();
    var uh = $unitCell.height();
    var um = 10; // hardcoded override //parseInt($unitCell.css("margin-right"),10);
    var ub = parseInt($unitCell.css("border-right-width"),10);
    var ucs = uw + (um + ub) * 2; /* True "size" of a unit cell, inc. border/margin */
    //alert($unitCell.css("margin-right"));
    $unitCell.remove();

    $cells.each(function(){
	
	
        /* From the grid-based dimensions ... */
        var w = $(this).metadata().w;
        var h = $(this).metadata().h;
        var cw = uw * w + (um + ub) * 2 * (w - 1); /* calc cell px width */
        var ch = uh * h + (um + ub) * 2 * (h - 1); /* and height */
        $(this).css({float: 'none', width:cw, height:ch});
        
        //var pHeight = $(this).find("td.newsMain").css("height");
        
        $(this).find(".transBackground").animate(
            {height: (ch - 105)}, 750
        ); //.css()
        //$(this > '.newsMain_trans').css({height:'100px' });
        //$(this).("p.newsMain")
    });
    
    //$('.newsMain_trans').css({height:'100%' });
    /*
    $(".newsMain_trans").each(function(){
        
        alert(pHeight);
        $(this).css({height: (pHeight - 100)});
    });
    */
    function getHeight()
    {
        var maxHeight = 0;
        $cells.each(function(){
            var top = parseInt($(this).css("top"));
            var height = parseInt($(this).css("height"));
            var maxY = top + height;

            if (maxY > maxHeight) maxHeight = maxY

        });
        return (maxHeight ); // + topOffset
    }
    
    $(window).bind("resize", function(){
    
        maxCellPosHeight = 0;
    
        $("#grid").width("auto");
        var cols = Math.floor($("#grid").width() / ucs);
        $("#grid").width(cols * ucs);
        
        var gridX = $("#grid").position().left;
        var gridY = $("#grid").position().top;
        
        /* Mod: Offset top */
        gridY += topOffset;
        
        /* Cells need to know if a given column is legal to occupy,
                   since tall cells can take up more than one row.
           We'll maintain a 'row debt' array. If a column is 0, it's legal.
           If N, then it will be legal in N rows. */
        var rowDebt = new Array(cols);
        for(var i = 0; i < rowDebt.length; i++) rowDebt[i] = 0;
        
        $cellsRemaining = $cells;

        var row = 0, col = 0;
        while($cellsRemaining.length > 0)
        {
            var thisCell, w, h;

            /* Get to a valid row, column location. */
            function nextRow()
            {
                col = 0;
                row++;
                for(var i = 0; i < rowDebt.length; i++)
                {
                    if(rowDebt[i] > 0) rowDebt[i]--;
                }
                advance();

            }

            /* Advance to a valid column. If necessary,
               drop down to a new row to do so. */
            function advance()
            {
                while(col < cols && rowDebt[col] > 0)
                {
                    col++;
                }
                if(col >= cols) nextRow();
            }
        
            /* Find a cell that can fit in the current row, column.
               If no such cell exists, abandon this location */
            function findGoodCell()
            {
                var goodCell = true;
                for(l = 0; l < $cellsRemaining.length; l++)
                {
                    thisCell = $cellsRemaining[l];
                    w = $(thisCell).metadata().w;
                    h = $(thisCell).metadata().h;

                    goodCell = true;
                    
                    if(col + w > cols) goodCell = false; /* Ran over the edge */
                    for(i = 0; i < w; i++)
                    {
                        /* Not enough space due to cell above */
                        if(rowDebt[col + i] > 0) goodCell = false;
                    }
                    if(goodCell) break;
                }
                if(!goodCell)
                {
                    /* We're leaving an empty space, but there's
                       nothing we can do about it. Bail on this location. */
                    advance();
                    findGoodCell();
                }
            }

            findGoodCell();
            
            var cellHeight = gridY + (row * ucs) + parseInt($(thisCell).css("height"));
            if (cellHeight > maxCellPosHeight) maxCellPosHeight = cellHeight;
            
            $(thisCell).css({position:"absolute"})
                   .animate({top: gridY + (row * ucs) + 'px',
                         left: gridX + (col * ucs) + 'px'});

            for(var i = 0; i < w; i++) rowDebt[col + i] += h;
            col = col + w;
            $cellsRemaining = $cellsRemaining.not(thisCell);
        }
        
        // Animate the footer
        $("#grid").css({height:(maxCellPosHeight) + 'px'});
/*        $(".newsfooter").css({position:"absolute"})
                   .animate({top: (maxCellPosHeight + 30) + 'px',
                         left: gridX + 'px', width:"100%"
*/
/* $("#grid").css("width") */
                         //});
        
    }).trigger("resize");
});