// ===================================================================
// EXPANDABLE ROWS - v1.4
// Author: Dave Swift
//
// Creative Commons Attribution-ShareAlike 2.5 License
// View license: http://creativecommons.org/licenses/by-sa/2.5/
//
// You are free:
//   - to copy, distribute, display, and perform the work 
//   - to make derivative works 
//   - to make commercial use of the work 
//
// Under the following conditions:
//   - Attribution. You must attribute the work in the manner
//     specified by the author or licensor. 
//   - Share Alike. If you alter, transform, or build upon this
//     work, you may distribute the resulting work only under a
//     license identical to this one. 
//
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================


// HISTORY
// ------------------------------------------------------------------
// Nov 12, 2006: Version 1.0 written.
// Nov 16, 2006: Optional row colors were added.
// Nov 17, 2006: Firefox highlighting issue resolved.
// Feb 16, 2007: Initial mouse position highlight error resolved.
// May 07, 2007: Auto-expand by using anchor syntax with tr ID
// ------------------------------------------------------------------


// INSTRUCTIONS
// ------------------------------------------------------------------
// Follow the steps below:
//
//   1. Simply include this javascript file in your page.
//   2. Add "initExpandableRows();" to the body's onload.
//   3. Make the desired table(s) have the class "ExpandableRows"
//   4. Add "<span class="Sign">&nbsp;</span>" to each even row
//
//   NOTE: You may select your own row colors by passing hex color
//   codes in the initExpandableRows function.  The first color 
//   is the first row and every other after.  The second color
//   is the second row and every other after.  The third color
//   is the color that is used when the user mouseovers a row.
//
//   Example:
//   onload="initExpandableRows('#FFFFFF', '#F0F0F0', '#FFEAA8');"
//
//   NOTE: Every other row in the table will be hidden and they will
//   become the expanded sections when the row above it is clicked.
//   You may add a table heading row by using the TH tages.
// ------------------------------------------------------------------



//Walk thru each table on the entire page
function initExpandableRows(Color1, Color2, HighlightColor) {
	if(!Color1) Color1 = '#FFFFFF';
	if(!Color2) Color2 = '#F0F0F0';
	if(!HighlightColor) HighlightColor = '#FFEAA8';
	
	var Count = 0;
	var tables = document.getElementsByTagName("table");
	for (var x=0; x<tables.length; x++) {
		if (tables[x].className == "ExpandableRows") {
			
			//Find the TBODY
			for(var y=0; y<tables[x].tBodies.length; y++) {
				for(var z=0; z<tables[x].tBodies[y].rows.length; z++) {
					
					//skip table headers (th)
					if(tables[x].tBodies[y].rows[z].innerHTML.toLowerCase().indexOf('<th') != -1) continue;
					
					//Find even and odd rows
					var Row1 = tables[x].tBodies[y].rows[z];
					var Row2 = tables[x].tBodies[y].rows[++z];
					
					//Set them up to work with each other
					if(Row1 && Row2) new ExpandableRow(Row1, Row2, (++Count%2 ? Color1 : Color2), HighlightColor);	
				}
			}
		}
	}
	
	//Search for anchor to auto-open row
	var hash = window.location.hash.substring(1);
	try { var linkObj = document.getElementById(unescape(hash)); linkObj.onclick(); }
	catch(err) {}	
}


function ExpandableRow(r1, r2, bg, hl) {	
	var Row1 = r1;
	var Row2 = r2;
	var Sign;
	
	var BackgroundColor = bg;
	var HighlightColor = hl;
	
	this.toggleDetails = toggleDetails;
	
	var spans = Row1.getElementsByTagName("span");
	for (var x=0; x<spans.length; x++) {
		if (spans[x].className == "Sign") { Sign = spans[x]; break; }
	}	
	
	//Cross browser compatibility... blah
	if(document.layers || (document.getElementById && !document.all)) {
		Row2.style.display = 'table-row';	//Firefox/Netscape
	} else {
		Row2.style.display = 'inline';		//Internet Explorer
	}
	Row2.style.display = 'none';
	Sign.innerHTML = '+';
	Sign.style.fontFamily = 'font-family: Courier, "Courier New", monospace;';
		
	Row1.onmouseover = function() { Row1.style.backgroundColor = HighlightColor; Row2.style.backgroundColor = HighlightColor; }
	Row1.onmouseout = function() { Row1.style.backgroundColor = BackgroundColor; Row2.style.backgroundColor = BackgroundColor; }
	Row2.onmouseover = function() { Row1.style.backgroundColor = HighlightColor; Row2.style.backgroundColor = HighlightColor; }
	Row2.onmouseout = function() { Row1.style.backgroundColor = BackgroundColor; Row2.style.backgroundColor = BackgroundColor; }
	Row1.onclick = toggleDetails;
	Row2.onclick = toggleDetails;
	
	Row1.style.backgroundColor = BackgroundColor;
	Row2.style.backgroundColor = BackgroundColor;
	Row2.style.display = 'none';
	
	
	function toggleDetails() {
		//If the details are hidden, show 'em
		if(Sign.innerHTML == '+') { 
			
			//Cross browser compatibility... blah
			if(document.layers || (document.getElementById && !document.all)) {
				Row2.style.display = 'table-row';	//Firefox/Netscape
			} else {
				Row2.style.display = 'inline';		//Internet Explorer
			}
			
			//Changes the + to a -
			Sign.innerHTML = '&#8211;';
		
		//else, hide the details
		} else { 
			Row2.style.display = 'none';
			Sign.innerHTML = '+';			
		}
	}
}