var GaleriaMultimediaPortada = Class.create({
	initialize: function(elementos, id, anchoCol) {
		this.id = id;
		this.anchoCol = anchoCol;
		this.idCapa = "galeria_" + id;
		this.parado = true;
		this.posMiniatura = 0;
		this.mostrando = -10;
		if (elementos) {
			this.elementos = elementos;
			this.limite = this.elementos.size() * (80 + 5);
			this.tamVentana = (this.anchoCol * (80 + 5)) + 20;
		}
	},
	
	initInterfaz: function() {
		$(this.idCapa).select("li").invoke("observe", "click", this.mostrarClick.bindAsEventListener(this));
	},
	
	mostrarClick: function(e) {	
		var li = e.findElement("li");
		var pos = li.previousSiblings().size();
		this.mostrar(pos);
	},
	
	avanzar: function(valor) {
		var pos = this.mostrando + valor;
		if (pos < 0) {
			pos = this.elementos.length + valor;
		}
		pos = pos % this.elementos.length;
		this.mostrar(pos);
	},
	
	pantallaCompleta: function() {
		if (
				(this.mostrando >= 0) && 
				(this.mostrando < this.elementos.length)
			) {
			var elemento = this.elementos[this.mostrando];
			
			if (elemento.tipo == "foto") {
				open(elemento.urlOriginal, "", "");
			} else {
				alert("No disponible");
			}
		}
	},
	
	mostrar: function(pos) {
		if (pos >= 0 && pos < this.elementos.length) {
			if (this.mostrando != pos) {
			
				// Marcamos como actual la miniatura				
				var minis = $(this.idCapa).select("li");
				minis.invoke("removeClassName", "actual")
				minis[pos].addClassName("actual");
				
				// la centramos
				var desplazamiento = 0;
				var posCentral = this.anchoCol == 2 ? 2 : 3;
				if (pos >= posCentral) {
					desplazamiento = -((80 + 5) * (pos - (posCentral - 1)));
				}
				
				var galeria = window.mapaGalerias.get(this.id);
				galeria.posMiniatura = galeria.posMiniatura + (desplazamiento);
				
				if (galeria.posMiniatura < -(this.limite  - this.tamVentana)){
					galeria.posMiniatura = -(this.limite  - this.tamVentana);
				}
				
				var cad = "miniaturas_slide_" + this.id;
				$(cad).setStyle({
					marginLeft: desplazamiento + "px"
				});
				
				this.mostrando = pos;
				var elemento = this.elementos[pos];
				
				var tipo = elemento.tipo;
				
				var hijosRepro = $("reproductorGaleria_" + this.id).childElements();
				for (var i = 0; i < hijosRepro.size(); i++) {
					hijosRepro[i].hide();
				}
				
				
				var capa = $("multimedia_tipo_" + tipo + "_" + this.id).show();
				
				// Paramos la reproduccion de audio
				window["player" + this.id].pause();
				window["player" + this.id].disable();
				
				
				
				// Borramos el player de video
				this.escribirVideo("");
							
				switch (tipo) {
					case "video":
						this.escribirVideo(elemento);
						break;
					case "audio":				
						// Reiniciamos la interfaz
						var botonPausa = $$(".datosReproduccionAudio .botonPause")[0];
						if (botonPausa) {
							botonPausa.className = "botonPlay";
						}
						$$(".icoScrollReproductor img")[0].setStyle({
							marginLeft: 0
						});
						var capaTiempo = $("tiempoRepro_" + this.id);
						capaTiempo.innerHTML = "00:00 / 00:00";
						var nombrePlayer2 = "player" + this.id;			
						var player = window[nombrePlayer2]; 	
						player.url = "";
						player.setPosition(0);
						break;					
					case "foto":
						$("carga_" + this.id).className = "cargaGaleriaOn";
						var img = capa.select(".detalleGaleria")[0];
						img.hide();
						img.src = elemento.url;
						img.onload = function() {
							$("carga_" + this.id).className = "cargaGaleriaOff";
							$(img).show();
						}.bind(this)						
						break;
				}
			}
		}
	},
	
	escribirVideo: function(video, data) {
		if (!data) {
			if (this.anchoCol == 2) {
				data = {
					url: video.url,
					ancho: 283,
					alto: 159,
					prev: video.urlPrevia
				};
			} else {
				data = {
					url: video.url,
					ancho: 435,
					alto: 245,
					prev: video.urlPrevia
				};
			}
		}
		/**
		 * Se usan los tamaņos definidos en la hoja de estilos "estiloPortal.css" en concreto las reglas
		 * .anchoGal2 .contenedorReproductor object,.anchoGal2 .contenedorReproductor embed
		 * .anchoGal3 .contenedorReproductor object,.anchoGal3 .contenedorReproductor embed
		 */
		
		var ajp = new AjaxPages();
		var base = "/" + location.href.split("/")[3] + "/";
		data.urlBase = base;
		ajp.load(base + "js/player.tpl");
		var plantilla = ajp.getProcessor();
		var text = plantilla(data);
		$(this.idCapa).select("#contenedorReproductor_" + this.id)[0].update(text);
	}
});


