window.addEvent('domready', function() {
	PrepararEfecto('garden_center', [
		{enlace:'decoracion', nombre:'decoración'},
		{enlace:'bricojardineria', nombre:'bricojardinería'},
		{enlace:'jardin', nombre:'jardín'},
		{enlace:'huerta', nombre:'huerta'},
		{enlace:'terraza', nombre:'terraza/balcón'},
		{enlace:'outlet', nombre:'outlet'}
		]);
	PrepararEfecto('servicios', [
		{enlace:'floristeria', nombre:'floristería'},
		{enlace:'disventos', nombre:'diseño de eventos'},
		{enlace:'disterrazas', nombre:'dis.jardines/terrazas'},
		{enlace:'servicio_asesoramiento', nombre:'servicio asesoramiento'},
		{enlace:'servicio_empresas', nombre:'servicio empresas'},
		{enlace:'talleres_cursos', nombre:'talleres y cursos'}
		]);
	PrepararEfecto('club_berroa', [
		{enlace:'haztesocio', nombre:'hazte socio'},
		{enlace:'promociones', nombre:'promociones'}
		]);
	PrepararEfecto('calendario', [
		{enlace:'enero', nombre:'enero'},
		{enlace:'febrero', nombre:'febrero'},
		{enlace:'marzo', nombre:'marzo'},
		{enlace:'abril', nombre:'abril'},
		{enlace:'mayo', nombre:'mayo'},
		{enlace:'junio', nombre:'junio'},
		{enlace:'julio', nombre:'julio'},
		{enlace:'agosto', nombre:'agosto'},
		{enlace:'septiembre', nombre:'septiembre'},
		{enlace:'octubre', nombre:'octubre'},
		{enlace:'noviembre', nombre:'noviembre'},
		{enlace:'diciembre', nombre:'diciembre'}
		]);

});

function PrepararEfecto(campo, enlaces) {
	var boton = document.id(campo);
	if (!boton)
	{
		alert("no está el botón " + campo)
			return
	}
	var menu = new Element('div', { 'class':'menu'});
	document.body.appendChild(menu);
	var contenido =[];
	contenido.push('<div class="' + campo + '">');
    Array.each(enlaces, function(item) {
        contenido.push('<a href="' + item.enlace + '.html">' + item.nombre + '</a>');
	});
	contenido.push('<img src="img/' + campo + 'buttomover.png">');
	contenido.push('</div>');
	menu.innerHTML = contenido.join('');


	boton.addEvent('mouseenter', function(e) {
		mostrar(menu, boton);
	})
	menu.addEvent('mouseleave', function(e) {
		var temporizador = window.setTimeout(function() { ocultar(menu) }, 500);
		menu.set('temporizador', temporizador);
	})

	menu.getFirst().setStyle('display','none');
}

function mostrar(menu, boton)
{
	if (menuActual && menuActual != menu) {
		ocultar(menuActual);
	}

	menu.setStyle('top', boton.getTop());
	menu.setStyle('left', boton.getLeft());
	MostrarOcultar(menu.getFirst(), true);
	if (!boton.original)
		boton.original = boton.src;

	boton.src = 'img/' +boton.id + 'buttomover.png';

	menuActual = menu;
	var temporizador = menu.get('temporizador');
	if (temporizador) {
		window.clearTimeout(temporizador);
		menu.set('temporizador', null);
	}

}
function ocultar(menu)
{
	MostrarOcultar(menu.getFirst(), false);
	var temporizador = menu.get('temporizador');
	if (temporizador) window.clearTimeout(temporizador);
	menu.set('temporizador', null);
	menuActual = null;
}
var menuActual;

function MostrarOcultar(objname, forzarMostrar)
{
    var item = document.id(objname);
    if (!item) return;

    var accion = '';
    if (typeof forzarMostrar != 'undefined') {
        if (forzarMostrar)
            accion = 'abrir';
        else
            accion = 'cerrar';
    } else {
        if (item.style.display == 'none')
            accion = 'abrir';
        else
            accion = 'cerrar';
    }

    var temporizador = item.get('temporizador');
    if (accion=='cerrar') {
        if (!temporizador)
        {
            temporizador = window.setTimeout( function() {MostrarOcultar(item, false)}, 200);
            item.set('temporizador', temporizador);
            return;
        }
    }
    if (temporizador)
    {
        window.clearTimeout(temporizador);
        item.set('temporizador', null);
    }

    var altura = item.get('altura'),
        padding = item.get('padding'),
        altoActual = item.getHeight(),
        destino;

    if (!altura && (accion == 'abrir')) {
        if (item.style.display == 'none') {
            item.style.display = '';
            item.style.height = '';
        }
        altura = item.getHeight();
        // ajustamos a 0 para restar padding
        item.style.height = '0';
        padding = item.getHeight();
        if (padding == altura) padding = 0;
        altura -= padding;
        item.style.height = altoActual + 'px';
        item.set('altura', altura);
        item.set('padding', padding);
    }
    if (altoActual>0)
        altoActual -= padding;

    if (accion == 'abrir') {
        destino = altura;
        if (item.style.display == 'none') {
            item.style.display = '';
        }
    }
    else
        destino = 0;

    if (item.Transition)
        item.Transition.cancel();
    item.style.overflow = 'hidden';
    item.Transition = new Fx.Tween(item,
		    {
		        property: 'height',
		        duration: 400
		    }
	    ).start(altoActual, destino + 'px').chain(function() {
				if (destino == 0)
					{
						item.style.display = 'none';
						item.parentNode.setStyle('left', null);
						var boton = document.id( item.className );
						boton.src = boton.original;
					}
				else
					item.style.height = '';
				});
}