/*
 *	CLASS:					DiaShow
 *	DESCRIPTION:		Läßt geladene Bilder ein und ausblenden
 *									Voraussetzung: mootools.js muss geladen sein
 *
 *	AUTHOR:					Walter Wahl (www.wacode.de)
 *	VERSION:				2.0
 *
 *	PROTOCOL:				2008-04-01	Neudesign:
 *															Das Laden der Bilder dauert zu lange.
 *															Die Bilder werden erst nach dem Seitenaufbau geladen und dann dargestellt
 */
 
var DiaShow = new Class({
	loadedCount:	0,
	images: 			null,
	activ:				1,
	timer:				null,
	
	options: {
		boxid:			'',
		picList:		null,
		interval:		2000,
		duration:		1000,
		diaWidth:		400,
		diaHeight:		300
	},
	
	// Konstruktor
	initialize: function (options) {
		this.setOptions(options);
		this.showLoadState();
		if(this.options.picList.length > 0) {
			this.doLoadPicture();
			this.showLoadState();
		}
		else {
			$(this.options.boxid).empty();
			$(this.options.boxid).setHTML('... keine Bilder in der Diashow ...');
		}
	},
	
	// Lädt alle Bilder
	doLoadPicture: function() {
		this.loadedCount = 0;
		this.images = new Asset.images(this.options.picList,
			{
				onProgress: this._onProgressLoadPicture.bind(this),
				onComplete: this._onCompleteLoadPicture.bind(this)
			});
	},
	
	_onProgressLoadPicture: function()
	{
		this.loadedCount++;
	},
	
	_onCompleteLoadPicture: function()
	{
		this.images.each(function(item, index) {
			item.addClass('diaShow');
			item.setStyles({
				visibility: 'hidden'
			});
		});
		
		$(this.options.boxid).empty();
		this.showPicture();
	},
	
	showLoadState: function()
	{
		// $(this.options.boxid).setHTML('Anzahl Bilder: ' + this.options.picList.length);
	},
	
	showPicture: function()
	{
		var tim = 500;
		var box = $(this.options.boxid);
//		box.setStyle('position','realtive');
		
		// Wenn nur ein Bild geladen werden soll
		if(this.options.picList.length == 1) {
			// Bild einhängen, wenn vorhanden und anzeigen
			if((this.loadedCount > 0) && (this.images.length > 0)) {
				this.images[0].injectInside(box);
				new Fx.Style(this.images[0], 'opacity', {duration: 50, wait: true}).start(0,1);
			}
			else {
				// Bild noch nicht geladen, also warten
				setTimeout('this.showPicture()',tim);
			}
			return;
		}
		
		// Mehrere Bilder
		if(this.options.picList.length > 1) {
			if((this.loadedCount > 0) && (this.images.length > 0)) {
				var pic1 = box.getFirst();
				var pic2 = box.getLast();

				var child = box.getChildren();
				var cont = child.length;
				if(cont > 0) {
					if(cont > 1) {
						pic1.remove();
					}
					this.activ++;
					if(this.activ >= this.images.length) {
						this.activ = 0;
					}
					pic1 = this.images[this.activ].clone();
					pic1.injectAfter(pic2);
					
					pic1.setStyles({
						position: 'absolute',
						left: 0,
						top: 0,
						width: this.options.diaWidth,
						height: this.options.diaHeight
					});
					pic2.setStyles({
						position: 'absolute',
						left: 0,
						top: 0,
						width: this.options.diaWidth,
						height: this.options.diaHeight
					});
				
					new Fx.Style(pic1, 'opacity', {duration: this.options.duration, wait: true}).start(0,1);
					new Fx.Style(pic2, 'opacity', {duration: this.options.duration, wait: true}).start(1,0);
				}
				else {
					// Noch kein Bild
					this.activ = 0;
					pic1 = this.images[this.activ].clone();
					pic1.setStyles({
						position: 'absolute',
						left: 0,
						top: 0,
						width: this.options.diaWidth,
						height: this.options.diaHeight
					});

					pic1.injectInside(box);
					new Fx.Style(pic1, 'opacity', {duration: this.options.duration, wait: true}).start(0,1);
				}
				setTimeout(this.showPicture.bind(this),this.options.interval);
			}
			else {
				// Bild noch nicht geladen, also warten
				setTimeout(this.showPicture.bind(this), tim);
			}
			return;
		}
	}
	
});
DiaShow.implement(new Options());

/* #########################################################################################
 * # MAIN
 *
var picList1 = [
								'pic/bild1.png',
								'pic/bild2.png',
								'pic/bild3.png',
								'pic/bild4.png',
								'pic/bild5.png',
								'pic/bild6.png',
								'pic/bild7.png',
								'pic/bild8.png',
								'pic/bild9.png'
							 ];

// Alles ist geladen
window.addEvent('load', function() {
	var dia1 = new DiaShow({	boxid: 'frmBox12',
												 		picList: picList1
												});
});
 */