// estylez_drawps.js
// By Lauren Smith
//
// Provides support functions for capturing and displaying the HTML on the Products & Services template in
// a repeating horizontal table.


/* ================================================================================================================================== INSTRUCTIONS

	These are the steps to implement this functionality in the products & services template:
	
	-	Mock up the P&S repeating table as you want it to look.
	
	-	Inside each table cell (or div depending on how you laid it out) put a <div> like this: <div id="ps_container_~~row~~_0">,
		then <div id="ps_container_~~row~~_1">, etc. for as many of these "containers" as you have.  Note that it is necessary
		in mordern browsers to wrap the _inside_ of the cell; you can't rely on putting divs in the middle of your table
		structure anymore (it can break the table layout and/or cause odd rendering behavior).
			
	-	Make sure to set the "global_numOfPSContainers" to the number of containers you end up with (so the container index plus
		one).
			
	-	At the end of the repeating table, insert the lines of javascript that append the array with all of the containers' data.
		(See template for example.)
	
	-	At that point all of your HTML for each container will be in your 2D array and ready for output.
	
	-	Build your implementation-specific output functionality as the project dictates, using the data from the array and the
		layout you already built.  Just draw out the same table in HTML, and replace the chunks of HTML inside the table cells
		with calls to the array.
	
*/


// ================================================================================================================================== GLOBALS AND CONFIGURATION

var global_numOfDisplayCols = 4;		// This is the number of columns to display in the output table.

var global_numOfPSContainers = 3;		// *** This MUST match the number of capture containers you use in the P&S repeating table.

var global_pscontainer = new Array();


// ================================================================================================================================== SUPPORT FUNCTIONS

function deleteThisNode(oTarget)
{
	oTarget.parentNode.removeChild(oTarget);
}


// ================================================================================================================================== IMPLEMENTATION-SPECIFIC

function drawPSContent()
{
	var sOut = "";
	var iColCount = 0;			// Holds the number of columns we've drawn on the current row.
	
	sOut += "<table border='0' cellpadding='0' cellspacing='0' style='border-top: 1px solid #dcdcdc;'>" + "\n";
	//sOut += "<tr><td></td><td></td><td></td><td></td></tr>";
	for (var i=0; i < global_pscontainer.length; i++)		// Loop through each row of the 2D array.
	{
		if (iColCount == 0) { sOut += "<tr>" + "\n"; }
		
		sOut += "<td style='text-align: center; width: 159px; border-right: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; padding: 15px 19px 12px 19px; vertical-align: top;'>" + "\n";
		sOut += global_pscontainer[i][0] + "\n";
		sOut += "<br>" + "\n";
		sOut += global_pscontainer[i][1] + "\n";
		sOut += "" + "\n";
		sOut += global_pscontainer[i][2] + "\n";
		sOut += "</td>" + "\n";
		
		iColCount++;
		
		if (iColCount == global_numOfDisplayCols)
		{
			sOut += "</tr>" + "\n";
			iColCount = 0;
		}		
	}
	
	// Finish the last row if necessary.
	if (sOut.substring(sOut.length - 5, sOut.length) != "</tr>") { sOut += "</tr>"; }
	sOut += "</table>" + "\n";
	
	document.write(sOut);
}