/*
 * Highlights the map area of the Readers Pics Index image
 */
var m_div = null;
var m_current = '';
var m_isIE = navigator.appName.indexOf('Microsoft') >= 0;

function getImgPos(id) {
 var x = 0;
 var y = 0;
 var node = document.getElementById(id);
 while ((node !== null) && (node.nodeType === 1)) {
  x += node.offsetLeft;
  y += node.offsetTop;
  node = m_isIE ? node.parentNode : null;
 }
 return {'x':x, 'y':y};
}

function go () {
 var area = document.getElementById(m_current);
 if (area) {
  window.location = area.href;
 }
}

function pos(key) {
 m_current = key;
 var area = document.getElementById(key);
 if (area) {
  if (m_div === null) {
   m_div = document.createElement('DIV');
   if (m_isIE) {
     m_div.attachEvent('onclick', go, false);
   }
   else {
     m_div.addEventListener('click', go, false);
   }
   m_div.style.position = 'absolute';
   m_div.style.borderColor = 'white';
   m_div.style.borderWidth = '1px';
   m_div.style.borderStyle = 'solid';
   m_div.style.zIndex = '3';
   m_div.style.background = 'transparent';
   document.body.appendChild(m_div);
  }
  var pos = getImgPos('mapImg');
  var tDiv = m_div.style;
  var str = area.getAttribute('coords');
  var ords = str.split(',');
  for (var i = 0; i < 4; i++) {
    ords[i] = parseInt(ords[i]);
  }
  tDiv.x = pos.x + ords[0];
  tDiv.y = pos.y + ords[1];
  tDiv.width = ords[2] - ords[0];
  tDiv.height = ords[3] - ords[1];
  tDiv.top = tDiv.y + 'px';
  tDiv.left = tDiv.x + 'px';
 }
}