/* Aug 19th 2009, Scott Meves */

var Menu = Class.create({
  initialize: function(ul) {
    if (!$(ul)) return;
    $A(ul.childElements()).each(function(li) {
      if (li.tagName == 'LI') {
        li.observe('mouseover', this.addActiveClass.bind(this));
        li.observe('mouseout', this.removeActiveClass.bind(this));
        if (li.getElementsByTagName('ul').length > 0) {
          li.isIn = false;
          li.observe('mouseover', this.activateMenu.bind(this, li));
          li.observe('mouseout', this.deactivateMenu.bind(this, li));
        }
      }
    }.bind(this))
  },
  
  addActiveClass: function(event) {
    var el = event.findElement('li');
    el.addClassName('active');
  },
  
  removeActiveClass: function(event) {
    var el = event.findElement('li');
    el.removeClassName('active');
  },
  
  activateMenu: function(li) {
    clearTimeout(li.outTimeout);
    if (!li.isIn) {
      $A(li.childElements()).each(function(ul) {
        if (ul.tagName == 'UL') {
          clearInterval(ul.interval);
          ul.dimensions = ul.getDimensions();
          ul.clippingRectangle = [0, ul.dimensions.width+5, 4, 0]; //top right bottom left
          ul.interval = setInterval(function() { this.showAnimation(ul); }.bind(this), 20);
        }
      }.bind(this));
    }
    li.isIn = true;
  },
  
  showAnimation: function(el) {
  	el.clippingRectangle[2] += 10;
  	if (el.clippingRectangle[2] >= el.dimensions.height) {
  	  el.clippingRectangle[2] = el.dimensions.width;
  	  clearInterval(el.interval);
  	  // reset the clip: browser-specific
  	  if (document.all && !window.opera) {
  	    el.style.clip = 'rect(auto)';
  	  } else {
  	    el.style.clip = '';
  	  }
  	  return;
  	}
  	el.style.clip = 'rect(' + el.clippingRectangle.join('px ') + 'px)';
  	el.style.display = 'block';
  },
  
  deactivateMenu: function(li) {
    li.outTimeout = setTimeout(function() { this.deactivateMenu2(li); }.bind(this), 20);    
  },

  deactivateMenu2: function(parentLi) {
    $A(parentLi.childElements()).each(function(childUl) {
      if (childUl.tagName == 'UL') {
        clearInterval(childUl.interval);
        childUl.interval = setInterval(function() { this.hideAnimation(childUl); }.bind(this), 20);  
      }
    }.bind(this));
    parentLi.removeClassName('active');
    parentLi.isIn = false;
  },
  
  hideAnimation: function(el) {
    if (!el.clippingRectangle) return;
    el.clippingRectangle[2] -= 10;
    if (el.clippingRectangle[2] <= 4) {
      el.clippingRectangle[2] = 4;
      clearInterval(el.interval);
      // reset the clip: browser-specific
      if (document.all && !window.opera) {
        el.style.clip = 'rect(auto)';
      } else {
        el.style.clip = '';
      }
      el.hide();
      return;
    }
    el.style.clip = 'rect(' + el.clippingRectangle.join('px ') + 'px)';
  }
  
});