var misJuegos = 
{
	ancho: 400,
	alto: 350,

	idJuego: 0,
	catalogo: false,

	ventana: null,
	sc: null,
	ci: null,
	cd: null,
	ic: null,
	marcoContenido: null,
	abierto: false,
	contenido: null,
	capaTexto: null,
	texto: null,
	caratula: null,
	capaFormulario: null,
	contenidoFormulario: null,
	
	formulario: null,
	campoIdJuego: null,
	radioCatalogo: null,
	radioDeseos: null,
	checkFavorito: null,
	checkNotificar: null,
	checkVenta: null,
	checkCompra: null,
	capaVenta: null,
	capaCompra: null,
	capaPrecioVenta: null,
	capaPrecioCompra: null,
	precioVenta: null,
	estadoVenta: null,
	precioCompra: null,

	botones: null,
	botonAceptar: null,
	botonCancelar: null,
	textoBotonAceptar: null,
	textoBotonCancelar: null,

	funcionCentrar: null,
	funcionTeclaPulsada: null,

	agregarJuego: function (idJuego, catalogo, parametros)
	{
		this.leerParametros (parametros);
		this.idJuego = idJuego;
		this.catalogo = catalogo;
		if (this.ventana == null) this.construir ();
		this.actualizarElementos ();
		this.abrir ();
	},	

	leerParametros: function (parametros)
	{
		if (this.parametros == null) this.parametros = {};
		if (parametros == null) parametros = {};
		this.parametros.titulo = parametros.titulo? parametros.titulo: "Mis Juegos";
		this.parametros.textoAceptar = parametros.textoAceptar? parametros.textoAceptar: "Aceptar";
		this.parametros.textoCancelar = parametros.textoCancelar? parametros.textoCancelar: "Cancelar";
		this.parametros.funcionAceptar = parametros.aceptado? parametros.aceptado: null;
		this.parametros.funcionCancelar = parametros.cancelado? parametros.cancelado: null;
		this.parametros.funcionCerrar = parametros.cerrado? parametros.cerrado: null;
	},

	construir: function ()
	{
		this.ventana = Builder.node ("div", {className: "ventanaDialogo", style: "width: " + (this.ancho+80) + "px; height: " + (this.alto+112) + "px"},
		[
			Builder.node ("div", {className: "borde si"}),
			this.sc = Builder.node ("div", {className: "borde sc", style: "width: " + this.ancho + "px"}),
			Builder.node ("div", {className: "borde sd"}),
			this.ci = Builder.node ("div", {className: "bordeV ci", style: "width: " + ((this.ancho+80) / 2) + "px; height: " + (this.alto+30) + "px"}),
			this.marcoContenido = Builder.node ("div", {className: "marcoContenido", style: "width: " + (this.ancho+40) + "px; height: " + (this.alto+72) + "px"},
			[
				this.cabecera = Builder.node ("h2", {className: "fondoPrimario colorSecundario degradado"}),
				this.contenido = Builder.node ("div", {className: "contenido", style: "width: " + this.ancho + "px; height: " + this.alto + "px"})
			]),
			this.cd = Builder.node ("div", {className: "bordeV cd", style: "width: " + ((this.ancho+80) / 2) + "px; height: " + (this.alto+30) + "px"}),
			Builder.node ("div", {className: "borde ii"}),
			this.ic = Builder.node ("div", {className: "borde ic", style: "width: " + this.ancho + "px"}),
			Builder.node ("div", {className: "borde id"}),
		]);
		
		this.capaTexto = Builder.node ("div", {className: "capaTexto", style: "display: none"});
		
		this.capaFormulario = Builder.node ("div", {className: "capaFormularioMisJuegos", style: "display: none;"},
		[
			this.caratula = Builder.node ("img", {className: "caratula izquierda", style: "display: none;"}),
			this.contenidoFormulario = Builder.node ("div", {className: "contenidoFormularioMisJuegos"},
			[
				this.formulario = Builder.node ("form", {action: "/tengoJuego.jsp"},
				[
					this.texto = Builder.node ("h4", "¿Dónde quieres añadirlo?"),
					this.campoIdJuego = Builder.node ("input", {type: "hidden", name: "idJuego", value: this.idJuego}),
					Builder.node ("p",
					[
						this.radioCatalogo = (Builder.node ("input", {type: "radio", className: "casilla", name: "comprado", value: "true", id: "radioMisJuegosCatalogo"})),
						Builder.node ("label", {htmlFor: "radioMisJuegosCatalogo"}, "En mi Catálogo Personal")
					]
					),
					Builder.node ("p",
					[
						this.radioDeseos = (Builder.node ("input", {type: "radio", className: "casilla", name: "comprado", value: "false", id: "radioMisJuegosDeseos"})),
						Builder.node ("label", {htmlFor: "radioMisJuegosDeseos"}, "En mi lista de Deseos")
					]
					),
					Builder.node ("p",
					[
						this.checkFavorito = Builder.node ("input", {type: "checkbox", className: "casilla", name: "favorito", id: "checkMisJuegosFavorito"}),
						Builder.node ("label", {htmlFor: "checkMisJuegosFavorito"}, "Añadirlo también a mis favoritos")
					]),
					Builder.node ("br"),
					Builder.node ("h4", "Opciones"),
					Builder.node ("p",
					[
						this.checkNotificar = Builder.node ("input", {type: "checkbox", className: "casilla", name: "notificar", id: "checkMisJuegosNotificar"}),
						Builder.node ("label", {htmlFor: "checkMisJuegosNotificar"}, "¿Quieres que te avisemos cuando salga algo nuevo del juego?")
					]),
					this.capaVenta = Builder.node ("p", {style: "display: none"},
					[
						this.checkVenta = Builder.node ("input", {type: "checkbox", className: "casilla", name: "enVenta", value: "true", id: "checkMisJuegosEnVenta"}),
						Builder.node ("label", {htmlFor: "checkMisJuegosEnVenta"}, "¿Quieres ponerlo en venta en el mercadillo?"),
						this.capaPrecioVenta = Builder.node ("div", {style: "display: none;"},
						[
						 	Builder.node ("p", 
							[
							 	Builder.node ("label", {htmlFor: "txtPrecioVenta"}, "¿Por cuánto?"),
								this.precioVenta = Builder.node ("input", {type: "text", className: "formulario", name: "precioVenta", id: "txtPrecioVenta"})
							]),
							Builder.node ("p", 
							[
							 	Builder.node ("label", {htmlFor: "txtEstadoVenta"}, "Comentarios (estado, condiciones, etc.)"),
								Builder.node ("br"),
								this.estadoVenta = Builder.node ("textarea", {className: "formulario", name: "estadoVenta", id: "txtEstadoVenta"})
							])
						]
						)
					]),
					this.capaCompra = Builder.node ("p", {style: "display: none"},
					[
						this.checkCompra = Builder.node ("input", {type: "checkbox", className: "casilla", name: "compro", value: "true", id: "checkMisJuegosCompro"}),
						Builder.node ("label", {htmlFor: "checkMisJuegosCompro"}, "¿Quieres poner una oferta de compra en el mercadillo?"),
						this.capaPrecioCompra = Builder.node ("div", {style: "display: none;"},
						[
						 	Builder.node ("p", 
							[
							 	Builder.node ("label", {htmlFor: "txtPrecioCompra"}, "¿Por cuánto?"),
								this.precioCompra = Builder.node ("input", {type: "text", className: "formulario", maxlength: 10, name: "precioCompra", id: "txtPrecioCompra"})
							])
						]
						)
					])
				]
				)
			]
			)
		]
		);

		this.botones = Builder.node ("div", {className: "botones", style: "width: " + this.ancho + "px; display: none;"},
		[
			this.botonCancelar = Builder.node ("a", {className: "botonTuneado"}),
			this.botonAceptar = Builder.node ("a", {className: "botonTuneado"})
		]);

		tunearEnlace (this.botonCancelar);
		tunearEnlace (this.botonAceptar);
		this.textoBotonCancelar = this.botonCancelar.down (".c");
		this.textoBotonAceptar = this.botonAceptar.down (".c");
		if (this.textoBotonCancelar == null) this.textoBotonCancelar = this.botonCancelar;
		if (this.textoBotonAceptar == null) this.textoBotonAceptar = this.botonAceptar;		

		this.contenido.appendChild (this.capaTexto);
		this.contenido.appendChild (this.capaFormulario);
		this.contenido.appendChild (this.botones);
		document.body.appendChild (this.ventana);
	},

	establecerAncho: function (nuevoAncho)
	{
		this.ventana.style.width = (nuevoAncho + 80) + "px";
		this.sc.style.width = nuevoAncho + "px";
		this.ci.style.width = ((nuevoAncho + 80) / 2) + "px";
		this.cd.style.width = ((nuevoAncho + 80) / 2) + "px";
		this.ic.style.width = nuevoAncho + "px";
		this.marcoContenido.style.width = (nuevoAncho + 40) + "px";
		this.contenido.style.width = nuevoAncho + "px";
		this.botones.style.width = nuevoAncho + "px";
		this.centrar ();
	},

	actualizarElementos: function ()
	{
		this.campoIdJuego.value = this.idJuego;
		this.cabecera.innerHTML = this.parametros.titulo;
		this.textoBotonCancelar.innerHTML = this.parametros.textoCancelar;
		this.textoBotonAceptar.innerHTML = this.parametros.textoAceptar;
		
		this.establecerAncho (this.ancho);
		this.contenidoFormulario.style.marginLeft = "0px";
		this.caratula.style.display = "none";
		this.capaFormulario.style.display = "none";
		this.capaTexto.style.display = "none";
		this.botones.style.display = "none";
		
		if (this.catalogo) this.radioCatalogo.checked = true;
		else this.radioDeseos.checked = true;
		
		this.checkVenta.checked = false;
		this.checkCompra.checked = false;
		this.precioVenta.value = "";
		this.estadoVenta.value = "";
		this.precioCompra.value = "";
		this.actualizarPaneles ();
	},
	
	actualizarPaneles: function ()
	{
		if (this.radioCatalogo.checked)
		{
			this.capaCompra.style.display = "none";
			this.capaVenta.style.display = "block";
		}
		else
		{
			this.capaVenta.style.display = "none";
			this.capaCompra.style.display = "block";
		}
		this.capaPrecioVenta.style.display = this.checkVenta.checked? "block": "none";
		this.capaPrecioCompra.style.display = this.checkCompra.checked? "block": "none";
	},

	abrir: function ()
	{
		this.ventana.style.display = "block";
		this.centrar ();
		fondoDialogo.abrir ();
		this.abierto = true;

		this.funcionCentrar = this.centrar.bind (this);
		this.funcionTeclaPulsada = this.teclaPulsada.bindAsEventListener (this);
		Event.observe (window, "resize", this.funcionCentrar);
		Event.observe (window, "scroll", this.funcionCentrar);
		Event.observe (document, "keyup", this.funcionTeclaPulsada);
		Event.observe (this.radioCatalogo, "click", this.actualizarPaneles.bind (this));
		Event.observe (this.radioDeseos, "click", this.actualizarPaneles.bind (this));
		Event.observe (this.checkVenta, "click", this.actualizarPaneles.bind (this));
		Event.observe (this.checkCompra, "click", this.actualizarPaneles.bind (this));
		Event.observe (this.botonAceptar, "click", this.aceptarPulsado.bind (this));
		Event.observe (this.botonCancelar, "click", this.cancelarPulsado.bind (this));

		this.ventana.focus();
		Element.addClassName (this.contenido, "animAjax");
		this.leerDatosJuego ();
	},

	cerrar: function ()
	{
		Event.stopObserving (window, "resize", this.funcionCentrar);
		Event.stopObserving (window, "scroll", this.funcionCentrar);
		Event.stopObserving (document, "keyup", this.funcionTeclaPulsada);
		Event.stopObserving (this.radioCatalogo, "click");
		Event.stopObserving (this.radioDeseos, "click");
		Event.stopObserving (this.checkVenta, "click");
		Event.stopObserving (this.checkCompra, "click");
		Event.stopObserving (this.botonAceptar, "click");
		Event.stopObserving (this.botonCancelar, "click");
		this.ventana.style.display = "none";
		this.abierto = false;
		fondoDialogo.cerrar ();
	},
	
	leerDatosJuego: function ()
	{
		var yo = this;
		new Ajax.Request ("/infoJuego.jsp?idJuego=" + this.idJuego, {
			onSuccess: function (transport)
			{
				yo.procesarDatosJuego (transport.responseText.evalJSON ());
			},
			onFailure: function ()
			{
				yo.cerrar ();
				dialogo.alert ("Error");
			},
			onComplete: function ()
			{
				Element.removeClassName (yo.contenido, "animAjax");
			}
		});
	},
	
	procesarDatosJuego: function (datosJuego)
	{
		this.capaTexto.innerHTML = "Vas a añadir \"" + datosJuego.titulo + "\" de <span style=\"color: " + datosJuego.colorPlataforma + ";\">" + datosJuego.plataforma + "</span> a Mis Juegos.";
		this.capaTexto.style.display = "block";
		this.capaFormulario.style.display = "block";
		this.botones.style.display = "block";
		
		if (datosJuego.caratula.length > 0)
		{
			var yo = this;
			precargarImagen (datosJuego.caratula, function (url, ancho, alto)
			{
				yo.establecerAncho (yo.ancho + ancho + 20);
				yo.contenidoFormulario.style.marginLeft = (ancho + 20) + "px";
				yo.caratula.src = url;
				yo.caratula.style.display = "block";
			});
		}
	},

	centrar: function ()
	{
		var posicion = document.viewport.getScrollOffsets ();
		var tamano = document.viewport.getDimensions ();
		
		with (this.ventana.style)
		{
			left = ((tamano.width - this.ventana.offsetWidth) / 2) + "px";
			top = (posicion.top + ((tamano.height - this.ventana.offsetHeight) / 2)) + "px";
		}
	},
	
	teclaPulsada: function (event)
	{
		var tecla = (window.event) ? event.keyCode : event.which;
		if (tecla==27) this.cancelarPulsado ();
		else if (tecla==13) this.aceptarPulsado ();
	},
	
	aceptarPulsado: function ()
	{
		this.botonCancelar.style.display = "none";
		this.botonAceptar.style.display = "none";
		Element.addClassName (this.botones, "animAjax");
		
		var yo = this;
		new Form.request (this.formulario, {method: "post",
			onSuccess: function (transport)
			{
				var respuesta = transport.responseText.evalJSON ();
				if (respuesta.mensaje.length) dialogo.alert (respuesta.mensaje, {icono: (respuesta.ok? "info.png": "exclamacion.png")});
				if (respuesta.ok && yo.parametros.funcionAceptar) yo.parametros.funcionAceptar();
			},
			onFailure: function (transport)
			{
				dialogo.alert ("Se ha producido un error al intentar agregar el juego.", {icono: "error.png"});
			},
			onComplete: function ()
			{
				Element.removeClassName (yo.botones, "animAjax");
				yo.botonAceptar.style.display = "inline-block";
				yo.botonCancelar.style.display = "inline-block";
				yo.cerrar ();
			}						  
		});
	},
	
	cancelarPulsado: function ()
	{
		this.cerrar ();
		if (this.parametros.funcionCancelar) this.parametros.funcionCancelar();
	}
};