// Attach event listeners to the buttons

function findButtons() {
  var menu, btns, i;
  
  // Get the menu element to access the btn divs
  
  menu = document.getElementById('menu');
  btns = menu.getElementsByTagName('div');
  for (i=0; i<btns.length; i++) {
  
    // Attach event listeners for rollovers to the btns
    
    if (/btn/.test(btns[i].className)) { 
      btns[i].onmouseover = function(){roll(this);};
      btns[i].onmouseout = function(){roll(this);};
    }
  }
}

function findButtons() {
  var bottommenu, btns, i;
  
  // Get the bottommenu element to access the btn divs
  
  bottommenu = document.getElementById('bottommenu');
  btns = bottommenu.getElementsByTagName('div');
  for (i=0; i<btns.length; i++) {
  
    // Attach event listeners for rollovers to the btns
    
    if (/btn/.test(btns[i].className)) { 
      btns[i].onmouseover = function(){roll(this);};
      btns[i].onmouseout = function(){roll(this);};
    }
  }
}

// Attached to the buttons and ready to roll

function roll(o) {

  // btn is our off state, so turn it on
  
  if (o.className == 'btn') {
    o.className = 'btn-over';
    
  // Otherwise, turn it off
  
  } else {
    o.className = 'btn';
  }
}
// Initialize the rollover

window.onload = function() {
  findButtons();
}