/**************************************************************
*
*	Script		: Menu
*	Version		: 0.2
*	Auteur		: Rémi Coulon
*	Desc		: Gestion du menu principal du site de l'E@H
*
**************************************************************/

// classe pour la gestion du menu principal
// s'occupe du fonctionnement d'un secteur
var Onglet = new Class({
	
	getOptions: function(){
		return {
		};
	},
	
	// constucteur de la classe
	// prend en argument un Element et des options
	// l'element correspond a un occurence de <li> dans la liste du menu principal
	initialize : function(element, options){
		this.setOptions(this.getOptions(), options);
		this.conteneur = element;
		// l'onglet est le bloc div contenant l'image de l'onglet
		this.intitule = this.conteneur.getElement('a');
		// lors d'un clic sur l'onglet,
		// la banniere doit etre amene dans la position suivante
		// la position correspond a 'background-position-x' de '#menu'
		this.bannierePosition = this.intitule.getProperty('rel')+'px';
		// effet associe a l'onglet (mouvement vertical)
		this.effet = new Fx.Morph(this.conteneur, {duration: '1500', transition: Fx.Transitions.Elastic.easeOut, link:'cancel'});
	},
	
	// monte l'onglet (avec transition animee)
	monter : function(){
		this.effet.start({
			'margin-top':'0px',
			'padding-top':'30px'
		});
	},
	
	// descend l'onglet (avec transition animee)
	descendre : function(){
		this.effet.start({
			'margin-top':'13px',
			'padding-top':'17px'
		});
	}
	
});

Onglet.implement(new Options);

// classe pour la gestion du menu principal
var Menu = new Class({
		
	getOptions: function(){
		return {
			body : document.body,
			duree : 1500
		};
	},
	
	initialize : function(options) {
			
		this.setOptions(this.getOptions(), options);
		this.courant = this.initCourant();
		// on repertorie le div conteneur (celui qui a l'id 'menu')
		this.conteneur = $(this.options.body).getElement('#menu');
		this.banniere = this.conteneur.getElement('#banniere');
		// on ajoute un effet au conteneur
		this.effetBanniere = new Fx.Morph(this.banniere, {duration: this.options.duree, transition: Fx.Transitions.Quad.easeInOut, link:'cancel'});
		
		// on cree un tableau avec tous les occurences de la liste qui forme le menu
		this.onglets = this.conteneur.getElements('li');
		// pour chaque secteur (element de this.rubriques) on associe un objet Secteur
		this.onglets.each(function(element,index) {
			this.onglets[index] = new Onglet(element);
		}.bind(this));
		
		// pour chaque Secteur on associe taille initiale et evenement
		this.onglets.each(function(onglet,index) {
			// Si la rubrique correspond au secteur courrant
			// l'onglet est fixé en position haute
			// test : la rubrique est-elle le secteur courant ?	
			
			if (this.courant != onglet.conteneur.getProperty('class')) {				
				// on associe au secteur deux evenement : onMouseOver et onMouseOut	
				// qui correspondent a la monte ou la descente d'un onglet
				onglet.conteneur.addEvent('mouseenter', function(){
					onglet.monter();
//					this.deplacer_banniere(onglet);
				}.bind(this));
				
				onglet.conteneur.addEvent('mouseleave', function(){
					onglet.descendre();
				});	
				
				onglet.conteneur.addEvent('click', function(event){
					event.stop();
					this.deplacerBanniere(onglet);
					(function(){
						document.location = onglet.intitule.getProperty('href');
					}).delay(this.options.duree);
				}.bind(this));	
						
			}
				
		}.bind(this));	
	},
	
	// recherche s'il existe le secteur courrant
	// l'information est contenu dans l'id de la balise body
	initCourant : function(){
		return res = $(this.options.body).getProperty('id');
	},
	
	
	// deplace la banniere (ie l'image de fond du div menu)
	// pour le mettre a la position donnee par position
	deplacerBanniere : function(onglet) {
		this.effetBanniere.start({
			'margin-top': onglet.bannierePosition
		});
	}

});

Menu.implement(new Options);