anchor.diff:  
   <div id="metricTableSpace">
   <table id = "metricsTable" class ="data" style = "table-layout:auto; width:100%" >
  -<thead> 
  -  <tr valign ="top">
  +<thead id = "metricTableHead"> 
  +  <tr valign ="top" >
       <th align="left" ></th>
  -    <th align="left" nowrap="" style = "width:40%">Name</th>
  -    <th class="right" onclick="retrieveTitle(this); showBargraphTable();" id="points" title = "Points" style = "text-decoration:underline; cursor: pointer; width:15%" nowrap="">Points</th>
  -    <th class="right" onclick="retrieveTitle(this); showBargraphTable();" id="coverage" title = "Coverage" style = "text-decoration:underline; cursor: pointer;width:15%" nowrap="">Coverage</th>
  -    <th class="right" onclick="retrieveTitle(this); showBargraphTable();" id="rules" title = "Rules Compliance" style = "text-decoration:underline; cursor: pointer;width:15%" >Rules Compliance</th>
  -    <th class="right" onclick="retrieveTitle(this); showBargraphTable();" id="docApi" title = "Documented API" style = "text-decoration:underline; cursor: pointer;width:15%"  >Documented API </th>
  +    <th id = "nameSpot" onclick = "showMetricsTable();" align="left" nowrap="" style = "width:40%">Name</th>
  +    <th class="right" onclick="retrieveTitle(this); showBargraphTable(this);" id="points" title = "Points" style = "text-decoration:underline; cursor: pointer; width:15%" nowrap="">Points</th>
  +    <th class="right" onclick="retrieveTitle(this); showBargraphTable(this);" id="coverage" title = "Coverage" style = "text-decoration:underline; cursor: pointer;width:15%" nowrap="">Coverage</th>
  +    <th class="right" onclick="retrieveTitle(this); showBargraphTable(this);" id="rules" title = "Rules Compliance" style = "text-decoration:underline; cursor: pointer;width:15%" >Rules Compliance</th>
  +    <th class="right" onclick="retrieveTitle(this); showBargraphTable(this);" id="docApi" title = "Documented API" style = "text-decoration:underline; cursor: pointer;width:15%"  >Documented API </th>
     </tr>    
     </thead>
  -  <tbody id = "tableBody" >
  -
  +  <tbody id = "tableBody" class = "tableBodyClass" >
  +  
   <!--Retrieve all the resource ids for the projectGroup name -->
   <% for @Property in Property.find(:all, :conditions => {:prop_key => "sonar.score.projectGroup"}) %>
   <% if (@Property.value == projectGroup.value )%>
  
positive.code:  
   <!--Dynamically creates the table with the selected metric, team image and team name--> 
    function createTable(metric, barGraphTitle){ 
    	showBargraphTable();
  	//this is the metric's id: (coverage, points...etc. depending on what the user selected)
  	var metricValue = metric +"Value";	
  	//once createTable function is complete and the bars are created...this variable is used to pass the 
  	//metric selected value along
  
negative.code:     var tablecontents = "";
      tablecontents = "<table id = 'barGraphTable' style='table-layout: auto; width: 100%'  class = 'data'> " +
      
      "<tbody id = 'barGraphBody' style = 'border: 0px; width: 100%' > ";      
       
     //go through each element for each row in the metrics table, extracting the needed information
     	var idGenerator = 0;
  