/**
 * Script para realizar menus en los que cambia una imagen conteniendo submenus
 */


/**
 * Muestra u Oculta el submenu
 */
function showOrHideChangeImagesSubmenu (menuZone, submenu, show)
	{
	if(submenu==null)
		return;
	
	submenu.toggleSubmenuFx.pause();

	var size = submenu.getStyle(menuZone.subMenusChangeAttribute).toInt();

	if(show)
		{
		if(size<submenu.showingSize)
			{
			submenu.toggleSubmenuFx.options.duration = menuZone.subMenusShowDuration;
			submenu.toggleSubmenuFx.toggleProperty(menuZone.subMenusChangeAttribute, size, submenu.showingSize,true);
			}
		
		if(menuZone.subMenusLinkShowingCSSClass!=null)
			submenu.relatedLink.addClass(menuZone.subMenusLinkShowingCSSClass);
						
		return;
		}
	
	if(size>menuZone.subMenusHiddenSize)
		{
		submenu.toggleSubmenuFx.options.duration = menuZone.subMenusHiddenDuration;
		submenu.toggleSubmenuFx.toggleProperty(menuZone.subMenusChangeAttribute,size,menuZone.subMenusHiddenSize,true);
		}
	
	if(menuZone.subMenusLinkShowingCSSClass!=null)
		submenu.relatedLink.removeClass(menuZone.subMenusLinkShowingCSSClass);
	}

/**
 * Funcion principal que muestra u oculta los submenus
 */
function changeSubmenuOfChangeImagesMenu (menuZone, oldLink, newLink, inOut, inOpen)
	{
	if(inOpen)
		return;

	if(menuZone.inChangeSubmenuFlag)
		{
		setTimeout(function(){changeSubmenuOfChangeImagesMenu(menuZone,oldLink,newLink,inOut,inOpen);},200);
		return;
		}

	
	menuZone.inChangeSubmenuFlag = true;

	if(inOut||newLink==null||newLink.relatedSubmenu==null)
		{
		showOrHideChangeImagesSubmenu(menuZone,menuZone.showingSubmenu,false);
		menuZone.showingSubmenu = null;		
		}
	else
		{
		if(newLink.relatedSubmenu!=menuZone.showingSubmenu)
			showOrHideChangeImagesSubmenu(menuZone,menuZone.showingSubmenu,false);
		
		menuZone.showingSubmenu = newLink.relatedSubmenu;
		showOrHideChangeImagesSubmenu(menuZone,menuZone.showingSubmenu,true);
		}

	menuZone.inChangeSubmenuFlag = false;
	}


/**
 * Inicia un menu de imagenes y submenus
 * menuZone.- es el id o elemento de menu
 * opts.- opciones (opcional), puede contener
 *		linksCSSMatch: Elementos de enlace del menu (default: '.menuItem a');
 *		subMenusCSSMatch: Elementos de submenu
 *		subMenusHorizontal: Indica si los menus seran horizontales
 *		subMenusHiddenSize: Tamano de un submenu cuando esta oculto
 *		mouseOverTime: Tiempo necesario en que debe de estar el mouse sobre un link para hacer el cambio de imagen y menu
 *		mouseOutTime: Tiempo nesario en que debe de estar el mouse fuera de la zona quitar la imagen actual y porner la de default (ocultando los submenus)
 *		subMenusShowDuration: Tiempo del efecto que muestra los submenus
 *		subMenusHiddenDuration: Tiempo del efecto que oculta los submenus
 *		subMenusLinkShowingCSSClass: Clase que adquiren los links que abren el submenu
 *		
 *		changeImagesOptions: Objeto con las opciones para el cambio de imagenes, pude tener...
 *			activeLinkId: Id CSS del link que esta activo
 *			imagesZoneCSSMatch: Elemento de la zona de imagenes
 *			changeFxType: Tipo de efecto de cambio de imagen, puede ser: 'right', 'left', 'up', 'down' o 'fade'
 *			changeFxDuration: Tiempo del efecto de cambio de imagenes
 *			changeFxSteps: Pasos del efecto de cambio de imagenes 
 */
