window.onload = function() {
    CheckBackground();
}

window.onresize = function() {
    CheckBackground();
}

window.onscroll = function() {
    CheckBackground();
}

function CheckBackground() {
    // Aligns the background image in the bottom left corner according to the window
    // view position (fixed) or scroll position (scroll) depending on the window 
    // height, scroll position and height of the navigation.

    var body = document.body;

    var windowHeight = document.documentElement.clientHeight;
    var navigationHeight = document.getElementById("Navigation").offsetHeight;
    var scrollPositionTop;
    var scrollPositionLeft;
    
    if (window.pageYOffset) {
        // FF
        scrollPositionTop = window.pageYOffset;
        scrollPositionLeft = window.pageXOffset;
    } else {
        // IE
        scrollPositionTop = document.documentElement.scrollTop;
        scrollPositionLeft = document.documentElement.scrollLeft;
    }

    var remainingSpace = windowHeight + scrollPositionTop - navigationHeight;
    var neededSpace = 208;
    var imageHeight = 130;

    if (remainingSpace >= neededSpace + imageHeight) {
        // If the left scroll position is greater than zero and it has changed,
        // we display the image as scroll, otherwise as fixed.
        if (top.PreviousScrollPositionLeft && top.PreviousScrollPositionLeft != scrollPositionLeft) {
            // Display the Faehre image at the bottom left corner (horizontal scrolling)
            body.style.backgroundAttachment = "scroll";
            body.style.backgroundPosition = "0px " + (windowHeight + scrollPositionTop - imageHeight) + "px";
        } else {
            // Display the Faehre image at the bottom left corner as fixed (normal behaviour)
            body.style.backgroundAttachment = "fixed";
            if (scrollPositionLeft == 0) {
                body.style.backgroundPosition = "left bottom";
            } else {
                body.style.backgroundPosition = "-" + scrollPositionLeft + "px bottom";
            }
        }
    } else {
        // Display the Faehre image just right below the navigation
        body.style.backgroundAttachment = "scroll";
        body.style.backgroundPosition = "0px " + (neededSpace + navigationHeight) + "px";
    }

    top.PreviousScrollPositionLeft = scrollPositionLeft;

    // Debug output in Teaser:
    //var x = document.getElementById("Teaser");
    //x.innerHTML = windowHeight + " - " + navigationHeight + " - " + scrollPositionTop;
}