// No modifiques el script salvo que sepas lo que estás haciendo.
// Para modificar el comportamiento del script utiliza los atributos
// y métodos del objeto cwc. Si falta alguno añádelo o pídeselo a
// alguien que sepa hacerlo.
//
/*
   Script que carga una imagen en un DIV y la refresca periódicamente
   Útil para mostrar las imágenes capturadas por una cámara web
  
   Uso:
   En la cabecera de la página se cargan todos los contenedores que desees incrustar
   nombreObjeto=new cwc(nombre,url de la imagen,descripción,periodo de refresco,ancho,alto);
   mira este ejemplo:
   <script type="text/javascript">
   wc1=new cwc('wc1','http://www.mundoxolido.com/imagenes/webcam/c1/imagen.jpg','Reloj Xolido Systems',5,320,240);
   wc2=new cwc('wc2','http://www.mundoxolido.com/imagenes/webcam/c2/imagen.jpg','Medina de Rioseco');
   wc3=new cwc('wc3','http://www.xolido.com/imagenes/webcam/imagen.jpg');
   </script>

   POSICION
   En la página HTML donde se vaya a incrustar las imágenes habrá que colocar
   un DIV por cada contenedor incluído arriba con un identificador igual al primer
   parámetro pasado al constructor del objeto (wc1,wc2,wc3 en el ejemplo). Estos
   DIV's se colocan en los lugares de la página donde deban aparecer las imágenes
   mira este ejemplo:
   <div id="wc1" class="contenedorWc"></div>
   <div id="wc2" class="contenedorWc"></div>
   <div id="wc3" class="contenedorWc"></div>

   TITULO
   Si quieres que el título aparezca en un lugar concreto debes colocar un DIV en el sitio que quieras
   si no el título aparecerá encima de la imagen y dentro del contenedor
   El identificador del DIV está compuesto por el nombre del contenedor seguido por la palabra Título
   <div id="wc1Titulo" class="tituloContenedorWc"></div>

   CONTROLES
   Si quieres que los controles para mostrar el contador y cambiar el periodo de refresco aparezcan en el
   sitio que quieras debes colocar un DIV en el sitio oportuno. También puedes meter los controles a mano.
   Si no haces ninguna de las dos cosas anteriores los controles aparecen debajo de la imagen.
   <div id="wc1ControlesWc" class="controlesContenedorWc"></div>
   Para colocar manualmente los controles (observa como se coloca el nombre del contenedor):
   <input TYPE="text" id="wc1InputContador" VALUE="" size="2">
   <input TYPE="text" id="wc1InputRefresco" VALUE="5" size="2" onChange="wc.cambiaRefresco()">
   <a href="#" onClick="wc1.decrementaRefresco(); return false">[-]</a>
   <a href="#" onClick="wc1.incrementaRefresco(); return false;">[+]</a>

   VARIAS CAMARAS
   Si quieres que un mismo contenedor aloje las imágenes de varias cámaras web tienes que poner:
   <a href="#" onClick="wc1.cambiaImagen('http://www.mundoxolido.com/imagenes/webcam/c1/imagen.jpg','Xolido Systems','Reloj Xolido Systems'); return false;")> Xolido Systems</a>
   <a href="#" onClick="wc1.cambiaImagen('http://www.mundoxolido.com/imagenes/webcam/c2/imagen.jpg','Medina de Rioseco'); return false;")>Medina de Rioseco</a>

  ESTILOS
  Los elementos utilizados por este script utilizan los siguientes estilos
  + contenedorWc para el DIV que contiene la imagen
  + tituloContenedorWc para el DIV que contiene el título
  + controlesContenedorWc para el DIV que contiene los controles

*/


var numeroContenedoreswc=0;
var contenedoreswc=new Array();

