// GLOBAL VARIABLES - you should edit these only.
tableID = 'orders';
hoverColor = '#E2E2E2';
highlightColor = 'white'; // when a row is clicked
clear_linkID = 'clearall'; // the link ID that, when clicked, clears all highlights
colorsDivID = 'colors'; // the DIV that containts all color links

alternate = false; // set to 'true' to enable color alternation
color1 = '#E2E2E2';
color2 = 'white';
// ----------------
                
                
addEventHandler(window, 'load', prepareTable);
                
function prepareTable()
{   
  // prepare the table
  if(document.getElementById(tableID))
  {     
    var table = document.getElementById(tableID);
    var rows = table.getElementsByTagName('tr');

    for(i=0; i<rows.length; i++)
    {
      rows[i].onclick = function() { setHighlight(this); };
      rows[i].onmouseover = function() {setHover(this); };
      rows[i].onmouseout = function() { removeHover(this); };
    }
  } else {
    return;
  }
  
  // setup the 'clear highlights' link
  if(document.getElementById(clear_linkID))
  {
    var clearlink = document.getElementById(clear_linkID);
    clearlink.onclick = function() { resetTable(); return false;};
  }
  
  // setup colors
  if(document.getElementById(colorsDivID))
  {
    var colorsdiv = document.getElementById(colorsDivID);
    var colorlinks = colorsdiv.getElementsByTagName('a');
    
    for(var i=0; i<colorlinks.length; i++)
      colorlinks[i].onclick = function() { highlightColor = this.getAttribute('title'); return false; };
  } else {
    return;
  }
  
  resetTable();  // sets and resets the table
}

function resetTable()
{  
  var rows = document.getElementById(tableID).getElementsByTagName('tr');

    if(alternate) 
    {
      for(var i=0; i<rows.length; i++)
      {
         rows[i].id = i;
         rows[i].on = false;
         if(i%2 == 0){
           rows[i].style.backgroundColor = color2;
           continue;
         }
         rows[i].style.backgroundColor = color1;
      }
    } else {
      for(var i=0; i<rows.length; i++)
      {
         rows[i].id = i;
         rows[i].on = false;
         rows[i].style.backgroundColor = 'transparent';
      }
    }
    
}
      
// sets and removes highlights on table rows on mouse click
function setHighlight(row)
{
  if(row.on != true)
  {
    row.on = true;
    row.bg = highlightColor;
    return;
  }
  
  row.on = false;
}


// hilights a row when the mouse pointer hovers over it
function setHover(row)
{                                        
    row.style.backgroundColor = hoverColor;
}

// reset the row's background color when the mouse pointer hovers out
function removeHover(row)
{
  if(alternate)
  {
    row.id % 2 == 0 ? row.style.backgroundColor = color2: row.style.backgroundColor = color1;
  } else {
    row.style.backgroundColor = 'transparent';
  }
    
  if(row.on == true)
    row.style.backgroundColor = row.bg;
}
      
function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};