// JScript source code

/// <summary>
/// Adds data to the comparison table
/// <param name="columns">The headings of the table columns</param>
/// <param name="logic">The to use in the table</param>
/// </summary>
function AddDataToComparisonTable(columns, logic)
{				   
    var table = document.getElementById( "ComparisonTable" );
    table.columns = columns;
    table.logic = logic;

	// Add the Table headers to the table
	table = CreateTableHeader( table, columns );
	CreateTableBody( table, columns, logic.get( "default" ) );
	
	PreloadImages();
}

function PreloadImages()
{
	if (document.images) 
	{
		var array = new Array( "http://www.cioview.com/images/product_table/checked.gif", "http://www.cioview.com/images/product_table/unchecked.gif", "http://www.cioview.com/images/product_table/selected.gif", "http://www.cioview.com/images/product_table/disabled.gif" );
		
		for( var i = 0; i < array.length; i++ )
		{
			var image = new Image();
			image.src = array[ i ];
		}
	}
}

/// <summary>
/// Binds a javascript function to a dynamically generated HTML element
/// <param name="element">The Element to bind the function to</param>
/// <returns>A function declaration/returns>
/// </summary>
function Bind(element)
{	
	return function(){ UserSelection_OnClick(element); }
}

/// <summary>
/// Event handler for changing dynamic HTML base on user input
/// <param name="element">The Element that the user has selected</param>
/// </summary>
function UserSelection_OnClick(element)
{ 	
	var table = document.getElementById( "ComparisonTable" );
	var image = document.getElementById( element.id + "_Img" );
	var logic = table.logic;
	
	// Get the table set-up
	var operation = logic.get(document.getElementById( element.id ).operation);
		
	// If the user has already selected this revert to the default state
	if( image.src.substring( image.src.lastIndexOf("/")+1 ) == 'http://www.cioview.com/images/product_table/selected.gif' )
		ToggleImages( logic.get( "default" ), table.columns.length );

	else
	{
		// Get the updated row data
		var data = SetSelectedState( operation, element.id )
		ToggleImages( data, table.columns.length );
	}
}

/// <summary>
/// Sets the table row state to account for the user selection
/// <param name="data">The data for the table row</param>
/// <returns>An updated version of the data row accounting for the user selection/returns>
/// </summary>
function SetSelectedState(data, elementId)
{
	var rVal = new Array();

	for( var dataSet = 0; dataSet < data.length; dataSet++ )
	{
		var element = data[ dataSet ].split(',');
		
		if( element[0] == elementId.substring(0, elementId.lastIndexOf( "_" )) )
			element[ elementId.substring(elementId.lastIndexOf( "_" )+1) ] = "S";
	
		rVal.push( element.toString() );
	}
	
	return rVal;
}

/// <summary>
/// Toggle images based on row values
/// <param name="data">The data row information</param>
/// </summary>
function ToggleImages(data, numberOfColumns)
{
	// For each row in the table
	for( var dataSet = 0; dataSet < data.length; dataSet++ )
	{
		var element = data[ dataSet ].split(',');
		
		// For each column
		for( var col = 1; col < numberOfColumns; col ++ )
		{
			var image = document.getElementById( element[0] + "_" + col + "_Img" );
			var imageId = element[ col ].replace(/^\s*|\s*$/g,"");
			
			if( imageId.length == 2 )
				imageId = imageId.substring( 0, 1 );

			// Set the image correctly based on its identifier
			image.src = GetImageName( imageId );
		}
	}
}

function BindMessage(element)
{	
	return function(){ Msg(element); }
}

function Msg(element)
{ 	
	elem = document.getElementById( "ComparisonTable" );
	
	alert( elem.logic.get("A") );
}

/// <summary>
/// Creates the table header 
/// <param name="table">The table that will contain the table header</param>
/// <param name="columns">The array containing the column headings</param>
/// <returns>The modified table</returns>
/// </summary>
function CreateTableHeader(table, columns)
{
	var tableHeader = document.getElementById( "ComparisonTableHeader" );
			
	// Generate new node to be assembled in memory
	var newTableHeader = document.createElement( "thead" );
	newTableHeader.id = "ComparisonTableHeader";
	
	// generate fragment container for thead assembly
	var docFragment = document.createDocumentFragment();
	var trElem, tdElem;
	
	// Create a new row for the table header
	trElem = document.createElement("tr");
	trElem.className = "tableHead";	
	tdElem = AddDataToTableRow( trElem, columns.length, columns );		
	
	docFragment.appendChild( trElem );
	newTableHeader.appendChild( docFragment );
	
	// Insert new thead into the document tree table
	table.replaceChild( newTableHeader, tableHeader );	
	
	return table;
}

