// Create a graph without graphics. Displays a confidence level, a margin-of-error range, and a scale.
// Created by Mark Wilson, cpuworks.com (wilson@cpuworks.com), December 13 2007.
// For a working example, see http://cpuworks.com/tutorials/graphs_without_graphics.html

function showConfidenceGraph(confidence, marginoferror) {
	var graphWidth = 80;	// Sets the scale; 80 pixels = 100%
	var basePicWidth = 81;	// Actual width of base  and scale graphics; 1 extra pixel for border
	var basePicHeight = 7;	// Actual height of the full-size graphics
	// We set the width of the line to be drawn in pixels, rounded up.
	// The margin-of-error is PLUS/MINUS:
	// Full confidence = 0 to (confidence - marginoferror)
	// Partial confidence = (confidence - marginoferror) to (confidence + marginoferror)
	// We put a line/pointer at the nominal confidence level (i.e., the center of the displayed margin of error)
	// Finally, we put a scale graphic on top.
	// Width of full-confidence line:
	var confidenceWidth = parseInt( ((confidence - marginoferror) * (graphWidth/100)) + 0.5);
	if (confidenceWidth < 0) confidenceWidth = 0;
	// Location of confidence pointer
	var confidenceLoc = (parseInt( ((confidence) * (graphWidth/100)) + 0.5));
	if (confidence == 0) confidenceLoc = 0;
	var marginoferrorWidth = parseInt( ((confidence + marginoferror) * (graphWidth/100)) + 0.5);
	var code = "<div class='showconf'>\n";
	code += "<img class='graph_base' src='./images/graph_base.gif' style='z-index: 101'>\n";
	if (marginoferrorWidth > 0) {
		code += "<img class='graph' src='./images/graph_marginoferror.gif' style='z-index: 102' width='" + marginoferrorWidth + "' height='" + basePicHeight + "'>\n";
	}
	if (confidenceWidth > 0) {
		code += "<img class='graph' src='./images/graph_confidence.gif' style='z-index: 103' width='" + confidenceWidth + "' height='" + basePicHeight + "'>\n";
	}
	if (confidenceLoc > 0) {
		code += "<img class='graph' src='./images/graph_confidence_pointer.gif' style='position:absolute; top: 3px; left:" + confidenceLoc + "px;z-index: 103'>\n";
	}
	code += "<img class='graph_base' src='./images/graph_scale.gif' style='z-index: 105' width='" + basePicWidth + "' height='" + basePicHeight + "'>\n";
	code += "<br /><span class='graph_text'>" + confidence + " &plusmn; " + marginoferror + "</span>\n</div>\n";
	return code;
}