<script type="text/javascript">

function DeleteRows()
{
	var t = document.getElementById('stsclass');
	var k = t.rows.length;
	
	for ( var i=0; i<k; i++)
	{
		t.deleteRow();
	}
}

function ReturnProperties( list )
{
	var listHtml = "";

	if ( list.indexOf(';') > -1 ) // if multiple properties are set
	{	
		var splitList = list.split(';');
	
		for (var k=0; k<splitList.length; k++)
		{
			listHtml += splitList[k] + "<br />";
		}
	}
	else // when only one style property is set
	{		
		listHtml += list + "<br />";
	}
	return listHtml;
}

function ClassInfo()
{
	// If the element is not the stsclass table
    	if ( window.event.srcElement.id != "stsclass" )
	{
		DeleteRows();
		var stsClassTable = document.getElementById('stsclass');
	
		var headerRow;
		var headerCell;
		var header;
		
		// Add table headers 
		headerRow = stsClassTable.insertRow();
		headerCell = headerRow.insertCell();
		header = document.createTextNode("TagName");
		headerCell.appendChild(header);
		headerCell = headerRow.insertCell();
		header = document.createTextNode("ID");
		headerCell.appendChild(header);
		headerCell = headerRow.insertCell();
		header = document.createTextNode("Inline");
		headerCell.appendChild(header);
		headerCell = headerRow.insertCell();
		header = document.createTextNode("Internal");
		headerCell.appendChild(header);
		headerCell = headerRow.insertCell();
		header = document.createTextNode("External");
		headerCell.appendChild(header);
	
	        ParentClasses(stsClassTable, window.event.srcElement);
	}
}
	
function OutputStyle( cellExternal, cellInternal, styleSheetHref, formatting, cssText )
{
	if ( styleSheetHref != "" ) // if it's an external stylesheet
	{
		// Display the url of the external stylesheet along with all the properties set
		cellExternal.innerHTML += "~" + styleSheetHref + formatting + "<br /> " + ReturnProperties(cssText);
	}
	else // if it's an internal stylesheet
	{
		// Display all the properties set in the matching class in the internal stylesheet
		cellInternal.innerHTML += "  " + ReturnProperties(cssText);
	}
}
 
function ParentClasses(stsClassTable, elem)
{
	if (elem != null)
    	{
        	var row = stsClassTable.insertRow();
       		var cell = row.insertCell();
		// Get the tag name of the element
	    	var node = document.createTextNode(elem.tagName.toLowerCase());
	    	cell.appendChild(node);

	  	if ( elem.id != "" )
	  	{
			// Get the id value of the element
			var cellId = row.insertCell();
			cellId.innerHTML = elem.id;
	  	}
	  	else
	  	{
			// If no id value then insert blank cell
			var cellId = row.insertCell();
			cellId.innerText = " ";	
	  	}

	  	if ( elem.style.cssText != "" )
	  	{
			// Get the inline style value of the element
			var cellInline = row.insertCell();
			cellInline.innerHTML = ReturnProperties(elem.style.cssText.toLowerCase());
	  	}
	  	else
	  	{
			// If no inline style value then insert blank cell
			var cellInline = row.insertCell();
			cellInline.innerText = " ";		
	  	}
	  	
		var cellInternal = row.insertCell();
		var cellExternal = row.insertCell();
		
		// Iterate over all stylesheets that the page uses
		// to find css class matches 
		for (var i=0; i<document.styleSheets.length; i++)
		{
			// Get all the selectors of the stylesheets
			var rules = document.styleSheets[i].rules;
		
			for (var j=0; j<rules.length; j++) // foreach selector in stylesheet
			{
				var styleSheetHref = document.styleSheets[i].href;
				
				if (rules[j].selectorText == elem.tagName) // TagName
				{
					var formatString = " - " + elem.tagName;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}
				if (rules[j].selectorText == "." + elem.className) // Class
				{
					var formatString = " - ." + elem.className;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );						
				}
				if (rules[j].selectorText == elem.tagName + "." + elem.className) // TagName Class
				{
					var formatString = " - " + elem.tagName + "." + elem.className;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}
				if (rules[j].selectorText == "." + elem.className + " " + elem.tagName) // Class TagName
				{
					var formatString = " - ." + elem.className + " " + elem.tagName;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}
				if (rules[j].selectorText == "#" + elem.id) // ID
				{
					var formatString = " - #" + elem.id;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}
				if (rules[j].selectorText == elem.tagName + "#" + elem.id) // TagName ID
				{
					var formatString = " - " + elem.tagName + "#" + elem.id;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}
				if (rules[j].selectorText == "#" + elem.id + " " + elem.tagName) // ID TagName
				{
					var formatString = " - #" + elem.id + " " + elem.tagName;
					OutputStyle( cellExternal, cellInternal, styleSheetHref, formatString, rules[j].style.cssText.toLowerCase() );
				}					
			}
		}
	
		if ( cellInternal.innerHTML == "" )
		{
			cellInternal.innerText = " ";	
		}
		
		if ( cellExternal.innerHTML == "" )
		{
			cellExternal.innerText = " ";	
		}
	 
		// Recursive method passing in the parent element
        	ParentClasses(stsClassTable, elem.parentElement);
	}
}

window.document.body.onmouseover = ClassInfo;

</script>


<div id="stsclassDiv" style="border-style: solid; border-width: 1px; position: absolute; left: 30px; top: 30px; z-index: 15; background-color: #EEEEFC; font-family: Tahoma">
<table id="stsclass" border="1" cellspacing="0" style="font-size: 8pt"><tr><td></td></tr></table>
</div>