function registerDivInOut(div, handlerIn, handlerOut) {
  //alert('register');
  $(div).onmouseover = function(e) {
    //alert($(div).getAttribute('id'));
    // retrieve the event
    if (!e)
      var e = window.event;
      
    // get the target
    var target = (window.event) ? e.srcElement : e.target;

    // get the source
    var source = (e.relatedTarget) ? e.relatedTarget : e.fromElement;

    // is the source inside our container
    if(isInside($(div), source)) {
      return;
    }

    handlerIn();
  }
  
  $(div).onmouseout = function(e) {
    // retrieve the event
    if (!e) var e = window.event;
    // get the source
    var source = (window.event) ? e.srcElement : e.target;

    // get the target
    var target = (e.relatedTarget) ? e.relatedTarget : e.toElement;

    // is the tg inside our div
    if(!isInside($(div), target) && isInside($(div), source)) {

      handlerOut();
    }
  }
}

function isInside(container, element) {
  while (element && element != container && element.nodeName != 'BODY')
    element = element.parentNode;
  if(element == container) {
    return true;
  } else {
    return false;
  }
}

function permute(from, to, queue_scope, delay) {
  queue = Effect.Queues.get(queue_scope);
  var size = queue.size();
  queue.each(function(effect) {
    effect.cancel();
  });
  if(size<2)
    Effect.Fade(from, { duration: delay/2, queue: { position: 'end', scope: queue_scope } });
  Effect.Appear(to, { duration: delay/2, queue: { position: 'end', scope: queue_scope } });
}