function cwc(nombre,imgsrc,alt,refresco,ancho,alto) {
	// Compruebo que no hay dos contenedores en el mismo DIV
	this.nombre=(nombre!=null)?nombre:'cwc'+numeroContenedoreswc;
	for (i=0;i<contenedoreswc.length;i++) {
		if (contenedoreswc[i]==this.nombre) {
			this.error('Ya hay otro contenedor con este mismo nombre cargado en el DIV con identificador '+this.nombre+'.\nSelecciona otro nombre distinto para este contenedor.');
			return null;
		}
	}
	this.obj=this.nombre+'Obj';
	eval(this.obj + "=this");
	this.construido=0;

	// Configuración
	this.muestraTitulo=0;
	this.muestraControles=0;
	this.ancho=340;
	this.anchoReal=340;
	this.altoReal=240;
	this.alto=240;

	// El contenedor de la imagen
	this.el=null;		// Se construye en cwcConstruir

	// La imagen contenida en el contenedor :-)
	this.imagen=null;	// Se contruye en cwcConstruir

	// El título de la imagen
	this.titulo=null;

	// Los controles de refresco
	this.controles=null;

	// La URL de la imagen obtenida desde la webcam
	this.imgsrc=imgsrc;
	if (!this.imgsrc) {
		this.error('No me has indicado ninguna imagen para insertar.');
		return null;
	}
	this.alt=(alt!=null)?alt:'Imagen de Webcam';

	// Periodo de refresco y variables para manejar el tiempo
	this.refresco=(refresco!=null)?refresco:15;
	this.contador=this.refresco;
	this.timerID=null;

	// Elementos para mostrar el periodo de refesco y el tiempo que queda para el próximo refresco
	this.inputRefresco=null;
	this.inputContador=null;

	// A 1 mientras estamos refrescando
	this.refrescando=0;

	// Dimensiones
	this.alto=(alto!=null)?alto:240;
	this.ancho=(ancho!=null)?ancho:320;

	// Ya tenemos un nuevo contenedor :-)
	numeroContenedoreswc++;
	contenedoreswc.push(this.nombre);

	// Comprobamos si tenemos la función onload para empezar
	// a funcionar cuando cargue la página
	if (window.addonload) {
		addonload(this.obj+'.construir(1)');
	} else {
		this.error('Información para el webmaster.\nDebes cargar el script onload.js en la cabecera de la página para que pueda funcionar el contenedor de la webcam.\nSi ya lo has hecho comprueba que el script onload.js se carga antes que el script contenedorcw.js.');
		return null;
	}
}

