/*
 * Graph ()
 *  Represent the class for Graph to be displayed after MOS test finished
 *	The graphs are :
 *		1. MOS Test graph
 *		2. Database graph
 */
function Graph(graph_Id, noload_mos, load_mos)
{
	this.graph_Id = document.getElementById (graph_Id);
	var performance_array = new Array("Poor", "Bad", "Medium", "Good", "Excellent");
	var width_array = new Array(80, 160, 240, 320, 400);
	var mos_bar_width = parseFloat(load_mos) * 80;
    
	var bar_color_array = new Array("rgb(237, 112, 112)", "rgb(255, 181, 152)", "rgb(255, 227, 179)" , "rgb(255, 253, 184)", "rgb(180, 225, 180)");

	/*
	 * draw_graph ()
	 *	Draw MOS performance graph with respect to resulting MOS value
	 *
	 *	Param: none
	 */
	this.draw_graph = function ()
	{
		var graph_table = new String("");
		var mos_noload = noload_mos;
		var mos_load = load_mos;
		graph_table += "<table cellspacing='1' cellpadding'0' style='margin-left:15px;'>";

		for(i=0; i< 5; i++)
		{
			graph_table += "<tr><td style='padding-left: 3px; padding-right: 3px;'>" + performance_array[i] + "</td><td><div style='border: 1px #000000 solid; width:" + width_array[i] + "px; height:12px; background-color:" + bar_color_array[i] + "' ></div></td>";
			
			if(mos_bar_width > width_array[i] && mos_bar_width < width_array[i+1])
			   graph_table += "<tr><td style='padding-left: 3px; padding-right: 3px;'> MOS (" +load_mos +") </td><td><div style='border: 1px #000000 solid; width:" + mos_bar_width + "px; height:12px; background-color: #000000'></div></td>";    
		}
		
        graph_table += "</tr></table>";
        
		if(this.graph_Id)
		{
			/*alert(graph_table);*/
			this.graph_Id.innerHTML = graph_table;
		}
	}

	/*
	 *	erase_graph()
	 *		Erase the graph
	 */
	this.erase_graph = function ()
	{
		if(this.graph_Id) {
			this.graph_Id.innerHTML = "";
		}
	}
}