/**********************************************************************************************************************

	Purpose:
		This file controls certain aspects of the data grid display, which is seen when
		viewing records in the admin interface.
	
	History:
		File added on 12/16/2004 for v1.6.0
		File modified on 09/19/2005 for v2.0.1 - general improvements to data grid load appearance

**********************************************************************************************************************/



// Function handles synching the width of each cell in the header table
// with the first row in the data table, and also makes some adjustments to
// elements to display properly in different browsers.
var gridInitCount = 0;

function initDataGrid (initial) {
	var dataGrid		= document.getElementById('data_grid');								// data grid...surrounds the whole thing
	if (!dataGrid) return; 																	// bail out if there is no grid
	var hTable			= document.getElementById('header_table');							// header table - entire header....
	var hDiv 			= document.getElementById('record_header_div');						// header div - scrollable div surrounding header table
	var hToolsDiv		= document.getElementById('horiz_record_tools');						// header div - scrollable div surrounding header table
	var dDiv			= document.getElementById('data_div');								// data div - scrollable div surrounding data table
	var dTable			= document.getElementById('data_table');							// data table - inside the data div
	var toolsDiv		= document.getElementById('record_tools_div');						// tools div - vertical scrollable div with edit links and stuff
	var hRow 			= document.getElementById('record_header_row');						// header row
	var dummyTable		= document.getElementById('dummy_table');							// dummy table
	var dummyRow		= document.getElementById('dummy_header_row');						// header row in dummy table
	var fRow 			= document.getElementById('data_row_0');							// first row of data
	var topLeftTD 		= document.getElementById('data_grid_top_left'); 					// top left empty cell on data grid
	var hCells 			= hRow.getElementsByTagName('TH');									// array of TH tags in header row
	var dummyCells		= dummyRow.getElementsByTagName('TH');								// array of TH tags in header row in dummy IE table
	var fCells 			= fRow.getElementsByTagName('TD');									// array of TD tags in first data row
	var viewStats		= document.getElementById('view_stats');							// info about records..."Viewing records 1-50 of 1000"
	var isMac		 	= navigator.appVersion.indexOf("Mac")!=-1 		? true : false;		// detect Mac OS
	var isFireFox		= navigator.userAgent.indexOf("Firefox")!=-1 	? true : false;		// detect FireFox
	var isSafari		= navigator.userAgent.indexOf("Safari")!=-1 	? true : false;		// detect Safari
	var isNetscape		= navigator.appName == "Netscape"				? true : false;		// detect Netscape
	var isIE			= document.all									? true : false;		// detect IE
	var contentDiv 		= document.getElementById('content');
	var contentWidth 	= contentDiv.offsetWidth;
	var contentHeight 	= contentDiv.offsetHeight;
	var minTableWidth;
	var dDivNewWidth;
	var dDivNewHeight;
	var pageNav			= document.getElementById('page_nav_table');						// table containing the page nav
	var	pageNavHeight 	= pageNav ? pageNav.offsetHeight : 0;
	var windowDims 		= getWindowDims();

	// initial overflow state in the data_grid.css file for the data_div is 'hidden',
	// because when it was set to 'auto', the scrollbars appears on Mac for FF, Camino, and Mozilla
	// This kicks it back to auto
	dDiv.style.overflow = 'auto';
	
	minTableWidth	= 858;	// min. width for data table

	document.getElementById('loading_data').style.display = 'none';
	
	//alert('Content width:' + document.getElementById('content').offsetWidth + '\nScroll width:' + dDiv.scrollWidth + '\ndDiv width: ' + dDiv.offsetWidth);
	// section below adjusts the width of the data grid if the horizontal scrollbar is present
	if (dDiv.scrollWidth > dDiv.offsetWidth) {
		// if here, then horiz. scrollbar is present, and we need to allow the tools header
		// to wrap if necessary
		minTableWidth = 300;
	
		// calculate the width difference, which is how much wider we need
		// to make the data div to not scroll horizontally
		var widthDiff = dDiv.scrollWidth - dDiv.offsetWidth;
		
		// calculate how much extra width we have to expand into
		var widthLeft = contentWidth - dDiv.offsetWidth - toolsDiv.offsetWidth;
		//var widthLeft = contentWidth - dDiv.offsetWidth;
		
		if (widthLeft > (widthDiff+28)) {
			dDivNewWidth = dDiv.offsetWidth + widthDiff + toolsDiv.offsetWidth;
		} else {
			//if (widthLeft > 0) dDiv.style.width = (dDiv.offsetWidth + widthLeft - 14 - 300) + 'px';
			dDivNewWidth = (dDiv.offsetWidth + widthLeft - 28);
		}

	} else {
		// no horiz. scrollbar present, so we need to make the min. table width
		// match the width of the tools header so it doesn't wrap
		minTableWidth = hToolsDiv.offsetWidth - 200;

		if (contentDiv.offsetWidth < dDiv.offsetWidth + toolsDiv.offsetWidth) {
	//} else {
		//dDivNewWidth = (contentDiv.offsetWidth - toolsDiv.offsetWidth - 140);
		dDivNewWidth = (contentDiv.offsetWidth - toolsDiv.offsetWidth - 14);
		}
	}


	// section below adjusts the height of the data grid if the horizontal scrollbar is present
	if (dDiv.scrollHeight > dDiv.offsetHeight) {
		//alert('ddiv is scrollable');
		
		// calculate the height difference, which is how much wider we need
		// to make the data div to not scroll horizontally
		var heightDiff = dDiv.scrollHeight - dDiv.offsetHeight;
		// calculate how much extra height we have to expand into
		var heightLeft = contentHeight - dDiv.offsetHeight;
		//var heightLeft = contentHeight - dDiv.offsetHeight;

		//alert('height diff: ' + heightDiff + ', contentHeight: ' + contentHeight + ', dDiv-offsetHeight: ' + dDiv.offsetHeight + ', heightLeft: ' + heightLeft);	
		if ((heightLeft - 115 - pageNavHeight) > heightDiff) {
			//alert('plenty o room');
			dDivNewHeight = dDiv.offsetHeight + heightDiff + 20;
			//alert(dDivNewHeight + ', ' + dDiv.offsetHeight);
			var fullHeight = 1;
		} else {
			//if (heightLeft > 0) dDiv.style.height = (dDiv.offsetHeight + heightLeft - 14 - 300) + 'px';
			dDivNewHeight = (dDiv.offsetHeight + heightLeft - 28);
		}
	} else if (contentDiv.offsetHeight < dDiv.offsetHeight) {
		//dDivNewHeight = (contentDiv.offsetHeight - 14);
	} else {
		fullHeight = 1;
	}

	// resize the dDiv width only if it will result in the minimum table width
	if (dDivNewWidth > minTableWidth) {
		dDiv.style.width = (dDivNewWidth) + 'px';
	}
	
	// resize the dDiv height only if it will result in the minimum table height
	//if (dDivNewWidth > minTableWidth) {
	//dDiv.style.height = (dDivNewHeight - (contentHeight - dDiv.offsetHeight)) + 'px';
	if (dDivNewHeight) {
		if (fullHeight) {
			dDiv.style.height = (dDivNewHeight) + 'px';
		} else {
			//dDiv.style.height = (dDivNewHeight - 115 - pageNavHeight) + 'px';
			dDiv.style.height = (dDivNewHeight - 116 - pageNavHeight) + 'px';
		}
	}
	//}

	
	
	
	// if not on initial load, then return...we are just resizing and that is all done above
	if (!initial) return;	

	// set the height of the tools div to the height of the data minus scrollbars
	toolsDiv.style.height = dDiv.offsetHeight - 20 ;
	
	// first, loop through once and store initial offsetWidths for header cells
	// The dummy cells are used because the div the real ones are in doesn't produce the right dimensions
	for( i =0; i < hCells.length; i++ ) {
		hCells[i].origOffsetWidth = dummyCells[i].offsetWidth;
		fCells[i].origOffsetWidth = fCells[i].offsetWidth;
	}		
	
	for( i =0; i < hCells.length; i++ ) {
		// shorten variables to represent each cell
 		hCell = hCells[i]; fCell = fCells[i];
		
		// check to see if header cell is wider than data cell...
		// if it is, trick the data cell into being wider by surrounding the innerHTML with a div tag
		// with the width set to the width diff. plus 10 pixels
		hWidth = hCell.origOffsetWidth;
		fWidth = fCell.origOffsetWidth;
		

		// if the header cell width is larger than the correpsonding first data cell below
		if (hWidth >= fWidth) {
			// add more space to accomidate for the sort arrow, if it's present
			if (hCell.innerHTML.indexOf('.gif') != -1) {
				newWidth = hWidth + 10;
			} else {
				newWidth = hWidth;
			}
			
			fCell.innerHTML = '<div style="width: ' + newWidth + '">' + fCell.innerHTML + '</div>';
			
		}
		

		// if on the last cell (which is a dummy blank one), might need to expand it to meet the minimum width for the table
		if (i + 1 == hCells.length) {
			if (dTable.offsetWidth < minTableWidth) {
				newWidth = minTableWidth - dTable.offsetWidth;
				fCell.innerHTML = '<div style="width: ' + newWidth + '">' + fCell.innerHTML + '</div>';
			}
		};

		
		
		
		if (hWidth < fWidth) {
			imgWidth = fWidth - hWidth;
			if (hCell.innerHTML.indexOf('.gif') != -1) {
				imgWidth = imgWidth + 10;
			}
			hCell.firstChild.innerHTML += "<img style=\"height: 0px; width: " + imgWidth + "px\" />";
		}

		// resize the header cell to match the corresponding cell in the first row
		if (isSafari){	 							// Safari specific
 			hCell.width = fCell.offsetWidth;
			if (i < 1) hCell.style.width = fCell.offsetWidth + 1;
		} else if (isNetscape) { 					// Netscape specific
			//hCell.width = fCell.offsetWidth - 5;
			hCell.width = fCell.offsetWidth - 6;
			// Will cause the very first header cell to have a left border...this fixes an alignement prob. specific to NN/Firefox/Mozilla
			if (i < 1) hCell.style.borderLeft = 'transparent solid 2px';
 		} else {									// IE specific
 			hCell.width = fCell.offsetWidth;
 		}

		
	}

	// set initial scrollLeft, if it was passed to page as dg_x in query line
	if (typeof(dg_x) == "number") {
		dDiv.scrollLeft = dg_x;
	};
	
	//if (dg_x) dDiv.scrollLeft = dg_x;
	
	// align scroll of header and data
	hDiv.scrollLeft = dDiv.scrollLeft;
	var xScrollPresent = dDiv.offsetWidth < dTable.offsetWidth 		? true 	: false;
	var yScrollPresent = dDiv.offsetHeight <= dTable.offsetHeight 	? true 	: false;
	
	// set vars to indicate if scrollbars are present
	
	// if the div width is wider than the table width, we need to adjust it so it corresponds
	// to the table dims.
	if (xScrollPresent) {
		if (isIE || (isFireFox && isMac) || isSafari) {
			var IEpixel = isIE ? 2 : 0;
			hDiv.style.width = dDiv.offsetWidth - 15 - IEpixel;
			if (yScrollPresent) {
				hToolsDiv.style.width = hToolsDiv.offsetWidth - 15 - IEpixel;
			}
		} else {
			hDiv.style.width = dDiv.offsetWidth - 19;
			if (yScrollPresent) {
				hToolsDiv.style.width = hToolsDiv.offsetWidth - 18;
			} else {
				hToolsDiv.style.width = hToolsDiv.offsetWidth;
			}
		}
		
	} else {
		// if here, then there is no horizontal scrollbar
		hDiv.style.width = dTable.offsetWidth;
		dDiv.style.width = dTable.offsetWidth + 19;
		// compensate for lack of scrollbar and make the tools vertical div higher
		if (isIE) {
			toolsDiv.style.height = toolsDiv.offsetHeight + 16;
			
			//alert(hTable.offsetWidth);
//			hToolsDiv.style.width = hTable.offsetWidth;
		} else {
			toolsDiv.style.height = toolsDiv.offsetHeight + 14;
//			hToolsDiv.style.width = hToolsDiv.offsetWidth - 18;
//			hToolsDiv.style.width = hTable.offsetWidth;
		}
	}
	
	// fix position of view stats...only need to do this when both x and y scroll are not present
	if (!xScrollPresent && !yScrollPresent) {
		viewStats.style.marginTop = '-16px';
		if (isIE) {
			viewStats.style.marginRight = '10px';
		} else {
			viewStats.style.marginRight = '20px';
		}
	}

	
	// add a boder to the last row of thedata table to match the tools div
	lastRow = dTable.rows[dTable.rows.length - 1];
	lastTDs = lastRow.getElementsByTagName('td');
	for (i=0;i<lastTDs.length;i++) lastTDs[i].style.borderBottom = 'black solid 1px';
	dTable.style.borderBottom = 'silver solid 1px';
	lastRow.style.height = lastRow.offsetHeight ;
	// if the tools div height is higher than the data div height, we need to adjust it so it corresponds
	if (!yScrollPresent) {
		// if here, then there is no vertical scroll bar
		IEpixel = isIE ? -2 : 0;
		SafariPixel = isSafari ? -4 : 0;
		dDiv.style.height = dTable.offsetHeight + 19 + IEpixel;
		if (xScrollPresent) hDiv.style.width = hDiv.offsetWidth + 17  + SafariPixel;
		// IE needs to subtract 1 pixel from the toolsDiv height
		var IEpixel = isIE ? 1 : 0;
		// match the toolsDiv & dDiv heights to the height of the data table
		toolsDiv.style.height = dTable.offsetHeight - 1 + IEpixel;
		dDiv.style.height = dDiv.offsetHeight;
	} else {
		if (isIE || (isFireFox && isMac) || isSafari || (isNetscape && !xScrollPresent)) {
			// if only y scroll present, we need to add one xtra pixel for IE
			var IEpixel = isIE && !xScrollPresent ? 1 : 0;
			toolsDiv.style.height = toolsDiv.offsetHeight + 3 + IEpixel;
		}

	}
	
	
	if (isSafari) {
		// Resize the top left div to Safari specific dims...on first run only
		if (gridInitCount < 1) topLeftTD.style.width = topLeftTD.offsetWidth + 4;
	}
	
	if (isIE) {
		topLeftTD.style.width = topLeftTD.offsetWidth - 2;
	}
	

	if (gridInitCount < 1) toolsDiv.style.width = toolsDiv.offsetWidth;
	
	// align scroll JUST in case this the browser maintains scroll position when clicking back to the page, which IE does
	toolsDiv.scrollTop = dDiv.scrollTop; 
	hDiv.scrollLeft = dDiv.scrollLeft; 

	// make the data grid appear....this is done because the cells can sometimes be seen
	// resizing on slower systems
	
	// size the horiz toolbar above the datagrid
	SafariPixels = isSafari ? 5 : 0;
	hToolsDiv.style.width = hTable.offsetWidth - SafariPixels;

	
	// Change the display on the dummy table, so it doesn't make the horizontal scrollbar appear
	dummyTable.style.display = 'none';
	//dataGrid.removeChild(dummyTable);
	
	
	// run this code one more time....seems to fix stuff :O|
	// if the data grid table has a larger width than the width of the content area, we need to resize it to fit
	if (dataGrid.offsetWidth > contentDiv.offsetWidth || true) {
		// new width should equal the contentDiv width, minus the vertical scrollbar width if present, minus a little room on the sides
		var yScrollBarWidth = contentDiv.offsetHeight < contentDiv.scrollHeight || true? 24 : 0;
		dataGrid.style.width = (contentDiv.offsetWidth - yScrollBarWidth) + 'px';
	}

	
	
	dataGrid.style.visibility = 'visible';
	//track number of times we've called this function
	gridInitCount++;
	
}