VAR_LINK = "nav_button_id";
VAR_CELL = "nav_cell_id";

// Make the navigation links look and feel like buttons
function beautify_navigation()
{
  nav_table = document.getElementById("navigation_table");
  for (var pos = 0; pos < num_navigation_cells; pos++)
  {
    // Give each cell a border style
    document.getElementById(VAR_CELL + "_" + pos).style.borderStyle='outset';
    document.getElementById(VAR_CELL + "_" + pos).style.borderWidth='1';
    document.getElementById(VAR_CELL + "_" + pos).style.borderColor='red';

    // Disable all navigation anchor click events
    document.getElementById(VAR_LINK + "_" + pos).onclick = function() { return false; }
  }
}

// Redirect to the url pointed to by the associated anchor element
function navigationButtonClick(id)
{
  location = document.getElementById(VAR_LINK + "_" + id).href;
}

// To Highilght the cell on mouse over
function navigationButtonOn(id)
{
   document.getElementById(VAR_CELL + "_" + id).style.backgroundColor='FFFF66';
   document.getElementById(VAR_CELL + "_" + id).style.borderStyle='inset';
}

// To Remove highilght from cell on mouse out
function navigationButtonOff(id)
{
  /* Using 'null' to remove style does not work with IE */
  document.getElementById(VAR_CELL + "_" + id).style.backgroundColor='';
  document.getElementById(VAR_CELL + "_" + id).style.borderStyle='outset';
}

$(function(){
    beautify_navigation();
});