//*****************************************************************************
// ScrollableTable.js
//
// This script contains useful functions that can be used to convert ordinary
// tables into scrollable tables.
//
// Here is how one can do that. The following assumptions are required
// for the tables to be sorted.
//
// 1. The table header should be defined in a TBODY.
// 2. The table footer (if one exists) should be defined in a TFOOT.
// 3. TD's in TBODY should not contain the width attribute.
//
// To enable the sorting, simply include this javascript source file and
// add an onLoad event to the like below:
//
//
//
// Parameters:
// - Table ID
// - Scroll Footer (true/false): Include footer in the scrollable area
// - Scrollable Area Height (# of pixels or 'auto'): Only the first table called can be set to 'auto'.
//
// Note that all the tables that need to be scrolled MUST contain an ID tag.
// So, if they do not exist, you must create one for each table. Also, the
// table names/ids MUST BE UNIQUE.
//*****************************************************************************
// Global variables
var container = new Array();
var onResizeHandler;
function scrollbarWidth(){
var w;
if (! document.body.currentStyle) document.body.currentStyle = document.body.style;
if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll'){
w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;
}else{
win = window.open("about:blank", "_blank", "top=0,left=0,width=240,height=450,scrollbars=yes");
win.document.writeln('scrollbar');
w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;
win.close();
}
return w;
}
function getActualWidth(e){
if (! e.currentStyle) e.currentStyle = e.style;
return e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);
}
function findRowWidth(r){
for (var i=0; i < r.length; i++){
r[i].actualWidth = getActualWidth(r[i]);
}
}
function setRowWidth(r){
for (var i=0; i < r.length; i++){
r[i].width = r[i].actualWidth;
r[i].innerHTML = '' + r[i].innerHTML + '';
}
}
function fixTableWidth(tbl){
for (var i=0; i < tbl.tHead.rows.length; i++) findRowWidth(tbl.tHead.rows[i].cells);
findRowWidth(tbl.tBodies[0].rows[0].cells);
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) findRowWidth(tbl.tFoot.rows[i].cells);
//tbl.width = '';
for (var i=0; i < tbl.tHead.rows.length; i++) setRowWidth(tbl.tHead.rows[i].cells);
setRowWidth(tbl.tBodies[0].rows[0].cells);
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) setRowWidth(tbl.tFoot.rows[i].cells);
}
function makeScrollableTable(tbl,scrollFooter,height){
var c, pNode, hdr, ftr, wrapper, rect;
if (typeof tbl == 'string') tbl = document.getElementById(tbl);
pNode = tbl.parentNode;
fixTableWidth(tbl);
c = container.length;
container[c] = document.createElement('');
container[c].id = tbl.id + "Container";
pNode.insertBefore(container[c], tbl);
container[c].appendChild(tbl);
container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();
hdr = tbl.cloneNode(false);
hdr.id += 'Header';
hdr.appendChild(tbl.tHead.cloneNode(true));
tbl.tHead.style.display = 'none';
if (!scrollFooter || !tbl.tFoot){
ftr = document.createElement('');
ftr.id = tbl.id + 'Footer';
ftr.style.border = tbl.style.border;
ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;
ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';
}else{
ftr = tbl.cloneNode(false);
ftr.id += 'Footer';
ftr.appendChild(tbl.tFoot.cloneNode(true));
ftr.style.borderTop = 'none';
tbl.tFoot.style.display = 'none';
}
wrapper = document.createElement('');
wrapper.id = tbl.id + 'Wrapper';
pNode.insertBefore(wrapper, container[c]);
wrapper.insertRow(0).insertCell(0).appendChild(hdr);
wrapper.insertRow(1).insertCell(0).appendChild(container[c]);
wrapper.insertRow(2).insertCell(0).appendChild(ftr);
wrapper.align = tbl.align;
tbl.align = hdr.align = ftr.align = 'left';
hdr.style.borderBottom = 'none';
tbl.style.borderTop = tbl.style.borderBottom = 'none';
// adjust page size
if (c == 0 && height == 'auto'){
onResizeAdjustTable();
onResizeHandler = window.onresize;
window.onresize = onResizeAdjustTable;
}else{
container[c].style.height = height;
}
}
function onResizeAdjustTable(){
if (onResizeHandler) onResizeHandler();
var rect = container[0].getClientRects()(0);
var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));
container[0].style.height = (h > 0) ? h : 1;
}
function printPage(){
var tbs = document.getElementsByTagName('TABLE');
var e;
for (var i=0; i < container.length; i++) container[i].style.overflow = '';
window.print();
for (var i=0; i < container.length; i++) container[i].style.overflow = 'auto';
}