/*

macht aus <ul><li>[Menü]<ul><li>[SubMenü]</li></ul></li></ul>
ein ansehnliches Menü

benötigt Mootools
*/

window.addEvent('domready', function() {

  var list = $$('#menu li');
  
  list.each(function(element) {
    if ($(element).getElement('ul')) {
      
      
      el = $(element).getElement('ul')
      var fx = new Fx.Morph(el, {duration:1000, wait:false, transition: Fx.Transitions.Elastic.easeOut});
      
      
//      el.setStyle('left', 0);
      el.setStyle('margin-top', 0);
      el.setStyle('opacity', 0);
      el.setStyle('display', 'none');
      el.setStyle('z-index', '20');
      
      element.addEvent('mouseenter', function(){
        this.out = true;
        fx.clearChain();
        fx.options['transition'] = Fx.Transitions.Elastic.easeInOut;
        fx.element.setStyle('display', 'block');
        fx.element.setStyle('z-index', '40');
        fx.start({'margin-top': 10,'opacity': 1});
      });
     
      element.addEvent('mouseleave', function(){
        this.out = false;
        (function(){
          if (!this.out){
            fx.clearChain();
            fx.element.setStyle('z-index', '20');
            fx.options['transition'] = Fx.Transitions.Sine.easeInOut;
            fx.start({'opacity': 0}).chain(function(){fx.element.setStyle('display', 'none');fx.element.setStyle('margin-top', '0');});
          }
        }).delay(500, this);
      });

      var lista = $(el).getElements('li');
      lista.each(function(element) {
        element.setStyle('opacity', 0.9);
        var lifx = new Fx.Morph(element, {duration:500, wait:false, transition: Fx.Transitions.Expo.easeOut});
        
        element.addEvent('mouseenter', function(){
          lifx.start({'opacity': 1});
        });
        element.addEvent('mouseleave', function(){
          lifx.start({'opacity': 0.8});
        });       
      });     
      
    }  
  });});