// Inserta la imagen en el contenedor
function cwcConstruir(empezar) {
	if (this.construido==1) {
		return true;
	} else {
		this.construido=1;
	}

	// El contenedor de la imagen
	this.el=document.getElementById(this.nombre);
	if (!this.el) {
		this.error('Error al obtener el contenedor de la imagen.\nRecuerda que la página debe incluir un DIV con identificador '+this.nombre+'.\nRecuerda también que debes respetar las mayúsculas y minúsculas.');
		return null;
	}

	// El título de la imagen
	// SI hay DIV para alojar el título lo uso
	titulo=document.createTextNode(this.alt);
	this.titulo=document.getElementById(this.nombre+'Titulo');
	if (this.titulo) {
		this.titulo.appendChild(titulo);
	}
	// Si no pues creo un DIV que coloco dentro del contenedor y sobre la imagen
	else if (this.muestraTitulo) {
		this.titulo=document.createElement('div');
		this.titulo.className='tituloContenedorWc';
		this.titulo.style.display='block';	// CUando lo pongo a mano me interesa que esté encima de la imagen y no a su lado
		this.titulo.appendChild(titulo);
		this.el.appendChild(this.titulo);
	}

	// La imagen que va en el contenedor
	this.imagen=document.createElement('img');
	this.imagen.alt=this.alt;
	this.imagen.src=this.imgsrc;
	// Cuando se pincha sobre la imagen el manejador del evento
	// es decir, nuestra función anónima recibe una referencia al
	// objeto sobre el que se ha pinchado (en este caso la imagen)
	this.imagen.cwc=this;
	this.imagen.onclick=function() { this.cwc.muestraImagen() };
	// Otra posibilidad usando un eval
	//eval ('this.imagen.onclick=function() { '+this.nombre+'.muestraImagen() };');
	this.imagen.onload=function() { this.cwc.alCargarImagen() };
	this.imagen.onerror=function() { this.cwc.alCargarImagenError() };
	this.el.appendChild(this.imagen);
	this.imagen.height=this.alto;
	this.imagen.style.height=this.alto+'px';
	this.imagen.width=this.ancho;
	this.imagen.style.width=this.ancho+'px';

	// Los controles para refrescar la imagen
	this.inputRefresco=document.getElementById(this.nombre+'InputRefresco');
	this.inputContador=document.getElementById(this.nombre+'InputContador');
	// Si el diseñador no ha metido los controles para el contador y periodo de refresco, los creo
	if (this.muestraControles && !this.actualizaYa && !this.inputRefresco && !this.inputContador) {
		// Si ha puesto un DIV para colocar los controles lo utilizo
		// si no creo uno nuevo y lo añado al final del contenedor
		this.controles=document.getElementById(this.nombre+'ControlesWc');
		if (!this.controles) {
			this.controles=document.createElement('div');
			this.controles.className='controlesContenedorWc';
			this.el.appendChild(this.controles);
			separador=document.createTextNode(' ');
		} else {
			separador=document.createElement('BR');
		}
		// Creo los controles
		var enlaceActualizaYa=document.createElement('a');
		enlaceActualizaYa.href='#';
		eval ('enlaceActualizaYa.onclick=function() { '+this.nombre+'.recarga(); return false; };');
		var textoActualizaYa=document.createTextNode('Actualizar');
		enlaceActualizaYa.appendChild(textoActualizaYa);
		this.controles.appendChild(enlaceActualizaYa);

		this.controles.appendChild(separador.cloneNode(true));

		var prefijoContador=document.createTextNode('Actualizando en');
		this.inputContador=document.createElement('input');
		this.inputContador.type='text';
		this.inputContador.id=this.nombre+'InputContador';
		var sufijoContador=document.createTextNode('seg.');
		// Añado el contador
		this.controles.appendChild(prefijoContador);
		this.controles.appendChild(this.inputContador);
		this.controles.appendChild(sufijoContador);

		this.controles.appendChild(separador.cloneNode(true));
		
		var prefijoRefresco=document.createTextNode('Actualizar cada');
		this.inputRefresco=document.createElement('input');
		this.inputRefresco.type='text';
		this.inputRefresco.id=this.nombre+'InputRefresco';
		//eval ('this.imagen.onclick=function() { '+this.nombre+'.muestraImagen() };');
		eval ('this.inputRefresco.onchange=function() { '+this.nombre+'.cambiaRefresco() };');
		var sufijoRefresco=document.createTextNode('seg.');
		var enlaceDecremento=document.createElement('a');
		enlaceDecremento.href='#';
		eval ('enlaceDecremento.onclick=function() { '+this.nombre+'.decrementaRefresco(); return false; };');
		var textoDecremento=document.createTextNode('[-]');
		enlaceDecremento.appendChild(textoDecremento);
		var enlaceIncremento=document.createElement('a');
		enlaceIncremento.href='#';
		eval ('enlaceIncremento.onclick=function() { '+this.nombre+'.incrementaRefresco(); return false; };');
		var textoIncremento=document.createTextNode('[+]');
		enlaceIncremento.appendChild(textoIncremento);
		// Añado el periodo de refresco
		this.controles.appendChild(prefijoRefresco);
		this.controles.appendChild(this.inputRefresco);
		this.controles.appendChild(sufijoRefresco);
		this.controles.appendChild(enlaceDecremento);
		this.controles.appendChild(enlaceIncremento);

	}
	
	this.actualizaInputRefresco();
	this.actualizaInputContador();

	if (empezar==1) {
		setTimeout(this.obj+".inicia()", 1000);
	}
}

