$(function () {

	$('.evento_escuela, .evento_local, .evento_tocata, .evento_concierto').each(function () {

		// options

		var distance = 10;

		var time = 250;

		var hideDelay = 500;



		var hideDelayTimer = null;



		// tracker

		var beingShown = false;

		var shown = false;



		var trigger = $(this);

		var popup = $('.evento ul', this).css('opacity', 0);



		// set the mouseover and mouseout on both element

		$([trigger.get(0), popup.get(0)]).mouseover(function () {

			// stops the hide event if we move from the trigger to the popup element

			if (hideDelayTimer) clearTimeout(hideDelayTimer);



			// don't trigger the animation again if we're being shown, or already visible

			if (beingShown || shown) {

				return;

			} else {

				beingShown = true;



				// reset position of popup box

				popup.css({

					bottom: 20,

					left: -76,

					display: 'block' // brings the popup back in to view

				})



				// (we're using chaining on the popup) now animate it's opacity and position

				.animate({

					bottom: '+=' + distance + 'px',

					opacity: 1

				}, time, 'swing', function() {

					// once the animation is complete, set the tracker variables

					beingShown = false;

					shown = true;

				});

			}

		}).mouseout(function () {

			// reset the timer if we get fired again - avoids double animations

			if (hideDelayTimer) clearTimeout(hideDelayTimer);



			// store the timer so that it can be cleared in the mouseover if required

			hideDelayTimer = setTimeout(function () {

				hideDelayTimer = null;

				popup.animate({

					bottom: '-=' + distance + 'px',

					opacity: 0

				}, time, 'swing', function () {

					// once the animate is complete, set the tracker variables

					shown = false;

					// hide the popup entirely after the effect (opacity alone doesn't do the job)

					popup.css('display', 'none');

				});

			}, hideDelay);

		});

	});

});