// This script is used to highlight areas on an image <map>

var uk_region_mapper = function() {
  var areas = document.getElementsByTagName('area');
  for (var i = 0; i < areas.length; i++) {
    var loc = document.getElementById('ukmap_' + areas[i].id + '_loc');
    loc.area_id = areas[i].id;

    areas[i].onmouseover = function() {
      document.getElementById('ukmapimg').parentNode.id = 'ukmapel_' + this.id;
      document.getElementById('ukmap_' + this.id + '_loc').className = 'on';
	  debug("id (in) = " + document.getElementById('ukmapimg').parentNode.id);
    }
    loc.onmouseover = function() {
      document.getElementById('ukmapimg').parentNode.id = 'ukmapel_' + this.area_id;
      this.className = 'on';
	  debug("id = (in) " + document.getElementById('ukmapimg').parentNode.id);
    }

    areas[i].onmouseout = function() {
      document.getElementById('ukmapimg').parentNode.id = 'ukmapel';
      document.getElementById('ukmap_' + this.id + '_loc').className = '';
	  debug("id = (out) " + document.getElementById('ukmapimg').parentNode.id);
    }
    loc.onmouseout = function() {
      document.getElementById('ukmapimg').parentNode.id = 'ukmapel';
      this.className = '';
	  debug("id = (out) " + document.getElementById('ukmapimg').parentNode.id);
    }
  }
}

function debug(msg) {
//  var output = document.getElementById('debugOutput');
//  output.innerHTML += msg + "<br />";
}

Event.observe(window, 'load', uk_region_mapper);