var megaBanner = Class.create
({
 	banners: null,

	capa: null,
	fuenteDatos: "",
	imagenes: null,
	miniaturas: null,
	
	scrollBanners: null,
	listaBanners: null,
	scrollMiniaturas: null,
	listaMiniaturas: null,
	botonIzq: null,
	botonDer: null,
	
	seleccionado: -1,
	numPaginas: 0,
	paginaSeleccionada: 0,
	temporizador: null,
	intervalo: 10000,
	intervaloAnimacion: 0.3,
	animacion: null,
	animacionPagina: null,
	funcionIniciarTemporizador: null,
	funcionSiguiente: null,
	
	initialize: function (capa, fuenteDatos)
	{
		this.capa = document.getElementById (capa);
		this.fuenteDatos = fuenteDatos;
		
		Element.addClassName (this.capa, "megaBanner");
		this.cargarBanners ();
	},
	
	cargarBanners: function ()
	{
		Element.addClassName (this.capa, "animAjax");
		var yo = this;
		new Ajax.Request (this.fuenteDatos, {
			onSuccess: function (transport)
			{
				var respuesta = transport.responseText.evalJSON();
				if (respuesta.ok)
				{
					yo.banners = respuesta.banners;
					yo.construirMegaBanner ();
				}
				else yo.capa.appendChild (Builder.node ("p", {className: "mensajeError"}, respuesta.mensaje));
			},
			onFailure: function (transport)
			{
				yo.capa.appendChild (Builder.node ("p", {className: "mensajeError"}, "Error cargando datos"));
			},
			onComplete: function ()
			{
				Element.removeClassName (yo.capa, "animAjax");
			}
		});
	},
	
	construirMegaBanner: function ()
	{
		if (this.banners.length > 0)
		{
			this.listaBanners = Builder.node ("ul");
			this.listaMiniaturas = Builder.node ("ul");
			
			this.imagenes = new Array (this.banners.length);
			this.miniaturas = new Array (this.banners.length);
	
			for (var i=0; i < this.banners.length; i++)
			{
				this.imagenes[i] = new bannerImagen (i, this.banners[i], this);
				this.miniaturas[i] = new bannerMiniatura(i, this.banners[i], this);
			}
			
			this.scrollBanners = Builder.node ("div", {className: "scrollBanners"}, this.listaBanners);
			this.scrollMiniaturas = Builder.node ("div", {className: "scrollMiniaturas"}, this.listaMiniaturas);
			this.botonIzq = Builder.node ("a", {className: "boton izquierda"});
			this.botonDer = Builder.node ("a", {className: "boton derecha"});			
			
			this.capa.appendChild (this.scrollBanners);
			this.capa.appendChild (this.botonIzq);
			this.capa.appendChild (this.scrollMiniaturas);
			this.capa.appendChild (this.botonDer);
			
			Event.observe (this.botonIzq, "click", this.desplazarPagina.bind (this, -1));
			Event.observe (this.botonDer, "click", this.desplazarPagina.bind (this, 1));
			
			this.numPaginas = Math.ceil (this.miniaturas.length / 5);
			this.listaBanners.style.width = (this.imagenes[0].elemento.offsetWidth * this.imagenes.length) + "px";
			this.listaMiniaturas.style.width = (this.miniaturas[0].elemento.offsetWidth * this.numPaginas * 5) + "px";

			this.funcionIniciarTemporizador = this.iniciarTemporizador.bind (this);
			this.mostrarBanner (0);
		}
	},
	
	iniciarTemporizador: function ()
	{
		this.detenerTemporizador ();
		if (this.funcionSiguiente == null) this.funcionSiguiente = this.seleccionarSiguiente.bind (this);
		this.temporizador = setTimeout (this.funcionSiguiente, this.intervalo);
	},
	
	detenerTemporizador: function ()
	{
		if (this.temporizador != null)
		{
			clearTimeout (this.temporizador);
			this.temporizador = null;
		}
	},
	
	mostrarBanner: function (pos)
	{
		if (this.seleccionado != pos)
		{
			this.detenerTemporizador ();
			
			if (this.seleccionado >= 0) this.miniaturas[this.seleccionado].deseleccionar ();
			this.miniaturas[pos].seleccionar ();
			this.seleccionado = pos;
			
			if (this.animacion != null) this.animacion.cancel ();
			this.animacion = new Effect.Tween (this.scrollBanners, this.scrollBanners.scrollLeft, (this.imagenes[pos].elemento.offsetWidth * pos), {duration: this.intervaloAnimacion, fps: 100, afterFinish: this.funcionIniciarTemporizador.bind (this)}, "scrollLeft");
			
			this.mostrarPagina (Math.floor (this.seleccionado / 5));
			
		}
	},
	
	mostrarPagina: function (pagina)
	{
		if (pagina != this.paginaSeleccionada)
		{
			this.paginaSeleccionada = pagina;
			if (this.animacionPagina != null) this.animacionPagina.cancel ();
			this.animacionPagina = new Effect.Tween (this.scrollMiniaturas, this.scrollMiniaturas.scrollLeft, (this.paginaSeleccionada * this.miniaturas[this.paginaSeleccionada].elemento.offsetWidth * 5), {duration: this.intervaloAnimacion, fps: 100}, "scrollLeft");
		}
	},
	
	desplazarPagina: function (direccion)
	{
		var pagina = this.paginaSeleccionada + direccion;
		if (pagina >= this.numPaginas) pagina = 0;
		else if (pagina < 0) pagina = this.numPaginas - 1;
		this.mostrarPagina (pagina);
	},
	
	seleccionarSiguiente: function ()
	{
		pos = (this.seleccionado < this.banners.length - 1)? this.seleccionado + 1: 0;
		this.mostrarBanner (pos);
	}
});

