window.addEvent('domready', function() {

	var ofertas = $('ofertas');

	// Esperamos a que se cargue la primera imagen
	new Element('img')
		.addEvent('load', function() {

			// Creamos el acordeon con las imagenes y los textos
			var accordion = new Fx.Accordion(ofertas.getElements('.text'), ofertas.getElements('.image'), {
				initialDisplayFx: false,
				display: 0,
				trigger: 'mouseenter',
				link: 'cancel',
				onActive: function(toggler, element) { toggler.getParent('.entry').addClass('active'); },
				onBackground: function(toggler, element) { toggler.getParent('.entry').removeClass('active'); }
			});

			// Damos visibilidad a todas las imagenes, estaba quitada desde CSS
			ofertas.getElements('.image').setStyle('display', 'block');

			// Definimos el carrusel que va a pasar automáticamente las promociones cada 5 segundos
			var carousel = {
				timer: null,
				start: function() { // Método para iniciar el carrusel
					if (this.isRunning()) this.stop();

					this.timer = (function() {
						this.display((accordion.previous + 1) % accordion.togglers.length);
					}).periodical(5000, accordion);
				},
				stop: function() { // Método para detener el carrusel
					if (!this.isRunning()) return;
					$clear(this.timer);
					this.timer = null;
				},
				isRunning: function() { // Método que indica si el carrusel está iniciado
					return this.timer != null;
				}
			};

			// Añadimos eventos para iniciar/detener el carrusel cuando el usuario tenga el ratón encima
			ofertas.getElement('.entries').addEvents({
				mouseenter: function() { carousel.stop() },
				mouseleave: function() { carousel.start() }
			});

			// Iniciamos el carrusel
			carousel.start();
		})
		.set('src', ofertas.getElement('img').src);

});