function initChangeImagesMenuWithSubmenus (menuZone,opts)
	{
	menuZone = $(menuZone);
	if(menuZone===undefined||menuZone==null)
		return;

	var defaultOpts = {linksCSSMatch:'.menuItem a', subMenusCSSMatch:'.subMenu', subMenusHorizontal:true, subMenusHiddenSize:10, mouseOverTime:750, mouseOutTime:500, subMenusShowDuration:1000, subMenusHiddenDuration:750, subMenusLinkShowingCSSClass: 'showingSubmenu'};
	
	if(opts===undefined||opts==null)
		{
		opts = defaultOpts;
		}
	else
		{
		if(opts.linksCSSMatch===undefined)
			opts.linksCSSMatch = defaultOpts.linksCSSMatch;

		if(opts.subMenusCSSMatch===undefined)
			opts.subMenusCSSMatch = defaultOpts.subMenusCSSMatch;

		if(opts.subMenusHorizontal===undefined)
			opts.subMenusHorizontal = defaultOpts.subMenusHorizontal;

		if(opts.subMenusHiddenSize===undefined)
			opts.subMenusHiddenSize = defaultOpts.subMenusHiddenSize;

		if(opts.mouseOverTime===undefined)
			opts.mouseOverTime=defaultOpts.mouseOverTime;
				
		if(opts.mouseOutTime===undefined)
			opts.mouseOutTime=opts.mouseOverTime;

		if(opts.subMenusShowDuration===undefined)
			opts.subMenusShowDuration=defaultOpts.subMenusShowDuration;
		
		if(opts.subMenusHiddenDuration===undefined)
			opts.subMenusHiddenDuration = Math.round(opts.subMenusShowDuration*0.75);

		if(opts.subMenusLinkShowingCSSClass===undefined)
			opts.subMenusLinkShowingCSSClass=defaultOpts.subMenusLinkShowingCSSClass;
				
		}
	
	if(opts.changeImagesOptions===undefined||opts.changeImagesOptions==null)
		{
		opts.changeImagesOptions = {linksCSSMatch:opts.linksCSSMatch, mouseOverTime: opts.mouseOverTime, mouseOutTime: opts.mouseOutTime};
		}
	else
		{
		opts.changeImagesOptions.linksCSSMatch = opts.linksCSSMatch;
		opts.changeImagesOptions.mouseOverTime = opts.mouseOverTime;
		opts.changeImagesOptions.mouseOutTime = opts.mouseOutTime;
		}
	
	var submenus = menuZone.getElements(opts.subMenusCSSMatch);

	if(submenus===undefined||submenus==null||submenus.length<=0)
		{
		initChangeImagesMenu(menuZone,opts.changeImagesOptions);
		return;
		}
	
	menuZone.subMenusChangeAttribute = (opts.subMenusHorizontal)?'width':'height';
	menuZone.subMenusShowDuration = opts.subMenusShowDuration;
	menuZone.subMenusHiddenDuration = opts.subMenusHiddenDuration;
	menuZone.subMenusHiddenSize = opts.subMenusHiddenSize;
	menuZone.subMenusLinkShowingCSSClass = opts.subMenusLinkShowingCSSClass;
		
	menuZone.showingSubmenu = null;
	menuZone.inChangeSubmenuFlag = false;
				
				
	submenus.each
		(
		function(submenu) 
			{
			submenu.showingSize = submenu.getStyle(menuZone.subMenusChangeAttribute);

			if(submenu.showingSize===undefined||submenu.showingSize===null)
				submenu.showingSize = menuZone.subMenusHiddenSize*2;
			else
				submenu.showingSize = submenu.showingSize.toInt();
						
			submenu.setStyle(menuZone.subMenusChangeAttribute,menuZone.subMenusHiddenSize);
			submenu.setStyle('display','block');
			submenu.toggleSubmenuFx =  new Fx.Toggle(submenu);
			}
		);
	

	var menuLinks  = menuZone.getElements(opts.linksCSSMatch);
	
	var index=0;
				
	menuLinks.each
		(
		function(a) 
			{
			if(index<submenus.length&&(!a.hasClass('withoutSubmenu')))
				{
				a.relatedSubmenu = submenus[index];
				a.relatedSubmenu.relatedLink = a;
				index++;
				}
			else
				{
				a.relatedSubmenu = null;
				}
			}
		);
	
	opts.changeImagesOptions.onChangeImageFunction = function(menuZone, oldLink, newLink, inOut, inOpen) {changeSubmenuOfChangeImagesMenu(menuZone,oldLink,newLink,inOut,inOpen);};
	
	initChangeImagesMenu(menuZone,opts.changeImagesOptions);
	}