// var object = new hoverMenu("element.id", 100, 100, 400, 500, 0.05, 0.05);
function hoverMenu(id, showTimeout, hideTimeout, fadeInTime, fadeOutTime, fadeInStep, fadeOutStep) {    
    this.timer = null;
    this.id = id;
    this.element = document.getElementById(id);
    this.hideTimeout = hideTimeout;
    this.showTimeout = showTimeout;
    this.state = 'hidden';
    this.opacity = 0;
    this.fadeInStep = fadeInStep;
    this.fadeOutStep = fadeOutStep;
    this.fadeInStepTime = parseInt(fadeInTime * this.fadeInStep);
    this.fadeOutStepTime = parseInt(fadeOutTime * this.fadeOutStep);
}

hoverMenu.prototype.fadeIn = function() {
  var self = this;

	this.opacity += this.fadeInStep;
  this.element.style.opacity = this.opacity;
	this.element.style.filter = "alpha(opacity=" + this.opacity*100 + ")";

	if (this.opacity < 1) this.timer = window.setTimeout(function() { self.fadeIn(); }, this.fadeInStepTime);
  else { 
    this.state = 'visible';
    this.opacity = 1;
  }
}

hoverMenu.prototype.fadeOut = function() {
  var self = this;

	this.opacity -= this.fadeOutStep;
  this.element.style.opacity = this.opacity;
	this.element.style.filter = "alpha(opacity=" + this.opacity*100 + ")";

  if (this.opacity > 0.00) this.timer = window.setTimeout(function() { self.fadeOut(); }, this.fadeOutStepTime); 
  else {
    self.hideCss(self);
    this.state = 'hidden';
    this.opacity = 0;
  }
}


hoverMenu.prototype.showMenu = function() {
    if (this.state == 'visible' || this.state == 'timein' || this.state == 'fadein') return;
    var self = this;
    var showMenu = function() {        
      self.state = 'fadein';
      self.showCss(self);
      self.fadeIn();
    }

    if (this.state == 'fadeout' || this.state == 'timeout') {
      window.clearTimeout(this.timer);
      showMenu();
      return;
    }
    

    if (arguments.length == 0 && this.showTimeout > 0) {    
      if (this.timer != null) {
        window.clearTimeout(this.timer);                    
      }
      this.state = 'timein';
      this.timer = window.setTimeout(showMenu, this.showTimeout);
    } else if (arguments.length == 2) {
      if (this.state == 'visible' || this.state == 'timein' || this.state == 'fadein') {
        alert(this.state);
        showMenu();
      }
    }
    else {
      showMenu();
    }
}

hoverMenu.prototype.hideMenu = function() {
    if (this.state == 'hidden' || this.state == 'timeout' || this.state == 'fadeout') return;
    var self = this;
    var hideMenu = function() {        
      self.state = 'fadeout';
      self.fadeoutCss(self);
      self.fadeOut();
    }

    if (this.state == 'fadein') {
      window.clearTimeout(this.timer);
      hideMenu();
      return;
    }

    
    if (arguments.length == 0 && this.hideTimeout > 0) {
      if (this.timer != null) {
          window.clearTimeout(this.timer);                    
      }
      this.state = 'timeout';
      this.timer = window.setTimeout(hideMenu, this.hideTimeout);
    }
    else {
      hideMenu();
    }
}

hoverMenu.prototype.showCss = function(self) {
  self.element.style.display = 'inline';
} 
hoverMenu.prototype.hideCss = function(self) {
  self.element.style.display = 'none';
}
hoverMenu.prototype.fadeoutCss = function(self) {

}