function fadeEffectNauha() { }

fadeEffectNauha.prototype.startOnCss = function(self) { alert('abstract'); }
//fadeEffectNauha.prototype.stopOnCss = function(self) { alert('abstract'); } 
//fadeEffectNauha.prototype.stopOffCss = function(self) { alert('abstract'); }
fadeEffectNauha.prototype.startOffCss = function(self) { alert('abstract'); }
fadeEffectNauha.prototype.effectOn = function() { alert('abstract'); }
fadeEffectNauha.prototype.effectOff = function() { alert('abstract'); }

fadeEffectNauha.prototype.showEffect = function() {
    var self = this;
    var startEffect = function() {        
      self.state = 'fadein';
      self.startOnCss(self);
      self.effectOn();
    }

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

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

fadeEffectNauha.prototype.hideEffect = function() {
    var self = this;
    var startEffect = function() {        
      self.state = 'fadeout';
      self.startOffCss(self);
      self.effectOff();
    }

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

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


function nauhaMenu(id, hideTimeout, showTimeout, 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);  
}
nauhaMenu.prototype = new fadeEffectNauha;

nauhaMenu.prototype.startOnCss = function(self) {
  self.element.style.top = "0px";
  self.element.style.zIndex = "10";
}
nauhaMenu.prototype.stopOnCss = function() { }
nauhaMenu.prototype.stopOffCss = function(self) {
  self.element.style.top = "-999em";
}
nauhaMenu.prototype.startOffCss = function(self) {
  self.element.style.zIndex = "0";
}


nauhaMenu.prototype.effectOn = 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.effectOn(); }, this.fadeInStepTime);
  else { 
    this.state = 'visible';
    this.opacity = 1;
  }
}
nauhaMenu.prototype.effectOff = 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.effectOff(); }, this.fadeOutStepTime); 
  else {
    this.state = 'hidden';
    this.opacity = 0;
    self.stopOffCss(self);
  }
}


  var ylanauha_tab1 = new nauhaMenu('ylanauha_tab1',100,100,400,500,0.05,0.05);
  var ylanauha_tab2 = new nauhaMenu('ylanauha_tab2',100,100,400,500,0.05,0.05);