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

	var carousel = $('carousel');

	$extend(carousel, {
		cache: {},
		blockEvents: false,
		timer: null,
		interval: 4000,

		handle: function(link) {
			if (link.isActive() || this.blockEvents) return;

			this.reset();

			// Si ya tenemos la promocion cacheada la mostramos
			if (this.cache[link.getId()]) {
				this.display(link.getId());
				link.setActive();
				return;
			}

			// Si no está cacheada la pedimos por ajax y la mostramos
			this.block();
			this.loadFromUrl(link.href, function(promotion) {
				this.cache[link.getId()] = promotion;
				this.display(link.getId());
				link.setActive();
				this.unblock();
			}.bind(this));
		},

		loadFromUrl: function(url, callback) {
			this.startLoading();
			new Request({
				url: url,
				method: 'get',
				encoding: 'iso-8859-1',
				onSuccess: function(responseText) {
					var match = /<body[^>]*>((?:.|\s)*)<\/body>/i.exec(responseText);
					if (match) responseText = match[1];

					div = new Element('div');
					div.innerHTML = responseText;

					callback(div.getElement('div[id=carousel]') || div);
					this.endLoading();
				}.bind(this)
			}).send();
		},

		startLoading: function() {
			this.block();
			this.getElement('div.active').addClass('loading');
		},

		endLoading: function() {
			this.unblock();
		},

		block: function() {
			this.blockEvents = true;
			this.stop();
		},

		unblock: function() {
			this.blockEvents = false;
			this.start();
		},

		display: function(id) {
			if (!this.cache[id]) return false;
			this.block();

			var block = this.cache[id];

			var aout = this.getElement('div.active');
			var ain = block.getElement('div.active').clone();

			var dout = this.getElement('div.details');
			var din = block.getElement('div.details').clone();

			var photo = ain.getElement('img');

			ain.setStyles({
				position: 'absolute',
				top: -this.getHeight() + 'px',
				left: 0
			});
			din.setStyles({
				position: 'absolute',
				top: this.getHeight() + 'px',
				left: aout.getWidth() + 'px'
			});

			this.grab(din, 'top');
			this.grab(ain, 'top');

			photo.addEvent('load', function() {
				var h = this.getHeight();

				new Fx.Elements([aout, ain, dout, din], {
					onComplete: function() {
						aout.destroy();
						dout.destroy();
						ain.setStyles({ position: 'relative', top: '', left: '' });
						din.setStyles({ position: 'relative', top: '', left: '' });
						this.unblock();
					}.bind(this)
				}).start( { '0': { 'top': [0, h] },
							'1': { 'top': [-h, 0] },
							'2': {'top': [0, -h] },
							'3': { 'top': [h, 0] } });
			}.bind(this));

			return true;
		},

		start: function() {
			this.stop();
			this.timer = setInterval(this.handleInterval.bind(this), this.interval);
		},

		stop: function() {
			if (this.timer == null) return;
			clearInterval(this.timer);
			this.timer = null;
		},

		reset: function() {
			if (this.timer == null) return;
			this.stop();
			this.start();
		},

		handleInterval: function() {
			var others = this.getElement('div.others');
			var active = others.getElement('li.selected');
			var next = active.getNext() || others.getElement('li');
			this.handle(next.getElement('a'));
		}

	});

	carousel.addEvents({
		mouseover: carousel.stop.bind(carousel),
		mouseout: carousel.start.bind(carousel)
	});

	$$('#carousel .others a').each(function(item) {

		$extend(item, {
			carousel: carousel,

			clicked: function(ev) {
				ev.stop();
				this.blur();
				this.carousel.handle(this);
			},

			isActive: function() {
				return this.getParent().hasClass('selected');
			},

			setActive: function() {
				var parent = this.getParent();
				parent.addClass('selected');
				(parent.getPrevious('.selected') || parent.getNext('.selected')).removeClass('selected');
			},

			getId: function() {
				return this.href;
			}
		});

		item.addEvent('click', item.clicked.bind(item));
	});

	carousel.cache[carousel.getElement('.selected').getElement('a').getId()] = carousel.clone();
	carousel.start();
});