Event.observe(window, 'load', function() {
    Event.observe(window, 'resize', resizeContainer);
    resizeContainer();
});

function resizeContainer() {
    // how many pixels less than height of viewport
    var reserveY = 20;
    var mainnavHeight = 314;

    var viewportHeight = document.viewport.getDimensions()['height'];
    var container = $('container');
    $('container').style.height = '' + ( viewportHeight - reserveY ) + 'px';

    // fill page til bottom on pages with 3 menus  
    var subnav2 = $$('div.wrapSubnav2');
    if (subnav2.length) {
        subnav2 = subnav2[0];
        subnav2.style.height = '' + ( viewportHeight - (reserveY + mainnavHeight)) + 'px';
        
        // special bonus hack: if we got 3 submenus, we need to make the second one smaller by 5 px
        // becauseof the divider - graphic which is somehow destroying the concept right now.
        $$('.wrapSubnav1')[0].style.height = '180px';
    }
}