window.addEvent('domready', function() {
		// set menu ul li with display: none in css, to prefent seeing the whole menu while loading
		$$('.menu li ul li').setStyle('display', 'block');
		
		var last = null;
		
		$$('.menu li.hasSub ul').each( function(el) {
			el.set('tween', {property: 'opacity', duration: '600'}).get('tween').set(0);
		});
		$$('.menu li.actPath ul').each( function(el) {
			if( el.getElement('li.actPath') && el.getElement('li ul') )
				el.set('tween', {property: 'opacity', duration: '600'}).get('tween').set(1);
		});
		
		$$('.menu li').addEvents({
			'mouseenter': function() {
				//hide all "old" Elements
				if ( (last) && (last != this) && (false != this.getParent('ul').hasChild(last)) ) {
					last.getElements('ul').each( function (el) {
						el.set('tween', {property: 'opacity', duration: '20'}).get('tween').start(0);
					});
					last.getParent('ul').getElements('li').removeClass('act');
				}
				//the action is only required if the element has subElements 
				if ( this.hasClass('hasSub') ) {
					this.getElement('ul').set('tween', {property: 'opacity', duration: '300'}).get('tween').start(1);
					this.getElement('ul').getElements('li').removeClass('act');
				}
				this.addClass('act');
			},
			'mouseleave': function(e) {
				last = this;
				//the action is only required if the element has subElements; do not hide if it's the active Path
				if ( this.hasClass('hasSub') ) {
					this.getElement('ul').set('tween', {property: 'opacity', duration: '2000'}).get('tween').start(0).chain(function() { this.removeClass('act'); }.bind(this) );
				}
			}
		})
	});