window.addEvent('domready', function() {
	var menuInstance = new myMenu('menulist');
	spacerUpdate();
});

window.addEvent('load', function() {
	spacerUpdate();
});

// fonction qui met a jour la hateur du block "bodySpacer" pour que les lignes qu'on voit en fond ne soient pas décalées
var spacerUpdate = function() {
	var heightBody = ($('body').getSize().y - $('bodySpacer').getSize().y)+1; // on recupere la hauteur du div avec l'id body ... ca fonctionne mieux en ajoutant 1 ?!
	if(parseInt(heightBody/7) != heightBody/7) { // 7px > la hauteur de l'image qu'on utile pour le fond du div body...
		for(var i = 0; parseInt((heightBody+i)/7) != (heightBody+i)/7; i++);
		$('bodySpacer').setStyle('height', i);
	}
}

var myMenu = new Class({
	
	initialize: function(el, options) {
		this.target = el;
		this.setAnim();
	},
	
	setAnim: function() {
		this.target = $(this.target);
		this.target.getChildren('li').each(function(thisel) { // on parcours les elements <li> du <ul> passé en argument
			if(thisel.getFirst('ul') != null) {
				this.setAnimRecurs(thisel.getFirst('ul'), 1); // on ne modifie pas les li "principaux", seulement ceux des sous-<ul>
			}
		}.bind(this));
	},
	
	setAnimRecurs: function(el, recurs) {
		el.setStyles({
			position: 'absolute',
			display: 'block',
			visibility: 'hidden',
			width: '120px',
			top: recurs == 1 ? '25px' : '1px',
			left: recurs > 1 ? el.getParent().getSize().x-2 : 'auto',
			zIndex: 1
		});
		
		el.getChildren('li').each(function(thisli) {
			thisli.setStyles({
				position: 'relative',
				display: 'block',
				width: '120px',
				marginTop: '-1px',
				zIndex: 1
			});
			
			thisli.store('animation', new Fx.Elements());
			if(thisli.getFirst('ul') != null) {
				this.setAnimRecurs(thisli.getFirst('ul'), recurs+1);
			}
		}.bind(this));
		el.getParent().addEvent('mouseenter', function() { this.setStyle('visibility', 'visible') }.bind(el));
		el.getParent().addEvent('mouseleave', function() { this.setStyle('visibility', 'hidden') }.bind(el));
	}
});