/* Any table that has the css class collapsible will be affected by this script
   The first tr will always display with a collapse icon next to it
   Every other tr in the table will be toggled visible/hidden by the icon*/

var W3CDOM = (document.createElement && document.getElementsByTagName);

addEvent(window, 'load', initCollapsingRows);

// This is the path to the images relative to the HTML file
// Ex. If your HTML file is at /files/Index.html
//     and your JavaScript and images are in /files/collapsible/
//     then the path here would be "collapsible/" 
var pathToImages = "/images/";

function addEvent(obj, eventType,fn, useCapture)
{
	if (obj.addEventListener) {
		obj.addEventListener(eventType, fn, useCapture);
		return true;
	} else {
		if (obj.attachEvent) {
			var r = obj.attachEvent("on"+eventType, fn);
			return r;
		}
	}
}

// this function is needed to work around 
// a bug in IE related to element attributes
function hasClass(obj) {
   var result = false;
   if (obj.getAttributeNode("class") != null) {
       result = obj.getAttributeNode("class").value;
   }
   return result;
}  

function toggleVisibility() {

    var theImage = this;
    /*var theRowName = this.id.replace('_image', '_comment');
    var theRow = document.getElementById(theRowName);
	
	if (theRow.style.display=="none") {
        theRow.style.display = "";
        theImage.src = pathToImages + "Collapse.gif";
    } else {
        theRow.style.display = "none";
        theImage.src = pathToImages + "Expand.gif";
    }*/
	var tables = document.getElementsByTagName('table');
    var theTableId = this.id.replace('_image', '');
	
	var theTable = document.getElementById("tblCollapse" + theTableId);
	
	if (hasClass(theTable))
	{
	   if (theTable.getAttributeNode('class').value.indexOf('collapsible')!=-1)
	   {
	         var tbodies = theTable.getElementsByTagName('tbody');
	         
			  for (var h = 0; h < tbodies.length; h++) 
			  {
	             var trs = tbodies[h].getElementsByTagName('tr');
				 
				 if ( trs.length > 1 )
				 {
					 for (var i = 1; i < trs.length; i++) 
					 {    
					      if (trs[i].style.display == "none")
						  {
						      trs[i].style.display = "";
							  theImage.src = pathToImages + "Collapse.gif";
							  document.getElementById("CollapseState" + h).value == "NotCollapse";
						  }
						  else
						  {
						      trs[i].style.display = "none";
							  theImage.src = pathToImages + "Expand.gif";
							   document.getElementById("CollapseState" + h).value == "Collapse";
						  }
					      
	                 }
				 }
			  }
		
	   }
	}
}

function insertExtraCells(theTable) {

    // get reference to all of the tbody's, thead's, and tfoot's
    var tbodies = theTable.getElementsByTagName('tbody');
    var theads = theTable.getElementsByTagName('thead');
    var tfoots = theTable.getElementsByTagName('tfoot');

    insertInto(theads, 'th');
    insertInto(tbodies, 'td');
    insertInto(tfoots, 'td');    
    
}

function insertInto(parentCollections, typeOfCell) {
    // loop through all of the parent collections passed in
    for (var m = 0; m < parentCollections.length; m++) {

        // get all of the rows for each collection
        var trs = parentCollections[m].getElementsByTagName('tr');
        
        // loop through each of the rows
        for (i=0;i<trs.length;i++) {
            // create a new cell
            var theNewCell = document.createElement(typeOfCell);
            
            // insert the new cell before the first child
            var cells = trs[i].getElementsByTagName(typeOfCell);
            trs[i].insertBefore(theNewCell, cells[0]);
        }
    }
}

function initCollapsingRows()
{
	if (!W3CDOM) return;
    var sMsg;
    var even = true;  

    // get a list of all the tables
    var tables = document.getElementsByTagName('table');

    // if there aren't any tables exit
    if (tables.length==0) { return; }

    // and iterate through them...
    for (var k = 0; k < tables.length; k++) {
        sMsg = "";
        // if the table has a class
        if (hasClass(tables[k])) {
            
            // if that class is "collapsible"
            if (tables[k].getAttributeNode('class').value.indexOf('collapsible')!=-1) {
                tables[k].id = "tblCollapse" + k;
                // since we are adding a graphic for expanding and collapsing
                // the rows in the first column of the table, we need to add
                // an extra column everywhere
                insertExtraCells(tables[k]);

                var tbodies = tables[k].getElementsByTagName('tbody');
                
                // iterate through the bodies...
                for (var h = 0; h < tbodies.length; h++) {
          
                    // find all the &lt;tr&gt; elements... 
                    var trs = tbodies[h].getElementsByTagName('tr');
    
                    // ... and iterate through them
                    for (var i = 0; i < trs.length; i++) 
					{
                       if (trs[i].getAttributeNode('class'))
					   {
                         //alert(trs[i].getAttributeNode('class').value);
					      sMsg = trs[i].getAttributeNode('class').value;
						}
							    
				     if ( sMsg.indexOf('nocollapse') == -1 )
					{	 
					    if ( i == 0 ) 
						{
                           
							// Get a reference to the TD's
                            var td = trs[i].getElementsByTagName('td')[0];
    
                            // Assign a related unique ID to the next row where the comment is
                            // This is the row that will be expanded and collapsed
                           /* var theRowName = "row_" + i + "_comment"; */
						    var theRowName =  i + "_comment"; 
                            /*trs[i+1].id = theRowName;
                            trs[i+1].style.display = "none";
                            */
                            // Create the new image object
                            var theNewImage = document.createElement('img');
                            /*var theNewImageName = "row_" + i + "_image";*/
							var theNewImageName =  k + "_image";
                            theNewImage.id = theNewImageName;
                            theNewImage.src = pathToImages + "Expand.gif";
                            theNewImage.width = 13;
                            theNewImage.height = 13;
                            theNewImage.style.margin = "5px";
                            theNewImage.style.cursor = "pointer";
                            
                            // Add "onclick" event to the image that expands and collapses the next row
                            theNewImage.onclick = toggleVisibility;
    
                            // Insert an image into the document tree inside the first TD
                            td.style.verticalAlign = "top";
							td.appendChild(theNewImage);
                            td.style.width="1%"
    
                            // Skip the collapsbile row
                            //i++;
                        }
						else
						{ 	  trs[i].style.display = "none";
							  //theImage.src = pathToImages + "Expand.gif";
							  
						}
					}// end if	
				
                    }
                }
            }
        } 
        // Reset "even" for the next table
        even = true;
    } // End for loop  
}