// ===================================================================================
// SCRIPT:  DynamicDisplayGrid2
// CREATED: 06/02/2005
// AUTHOR:  Jeremy Stockman
// -----------------------------------------------------------------------------------
// DESCRIPTION:
//
//   This defines a type of object, called "DynamicDisplayGrid", 
//   which will render a table with a set of buttons on the left.
//   When the user does a mouseover on these buttons, the
//   content displayed in the right column will change.
//
//   Example:
//   +--------------+-----------------------------+
//   | [BUTTON1]<-- | Message 1                   |
//   +--------------+                             |
//   | [BUTTON2]    |                             |
//   +--------------+                             |
//   | [BUTTON3]    |                             |
//   +--------------+                             |
//   | [BUTTON4]    |                             |
//   +--------------+-----------------------------+
//
//   The user's mouse pointer is over button 1, so 
//   message 1 is being displayed in the region
//   to the right.
//
//   NOTE: This is a modified version of the original DynamicDisplayGrid.
//   This version supports images for the buttons, where the images change
//   when the user selects them. Also, the associated display will remain
//   visible until the user selects another button (via mouseover).
//
// -----------------------------------------------------------------------------------
// FIELDS:
//   Size = number of dynamic regions (auto-incremented)
//   DefaultDisplay = HTML to display when no button is selected
// -----------------------------------------------------------------------------------
// USAGE:
//   var objDisplay = new DynamicDisplayGrid();
//   objDisplay.DefaultDisplay = "Message 0";
//   objDisplay.add("Button1.gif", "Message 1", "#");
//   objDisplay.add("Button2.gif", "Message 2", "http://www.cybertrader.com");
//   objDisplay.add("Button3.gif", "Message 3", "#");
//   objDisplay.add("Button4.gif", document.getElementById("divRegion4").innerHTML, "#");
//   objDisplay.render();
//
//   Note, if you wish to pass in a large amount of HTML,
//   you can use the innerHTML property of a hidden DIV
//   that contains the HTML you wish to pass in.  
//   (See example above for Button 4.)
//   
// ===================================================================================

// ===========================================================
// FUNCTION: DynamicDisplayGrid
// CREATED:  06/02/2005
// AUTHOR:   Jeremy Stockman
// -----------------------------------------------------------
// DESCRIPTION: 
//   Creates a DynamicDisplayGrid object.
// -----------------------------------------------------------
// ARGUMENTS:
//   None.
// -----------------------------------------------------------
// USAGE:
//   var objDisplay = new DynamicDisplayGrid();
// ===========================================================
function DynamicDisplayGrid()
{
	this.Size = 0;
	this.DefaultDisplay = "";
	this.Buttons = new Array();
	this.Displays = new Array();
	this.Hrefs = new Array();
	
	//Added a new array to hold a flag indicating whether the url should open in a new window
	//Jen Daniels
	//01/11/2006
	this.NewWindows = new Array();
}

// ===========================================================
// FUNCTION: DynamicDisplayGrid.add
// CREATED:  06/02/2005
// AUTHOR:   Jeremy Stockman
// -----------------------------------------------------------
// DESCRIPTION: 
//   Adds a button and display region to the grid.
// -----------------------------------------------------------
// ARGUMENTS:
//   strButton = image file to use for button
//   strDisplay = associated display text or HTML
//   strHref = URL to link button to
// -----------------------------------------------------------
// USAGE:
//   var objDisplay = new DynamicDisplayGrid();
//   objDisplay.add("Button 1", "Message 1", "#");
// ===========================================================
DynamicDisplayGrid.prototype.add = function(strButton, strDisplay, strHref, blnNewWindow)
{
	this.Buttons[this.Size] = strButton;
	this.Displays[this.Size] = strDisplay;
	this.Hrefs[this.Size] = strHref;
	this.NewWindows[this.Size] = blnNewWindow;
	this.Size++;
}

