/*

	BKLDSimpleFade.js

	Copyright (c) 2009 Bookingland

	http://www.bookingland.com


	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".

*/
function BKLDSimpleFade_url() {
	return this.pre + this.j + this.suf;
}
function BKLDSimpleFade_url_idx() {
	return this.v[this.j-1];
}
function BKLDSimpleFade_next() {
	this.c.src = this.i.src;
	this.c.style.width = this.W;
	if( ++this.j > this.n )
		this.j = 1;
	this.o = 0;
	var _this = this;
	setTimeout( function() { _this.fading() }, this.t );
}
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_fading() {
	this.opacity( this.i, this.o );
	if( this.o == 0 ) {
		this.i.src = this.url();
		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.next();
}
function BKLDSimpleFade_add(url) {
	if( this.v == null ) {
		this.v = new Array();
		this.url = BKLDSimpleFade_url_idx;
	}
	this.v[ this.v.length ] = url;
	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.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.fading = BKLDSimpleFade_fading;
	this.url = BKLDSimpleFade_url;
	this.add = BKLDSimpleFade_add;
	this.opacity = typeof(this.i.style.filter) != 'undefined' ? BKLDSimpleFade_opacity_2 : BKLDSimpleFade_opacity_1;
}