//interactive matrix for curriculum
//concept and javascript copyright Jennifer Burke
//www.industrious.com. All rights reserved

var allTd = document.getElementsByTagName("td");
var allTh = document.getElementsByTagName("th");    
var previousColor = "";
var previousColorArray = new Array();
var cellCount;
var byWhich;
var overOccurred = false;

function goMatrix() {
    colorCells();
    document.getElementById("selection").innerHTML = "";
    document.getElementById("top").style.visibility = "hidden";
    for (var i=0; i<allTd.length; i++) {
        allTd[i].onmouseover = doCellMouseover;
        allTd[i].onmouseout = doCellMouseout;
        allTd[i].onmouseup = doCellMousedown;
    }
    for (var i=0; i<allTh.length; i++) {
        allTh[i].onmouseover = doCellMouseover;
        allTh[i].onmouseout = doCellMouseout;
        allTh[i].onmouseup = doCellMousedown;
    }
    document.getElementById("top").onclick = goMatrix;
    document.getElementById("selection").innerHTML = "<h3>A detailed description of your selection appears here.</h3>";
}

function doCellMouseover() {
    overOccurred = true;
   //disable empty cells
    if (this.firstChild == null) {
       return false;
    }
    //remember td base color then hilite
    previousColor = this.style.backgroundColor;
    this.style.backgroundColor = "#ddff88";
    //if th over, remember base colors of, then hilite, all tds for this th
    if (this.id.indexOf("X") != -1) {
        cellCount = isNaN(this.id.charAt(3)) ? "10" : "9";
        byWhich = isNaN(this.id.charAt(3)) ? '"sub" + i + this.id.substr(4)' : "this.id.substr(0,6) + i";
        for (var i=0; i<cellCount; i++) {
            previousColorArray[i] = document.getElementById(eval(byWhich)).style.backgroundColor;
            document.getElementById(eval(byWhich)).style.backgroundColor = "#ddff88";
        }  
    }
    return true;
}

function doCellMouseout() {
    if (overOccurred) { //in case page loads with cursor in over position without an over event
        //disable empty cells
        if (this.firstChild == null) {
           return false;
        }
        //disable mouseout for current
        if (this.style.backgroundColor == "yellow") {
            return false;
        }
        //restore td base color
        this.style.backgroundColor = previousColor;
        //if th out, restore base colors of all tds for this th
        if (this.id.indexOf("X") != -1) {
            for (var i=0; i<cellCount; i++) {
                document.getElementById(eval(byWhich)).style.backgroundColor = previousColorArray[i];
            }  
        }
    }
    return true;
}

function doCellMousedown() {
    //disable empty cells
    if (this.firstChild == null) {
       return false;
    }
    //wipe out all hilites and show "here" hilite for selection
    colorCells();
    this.style.backgroundColor = "yellow";
    document.getElementById("selection").innerHTML = "";
    //if th down, "here" hilite all tds for this th, then display selections
    if (this.id.indexOf("X") != -1) {
        for (var i=0; i<cellCount; i++) {
            document.getElementById("selection").innerHTML += eval(eval(byWhich));
            document.getElementById(eval(byWhich)).style.backgroundColor = "yellow";
        }  
    }
    //if td down, display one selection
    else {
        document.getElementById("selection").innerHTML = eval(this.id);
    }
    document.getElementById("top").style.visibility = "visible";
    return true;
}

function colorCells() {
    //color all td cell types
    for (var x=0; x<allTd.length; x++) {
        madPlaid("Td",x);
    }
    // color all th cell types
    for (var x=0; x<allTh.length; x++) {
        madPlaid("Th",x);
    }
}

function madPlaid(cell,x) {
    var row = eval("all" + cell)[x].id.charAt(3) % 2 == 0 ? "e" : "o";
    var col = eval("all" + cell)[x].id.charAt(6) % 2 == 0 ? "e" : "o";
    switch (row + "/" + col) {
        case "e/e": eval("all" + cell)[x].style.backgroundColor = "#d6e7b4"; break;
        case "o/e": eval("all" + cell)[x].style.backgroundColor = "#c7dea1"; break;
        case "e/o": eval("all" + cell)[x].style.backgroundColor = "#dfedd2"; break;
        case "o/o": eval("all" + cell)[x].style.backgroundColor = "#cbdadd"; break;
    }
    document.getElementsByTagName("td")[0].style.backgroundColor = "#ffffff";
}