/*
id : id del div contenedor del texto
top,left,width: posicion esq.sup.izq del div contenedor. Si left=-1 se centra div
*/
function objMarquesina(id_,top,left,width){
	//Variables privadas
	var id = id_;
	//coordenadas y tamaño del DIV
	var arriba = top;
	var ancho = width;
	var izq = left;
	var der;
	var min;			//borde izq del DIV cuando borde derecho del div llega a left
	var anchotexto;		//ancho real del texto
	var altotexto;		//alto real del texto
	//coordenadas del DIV durante animacion
	var ancho_act;
	var izq_act;
	//varios
	var este = this;
	var tempo;
	var area;
	var vel = 20;
	var objid;
	//este metodo, configura marquesina y comienza la animacion. Se debe llamar una vez cargado el div contenedor
	//(por ejemplo en evento onload de BODY)
	this.comenzar = function(){
		objid = document.getElementById(id);
		//dejo de desplazar marquesina
		clearInterval(tempo);
		//aplico estilos por defecto, para luego poder obtener sus parámetros correctamente
		objid.style.visibility = "hidden";
		objid.style.position   = "absolute";
		objid.style.overflow   = "visible";
		objid.style.textAlign  = "left";
		objid.style.whiteSpace = "nowrap";
		objid.style.top        = arriba + "px";
		objid.style.height     = "1.3em";
		//obtengo dimensiones del DIV
		anchotexto = objid.offsetWidth;
		altotexto  = objid.offsetHeight;
		//si el ancho del texto es menor que el ancho pedido, reajusto ancho y posicion izquierda (centrado dentro del div)
		if (anchotexto <= ancho){
			izq   = izq + (ancho-anchotexto) / 2;
			ancho = anchotexto;
		}
		//calculo minimo y maximo
		min = izq - anchotexto;
		der = izq + ancho;
		//desplazo caja al final, con ancho 0
		objid.style.overflow = "hidden";
		objid.style.clip  = "rect(0px , " + (ancho+1) + "px , " + altotexto + "px , 0px)";
		//ubicar(der,0);
		izq_actual = der; objid.style.left  = izq_actual + "px"; 
		ancho_actual = 0; objid.style.width = ancho_actual + "px";
		objid.style.visibility = "visible";
		//tiempo en milisegundos entre llamado y llamado
		tempo = setTimeout(function(){animacion();},vel);
	}
	this.quitar = function(){
		clearInterval(tempo);
		document.getElementById(id).style.visibility = "hidden";
	}
	function ubicar(l,w){
		izq_actual = l;
		objid.style.left  = l + "px"; 
		ancho_actual = w;
		objid.style.width = w + "px";
	}
	function animacion(){
		if (izq_actual > izq) {
			objid.style.clip = "rect(0px , " + (der - izq_actual) + "px , " + altotexto + "px , 0px)";
			//ubicar(--izq_actual,++ancho_actual);
			izq_actual--;    objid.style.left  = izq_actual.toString() + "px";
			ancho_actual++;  objid.style.width = ancho_actual.toString() + "px";
		} else if ((izq_actual <= izq) && (izq_actual > min)){
			objid.style.clip = "rect(0px , " + ((izq - izq_actual) + ancho) + "px , " + altotexto + "px , " + (izq - izq_actual) + "px)";
			//ubicar(--izq_actual,++ancho_actual);
			izq_actual--;    objid.style.left  = izq_actual.toString() + "px";
			ancho_actual++;  objid.style.width = ancho_actual.toString() + "px";
		} else if (izq_actual <= min) {
			objid.style.visibility = "hidden";
			objid.style.clip       = "rect(0px , " + (ancho+1) + "px , " + altotexto + "px , 0px)";
			//ubicar(der,0);
			objid.style.left  = der + "px"; izq_actual = der;
			objid.style.width = "0px"; ancho_actual = 0;
			objid.style.visibility = "visible";
		}
		tempo = setTimeout(function(){animacion();},vel);
	}
	
}