// <?

/*
TheBannerWay - V2.20
Para los detalles de instalacion pegue este link en el html
<a href="javascript:TheBannerWay('help');">TheBannerWay help</a>
*/

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// PARA EXPLORER UN ELEMENTO HTML CON UN ID Y UN OBJETO JAVASCRIPT QUE SE LLAMA IGUAL SON LO MISMO -----------------
function TheBannerWay($tbwh,$img,$hh,$hw,$wait,$delay,$control,$play){
// si el primer parametro no es help
	if($tbwh != "help"){
// variables de la funcion
		var $bh,$tbwo;
// si existe el div contenedor
		$bh 																	= document.getElementById($tbwh);
// crea un identificador
		$tbwo																	= hash();
// si existe el div contenedor
		if($bh){
			eval($tbwo+" = new TheRealBannerWay('"+$tbwh+"','"+$tbwo+"','"+$img+"','"+$hh+"','"+$hw+"',"+$wait+","+$delay+","+$control+","+$play+")");
			// eval($tbwo+" = new TheRealBannerWay('"+$bh+"','"+$tbwo+"','"+$img+"','"+$hh+"','"+$hw+"',"+$wait+","+$delay+","+$control+","+$play+")");
// si no existe
		}else{
// hace saltar el error
			fatalError($tbwh);
		}
// si si lo es
	}else if($tbwh == "help"){
// muestra la ayuda
		helpMe();
	}
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// GENERA UN HASH, AFANADISIMO DE hyt_scrolling.js -----------------------------------------------------------------
function hash(){
// variables de la funcion
	var $now,$tim;
// crea un objeto date
	$now																		= new Date();
// captura los segundos
	$tim																		= $now.getTime();
// lo mezcla para hacerlo unico
	return "_"+String($tim).split("").sort(function(){return Math.random()<0.5?-1:1}).join("");
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// SI NO EXISTE UN DIV CON EL ID INDICADO APARECE UN MENSAJE DE ERROR ----------------------------------------------
function fatalError($tbwh){
// crea un div de alerta
	var $fe																		= alertPopper();
// le aplica estilos
	$fe.style.backgroundColor													= "#FFF";
	$fe.style.border															= "5px dotted #F00";
	$fe.style.outline															= "10px solid #F00";
	$fe.style.font																= "bold 30px verdana";
	$fe.style.color																= "#F00";
	$fe.style.textAlign															= "center";
// le mete el mensaje
	$fe.innerHTML																= "NO SE ENCONTRO UN DIV<br />CON ID &quot;"+$tbwh+"&quot;";
// le da posicion al centro
	positionPopper($fe);
}                                                                

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// MUESTRA LA AYUDA CON LOS PARAMETROS DE LA FUNCION ---------------------------------------------------------------
function helpMe(){
	var $fe,$ha,$hs															= "";
// crea un div de alerta
	$fe																			= alertPopper();
// le aplica estilos
	$fe.style.backgroundColor													= "#FFF";
	$fe.style.border															= "2px solid #000";
	$fe.style.fontFamily														= "verdana";
	$fe.style.fontSize															= "10px";
	$fe.style.width																= "700px";
// texto de la ayuda
	$ha																			= new Array(
		'<h2>TheBannerWay V2.20<br />INSTALACION Y CONFIGURACION</h2>',
		'<div style="padding:5px 0;">',
		'<h3>EJEMPLO</h3><hr />',
		'<b><u>Script tag en el header</u></b><br />',
		'window.onload = function(){<br />',
		'&nbsp;&nbsp;&nbsp;&nbsp;TheBannerWay(&#39;TBW1&#39;,&#39;files/img/imagen.jpg&#39;,&#39;328&#39;,&#39;572&#39;,5,5,true,false);<br />}<br />',
		'<b><u>En donde se necesite</u></b><br />',
		'&lt;div id=&quot;TBW1&quot;&gt;&lt;/div&gt;',
		'</div>',
		'<div style="padding:5px 0;">',
		'<h3>PARAMETROS</h3><hr />',
		'<table cellpaddindg="0" cellspacing="0" border="0"><tr>',
		'<td width="170">TBW1</td>',
		'<td width="330">id del div donde aparece el banner</td>',
		'</tr><tr>',
		'<td width="170">files/img/imagen.jpg</td>',
		'<td>nombre de la imagen con la ruta</td>',
		'</tr><tr>',
		'<td width="170">328</td>',
		'<td>alto del div</td>',
		'</tr><tr>',
		'<td width="170">572</td>',
		'<td>ancho del div</td>',
		'</tr><tr>',
		'<td width="170">5</td>',
		'<td>tiempo de espera entre transiciones, en segundos</td>',
		'</tr><tr>',
		'<td width="170">5</td>',
		'<td>duracion de la transicion</td>',
		'</tr><tr>',
		'<td width="170">true</td>',
		'<td>booleano para que aparezca el menu</td>',
		'</tr><tr>',
		'<td width="170">false</td>',
		'<td>booleano para que empiece detenido</td>',
		'</tr></table></div>',
		'<div style="padding:5px 0;">',
		'<h3>NOTAS</h3><hr />',
		'&#0149; El div contenedor del banner <u>no</u> deve estar posicionado utilizando el atributo &#39;position&#39;, puede tener un tamaņo definido sea por &#39;class&#39; o &#39;style&#39; pero estos, junto con &#39;position&#39;, seran ignorados al iniciarse el script.<br />',
		'&#0149; La imagen deve estar compuesta por todos los slides del banner, el alto de cada segmento deve ser el mismo que el del banner.<br />',
		'&#0149; El valor que controla la duracion de la transicion es inverso, llendo de 1, lo mas lento posible, a 15, casi instantaneo. Con valores superiores no se nota diferencia.<br />',
		'&#0149; Los parametros con valores por default y sus respectivos valores son:<br />',
		'&nbsp;&nbsp;&nbsp;tiempo de espera entre transiciones - <b>5</b>.<br />',
		'&nbsp;&nbsp;&nbsp;duracion de la transicion - <b>5</b>.<br />',
		'&nbsp;&nbsp;&nbsp;booleano para que aparezca el menu - <b>false</b>.<br />',
		'&nbsp;&nbsp;&nbsp;booleano para que empiece detenido - <b>false</b>.<br />',
		'&#0149; En caso de que el id del div contenedor no concuerde con el pasado a la funcion aparecera un mansaje de error.',
		'</div>'
	);
// pone la ayuda en una linea
	for($x=0;$x<$ha.length;$x++){
		$hs																		+= $ha[$x];
	}
// le mete el mensaje
	$fe.innerHTML																= $hs;
// le da posicion al centro
	positionPopper($fe);
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// DEVUELVE EL BODY PARA QUIEN LO NECESITE USAR --------------------------------------------------------------------
function body(){
// captura el body para peload y trace
	var $ad																		= document.getElementsByTagName("body");
// retorna el body, getElementsByTagName siempre devuelve una matriz
	return $ad[0];
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// CREA EL DIV DE ALERTA -------------------------------------------------------------------------------------------
function alertPopper(){
// crea eun div
	var $fe = document.createElement("div");
// le aplica estilos generales
	$fe.style.position															= "fixed";
	$fe.style.padding															= "15px";
	$fe.style.zIndex															= "500";
// devuelve el div
	return $fe;
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// POSICIONA EL DIV DE ALERTA --------------------------------------------------------------------------------------
function positionPopper($fe){
// trea el body
	var $b = body();
// lo apenchildea al body
	$b.appendChild($fe);
// centra $fe en la seccion de plantalla visible
	$fe.style.left																= (parseInt($b.offsetWidth)/2)-(parseInt($fe.offsetWidth)/2)+"px";
	$fe.style.top																= (parseInt($b.offsetHeight)/2)-(parseInt($fe.offsetHeight)/2)+"px";
}

// -------------------------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------------------------------

// GENERA EL OBJETO TheRealBannerWay -------------------------------------------------------------------------------
function TheRealBannerWay($tbwh,$tbwo,$img,$hh,$hw,$wait,$delay,$control,$play){
// variables de la "clase"
	var $this,$bh,$ar,$pl,$cn,$fs,$b,$l,$ih,$td,$cd;
// captura el contenedor
	$bh																			= document.getElementById($tbwh);
	// $bh																			= $tbwh;
// cambia de imagen cada $wait segundos
	$ar																			= $wait || 5;
// si $play es false $pl tambien, si $play esta unset $pl es true
	$pl																			= ($play == false)? false : $play || true;
// imprime el control de cambio entre images
	$cn																			= $control || false;
// frames por segundo para los fadeouts
	$fs																			= $delay || 5;

// preload necesita el body
	$b																			= body();
// freno de la precarga de imagenes
	$l																			= false;

// INICIALIZACION --------------------------------------------------------------------------------------------------
	this.init = function(){
	// crea un identificador para la "clase", AFANADISIMO DE hyt_scrolling.js
		$this																	= "$"+hash();
	// asigna el identificador a $this
		eval($this+" = this");
	// le da el tamanio a $bh
		this.styletoHW($bh);
	// pone el relojito de cargando en $bh
		$bh.style.background													= "#FFFFFF url('files/img/bannerway/loading.gif') no-repeat center center";
	// hace una precarga de la imagen del banner
		this.preload();
	// se aplica un interval a $bh para esperar cuando preload termino
		$bh.loader																= setInterval(function(){eval($tbwo).start()},5);
	}

// CREA LOS ELEMENTOS NECESARIOS PARA EMPEZAR ----------------------------------------------------------------------
	this.start = function(){
	// si termino la carga de la imagen
		if($l){
	// mata el interval que espera a preload
			clearInterval($bh.loader);
	// crea el div de transicion
			$td																	= document.createElement("div");

	// PARCHE
			$td.onclick = function(){eval($tbwo).Goto()};
			$td.style.cursor = (window.event)? (/chrome/.test(navigator.userAgent.toLowerCase()))? 'pointer' : 'hand' : 'pointer' ;

	// crea en $td un counter para el fadeout
			$td.av																= 100;
	// le apenchildea $td a $bh
			$bh.appendChild($td);
	// le da el tamanio
			this.styletoHW($td);
	// posicion absoluta
			$td.style.position													= "absolute";
	// y la imagen de fondo
			$td.style.backgroundImage											= "url('"+$img+"')";
	// tambien al contenedor
			$bh.style.backgroundImage											= "url('"+$img+"')";
	// al iniciarse bgp es 0 en los dos elementos
			$td.bgp = $bh.bgp													= 0;
	// incrementa el background-position del contenedor
			this.bgpgu($bh);
	// inicia el cambio de imagenes
			this.auto();
	// hace aparecer el control
			this.control();
		}
	}

// PARCHE -----------------------------------------------------------------------------
	this.Goto = function($URL){
		window.location.href = "CA.html";
	}

// APLICA ALTO Y ANCHO AL ELEMENTO PASADO --------------------------------------------------------------------------
	this.styletoHW = function($e){
	// le crea el ancho
		$e.style.width															= $hw+"px";
	// le crea el alto
		$e.style.height															= $hh+"px";
	}

// APLICA EL fadeout A $td COMO UN INTERVAL ------------------------------------------------------------------------
	this.next = function(){
		clearInterval($td.timer);
	// crea en $td el timer del fadeout
		$td.timer																= setInterval(function(){eval($tbwo).fdout()},$fs);
	// reinicia el cambio de imagenes
		this.auto();
	}

// TIMER PARA CAMBIO ENTRE IMAGENES --------------------------------------------------------------------------------
	this.auto = function(){
	// si existe $pl
		if($pl){
	// se asegura de que no exista timer en $bh
			clearInterval($bh.timer);
	// y lo crea para pasar a la imagen siguiente
			$bh.timer															= setInterval(function(){eval($tbwo).next()},$ar*1000);
		}
	}

// HACE FADEOUT DEL DIV DE TRANSICION ------------------------------------------------------------------------------
	this.fdout = function(){
	// se establece av como av - fs en $td para la proxima llamada
		$td.av																	= $td.av-$fs;
	// opacity es $td.av/100 (opacity va de 0 a 1)
		$td.style.opacity														= $td.av/100;
	// filter es $td.av (filter va de 0 a 100)
		$td.style.filter														= "alpha(opacity="+$td.av+")";
	// si av de $td es menor o igual a 0
		if($td.av <= 0){
	// mata el interval de $td
			clearInterval($td.timer);
	// resetea av de $td a 100
			$td.av																= 100;
	// hace a $td visible
			$td.style.opacity													= 1;
	// para todos los navegadores
			$td.style.filter													= "alpha(opacity=100)";
	// incrementa el background-position de $bh
			this.bgpgu($bh);
	// incrementa el background-position de $td
			this.bgpgu($td);
		}
	}

// INCREMENTA EL Y DEL background-position DEL OBJETO $e EN + $hh --------------------------------------------------
	this.bgpgu = function($e){
	// captura bgp de $e, para asegurarse de que es un numero
		var $bgp																= parseInt($e.bgp);
	// establece $nhh como numero a partir de $hh
		$nhh																	= parseInt($hh);
	// si $bgp es menor que $ih - $nhh (el alto de la imagen menos el alto del contenedor)
		if($bgp < ($ih-$nhh)){
	// $e.bgp es $bgp + $nhh;
			$e.bgp																= $bgp+$nhh;
	// de lo contrario
		}else{
	// $e.bgp es 0, cada 100 vueltas mozilla desfasa mal
			$e.bgp																= 0;
		}
	// se le aplica el background-position de $e.bgp en Y
		$e.style.backgroundPosition												= "0px -"+$e.bgp+"px";
	}

// HACE UNA PRECARGA DE LA IMAGEN ----------------------------------------------------------------------------------
	this.preload = function(){
		var $i,$d;
	// crea un elemento imagen
		$i																		= document.createElement("img");
	// aplica el src a la imagen
		$i.src																	= $img;
	// crea un elemento div
		$d																		= document.createElement("div");
	// aplica visibility y overflow hidden al div
		$d.style.visibility = $d.style.overflow									= "hidden";
	// y le da 0 de alto
		$d.style.height															= "0";
	// apenchildea la imagen al div
		$d.appendChild($i);
	// apenchildea el div al body
		$b.appendChild($d);
	// le aplica completeimg como interval a la imagen
		$i.timer																= setInterval(function(){eval($tbwo).completeimg($i)},5);
	}

// CAPTURA EL ALTO DE LA IMAGEN SI SE CARGO COMPLETE Y ESTA VISIBLE ------------------------------------------------
	this.completeimg = function($i){
	// si la imagen esta complete y si la imagen tiene offsetHeight (esta completamente visible)
		if($i.complete && $i.offsetHeight != ""){
	// mata el interval de la imagen
			clearInterval($i.timer);
	// establece el offsetHeight en una variable de la "clase"
			$ih																	= parseInt($i.offsetHeight);
	// captura el contenedor de la imagen
			$e																	= $i.parentNode;
	// y lo borre del parent
			$e.parentNode.removeChild($e);
	// e indica al script que es puede continuar
			$l																	= true;
		}
	}

// CREA LA CAJA DE CONTROL -----------------------------------------------------------------------------------------
	this.control = function(){
	// si tiene que aparecer el control o $pl es false
		if($cn || !$pl){
	// crea el elemento div de los controles
			$cd																	= document.createElement("div");
	// lo apenchildea a $bh
			$bh.appendChild($cd);
	// si existe el timer de cambio de imagenes en $bh
			if($bh.timer){
	// le mete el boton de stop
				$cd.innerHTML													= this.createControl("S");
	// de lo contrario
			}else{
	// le mete el boton de play
				$cd.innerHTML													= this.createControl("P");
			}
	// le da ancho
			$cd.style.width														= "40px";/* parseInt($d.parentNode.offsetWidth)/5+"px"; */
	// le da padding
			$cd.style.padding													= "5px";
	// lo situa a $hh - $d.offsetHeight
			$cd.style.top														= ($hh-parseInt($cd.offsetHeight))+"px";
	// le da posicion relativa
			$cd.style.position													= "relative";
	// color de fondo
			$cd.style.backgroundColor											= "#FFFFFF";
	// alinea el contenido al centro
			$cd.style.textAlign													= "center";
	// y z-index de 100
			$cd.style.zIndex													= "100";
		}
	}

// CREA LOS BOTONES DE PLAY Y STOP ---------------------------------------------------------------------------------
	this.createControl = function($bt){
	// si es P
		if($bt == "P"){
	// el link es play
			return '<a href="#" onclick="'+$tbwo+'.play()"><b>play</b></a>';
	// si es S
		}else if($bt == "S"){
	// el link es stop
			return '<a href="#" onclick="'+$tbwo+'.stop()"><b>stop</b></a>';
		}
	}

// CONTROL DE PLAY -------------------------------------------------------------------------------------------------
	this.play = function(){
	// booleano de la funcion auto
		$pl																		= true;
	// link de play
		$cd.innerHTML															= this.createControl("S");
	// pasa a la siguiente imagen
		this.next();
	}

// CONTROL DE STOP -------------------------------------------------------------------------------------------------
	this.stop = function(){
	// booleano de la funcion auto
		$pl																		= false;
	// link de stop
		$cd.innerHTML															= this.createControl("P");
	// mata el interval de $bh
		clearInterval($bh.timer);
	}

// IMPRIME EN PANTALLA UN DIV CON LOS VALORES PASADOS, CADA VEZ QUE SE LA LLAMA, alert + interval = problema -------
	this.trace = function($v){
		var $d,$t,$e;
	// crea el contenido con lo que se le paso
		$t																		= document.createTextNode($v);
	// crea el contenedor
		$d																		= document.createElement("div");
	// aplica el contenido al contenedor
		$d.appendChild($t);
	// aplica el contenedor al documento
		$b.appendChild($d);
	}

// INICIALIZACION --------------------------------------------------------------------------------------------------
	this.init();
}