/**
 *  We make this a global function, because we also need to bind it to the scroll
 *  event of div.workspace_results, which is actually created from an underscore
 *  template (it's in index.html and iframe.html).
 */
function scrollFixedTableHeaders() {
	var tblWrap = $('.table_wrapper');
	if (tblWrap.length) {
		var offs = tblWrap[0].getBoundingClientRect();
		//console.log(offs);

		var thead = $('.table_wrapper thead');
		var tbody = $('.table_wrapper tbody');
		if (thead.length) {
			var tHeadFixed = $('div.floatHead', tblWrap);	//	we do it this way so we can cater for multiple tabs
			var tLeftFixed = $('div.floatLeft', tblWrap);

			//	Create our floating header if we haven't done so already.
			if (!tHeadFixed.length) {
				tHeadFixed = $('<div class="floatHead" />').css({
					position: 'fixed',
					top: '0',
					display: 'none',
					'box-shadow': '2px 2px 5px rgba(0,0,0,0.2)',
					'z-index': 20,
					'white-space': 'nowrap'
				});
				$('tr', thead[0]).each(function() {
					var tr = $(this);
					var trHead = $('<div />').css({
						display: 'block',
						//'border-right': '1px solid #d5d5d5',
						//'border-bottom': '1px solid #d5d5d5',
						overflow: 'hidden',
						'border-left': tr.css('border-left'),
						'border-right': tr.css('border-right'),
						'border-top': tr.css('border-top'),
						'border-bottom': tr.css('border-bottom'),
						height: tr.outerHeight()
					});
					$('th', this).each(function() {
						var th = $(this);
						var thHead = $('<div />').css({
							display: 'inline-block',
							width: th.outerWidth(),
							height: th.outerHeight(),
							//'border-left': '1px solid #d5d5d5',
							//'border-top': '1px solid #d5d5d5',
							'border-left': th.css('border-left'),
							'border-right': th.css('border-right'),
							'border-top': th.css('border-top'),
							'border-bottom': th.css('border-bottom'),
							background: th.css('background'),
							'text-align': th.css('text-align'),
							'white-space': 'normal',
							'vertical-align': 'middle',
							padding: th.css('padding')
						}).html(th.html())
						.addClass(th.attr('class'));
						trHead.append(thHead);
					})
					tHeadFixed.append(trHead);
				});
				tblWrap.append(tHeadFixed);
			}

			//	Likewise, create the floating left part if needed
			if (!tLeftFixed.length) {
				tLeftFixed = $('<div class="floatLeft" />').css({
					position: 'fixed',
					//top: '0',
					display: 'none',
					'box-shadow': '2px 2px 5px rgba(0,0,0,0.2)',
					'z-index': 30,
					overflow: 'hidden'
				});
				$('tr', tbody[0]).each(function() {
					var tr = $(this);
					var trBody = $('<div />').css({
						display: 'block',
						//'border-right': '1px solid #d5d5d5',
						//'border-bottom': '1px solid #d5d5d5'
						'border-left': tr.css('border-left'),
						'border-right': tr.css('border-right'),
						'border-top': tr.css('border-top'),
						'border-bottom': tr.css('border-bottom'),
						height: tr.outerHeight()
					});
					$('th', tr).each(function() {
						var th = $(this);
						var thBody = $('<div />').css({
							display: 'inline-block',
							width: th.outerWidth(),
							height: (th.outerHeight()),
							//'border-left': '1px solid #d5d5d5',
							//'border-top': '1px solid #d5d5d5',
							'border-left': th.css('border-left'),
							'border-right': th.css('border-right'),
							'border-top': th.css('border-top'),
							'border-bottom': th.css('border-bottom'),
							background: th.css('background'),
							'text-align': th.css('text-align'),
							'white-space': 'nowrap',
							padding: th.css('padding')
						}).html(th.html())
						.addClass(th.attr('class'));
						trBody.append(thBody);
					})
					tLeftFixed.append(trBody);
				});
				tblWrap.append(tLeftFixed);
			}

			var showHead, showLeft;

			if (offs.top < 0 || $('div.workspace_results').scrollTop() > 0) {
				tHeadFixed.css({display: 'block'});
				thead.css({visibility: 'hidden'});
				showHead = true;
			}
			else {
				tHeadFixed.css({display: 'none'});
				thead.css({visibility: 'visible'});
				showHead = false;
			}

			if (offs.left < 0 || $('div.workspace_results').scrollLeft() > 0) {
				tLeftFixed.css({display: 'block'});
				tbody.find('th').css({visibility: 'hidden'});
				showLeft = true;
			}
			else {
				tLeftFixed.css({display: 'none'});
				tbody.find('th').css({visibility: 'visible'});
				showLeft = false;
			}

			//	The top of the tHeadFixed is the top of the workspace_results div
			//tHeadFixed.css({left: offs.left, top: $('div.workspace_results').position().top});
			tHeadFixed.css({left: offs.left, top: Math.max($('div.workspace_results')[0].getBoundingClientRect().top, 0)});

			//	The top of the tLeftFixed is the top of the table body
			tLeftFixed.css({left: Math.max($('div.workspace_results').position().left, 0), top: tbody[0].getBoundingClientRect().top});

			//	When both the head and left are visible, it looks better to hide the
			//	column headers above left part (you can see more of the left then).
			//	these all have class row_header, and are in tHeadFixed.
//			if (showHead && showLeft) {
//				tHeadFixed.find('div.row_header').css({visibility: 'hidden'});
//			}
//			else {
//				tHeadFixed.find('div.row_header').css({visibility: 'visible'});
//			}
		}
	}
}

$(document).ready(function() {
	//$(window).scroll(scrollFixedTableHeaders);

	//	Note the last param, true, as we're binding to all descendants also.
	//	(seems you can't do that in jquery directly, hence this way)
	document.addEventListener('scroll', scrollFixedTableHeaders, true);
});