/**
 * Script que aplicará eventos para plegar o desplegar uno o más menús verticales/horizontales sin necesidad de modificar el código HTML
 * @author Xan Torres
 * @version 1.0.2
 * @type jQuery (1.4.2)
 */
jQuery.noConflict()(function($) {

	// PARÁMETROS A DEFINIR

	// IMPORTANTE: Para las id's se debe especificar el nombre con un '#' delante, para las clases un '.' y si es un tag html se escribe tal cual
		
	var base			= ".menu_vertical";	// Id del contenedor que contendrá el/los menús desplegables
	
	var btn_act			= ".menu_actif";	// Id o clase única del elemento del menú que está activo (se expandirá al cargar la página). 
											// Este parámetro será ignorado en el caso de que el menú se desplegue en el hover
	var niveles = [
	
		{	// NIVEL 1
		"cont"			: ".cont",					// Clase de los contenedores que contendrán cada uno un botón y un menú desplegable
		"btn"			: ".puce",					// Botón que muestra/oculta el menú (debe estar dentro del contenedor)
		"menu"			: ".sous_menu_vertical"		// Menú desplegable que se mostrará/ocultará (típicamente un <div>, <ul> o un <dl> dentro del contenedor).
		}
		
		/*,{	// NIVEL 2
		"cont"			: ".submenu",
		"btn"			: "h4",
		"menu"			: ".subdesplegable"
		
		} */

		/* ELIMINA O COMENTA ESTA LINEA PARA USAR ESTE NIVEL <--
		,{	// NIVEL 3
		"cont"			: ".subsubmenu",
		"btn"			: "h5",
		"menu"			: ".subsubdesplegable"
		
		} */
	];

	var veloc			= "normal";			// Velocidad en que se desplegará el menú (slow, normal, fast o el número de milisegundos sin comillas)
	
	var hover			= false;			// Especifica si el evento se producirá al hacer click (false) o al pasar el mouse por encima (true)
	
	var pleg_out 		= false;			// Variable que especifica si el menú se plegará al hacer click fuera del contenedor

	var efectos = {
		"height"		: 'toggle' 			// Expandir/contraer verticalmente (elimina esta linea para deshabilitar el efecto)
		,"opacity"		: 'toggle'			// Difuminar (elimina esta linea para deshabilitar el efecto)
	}

	
	// INICIO SCRIPT -->
			
	$.each(niveles, function(index,curr) {
	
		if (hover) {
		
			// Al cargar la página ocultamos todos los menús
			$(curr["menu"], curr["cont"]).hide();
		
			$(curr["btn"], base).hover(function() {
				// Mostramos el menú sobre cuyo botón estamos
				$(curr["menu"],$(this).closest(curr["cont"])).not(":visible").animate(efectos,veloc);
			});
			
			$(curr["cont"],base).hover(null,function() {
				// Cuando se salga del contenedor actual lo ocultamos
				$(curr["menu"]).stop(true,true).not(":hidden").animate(efectos,veloc);
			});
		
		} else {
		
			// Al cargar la página ocultamos los menús inactivos
			var activo = $(btn_act, base).closest(curr["menu"]);
			$(curr["menu"] + ":visible", curr["cont"]).not(activo).hide();
			$(curr["menu"] + ":hidden", $(activo).closest(curr["cont"])).show();
		
			// Al hacer click plegamos o desplegamos los menús
			$(curr["btn"], base).click(function() {
			
				// Obtenemos el menu sobre el que se ha hecho click
				var actu = $(curr["menu"],$(this).closest(curr["cont"]));

				// Mostramos/ocultamos el menú sobre el que se ha clicado y ocultamos el resto
				$(curr["menu"],curr["cont"]).not(actu).stop(true,true).not(":hidden").add(actu).mtoggle(index);
				
			});
		}
	});
	
	// Función para ocultar/mostrar el menú y submenús actuales
	$.fn.mtoggle = function (index) {
	
		// Ocultamos los menús hijos recursivamente en caso de que el actual esté visible
		if ($(this).is(':visible') && index < niveles.length-1) {
			$(niveles[index+1]["menu"], this).stop(true,true).not(":hidden").mtoggle(index+1);
		}
		// Ocultamos o mostramos el menú actual
		$(this).animate(efectos,veloc);
	}
	
	if (pleg_out && !hover) {
	
		// Escondemos todos los menus desplegados si se hace click fuera del contenedor
		$(document).not($(base).children()).click(function() {
			$(niveles[0]["menu"],base).not(":hidden").mtoggle(0);
		});
		
		// Detenemos el evento si se hace click sobre un elemento del contenedor
		$(base).children().click(function(e){
			e.stopPropagation();
		});
	}	
	
	// <-- FIN SCRIPT

});