/*
When a visitor has a very large screen resolution, we cannot gaurentee that the page contents of the website
will stretch the entire screen height. Say, for example, we have a contact us page that is 1200px tall. On most
standard resolutions, this would induce a scrollbar in the browser. However, in an instance where the resolution
height is greater than 1200px, we would have no scrollbar and a "gap" at the end of the page. Because of the
complex background this design has, we need to make sure that the page doesn't just end and disappear. 
This function fits the page contents height to the height of the viewport, if and only if the page content height
is smaller than the viewport itself. This should keep the background rendering properly on the rare case that
a visitor has a resolution with huge height.
*/

function background_fit()
{
    var documentBody = $(document.body);
    var container = $("background_container");
    
    var bodyContainer = $("body_container");
    var containerCoords = container.getCoordinates();
    var documentCoords = documentBody.getCoordinates();
    
    if(containerCoords.top + containerCoords.height < documentCoords.height)
    {
        var offset = documentCoords.height - (containerCoords.top + containerCoords.height);
        var bodySize = bodyContainer.getCoordinates();
        
        bodyContainer.setStyle("height", bodySize.height + offset);
    }
}

if(loader != undefined && loader != null) loader.add(background_fit);