function tableRowEffectHover()
{
    // is the element already selected?
    if (this.className.indexOf("tre-click") == -1) {
        // no? then show the hover effect
        this.className += " tre-hover";
    }
}

function tableRowEffectUnhover()
{
    // remove the hover effect
    this.className = this.className.replace(/\b(tre-hover)\b/, "");
}

function tableRowEffectSelect()
{
    // is the element already selected?
    if (this.className.indexOf("tre-select") != -1) {
        // then remove the selection (toggle click)
        this.className = this.className.replace(/\b(tre-select)\b/, "");
    } else {
        // othervise show the selection effect
        this.className += " tre-select";
    }
}

initTableRowEffect = function()
{
    var tableObjects = document.getElementsByTagName('TABLE');
    for (var t = 0; t < tableObjects.length; t++) {
        // remove the following javascript line to force this effect to all tables
        if (tableObjects[t].className.indexOf("tre-table") != -1) {
            var tableRowObjects = tableObjects[t].getElementsByTagName('TR');
            for (var tr = 0; tr < tableRowObjects.length; tr++) {
                tableRowObjects[tr].onmouseover = tableRowEffectHover;
                tableRowObjects[tr].onmouseout  = tableRowEffectUnhover;
                tableRowObjects[tr].onclick     = tableRowEffectSelect; 
            }
        // remove the following javascript line to force this effect to all tables
        }
    }
}

window.onload = initTableRowEffect;