/**
 * Script para realizar menus en los que cambia una imagen al seleccionar un item
 */


/**
 * Muestra la imagen del menu que se esta viendo
 */
function showChangeImagesMenuImage (menuZone, selectedLink, inOut, inOpen)
	{

	if(menuZone.changeImagesMenuFx==null)
		{
		if(menuZone.changeImagesMenuFxNull===undefined)
			menuZone.changeImagesMenuFxNull = 0;

		if(menuZone.changeImagesMenuFxNull<3)
			{
			setTimeout(function(){showChangeImagesMenuImage(menuZone,selectedLink,idOpen);},250);
			menuZone.changeImagesMenuFxNull++;
			}
		
		return;
		}
	
	if(menuZone.newShowingChangeImageMenuLink==selectedLink)
		{
		if(inOpen||selectedLink!=menuZone.showingChangeImageMenuLink)
			{
			try
				{
				menuZone.changeImagesMenuFx.cancel();
				menuZone.changeImagesMenuFx.goTo((selectedLink==null) ? 1 : selectedLink.selectedImageIndex);
				}
			catch (err){}
			}

		if(menuZone.onChangeImageFunction!=null)
			menuZone.onChangeImageFunction(menuZone,menuZone.showingChangeImageMenuLink,selectedLink,inOut,inOpen);

		menuZone.showingChangeImageMenuLink = selectedLink;
		}
	}

/**
 * Muestra la imagen del menu que se esta viendo
 */
function setChangeImagesMenuNewLink (menuZone, selectedLink, inOut, timeOut)
	{
	menuZone.newShowingChangeImageMenuLink = selectedLink;
	setTimeout(function(){showChangeImagesMenuImage(menuZone,selectedLink, inOut, false);},timeOut);
	}


/**
 * Inicia un menu de imagenes
 * menuZone.- es el id o elemento de menu
 * opts.- opciones (opcional), puede contener
 *		linksCSSMatch: Elementos de enlace del menu (default: 'a');
 *		activeLinkId: Id CSS del link que esta activo
 *		imagesZoneCSSMatch: Elemento de la zona de imagenes
 *		mouseOverTime: Tiempo necesario en que debe de estar el mouse sobre un link para hacer el cambio de imagen
 *		mouseOutTime: Tiempo nesario en que debe de estar el mouse fuera de la zona quitar la imagen actual y porner la de default
 *		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
 *
 *		onChangeImageFunction(menuZone, oldLink, newLink, inOut, inOpen): Funcion opcional que se manda a llamar cuando se cambia una imagen, con sus parametros...
 *				menuZone.- Zona de menu
 *				oldLink.- Link anterior
 *				newLink.- Link nuevo
 *				inOut.- Booleano que indica si se esta saliendo de la zona de menu
 *				inOpen.- Booleano que indica si es el cambio en modo de apertura
 */
function initChangeImagesMenu (menuZone,opts)
	{

	menuZone = $(menuZone);
	if(menuZone===undefined||menuZone==null)
		return;

	var defaultOpts = {linksCSSMatch:'a', activeLinkId:'selectedMenuItem', imagesZoneCSSMatch:'.imagesMenu', mouseOverTime: 500, mouseOutTime: 500, changeFxType:'right', changeFxDuration:250, changeFxSteps:1000};
	
	if(opts===undefined||opts==null)
		{
		opts = defaultOpts;
		}
	else
		{
		if(opts.linksCSSMatch===undefined)
			opts.linksCSSMatch = defaultOpts.linksCSSMatch;

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

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

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

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

		}

	
	var imagesZone = menuZone.getElement(opts.imagesZoneCSSMatch);

	if(imagesZone===undefined||imagesZone==null)
		return;
				

	var menuLinks  = menuZone.getElements(opts.linksCSSMatch);

	var index=2;
	var selectedLink = null;

	menuZone.newShowingChangeImageMenuLink = null;
	menuZone.showingChangeImageMenuLink = null;
	menuZone.changeImagesMenuFx = null;

	if(opts.onChangeImageFunction===undefined)
		menuZone.onChangeImageFunction = null;
	else
		menuZone.onChangeImageFunction = opts.onChangeImageFunction;
			
				
	menuLinks.each
		(
		function(a) 
			{
			if(selectedLink==null&&a.id!=null&&a.id==opts.activeLinkId)
				selectedLink = a;
						
			a.selectedImageIndex = index;
			
			a.addEvent('mouseenter',
				function(event) 
					{
					setChangeImagesMenuNewLink(menuZone,a,false,opts.mouseOverTime);
					}
				);

			a.addEvent('mouseleave',
				function(event) 
					{
					menuZone.newShowingChangeImageMenuLink = menuZone.showingChangeImageMenuLink;
					}
				);

			index++;
			}
		);
	

	menuZone.addEvent('mouseenter',
		function(event) 
			{
			menuZone.newShowingChangeImageMenuLink = menuZone.showingChangeImageMenuLink;
			}
		);
	
	menuZone.addEvent('mouseleave',
		function(event) 
			{
			setChangeImagesMenuNewLink(menuZone,selectedLink,true,opts.mouseOutTime);
			}
		);
	


	var fxOptions = {duration: opts.changeFxDuration, steps: opts.changeFxSteps, autostart: false, enable:{keyboard: true}};

	
	switch(opts.changeFxType.toLowerCase())
		{
		case 'left':
			menuZone.changeImagesMenuFx = new Fx.Cycles.inOutLeft(imagesZone,fxOptions);
			break;

		case 'down':
			menuZone.changeImagesMenuFx = new Fx.Cycles.inOutDown(imagesZone,fxOptions);
			break;

		case 'up':
			menuZone.changeImagesMenuFx = new Fx.Cycles.inOutUp(imagesZone,fxOptions);
			break;

		case 'fade':
			menuZone.changeImagesMenuFx = new Fx.Cycles.fadeZoom(imagesZone,fxOptions);
			break;
		
		default:
			menuZone.changeImagesMenuFx = new Fx.Cycles.inOutRight(imagesZone,fxOptions);
			break;
		}
	
	menuZone.newShowingChangeImageMenuLink = selectedLink;
	showChangeImagesMenuImage(menuZone,selectedLink, false, true);
	}