// Comienza el refresco de la imagen
function cwcInicia() {
	this.descuenta();
}

// Decrementa el contador y actualiza la imagen
function cwcDescuenta() {
	this.contador--;
	if (this.contador<1) {
		this.recarga();
	} else {
		this.actualizaInputContador();
	}
	this.timerID = setTimeout(this.obj+".descuenta()", 1000);
}

// Cambia la imagen que se muestra en el contenedor
function cwcCambiaImagen(imagen,titulo,alt) {
	titulo=document.createTextNode(titulo);
	this.titulo.removeChild(this.titulo.firstChild,true);
	this.titulo.appendChild(titulo);

	this.imgsrc=imagen;
	if (titulo!='')
	this.imagen.alt=(alt!=null)?alt:'Imagen de Webcam';
	this.recarga();
	this.contador=this.refresco;
	this.actualizaInputContador();
}

// Maneja el evento onload de la imagen
function cwcAlCargarImagen() {
}

// Maneja el evento onerror de la imagen
function cwcAlCargarImagenError() {
	// No se me ocurre nada que hacer en este caso
	this.recarga();
}

// Actualiza la imagen de la webcam
function cwcRecarga() {
	var now = new Date();
	var img = this.imgsrc+"?"+now.getTime();
	this.imagen.src = img;
	this.contador=this.refresco;
	this.actualizaInputContador();
}

// Actualiza (si es posible) el display del tiempo que queda para refrescar
function cwcActualizaInputContador() {
	if (this.inputContador) {
		this.inputContador.value=this.contador;
	}
}

// Actualiza (si es posible) el display del periodo de refresco
function cwcActualizaInputRefresco() {
	if (this.inputRefresco) {
		this.inputRefresco.value=this.refresco;
	}
}

// Cambia el periodo de refresco
function cwcCambiaRefresco() {
	if (this.inputRefresco) {
		if (this.inputRefresco.value<2) {
			this.inputRefresco.value=1;
		}
		this.refresco=this.inputRefresco.value;
		this.contador=this.refresco;
	}
}

// Incrementa en una unidad el periodo de refresco
function cwcIncrementaRefresco() {
	this.refresco++;
	this.actualizaInputRefresco();
}

// Decrementa en una unidadel periodo de refresco
function cwcDecrementaRefresco() {
	if (this.refresco>1) {
		this.refresco--;
		this.actualizaInputRefresco();
	}
}

// Abre la imagen en una ventana nueva
function cwcMuestraImagen() {
	window.open(this.imgsrc,'popwin'+this.nombre,'scrollbars=0,status=0,toolbar=0,resizable=1,width='+(this.anchoReal+20)+',height='+(this.altoReal+20)+',top=150,left=185');
}

function cwcError(mensaje) {
	alert('Webcam ['+this.nombre+']: '+mensaje);
	return true;
}

cwc.prototype.construir=cwcConstruir;
cwc.prototype.inicia=cwcInicia;
cwc.prototype.descuenta=cwcDescuenta;
cwc.prototype.cambiaImagen=cwcCambiaImagen;
cwc.prototype.alCargarImagen=cwcAlCargarImagen
cwc.prototype.alCargarImagenError=cwcAlCargarImagenError;
cwc.prototype.recarga=cwcRecarga;
cwc.prototype.actualizaInputContador=cwcActualizaInputContador;
cwc.prototype.actualizaInputRefresco=cwcActualizaInputRefresco;
cwc.prototype.cambiaRefresco=cwcCambiaRefresco;
cwc.prototype.decrementaRefresco=cwcDecrementaRefresco;
cwc.prototype.incrementaRefresco=cwcIncrementaRefresco;
cwc.prototype.muestraImagen=cwcMuestraImagen;
cwc.prototype.error=cwcError;