/*
** toggleOverlay(element)
**
** If element.overlay_open is false or undefined :
**
** Will position a block named 'overlay' over element, size the box to elements 
** size, center the image inside of it named 'overlay-image', set opacity
** 0.95 
**
** Otherwise overlay is hidden
*/
function toggleOverlay(e) {
  if ($(e).overlay_open) {
    hideOverlay(e);
  } else {
    showOverlay(e);
  }
}

function hideOverlay(e) {
  var overlay = 'overlay';
  var image = 'overlay-image';
  $(e).overlay_open = false;
  $(overlay).hide();
}

function showOverlay(e) {
  var overlay = 'overlay';
  var image = 'overlay-image';
  $(image).setOpacity(0);
  //Element.clonePosition(overlay, e)
  $(overlay).clonePosition(e);
  $(overlay).show();
  $(image).show();
  
  var left = Math.ceil($(overlay).getWidth()/2  - $(image).getWidth()/2);
  var top =  Math.ceil($(overlay).getHeight()/2 - $(image).getWidth()/2);

  $(overlay).setOpacity(0.85);
  $(image).setStyle({'top':top+'px', 'left':left+'px'});
  $(image).setOpacity(1);
  

  $(e).overlay_open = true;
}