///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Bar Graph Functions.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Write an empty row to the current table.
function WriteEmptyTableRow()
{
    document.writeln("<tr>");
    WriteEmptyTableCell(1);
    document.writeln("</tr>");
}

// Write an empty cell to the current table.
// nNumSpaces: Number of non-breaking spaces the cell should contain.
function WriteEmptyTableCell(nNumSpaces)
{
    document.write("<td>");
    for (var i = 0; i < nNumSpaces; i++)
        document.write("&nbsp;");
    document.writeln("</td>");
}

// Write a bar graph to the current document.
// szTitle: String title of the graph.
// szYAxisName: String name/label for the y-axis.
// szXAxisName: String name/label for the x-axis.
// szaPoints: Array of numbers such that f(i) = szaPoints[i].
// szaUnitHeight: Height in pixels for a bar of unit magnitude (i.e. height = 1).
// szaWidth: Width in pixels for each bar.
function RenderBarGraph(szTitle, szYAxisName, szXAxisName, nPoints, szaUnitHeight, szaWidth)
{
    // Variables for formatting.
    var NUM_COLUMNS = nPoints.length + 2;
    
    // Write the bar graph into a table object with only an outer border.
    // Opera is currently messing up with table borders, so if the browser is Opera we will just not use any border.
    if (navigator.userAgent.indexOf("Opera") != -1)
        document.writeln("<table border='0' cellspacing='0' cellpadding='0'>");
    else
        document.writeln("<table border='1' frame='box' rules='none' cellspacing='0' cellpadding='0'>");
    
    // Spacing.
    WriteEmptyTableRow();
    
    // Write the title.
    document.writeln("    <tr align='center'>");
    document.writeln("        <td colspan='" + NUM_COLUMNS + "'>");
    document.writeln(             szTitle);
    document.writeln("        </td>");
    document.writeln("    </tr>");
    
    // Write the Y-Axis Label.
    document.writeln("    <tr align='center'>");
                              WriteEmptyTableCell(2);
    document.writeln("        <td valign='center'>");
    for (var i = 0; i < szYAxisName.length; i++)
        document.write(szYAxisName.charAt(i) + "&nbsp;<br />");
    document.writeln("");
    document.writeln("        </td>");
    
    // Draw the actual graph.
    for (var i = 0; i < nPoints.length; i++)
    {
        var height = szaUnitHeight * nPoints[i];

        document.write("<td valign='bottom'>");

        if (i == 0)
        {
            document.write(nPoints[i] + "<br /><img src='Code/Blue Square.jpg' " + 
                                                   "height='" + height + "' " +
                                                   "width='" + szaWidth + "'>");
        }
        else
        {
            document.write(nPoints[i] + "<br /><img src='Code/Red Square.jpg' " + 
                                                   "height='" + height + "' " +
                                                   "width='" + szaWidth + "'>");
        }

        document.writeln("</td>");
    }
    WriteEmptyTableCell(2);
    document.writeln("    </tr>");
    
    // Write the X-Axis Scale.
    document.writeln("    <tr align='center'>");
                              WriteEmptyTableCell(2);
                              WriteEmptyTableCell(1);
    for (var i = 0; i < nPoints.length; i++)
        document.writeln("<td>" + i + "</td>");
    document.writeln("    </tr>");
    
    // Write the X-Axis Label.
    document.writeln("    <tr align='center'>");
                              WriteEmptyTableCell();
    document.writeln("        <td colspan='" + NUM_COLUMNS + "'>");
    document.writeln(             szXAxisName);
    document.writeln("        </td>");
    document.writeln("    </tr>");
    
    // Spacing.
    WriteEmptyTableRow();
    
    document.writeln("</table>");
}