/*

	BKLDSimpleFade.js

	Copyright (c) 2009 Bookingland

	http://www.bookingland.com
	
-- JJBM, 30/11/2010, nextT
-- JJBM, 30/11/2010, gestionar timeouts.
--/


	USO

		Crea una capa ID1.
		Mete una imagen ID2.
		Ten una lista enumerada de imagenes
			ruta/img1.ext
			ruta/img2.ext
			...
			ruta/imgN.ext

		Haz una llamada como:

			( new BKLDSimpleFade( 'ID1', 'ID2', t1, t2, 'ruta/img', '.ext', N ) ).start()

		donde:
			t1, tiempo entre imagen e imagen.
			t2, tiempo de transición (blending).
			N, número total de imagenes (de 1 a N).

		Si prefieres no enumerar las imagenes y pasar la lista entonces haz:

			var sf = new BKLDSimpleFade( 'ID1', 'ID2', t1, t2 );
			sf.add( ruta1 );
			sf.add( ruta2 );
			sf.add( ruta3 );
			sf.add( ruta4 );
			sf.start();

	SUGERENCIAS

		Deja la primera imagen lista en la capa (como background) y en la imagen.
		Fija el tamaño de la capa e imagen.
		A la capa ponle "overflow: hidden".
		
		* Para hacer botones siguiente anterior
		
			// imagen anterior
			OBJETO_FADE.nextTI( 0, OBJETO_FADE.n - 2 )
			
			// imagen siguiente
			OBJETO_FADE.nextTI( 0, 0 )
			
		* Para que al pulsar algo deje de hacer animación

			OBJETO_FADE.t = 1500000
		
		* Para ir a la imagen i-ésima
		
			OBJETO_FADE.nextTI( 0, OBJETO_FADE.n - OBJETO_FADE.j + i )

		* Para fijar un elemento en función de la imagen activa (ej. un class de posición)
		
			function OBJETO_FADE_css(n) {
				for( var i = 1; i < 5; i++ )
					document.getElementById("viva_res_elss_O" + i).className = "nivo-control";
				document.getElementById("viva_res_elss_O" + n).className = "nivo-control active";
			}
			
		  en la imagen de transición
		  
		  	<img id="imagen" ... onload="OBJETO_FADE_css( OBJETO_FADE.j )" ... />
		  
		* Para fijar una imagen en función de n = 1, 2, ..., N
		
			function OBJETO_FADE_to(n) {
				var f = OBJETO_FADE;
				n = 1 + ( ( f.n + n - 1 ) % f.n );
				f.t = 1500000;
				f.nextTI( 0, f.n - f.j + n );
				OBJETO_FADE_css(n);
			}
		
		* Para avanzar o retroceder en función de OBJETO_FADE_to()
		
			OBJETO_FADE_to(OBJETO_FADE.j-2)	// retroceder 1
			OBJETO_FADE_to(OBJETO_FADE.j  )	// avanzar 1
			
*/
function BKLDSimpleFade_url() {
	return this.pre + this.j + this.suf;
}
function BKLDSimpleFade_lnk() {
    return null;
}
function BKLDSimpleFade_url_idx() {
    return this.v[this.j - 1];
}
function BKLDSimpleFade_lnk_idx() {
    return this.L[this.j - 1];
}
function BKLDSimpleFade_nextTI(T,I) {
	this.c.src = this.i.src;
	this.c.style.width = this.W;
	if( ( this.j += I ) > this.n )
		this.j = 1 + ( ( this.j - 1 ) % this.n );
	this.o = 0;
	var _this = this;
	clearTimeout( this.to_wait );
	if( T == 0 )
		this.fading();
	else
		this.to_wait = setTimeout( function() { _this.fading() }, T );
}
function BKLDSimpleFade_next() {
	this.nextTI( this.t, 1 );
}
function BKLDSimpleFade_image_onclick() {
    location.href = this.link;
}
function BKLDSimpleFade_opacity_1(c,x) { c.style.opacity = c.style.MozOpacity = c.style.KhtmlOpacity = x / 100; }
function BKLDSimpleFade_opacity_2(c, x) { c.style.filter = 'alpha(opacity=' + x + ')'; }
function BKLDSimpleFade_SetLink() {
    var l = this.lnk();
    if (l != null && l != "") {
        this.i.style.cursor = this.c.style.cursor = 'pointer';
        this.i.link = this.c.link = this.lnk();
        this.i.onclick = this.c.onclick = BKLDSimpleFade_image_onclick;
    } else {
        this.i.style.cursor = this.c.style.cursor = 'default';
        this.i.link = this.c.link = "";
        this.i.onclick = this.c.onclick = null;
    }
}
function BKLDSimpleFade_fading() {
	this.opacity( this.i, this.o );
	if( this.o == 0 ) {
		this.i.src = this.url();
		this.SetLink();
		this.i.style.display = 'inline';
		this.i.style.width = this.W;
	} else {
		if( this.o >= 100 )
			return this.next();
	}
	this.o = this.o + this.os;
	var _this = this;
	setTimeout( function() { _this.fading() }, 33 );
}
function BKLDSimpleFade_start() {
    this.SetLink();
    this.next();
}
function BKLDSimpleFade_add(url,lnk) {
	if( this.v == null ) {
	    this.v = new Array();
	    this.L = new Array();
	    this.url = BKLDSimpleFade_url_idx;
	    this.lnk = BKLDSimpleFade_lnk_idx;
	}
	this.v[this.v.length] = url;
	this.L[this.L.length] = lnk;
	this.n = this.v.length;
}
function BKLDSimpleFade( capa, imagen, tiempo_ms, fade_ms, img_pre, img_suf, img_n ) {
	this.c = document.getElementById(capa);
	this.i = document.getElementById(imagen);
	this.t = tiempo_ms;
	this.pre = img_pre;
	this.suf = img_suf;
	this.n = img_n;
	this.W = this.c.offsetWidth + 'px';
	this.o = 0;
	this.v = null;
	this.L = null;
	this.os = 3300 / fade_ms;
	if( this.os < 1 )
		this.os = 1;
	this.j = 1; // la primera imagen debe ya estar cargada en las dos capas.
	this.start = BKLDSimpleFade_start;
	this.next = BKLDSimpleFade_next;
	this.nextTI = BKLDSimpleFade_nextTI;
	this.fading = BKLDSimpleFade_fading;
	this.url = BKLDSimpleFade_url;
	this.lnk = BKLDSimpleFade_lnk;
	this.add = BKLDSimpleFade_add;
	this.SetLink = BKLDSimpleFade_SetLink;
	this.opacity = typeof(this.i.style.filter) != 'undefined' ? BKLDSimpleFade_opacity_2 : BKLDSimpleFade_opacity_1;
}