function $(element_id) {
  return document.getElementById(element_id);
}  
function hide(element_id) {
  $(element_id).style.display = 'none';
}
function show(element_id) {
  $(element_id).style.display = '';
}
function isVisible(element_id) { 
  return $(element_id).style.display != 'none';
}
function toggle(element_id) {
  if (isVisible(element_id)) { hide(element_id); }
  else { show(element_id); }
  return false;
}

function setupRollovers() {
  pc_name_divs = document.getElementById('char_wrap').getElementsByTagName('div');
  for (var i = 0; i < pc_name_divs.length ; i++) {
    // need a way to reference the index of this PC, so set a pc_id attribute
    pc_name_divs[i].pc_id = i;
    pc_name_divs[i].onmouseover = function() { switch_to_pc(this.pc_id); };
  }
}

function colored_number(value) {
  if (value == 0) { color = "#B33"; }
  else if (value > 0 && value <= 50) { color = "#D66"; }
  else if (value > 50 && value <= 99) { color = "#FFC"; }
  else { color = "#9F9"; }
  return '<span style="color:' + color + '">' + value + '</span>';
}

// display this PC's stats and hide others
function switch_to_pc(p) {
  // details is hidden by default so we don't get the border with nothing inside
  show('details');
  pc_divs = document.getElementById('details').getElementsByTagName('div')
  for (var i = 0; i < pc_divs.length ; i++) {
    if (i == p) {
      show(pc_divs[i].id);
    } else {
      hide(pc_divs[i].id);
    }
  }
}