// ===========================================================
// FUNCTION: DynamicDisplayGrid.render
// CREATED:  06/02/2005
// AUTHOR:   Jeremy Stockman
// -----------------------------------------------------------
// DESCRIPTION: 
//   Renders the DynamicDisplayGrid.
// -----------------------------------------------------------
// ARGUMENTS:
//   None.
// -----------------------------------------------------------
// USAGE:
//   var objDisplay = new DynamicDisplayGrid();
//   objDisplay.render();
// ===========================================================
DynamicDisplayGrid.prototype.render = function()
{
	// Write out the HTML to display the grid.
	var strNewWindow;
	document.write("<div id=\"divGridWrapper\">");
	
	// Start a table.
	document.write("   <table cellspacing=\"0\" cellpadding=\"0\">");
	document.write("     <tr>");

	// Create the table cell to hold the buttons.
	document.write("       <td id=\"tdDynButtons\" valign=\"top\">");

	// Write out the buttons.
	for (var i=0;i<this.Size;i++)
	{
	  if (this.NewWindows[i] == true){
	    strNewWindow = " target='new_window' ";
	  } else {
	    strNewWindow = "";
	  }
	  document.write("	       	<div><a href='" + this.Hrefs[i] + "'" + strNewWindow + "><img id=\"imgButton" + (i+1) + "\" src='" + this.Buttons[i] + "' /></a></div>");
	}

	// Close the table cell that holds the buttons.
	document.write("       </td>");

	// Create the table cell to hold the display items.
	document.write("       <td valign=\"top\">");

	// Create the default display item.
	document.write("		<div class=\"displayRegion\" id=\"divDisplay0\" style=\"display: block;\">" + this.DefaultDisplay + "</div>");
	
	// Write out the display items for each button.
	for (var i=0;i<this.Size;i++)
	{
	  document.write("		<div class=\"displayRegion\" id=\"divDisplay" + (i+1) + "\">" + this.Displays[i] + "</div>");
	}

	// Close the table cell that holds the display items, and close the table.
	document.write("       </td>");
	document.write("     </tr>");
	document.write("   </table>");

	document.write("</div>");

	// Setup the event handlers for each button.
	document.write("<script>");
	for (var i=0;i<this.Size;i++)
	{
	  document.write("  document.getElementById(\"imgButton" + (i+1) + "\").onmouseover = fire;");
	}

	// Build the function that will be used to prepare for the "fire" event by
	// hiding all the display areas and switching any inverted buttons to their normal display.	
	document.write("function extinguishAll()");
	document.write("{");
	for (var i=0;i<this.Size;i++)
	{
		document.write("		document.getElementById('imgButton" + ((i*1)+1) + "').src = document.getElementById('imgButton" + ((i*1)+1) + "').src.replace('_invert.gif', '.gif'); ");
		document.write("		document.getElementById('divDisplay" + ((i*1)+1) + "').style.display = 'none';");
	}
	document.write("}");

	document.write("</script>");

}


// ===========================================================
// FUNCTION: fire
// CREATED:  06/02/2005
// AUTHOR:   Jeremy Stockman
// -----------------------------------------------------------
// DESCRIPTION: 
//   Event handler for showing the display region associated
//   with a DynamicDisplayGrid button.
// -----------------------------------------------------------
// ARGUMENTS:
//   e = Mozilla event (does not need to be explicitly passed)
// -----------------------------------------------------------
// USAGE:
//   document.getElementById("imgButton1").onmouseover = fire;
// ===========================================================
function fire(e) 
{
	var strEventElementId;
	var intElementNumber;

	// Get the element id that triggered the event.
	if (window.event)
	{
		// Get element id from IE-compatible browser.
		strEventElementId = window.event.srcElement.id;
	} 
	else 
	{
		// Get element id from Mozilla browser.
		strEventElementId = e.target.id;
	}

	// Hide all visible display areas and flip any inverted buttons
	// to normal mode, in preperation for what we are going to do
	// in this function.
	extinguishAll();

	// Hide the default display region.
	document.getElementById("divDisplay0").style.display = 'none';

	// Extract the id # from the element ID.
	intElementNumber = strEventElementId.replace(/[A-Za-z]*/, "");

	// Show the display region associated with the button that fired the event.
	document.getElementById("divDisplay" + intElementNumber).style.display = 'block';
	
	document.getElementById(strEventElementId).src = document.getElementById(strEventElementId).src.replace(".gif", "_invert.gif"); 
}

// ==================================================================
// FUNCTION: extinguish
// CREATED:  06/02/2005
// AUTHOR:   Jeremy Stockman
// ------------------------------------------------------------------
// DESCRIPTION: 
//   Event handler for hiding the display region associated
//   with a DynamicDisplayGrid button.
// ------------------------------------------------------------------
// ARGUMENTS:
//   e = Mozilla event (does not need to be explicitly passed)
// ------------------------------------------------------------------
// USAGE:
//   document.getElementById("imgButton1").onmouseover = extinguish;
// ==================================================================
function extinguish(e) 
{
	var strEventElementId;

	// Get the element id that triggered the event.
	if (window.event)
	{
		// Get element id from IE-compatible browser.
		strEventElementId = window.event.srcElement.id;
	} 
	else 
	{
		// Get element id from Mozilla browser.
		strEventElementId = e.target.id;
	}

	  
	// Extract the id # from the element ID.
	intElementNumber = strEventElementId.replace(/[A-Za-z]*/, ""); 

	// Hide the display region associated with the button that fired the event.
	document.getElementById("divDisplay" + intElementNumber).style.display = 'none';

	// Show the default display region.
	document.getElementById("divDisplay0").style.display = 'block';

}