addEvent(window, "load", searchFilterableTables);

var displayTr;
var selectedFilterColumn = 0;
var indexes = [];
var filterHeadings = [];

function searchFilterableTables()
{
    var tables = document.getElementsByTagName("table");
    
    for(var i = 0; i < tables.length; i++)
    {
        if(tables[i].className.indexOf("filterable") >= 0)
            makeFilterableTable(tables[i]);
    }
}

function makeFilterableTable(table)
{
    // get original display of a tr element
    var tr = table.getElementsByTagName("tr")[0];
    if(tr.currentStyle)
        displayTr = tr.currentStyle.display;
    else if(document.defaultView.getComputedStyle)
        displayTr = document.defaultView.getComputedStyle(tr, "").getPropertyValue("display");
		
	var cols = table.getElementsByTagName("col");
    var ths = table.getElementsByTagName("th");
    for(var i = 0; i < ths.length; i++)
    {
		if(cols[i] && cols[i].className.indexOf("filterable") >= 0)
		{
			indexes.push(i);
    		filterHeadings.push(ths[i].firstChild.nodeValue);
		}
    }
	
	selectedFilterColumn = indexes[0];

    var div = document.createElement("div");
    var label = document.createElement("label");
    var select = document.createElement("select");
    var input = document.createElement("input");
    
    label.appendChild(document.createTextNode("Filter op:"));    
    
    addEvent(select, "change", setSelectedFilterColumn);
    for(var i = 0; i < filterHeadings.length; i++)
    {
        var option = document.createElement("option");
        option.setAttribute("value", filterHeadings[i]);
        option.appendChild(document.createTextNode(filterHeadings[i]));
        select.appendChild(option);
    }
    
    input.setAttribute("type", "text");
    addEvent(input, "keyup", filterFromInput);

    div.className = "filterable";
    div.appendChild(label);
    div.appendChild(select);
    div.appendChild(input);
    
    table.parentNode.insertBefore(div, table);
}

function setSelectedFilterColumn()
{
    var table = getTable(this);
    
    for(var i = 0; i < filterHeadings.length; i++)
    {
        if(filterHeadings[i] == this.value)
        {
			selectedFilterColumn = indexes[i];
            break;
        }
    }
    
    filter(this.nextSibling.value, table);
    this.nextSibling.focus();
}

function getTable(obj)
{
    var table = obj.parentNode.nextSibling;
    while(table.nodeName.toLowerCase() != "table")
        table = table.nextSibling;

    return table;
}

function filterFromInput()
{
    filter(this.value, getTable(this));
}

function filter(value, table)
{
    value = value.toLowerCase();
    
    var trs = table.getElementsByTagName("tr");
    
    if(value.length == 0)
    {
         for(var i = 0; i < trs.length; i++)
         {
            trs[i].style.display = displayTr;
         }
         return;
    }
	
    for(var i = 0; i < trs.length; i++)
    {
        var tds = trs[i].getElementsByTagName("td");
        
        if(tds.length == 0)
            continue;
        
        if(tds[selectedFilterColumn].hasChildNodes() && tds[selectedFilterColumn].firstChild.nodeValue.toLowerCase().indexOf(value) >= 0)
        {
            trs[i].style.display = displayTr;
        }
        else
        {
            trs[i].style.display = "none";
        }
    }
}