/**
* JavaScripts für Crossfade-Bildueberblendung im Stellenportal/Thueringenjahr
* 
* <i-D> internet & Design GmbH & Co. KG
* Erfurter Str. 35
* 99423 Weimar
* Deutschland
* Fon:     03643 7785 0
* Fax:     03643 7785 29
* E-Mail:  office@i-d.de
* Web:     http://www.i.d.de/
*
* @author Niels Bobogk <niels@i-d.de>
* @copy 2009-2010 <i-D> internet & Design GmbH & Co. KG
*/

// CSS
// document.write('<link rel="stylesheet" type="text/css" href="/de/css/screen/thueringenjahr/crossfade.css" media="screen"/>');

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

// Abschnitt Konfiguration

// ACHTUNG: Slideshow wird in Extra-Datei crossfade.config.js konfiguriert !!!
document.write('<script type="text/javascript" src="/de/js/thueringenjahr/crossfade.config.js"></script>');

// Konstanten
var CROSSFADE_INTERVAL     = 8;                                         // Zeitabstand zwischen Ueberblendungen in sek.
var CROSSFADE_DURATION     = 1.5;                                       // Dauer Ueberblendung in sek.
var SLIDESHOW_PATH         = "/de/bilder/thueringenjahr/slideshow/";    // Pfad zum Verzeichnis mit den Slideshow-Bildern

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

/**
* Slideshow-Element
*/
var SlideshowItem = Class.create();
SlideshowItem.prototype = {
	/**
	* Initialisierung
	* Erstellung der Elemente
	*/ 
	initialize: function(index) {
		this.state = -1;
		
		this.img  = new Image();
		this.text = new Element('p').insert('');
		this.item = new Element('div', {'class' : 'item'}).insert(this.img);
		this.item.setStyle({
			'position' : 'absolute',
			'left' : 0,
			'top' : 0
		});
		this.load(index);
		
		this.item.insert(this.text);
	},
	
	/**
	* Laden der Item-Daten
	*
	* @param int Index des zu Ladenden Slideshow-Items
	*/
	load: function(index) {
		// wird bereits geladen
		if (this.state = 0) return;
		
		try {
			var el = SlideshowItems[index];			
			if (el) {
				this.state = 0;
				
				this.img.src = SLIDESHOW_PATH + el.file;
				$(this.text).update(unescape(el.text));
				
				$(this.text).removeClassName('footer_de');
				$(this.text).removeClassName('footer_fr');
				$(this.text).addClassName('footer_' + el.lang);
			}
		} catch(err) {
			console.log(err);
		};
	},
	
	/**
	* Entladen der Item-Daten
	*/
	unload: function() {
		this.img.src = null;
		$(this.text).update('');
		$(this.text).toggleClassName('');
	},
	
	/**
	* gibt an, ob Element (Bild) geladen ist
	*
	* @return bool
	*/
	readyState: function() {
		// ... wird geladen
		if (this.state == 0 && !this.img.complete) return 0;
		// ...ist fertig geladen
		if (this.state == 0 && this.img.complete) {
			this.state = 1;
		}
		// sonst:
		return this.state;
	}
}

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

/**
* Slideshow oben links
*/
var Slideshow = Class.create();
Slideshow.prototype = {
	/**
	* Initialisierung
	*/ 
	initialize: function(nodeContainer) {
		// Elternelement
		this.container = nodeContainer;
		this.container.addClassName('jsSlideShowContainer');
		
		// wenn Dateien vorhanden sind
		if (SlideshowItems && SlideshowItems.length > 0) {
			// Gallerie zuruecksetzen
			this.reset();
			this.current = 1;
			
			// Elemente erzeugen
			this.ssi1 = new SlideshowItem(this.getNewIndex());
			this.ssi2 = new SlideshowItem(this.getNewIndex());
			
			// Elemente verstecken
			this.ssi1.item.hide(0);
			this.ssi2.item.hide(0);
			
			// Elemente in DOM einfuegen
			this.container.update(this.ssi1.item);
			this.container.insert(this.ssi2.item);
			
			// 1. Element anzeigen
			this.ssi1.item.appear( { duration: CROSSFADE_DURATION } );
			
			// weiterfuehrendes, periodisches Einblenden
			new PeriodicalExecuter(this.crossfade.bind(this), CROSSFADE_INTERVAL);
		}
	},
	
	crossfade: function() {	
		if (this.current == 1) {
			if (this.ssi2.readyState() != 1) {
				this.ssi2.load();
				return;
			}	
			
			this.ssi1.item.fade( {	
				duration: CROSSFADE_DURATION, 
				object: this,
				afterFinish: function() {
					this.object.ssi1.load(this.object.getNewIndex());	
				}				
			});
			this.ssi2.item.appear( { duration : CROSSFADE_DURATION } );
			
			this.current = 2;
			
		} else if (this.current == 2) {
			if (this.ssi1.readyState() != 1) {
				this.ssi1.load();
				return;
			}	
			
			this.ssi2.item.fade( {	
				duration: CROSSFADE_DURATION,  
				object: this,
				afterFinish: function() {	
					this.object.ssi2.load(this.object.getNewIndex());					
				}				
			});
			this.ssi1.item.appear( { duration : CROSSFADE_DURATION } );
			
			this.current = 1;
		}
	},
	
	/**
	* (zufaelligen) Index des als naechstes zu zeigenden Elements ermitteln
	*/
	getNewIndex: function() {
		var rand;
		var max = SlideshowItems.length - 1;
		
		if (max <= 0) {			
			return max;
		}
		
		// Arraylaenge gibt Anzahl der Versuche vor
		for (var i = 0; i <= max; i++) {
			rand = this.getRandom(0, max);
			if (SlideshowItems[rand].shown == false) {
				SlideshowItems[rand].shown = true;
				return rand;	
			}
		}
		
		// reset, wenn kein freies Element mehr vorhanden ist..
		this.reset();
		
		// ...und nochmal neu
		return(this.getNewIndex());
	},
	
	/**
	* Zufallszahl innerhalb eines bestimmten Bereiches ermitteln
	*/
	getRandom: function (min, max) {
		if(min > max) return( -1 );
		if(min == max) return( min );
		return(min + parseInt( Math.random() * (max - min + 1)));
	},

	/**
	* alle Slideshow-Items auf "nicht gesehen" setzen
	*/
	reset: function() {
		$(SlideshowItems).each(function(s) {
			s.shown = false;
		});
	}
}

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

// Start
Event.observe(window, 'load', function() {
	var slideShow = new Slideshow($('crossfadeHeader'));	
});