/* [/web/js/animations.js] */

// variables para control de transiciones
var pos = new Object();
var objs = new Array();
var isActive = new Array();
var isAppearing = new Array();
var isDisAppearing = new Array();

var fromY = null; 		// desde donde hay q mover los submenues (dado por el css, se obtiene con getStyle("top"))
var toY = null; 		// hasta son 24px + desde
var lastAnim = null;	// hay q mantener sincronizada la nav, a veces, parar la transicion.

Event.observe(window, 'load', function() {
	var f = function() {
		if ($("Contents")) {
			setTimeout(f, 500);
			return;
		}

		fromY = parseInt(($("MenuNav").getStyle("top")));
		toY = fromY + 26;

		$$("#Nav a").each(function(item) {
			if (item.parentNode.parentNode.parentNode.tagName != "li" && item.className != "Button") {
				var clearSubMenues = function (e) {
					var subnav = $($($("MenuContainer").parentNode).select(".SubNav")[0]);
					var mypos = pos[subnav.id];
					var opos = 1 - mypos;

					// _duration = startDuration;
					if (isActive[mypos]) {
						outMenu(e, $("MenuContainer"));
					} else if (isActive[opos]) {
						outMenu(e, $("GalleryContainer"));
					} else if (isAppearing[mypos]) {
						// esta apareciendo el q quiero b
						try {
							// _duration = startDuration - (lastAnim.currentFrame / lastAnim.options.fps);
							if (lastAnim != null) {
								lastAnim.cancel();
							}
							isDisAppearing[mypos] = false;
							isActive[mypos] = true;
							lastAnim = null;
						} catch(e) {}
						outMenu(e, $("MenuContainer"));
					} else if (isAppearing[opos]) {
						try {
							// _duration = startDuration - (lastAnim.currentFrame / lastAnim.options.fps);
							if (lastAnim != null) {
								lastAnim.cancel();
							}
							isDisAppearing[opos] = false;
							isActive[opos] = true;
							lastAnim = null;
						} catch(e) {}
						outMenu(e, $("GalleryContainer"));
					}
				}
				
				Event.observe($(item), 'mouseout', clearSubMenues);
				Event.observe($(item), 'mouseover', clearSubMenues);
			}
		});
		
		Event.observe($("MenuButton"), 'mouseover', function(e) {
			overMenu(e, $("MenuButton"));
		});
		
		Event.observe($("MenuContainer"), 'mouseout', function(e) {
			outMenu(e, $("MenuContainer"));
		});
		
		Event.observe($("MenuNav"), 'mouseout', function(e) {
			outMenu(e, $("GalleryContainer"));
		});
		
		Event.observe($("GalleryButton"), 'mouseover', function(e) {
			overMenu(e, $("GalleryButton"));
		});
		
		Event.observe($("GalleryContainer"), 'mouseout', function(e) {
			outMenu(e, $("GalleryContainer"));
		});
		
		Event.observe($("GallerySubNav"), 'mouseout', function(e) {
			outMenu(e, $("GalleryContainer"));
		});
		
		pos["MenuNav"] = 0;
		pos["GallerySubNav"] = 1;
		objs[0] = $("MenuNav"); objs[1] = $("GallerySubNav"); 
		isActive[0] = false; isActive[1] = false;
		isAppearing[0] = false; isAppearing[1] = false;
		isDisAppearing[0] = false; isDisAppearing[1] = false;
	}
	
	f();
});

function overMenu(e, obj) 
{
	if (!obj) return;
	
	var subnav = $($(obj.parentNode).select(".SubNav")[0]);
	var mypos = pos[subnav.id];
	var opos = 1 - mypos;
	
	if (isActive[mypos] && isDisAppearing[mypos]) {
		isAppearing[mypos] = false;
		isActive[mypos] = false;
		isDisAppearing[mypos] = false;
		lastAnim.cancel();
		
		// esta desapareciendo, paro e invierto, pero con duracion inversa.
		// _duration = startDuration - (lastAnim.currentFrame / lastAnim.options.fps);
		lastAnim = null;
	}
	
	if (!isAppearing[mypos] && !isActive[mypos]) {
		$("MenuButton").removeClassName("On");
		$("GalleryButton").removeClassName("On");
		obj.addClassName("On");
		
		// saco de golpe el q se esta mostrando (si hay alguno)
		if (lastAnim !== null) {
			lastAnim.cancel();
			lastAnim = null;
		}
		
		isDisAppearing[opos] = false;
		objs[opos].setStyle({ "height" : "1px", "top": fromY + "px" });
		isActive[opos] = false;
		isAppearing[opos] = false;
		
		// si el otro no se muestra, solo muestro el actual
		lastAnim = new Effect.Parallel ([
			new Effect.Scale(subnav, null, {
				sync: true,
				scaleX: false,
				scaleContent: false,
				scaleFrom: 100,
				scaleTo: 5500/subnav.offsetHeight
			}),
						
			new Effect.Move(subnav, {
  				sync: true,
				y: toY,
				x: parseInt(subnav.getStyle("left")),
				mode: "absolute"
			})
		],
		{
			duration: 0.8,
			
			afterFinish: function() {
				isActive[mypos] = true;
				isAppearing[mypos] = false;
				lastAnim = null;
			}
		});
		
		isAppearing[mypos] = true;
	}
}

function outMenu(e, obj) 
{
	var button = $($(obj.parentNode).select(".Button")[0]);
	var subnav = $($(obj.parentNode).select(".SubNav")[0]);
	var mypos = pos[subnav.id];
	var opos = 1 - mypos;
	
	if (!isDisAppearing[mypos] && isActive[mypos]) {
		var isOver = Position.within(subnav, e.pageX, e.pageY) || Position.within(button, e.pageX, e.pageY);
		
		if (!isOver) {
			obj.select("a")[0].removeClassName("On");
			
			lastAnim = new Effect.Parallel ([
				new Effect.Scale(subnav, null, {
					sync: true,
					scaleX: false,
					scaleContent: false,
					scaleFrom: 100,
					scaleTo: 100/subnav.offsetHeight
				}),
				
				new Effect.Move(subnav, {
   					sync: true,
					y: fromY,
					x: parseInt(subnav.getStyle("left")),
					mode: "absolute"
				})
			],
			{
				duration: 0.8,
				
				afterFinish: function() {
					isDisAppearing[mypos] = false;
					isActive[mypos] = false;
					lastAnim = null;
				}
			});
			
			isDisAppearing[mypos] = true;
		}
	}
}