anchor.diff:  </table>
   <% end %>
   
  +
  +<br><h1 style="color:#4B9FD5; text-decoration:underline; cursor: pointer" id = "title" title = "Remove graph" onclick = "hideBargraphTable();" ></h1>
  +<div id="tablespace"></div>
  +<!------------------------------------ JAVASCRIPT---------------------------------------------------------------->
  +<script type="text/javascript">
  +<!--<script src = "/javascripts/projectComparison.js" type="text/javascript"></script>-->
  +<!--hides the metrics table-->
  +function hideTable(){
  +	document.getElementById("metricsTable").style.visibility =  "hidden";  
  +}
  +
  +<!--Displays the metrics table-->
  +function displayTable(){
  +	document.getElementById("metricsTable").style.visibility =  "visible"; 
  +}
  +
  +<!--hides the bar graph table-->
  +function hideBargraphTable(){
  +	document.getElementById("tablespace").style.display =  "none";
  +	document.getElementById("title").style.display =  "none";    
  +}
  +
  +<!--shows the bar graph table-->
  +function showBargraphTable(){
  +	document.getElementById("tablespace").style.display =  "table";
  +	document.getElementById("title").style.display =  "block";    
  +}
  +
  +<!--Retrieves metric title and displays it under the project comparison widget table-->
  +function retrieveTitle(elem){
  +	//retrieves the header title
  +	var metric = elem.innerHTML;
  +	//retrieves the header id
  +	var metricId = elem.id;
  +	var drilldownTitle = document.getElementById("title");
  +	drilldownTitle.innerHTML = metric;
  +	//creates a new table
  +	CreateTable(metricId);	
  +}
  + 
  + <!--Retrieves the number of 'td' elements in the metrics table-->
  +function getNumberOfElementsInTable(){
  +	//retrieves the number of 'td' elements in the metrics table
  +	var numberOfTdElements = document.getElementById('metricsTable').getElementsByTagName('td').length;	
  +	return numberOfTdElements;
  +} 
  + <!--Retrieves the number of 'th' elements in the metrics table representing the number of columns-->
  +function getNumberOfColumnsInTable(){
  +	//retrieves the number of 'th' elements in the metrics table
  +	var numberOfThElements = document.getElementById('metricsTable').getElementsByTagName('th').length;	
  +	return numberOfThElements;	
  +} 
  +  
  + <!--Dynamically creates the table with the selected metric, team image and team name-->
  + 
  + function CreateTable(metric){  	
  +	//this is the metric's id: (coverage, points...etc. depending on what the user selected)
  +	var metricValue = metric +"Value";	
  +	   
  +    var elements =getNumberOfElementsInTable();
  +    var columns = getNumberOfColumnsInTable();
  +    //variables representing if a new row needs to be created in the table and if the metric selected has been found
  +    var newRow; 
  +    var metricFound;
  +               
  +    var tablecontents = "";
  +    tablecontents = "<table id = 'barGraphTable' style='table-layout: fixed; width: 50%; border: 0px' class = 'data' > " +
  +    "<thead style = 'border: 0px'>" + 
  +   	"<tr style = 'border: 0px'>"+
  +    "<th style = 'border: 0px' align='right' width = '50'></th>" +
  +    "<th style = 'border: 0px'></th>"+
  +    "<th style = 'border: 0px'></th>"+    
  +    "</tr>"+    
  +    "</thead> " +
  +    "<tbody style = 'border: 0px'> ";
  +      
  +   
  +   
  +   //go through each element for each row in the metrics table, extracting the needed information
  +      for (var i = 0; i < elements; i ++){ 
  +      	newRow = false;
  +      	//row creation is based on the number of columns. Create a new row if the expression evaluates to true      	
  +      	if ( (i + columns) % columns == 0 ){
  +      	tablecontents += "<tr style = 'border: 0px'>";
  +      	//new row...now looking for the next row's metric value
  +      	metricFound = false;
  +      	}
  +   		   		
  +   		//retrieve the element's id to verify what metrics need to be selected
  +   		var elementId = document.getElementById('metricsTable').getElementsByTagName('td')[i].id;
  +   			
  +   			//retrieve the image, if the td element id is "image"
  +   			if (elementId == "image"){
  +   				//retrieve the element's value and add it to the new table
  +   				var image = document.getElementById('metricsTable').getElementsByTagName('td')[i].innerHTML;
  +   				tablecontents += "<td style = 'border: 0px' align='right' width = '50'>" + image + "</td>";
  +   				   				
  +   			}
  +   			//retrieve the name, if the td element id is "name"
  +   			if (elementId == "name"){
  +   				//retrieve the element's value and add it to the new table
  +   				var projectName = document.getElementById('metricsTable').getElementsByTagName('td')[i].innerHTML;
  +   				tablecontents += "<td style = 'border: 0px' align='left'>" + projectName + "</td>";
  +   				
  +   				
  +   				
  +   			}
  +   		
  +   			if (elementId != "name" && elementId != "image" ){     				
  +   					//if the element's id is equal to the metric category selected and the selected metric hasn't been found yet
  +   					if (metricFound == false && (( elementId == metricValue)) ){
  +   						var metric = document.getElementById('metricsTable').getElementsByTagName('td')[i].innerHTML;  						
  +   						tablecontents += "<td style = 'border: 0px'align='left' >" + metric + "</td>";
  +   						metricFound = true; 
  +   						newRow = true;  						   						
  +   						}
  +   						
  +   			}
  +   		   //if the new row property set to true, end the creation of a new row
  +   		   if(newRow){
  +      		tablecontents += "</tr>";
  +      		
  +      	} 		  		
  +       }
  +     
  +   	tablecontents += "</tbody>";
  +   	tablecontents += "</table>";
  +   	document.getElementById("tablespace").innerHTML = tablecontents;    
  +   
  +}     
  +
  +</script>
   
   <!--The project that is selected must be a member of a group.  If they're not...an error message 
   is returned -->
  +
   <% if (projectGroup == nil )%>
   <div class = "widget-title"><%= widget_properties['groupId'] -%></div><br>
   <p><%=@project.long_name -%> is not a member of any group.</p>
  
positive.code: 	<!--Loop through all the projects and if the project id = the resource id then print the project name -->
  	<% for @Project in projects %>
  	<% if (@Project.id == @Property.resource_id)%>
  	<% projectName = @Project %>	
  	<td align="left"><%= @Project.name -%></td>
  	 
  		
  	<!--Loop through all the snapshots and if the project id = the resource id then set the snapshot id variable -->
  
negative.code:    
     #finds all "islast" snapshots 
     snapshots = Snapshot.find(:all, :conditions =>{:islast => "1"})
     
     projectName = nil
     projectImage = nil
    
  %>
  
  <!--Loops through the properties array that contains all the groups of projects for the 
  