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

	// Pillamos la capa de slide
	var slideshow = $('slideshow');
	if (!slideshow) return;

	// Le establecemos los estilos necesarios
	slideshow.setStyle('overflow', 'hidden');

	$extend(slideshow, {
		slides: [],
		current: 0,
		slideStep: slideshow.getSize().x,
		wrapper: null,
		timer: null,
		sleep: -1,

		addSlide: function(handler, slide) {
			handler.handlerIndex = this.slides.push({ handler: handler, slide: slide }) - 1;
			handler.addEvent('click', function(ev) { ev.stop(); slideshow.handle(this); this.blur(); return false; });
			return handler.handlerIndex;
		},

		getSlide: function(index) {
			return this.slides[index];
		},

		handle: function(handler) {
			this.display(handler.handlerIndex);
		},

		handleNext: function() {
			this.display((this.current + 1) % this.slides.length);
		},

		handlePrev: function() {
			this.display((this.current || this.slides.length) - 1);
		},

		display: function(index) {
			this.slides.each(function(item) {
				var ev = item.handler.handlerIndex == index ? 'activate' : 'background';
				this.fireEvent(ev, [item.handler, item.photo, item.info], 0);
			}.bind(this));
			this.wrapper.tween('left', -index * this.slideStep);
			this.current = index;
		},

		startSlide: function(timer) {
			this.wrapper = new Element('div');
			this.wrapper.setStyles({
				width: this.slideStep * this.slides.length,
				height: slideshow.getSize().y + 'px',
				position: 'relative',
				left: 0
			});
			this.wrapper.set('tween', { duration: 'long' });
			this.insertBefore(this.wrapper, this.firstChild);

			this.slides.each(function(item) {
				item.slide.setStyles({ display: 'block', position: 'absolute', top: 0, left: item.handler.handlerIndex * this.slideStep });
				this.wrapper.appendChild(item.slide);
			}.bind(this));

			this.startTimer(timer);
			this.addEvents({
				mouseenter: this.stopTimer.bind(this),
				mouseleave: this.startTimer.bind(this, this.sleep)
			});
		},

		startTimer: function(timer) {
			this.stopTimer();
			this.timer = this.handleNext.periodical(this.sleep=timer, this);
		},

		stopTimer: function() {
			$clear(this.timer);
			this.timer = null;
		},

		init: function() {
			this.fireEvent('loading');

			var slides = this.getElements('.slide');
			var links = this.getElements('.controls .num a');
			if (slides.length != links.length) return false;

			for (var i=0; i<slides.length; ++i) {
				this.addSlide(links[i], slides[i]);
			}

			this.loadImages();

			return true;
		},

		loadImages: function() {
			var srcs = [];
			this.getElements('img').each(function(item) { srcs.push(item.src); });
			new Asset.images(srcs, {
				onComplete: function() { slideshow.fireEvent('loaded'); }
			});
		}
	});

	slideshow.addEvents({
		activate: function(handler, photo, info) { handler.getParent().addClass('active'); },
		background: function(handler, photo, info) { handler.getParent().removeClass('active');	},
		loading: function() { this.addClass('loading'); },
		loaded: function() { this.removeClass('loading'); this.startSlide(8000); }
	});

	slideshow.init();
	slideshow.getElements('.next a').addEvent('click', function(ev) { ev.stop(); slideshow.handleNext(); this.blur(); return false; });
	slideshow.getElements('.prev a').addEvent('click', function(ev) { ev.stop(); slideshow.handlePrev(); this.blur(); return false; });

});