var bannerImagen = Class.create
({
 	posicion: 0,
 	banner: null,
	megaBanner: null,
	elemento: null,
	enlace: null,
	textoPlataforma: null,
	textoTitulo: null,
	textoSubtitulo: null,
	
	initialize: function (posicion, banner, megaBanner)
	{
		this.posicion = posicion;
		this.banner = banner;
		this.megaBanner = megaBanner;
		this.elemento = Builder.node ("li", {style: "background-image: url(" + banner.imagen + ");"},
			this.enlace = Builder.node ("a", {href: banner.url, title: banner.titulo}, Builder.node ("div", {className: "texto"},
			[
			 	this.textoTitulo = Builder.node ("h3", {className: "titulo"}, [banner.titulo,
					this.textoPlataforma = Builder.node ("span", {className: "plataforma"}, banner.plataforma)]),
				this.textoSubtitulo = Builder.node ("p", {className: "subtitulo"}, banner.subtitulo)
			]))
		);
		this.megaBanner.listaBanners.appendChild (this.elemento);
	}
});

var bannerMiniatura = Class.create
({
	posicion: 0,
	banner: null,
	megaBanner: null,
	elemento: null,
	enlace: null,
	imagen: null,
	
	initialize: function (posicion, banner, megaBanner)
	{
		this.posicion = posicion;
		this.banner = banner;
		this.megaBanner = megaBanner;
		this.elemento = Builder.node ("li", this.enlace = Builder.node ("a", {href: banner.url, title: banner.titulo}, this.imagen = Builder.node ("img", {src: this.banner.imagen})));
		this.megaBanner.listaMiniaturas.appendChild (this.elemento);
		Event.observe (this.enlace, "mouseover", this.mostrarBanner.bind (this));
	},

	mostrarBanner: function ()
	{
		this.megaBanner.mostrarBanner (this.posicion);
	},
	
	seleccionar: function ()
	{
		Element.addClassName (this.enlace, "seleccionado fondoPrimario");
	},
	
	deseleccionar: function ()
	{
		Element.removeClassName (this.enlace, "seleccionado fondoPrimario");
	}
});