﻿function MovingTableHeader(tableName) {
	this.table = document.getElementById(tableName);
	if (this.table == null)
		return;
	this.headers = this.table.getElementsByTagName('TR')[0].getElementsByTagName('TH');
	if (this.headers.length == 0)
		return;

	this.headersTable = document.createElement('table');
	this.headersTable.id = 'MovingHeader' + tableName;
	this.headersTable.cellSpacing = 0;
	this.headersTable.cellPadding = 0;
	this.headersTable.setAttribute('class', 'data');
	this.headersTable.setAttribute('height', this.headers[0].clientHeight);
	this.headersTable.setAttribute('width', this.table.clientWidth);
	this.headersTable.appendChild(document.createElement('THEAD'));
	this.headersTable.firstChild.appendChild(this.table.getElementsByTagName('TR')[0].cloneNode(true));
	this.headerRow = this.headersTable.getElementsByTagName('TH');
	this.headersTable.style.cssText = 'display:none;position:fixed;z-index:1';

	for (var i = 0; i < this.headers.length; i++) {
		if (document.all) {
			if (parseInt(this.headers[i].clientWidth) < 20)
				this.headerRow[i].width = 1;
			else
				this.headerRow[i].width = parseInt(this.headers[i].clientWidth) - 20; //nlbeck: The total padding must be subtracted
		}
		else
			this.headerRow[i].setAttribute('style', 'width:' + (this.headers[i].clientWidth - 20) + 'px');
		this.headerRow[i].style.padding = '5px 10px 5px 10px';
	}

	if (document.all)
		document.getElementsByTagName('body')[0].lastChild.appendChild(this.headersTable);
	else
		document.getElementsByTagName('body')[0].appendChild(this.headersTable);

	function scroll(tableName, parentScroller) {
		if (document.getElementById(tableName) == null || document.getElementById('MovingHeader' + tableName) == null) {
			document.getElementById('MovingHeader' + tableName).style.cssText = 'display:none;position:fixed;z-index:1';
			return;
		}

		var table = document.getElementById(tableName);
		var headersTable = document.getElementById('MovingHeader' + tableName);
		var leftMargin = findLeft(table);
		var top = document.getElementById('header').offsetHeight;
		var headerHeight = table.getElementsByTagName('TR')[0].getElementsByTagName('TH')[0].offsetHeight * 2;

		var scrollTop = document.documentElement.scrollTop;
		if (parentScroller != null) {
			scrollTop = document.getElementById(parentScroller).scrollTop;
			top = findTop(table);
		}

		if (scrollTop + top > findTop(table) && scrollTop + top < findTop(table) + table.offsetHeight - headerHeight)
			headersTable.style.cssText = 'position:fixed;left:' + leftMargin + 'px;top:' + top + 'px;z-index:1';
		else
			headersTable.style.cssText = 'display:none;position:fixed;z-index:1';
//		if (document.documentElement.scrollTop + top > findTop(table) && document.documentElement.scrollTop + top < findTop(table) + table.offsetHeight - headerHeight)
//			headersTable.style.cssText = 'position:fixed;left:' + leftMargin + 'px;top:' + top + 'px;z-index:1';
//		else
//			headersTable.style.cssText = 'display:none;position:fixed;z-index:1';
	}
	
	function findScrollingElement(elem) {
		if (elem == null)
			return null;

		if (elem.style.overflowY != '')
			return elem;

		return findScrollingElement(elem.parentElement);
	}

	this.scroll = scroll;

	this.parentScroller = findScrollingElement(this.table);
	if (this.parentScroller != null) {
		if (this.parentScroller.id == '') {
			alert('MovingTableHeaders.js, parentScroller must have an ID!');
			return;
		}
		var x = this.parentScroller.id;
		this.parentScroller.attachEvent('onscroll', function() { scroll(tableName, x) });
	}
	else {
		if (document.all)
			window.attachEvent('onscroll', function() { scroll(tableName) });
		else
			window.addEventListener('scroll', function() { scroll(tableName) }, false);
	}
}