/** CONSTANTS **/ var ID_BODY = "bd"; var ID_VIEWER = "viewbox"; var ID_GALLERY = "gallery-thumbs-container"; var ID_CONTROLS = "control-bar"; var ID_CONTROLS_FLUID_COL = "controls-fluidCol" var ID_CONTROLS_FIXED_COL = "controls-fixedCol" var ID_ERROR_TEXT = "error-text"; var VIEWER_MARGIN = 6; /** ELEMENTS **/ var bodyElmt = document.getElementById(ID_BODY); // not , but

var viewerElmt = document.getElementById(ID_VIEWER); var galleryElmt = document.getElementById(ID_GALLERY); var controlsElmt = document.getElementById(ID_CONTROLS); var errorStatusElmt = document.getElementById(ID_ERROR_TEXT); var ctrlsFluidColElmt = document.getElementById(ID_CONTROLS_FLUID_COL); var ctrlsFixedColElmt = document.getElementById(ID_CONTROLS_FIXED_COL); /** LAYOUT **/ function initializeViewer() { // with this change, increase the info's height by the foot height updateViewerLayout(); Seadragon.Utils.addEvent(window, "resize", updateViewerLayout); } function updateViewerLayout() { // calculate the "inner" dimensions (just #bd, not #hd or #ft) var innerHeight = bodyElmt.clientHeight ; var innerWidth = bodyElmt.clientWidth; var viewerWidth = innerWidth - 60; // TODO: kasingh - how to account for padding ? if (errorStatusElmt) { innerHeight -= errorStatusElmt.clientHeight; } viewerElmt.style.height = innerHeight - controlsElmt.clientHeight + "px"; if (galleryElmt) { viewerWidth -= galleryElmt.offsetWidth; viewerElmt.style.width = viewerWidth + "px"; } if (ctrlsFluidColElmt != null && ctrlsFixedColElmt != null) { ctrlsFluidColElmt.style.width = viewerWidth - ctrlsFixedColElmt.clientWidth - VIEWER_MARGIN * 2 + "px"; } } initializeViewer();