var timerID2 = null
var delay = 100
var ctrltoControl = null
var action = null
var capacity = null


function StopTheClock() {
  clearTimeout(timerID2)
}

function StartTheTimer() {
  timerRunning = true
  if (action == 'fade') {
    if (capacity > 0) {
      timerID2 = self.setTimeout("StartTheTimer()", delay);
      fadeout();
    }
    else
      StopTheClock()
  }
  else {
    if (capacity <= 100) {
      timerID2 = self.setTimeout("StartTheTimer()", delay);
      show();
    }
    else
      StopTheClock();
  }
}

function mouseover() {
  ctrltoControl = document.getElementById('contentContainerGrey');
  capacity = ctrltoControl.style.opacity * 100
  action = 'show';
  StartTheTimer();
}
function mouseout(event) {
  // This if statement avoids bubbling effect when leaving inner DIV.
  // event.relatedTarget works for fireFox but not for IE hence I had to use event.toElement.
  if ((event.relatedTarget && event.relatedTarget.id !='content') || (event.toElement && event.toElement.id !='content' )) {
    ctrltoControl = document.getElementById('contentContainerGrey');
    capacity = ctrltoControl.style.opacity * 100
    action = 'fade'
    StartTheTimer();
  }
}

function fadeout() {
  capacity = capacity - 10;
  ctrltoControl.style.opacity = capacity / 100;
  ctrltoControl.style.filter = "alpha(opacity=" + capacity + ")";
}

function show() {
  capacity = capacity + 10
  ctrltoControl.style.opacity = capacity / 100;
  ctrltoControl.style.filter = "alpha(opacity=" + capacity + ")";
}