Добавить функцию закрытия окна в javascript

Есть скрипт показывающий скрытые окна. Эти окна закрываются только при нажатии на кнопку "закрыть" в окне. Хотелось бы добавить возможность закрытия окна при клике вне его области или через некоторое время после того как мышь окажется вне его области. Я в этом полный профан, поэтому буду благодарен если подскажите куда и что дописать чтобы решить задачу.

function show (evt, id) {

 var evt = evt || window.event;

 var o = evt.target || evt.srcElement;

 var f = document.getElementById('cur_popup_note');

 if (f == null) {

  f = document.createElement('div');

  f.setAttribute ('id', 'cur_popup_note');

  f.setAttribute ('style', 

  'progid:DXImageTransform.Microsoft.Alpha(opacity=100); '+

  'opacity: 1; display: block; top: 0px; left: 0px;'+

  'width:300px; height:auto;');

  f.setAttribute('class', 'popup');

  document.body.appendChild(f);

 }

 f.opacityFilter = 0;

 f.innerHTML = '<img src="images/x.png" height="13" width="13" border="0" id="x_image" '+

  'style="cursor:pointer;float:right;" onclick="hide();">'+

  '<div style="padding: 10px">' +  

  document.getElementById(id).innerHTML + '</div>';

 f.className = 'popup_active';

 f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';

 f.style.opacity = f.opacityFilter;

 f.style.display = 'block';

 var o_coords = getPosition(o);

 var f_coords = getPosition(f);

 var calculatedTop = (f.offsetTop + (o_coords.top - f_coords.top));

 var calculatedLeft = (f.offsetLeft + (o_coords.left - f_coords.left));

 if (calculatedTop + f.offsetHeight > document.body.offsetHeight) 

  calculatedTop = document.body.offsetHeight - f.offsetHeight;

 if (calculatedLeft + 200 > document.body.offsetWidth) 

  calculatedLeft = document.body.offsetWidth - 220;

 f.style.top = calculatedTop + 'px';

 f.style.left = calculatedLeft + 'px';

 window.setTimeout('animate()', 10);

 evt.cancelBubble = true;

 return false;

}

 

function hide() {

 var div = document.getElementById('cur_popup_note');

 if (div != null) {

  div.className = 'footnote_new';

  div.style.display = 'none';

 }

 return false;

}

 

function animate() {

 var f = document.getElementById('cur_popup_note');

 f.opacityFilter += 0.5;

 f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';

 f.style.opacity = f.opacityFilter;

 if (f.opacityFilter<1) window.setTimeout('animate()', 50);

}

 

function getPosition(offsetTrail) {

 var offsetLeft = 0;

 var offsetTop = 0;

 while (offsetTrail) {

  offsetLeft += offsetTrail.offsetLeft;

  offsetTop += offsetTrail.offsetTop;

  offsetTrail = offsetTrail.offsetParent;

 }

 return { left:offsetLeft, top:offsetTop }

}