/** CONSTANTS **/
var ID_DOC = "doc";
var ID_HD = "hd";
var ID_BD = "bd";
var ID_FT = "ft";

/** ELEMENTS **/

var docElmt = document.getElementById(ID_DOC);
var hdElmt = document.getElementById(ID_HD);
var bdElmt = document.getElementById(ID_BD);
var ftElmt = document.getElementById(ID_FT);

/** LAYOUT **/

function initializeLayout() {
    var htmlStyle = document.documentElement.style;
    var bodyStyle = document.body.style;
    var docStyle = docElmt.style;

    htmlStyle.width = bodyStyle.width = docStyle.width = "100%";
    htmlStyle.height = bodyStyle.height = docStyle.height = "100%";

    updateLayout();
    Seadragon.Utils.addEvent(window, "resize", updateLayout);
}

function updateLayout() {
    var innerHeight = docElmt.clientHeight - hdElmt.clientHeight - ftElmt.clientHeight;

    // need to update #bd height! #hd and #ft height are constant.
    bdElmt.style.height = innerHeight + "px";
}

initializeLayout();