/// <summary>
/// Creates the table body
/// <param name="table">The table that will contain the table body</param>
/// <param name="columns">The array containing the column headings</param>
/// <param name="rows">The array containing the rows to add to the table</param>
/// </summary>
function CreateTableBody(table, columns, rows)
{
	var tableBody = document.getElementById( "ComparisonTableBody" );
	
	// Generate new node to be assembled in memory
	var newTableBody = document.createElement("tbody");
	newTableBody.id = "ComparisonTableBody";
    
    // generate fragment container for tbody assembly
	var docFragment = document.createDocumentFragment();
	var trElem, tdElem;
		
	for( var i = 0; i < rows.length; i++ )
	{
		// Create a new row for the table
		trElem = document.createElement("tr");
		trElem.className = "table";
		tdElem = AddDataToTableRow(trElem, columns.length, rows[ i ].split(',') );
		// Griz: May only need column length
		docFragment.appendChild( trElem );
	}
	newTableBody.appendChild( docFragment );
	
	// Insert new tbody into the document tree table
	table.replaceChild( newTableBody, tableBody );
}

/// <summary>
/// Adds data to a table row
/// <param name="trElem">A table row element that will contain the table data</param>
/// <param name="numberOfColumns">The number of columns in the table</param>
/// <param name="rowData">The data to add to the table row</param>
/// <returns>The modified table row</returns>
/// </summary>
function AddDataToTableRow(trElem, numberOfColumns, rowData)
{	
	// Add the data for each column
	for( var col = 0; col < numberOfColumns; col++ )
	{
		var data = rowData[ col ].replace(/^\s*|\s*$/g,"");
		var operation = null;
		
		if( data.length == 2 )
		{
			operation = data.substring( 1 );
			data = data.substring( 0, 1 );
		}
		
		var tdElem = document.createElement("td");
		
		// If this is a place holder then we want to use the correct style.
		if( data == "" )
			tdElem.className = "placeHolder";
		else if( IsDataState(data) || col == 0 ) 
		{
			tdElem.className = (col == 0) ? "rowLabel" : "row";	// Otherwise we are adding a data row
		
			if( col != 0 )
			{
				tdElem.id = rowData[ 0 ] + "_" + col;
				tdElem.operation = operation;
				tdElem.onclick = Bind( tdElem );
				//tdElem.defaultValue = data;
			}
		}
		
		tdElem.appendChild( GetTableDataNode(data, tdElem.id) );
		trElem.appendChild( tdElem );
	}
	
	return trElem;
}

/// <summary>
/// Gets the data node needed for the table
/// <param name="data">The current data being added to the table</param>
/// <param name="tableDataId">The ID of the table data node that the image is being placed into</param>
/// <returns>An image node or text node to be added to the table</returns>
/// </summary>
function GetTableDataNode(data, tableDataId)
{
	var node;
	
	if( IsDataState(data) )
	{		
		node = document.createElement( "img" );
		node.id = tableDataId + "_Img";
		node.src = GetImageName( data );
	}
	else
		node = document.createTextNode( data );
	
	return node;
}

/// <summary>
/// Gets the name of the image to use in the table
/// <param name="imageId">The id of an image to be displayed in the table</param>
/// <returns>The url to use in the SRC of the image tag</returns>
/// </summary>
function GetImageName(imageId)
{
	var imageName = null;
	
	switch( imageId )
	{
		case "1" :
			imageName = "http://www.cioview.com/images/product_table/checked.gif";
			break;
		case "0" :
			imageName = "http://www.cioview.com/images/product_table/unchecked.gif";
			break;
		case "S" :
			imageName = "http://www.cioview.com/images/product_table/selected.gif";
			break;
		case "X" :
			imageName = "http://www.cioview.com/images/product_table/disabled.gif";
			break;
	}

	return imageName;
}

/// <summary>
/// Tests to see if the data is state related
/// <param name="data">The current data being added to the table</param>
/// <returns>True if the data is state data, otherwise returns false</returns>
/// </summary>
function IsDataState(data)
{	
	return (data == "1" || data == "0" || data == "S" || data == "X");
}



function clearTbody() 
{
	var tbody = document.getElementById("ComparisonTable");
   
	try
	{
	alert( tbody.firstChild.id );
		while (tbody.childNodes.length > 0)
		{
			tbody.removeChild( tbody.firstChild );
		}
	}
	catch(err)
	{
		alert(err);
	}
}