/************************************************************
 * AUTHOR: Royston Tong
 *   DATE: 2006-05-01
 *   DESC: A fancier way of showing/hiding on click menu.
 ************************************************************
 *      id: target object id
 *    step: opacity change per interation
 *   speed: time (ms) between each interation
 ************************************************************/

function Fader(id, speed, step) {
  var elm = document.getElementById(id);
  var opacity = 0;
  step = step || 10;
  speed = speed || 10;
  var timeoutId = 0;
  var doTransition = false;
  if (typeof elm.style.opacity == 'string') { doTransition = true; }
  else if (typeof elm.style.filter == 'string') { doTransition = true; }

  elm.fade = fade;

  this.getTarget = getTarget;
  this.toggle = toggle;
  this.fadeIn = fadeIn;
  this.fadeOut = fadeOut;
  this.show = show;
  this.hide = hide;

  function getTarget() {
    return elm;
  }

  function toggle() {
    (elm.style.display == 'none') ? fadeIn() : fadeOut();
    return;
  }

  function fadeIn() {
    window.clearTimeout(timeoutId);
    opacity = 0;
    step = Math.abs(step);
    if (doTransition) {
      fade();
      elm.style.display = 'block';
    } else {
      show();
    }
    return;
  }
  function show() {
    window.clearTimeout(timeoutId);
    elm.style.display = 'block';
    return;
  }

  function fadeOut() {
    window.clearTimeout(timeoutId);
    opacity = 100;
    step = -1 * Math.abs(step);
    if (doTransition) {
      fade();
    } else {
      hide();
    }
    return;
  }
  function hide() {
    window.clearTimeout(timeoutId);
    elm.style.display = 'none';
    return;
  }

  function fade() {
    opacity += step;
    if (opacity > 100) opacity = 100;
    if (opacity < 0) opacity = 0;
    elm.style.opacity = (opacity / 100);
    elm.style.filter = 'Alpha(opacity=' + opacity + ')';
    if (opacity > 0 && opacity < 100) {
      timeoutId =  window.setTimeout('document.getElementById(\'' + id + '\').fade()', speed);
    } else if (step < 0) {
      elm.style.display = 'none';
    }
    return;
  }
}