/* 
 * Simple toggle for making a cell clickable on a row to show/hide it's siblings.
 * To uss:
 *  - Add JavaScript file to your html
 *  - Add the class tableClass (defined below) to your table.   
 *  ex: <table widht="100%" cellpadding="0" cellspacing="0" class="table trihilight otherclass">
 *  
 *  - Add the activatorClass to any cell that you wnat to be clickable.
 *  ex:
 *      <tr>
 *          <td class='activator'>Col 1</td>
 *          <td class='hidden'>Col 2</td>
 *          <td class='hidden'>Col 3</td>
 *      </tr>
 *  
 *  You can edit the default class names by changing the constants below.
 */

// Edit these strings to suit the class names used
const tableClass = "sibling-hide";
const activatorClass = "activator";
const hideClass = "hidden";
// End edit area

//Make sure the activator style shows that it can be clicked on.
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.' + activatorClass + ':hover { cursor: pointer; } .' + hideClass + ' { display: none; }';
document.getElementsByTagName('head')[0].appendChild(style);

console.log("Script loaded.");

//Wait till the page is done loading...
document.addEventListener("DOMContentLoaded", function(){
    var tables = document.getElementsByClassName(tableClass);
    for (y = 0; y < tables.length; y++) {
        var currentTable = tables[y];
        var rows = currentTable.getElementsByTagName("tr");
        for (i = 0; i < rows.length; i++) {
            
            var currentRow = currentTable.rows[i];
            var cols = currentRow.getElementsByTagName("td");
            for (k = 0; k < cols.length; k++) {
                var currentCol = cols[k];
                if(currentCol.classList.contains(activatorClass)) {
                    var createClickHandler = function(col) {
                        return function() {
                            var siblings = col.parentElement.getElementsByTagName("td");
                            for(m = 0; m < siblings.length; m++) {
                                var currentSibling = siblings[m];
                                if(!currentSibling.classList.contains(activatorClass)) {
                                    if(currentSibling.classList.contains(hideClass)) {
                                        currentSibling.classList.remove(hideClass);
                                    } else {
                                        currentSibling.classList.add(hideClass);
                                    }
                                }
                            }
                        }
                    };
                    currentCol.onclick = createClickHandler(currentCol);
                };    
            }
        }
    }
});