/**
* JavaScript für »Thüringen für Kinder«
*
* © 2008 <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 <n.bobogk@i-d.de>
*/

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

if (!DEBUGMODE) var DEBUGMODE = false;

/**
* KLasse zum Erzeugen einer Bildergalerie mit Miniaturen
* 
*/
var Gallery = Class.create();
Gallery.prototype = {
	/**
	* Startprozedur
	* sammelt Gallerie-Objekte in der zusammen
	* Miniaturen und Großansichten werden in Abhängigkeit der jeweiligen Abfolge
	* ihres Auftauchens im DOM einander zugeordnet
	*/
	initialize: function(classNameGallerySmall, classNameGalleryBig) {
		try {
			// Großansichten
			this.arrBigs = $$('.' + classNameGalleryBig);
			
			// nur ein Bild
			if (this.arrBigs.length == 1) {
				$(this.arrBigs[0]).style.display = 'block';
				return;
			}
			
			// Miniaturen
			this.arrSmalls = $$('.' + classNameGallerySmall);

			// Clickreignis registrieren
			for (var i = 0; i < this.arrSmalls.length && i < this.arrBigs.length; i++) {
				Event.observe(this.arrSmalls[i], 'click', this.show.bindAsEventListener(this));
				// fade-Effekt geht nur, wenn display:none, deswegen alle ausblenden außer dem default
				// if (!$(this.arrBigs[i]).hasClassName('galleryDefault')) $(this.arrBigs[i]).hide();
				if (i > 0) {
					$(this.arrBigs[i]).style.display = 'none';
				} else {
					$(this.arrBigs[i]).style.display = 'block';
				}
			}
			
			if ($$('#middleBottom .right .gallery')[0]) {
				$$('#middleBottom .right .gallery')[0].style.display = 'block';
			}
			
		} catch (err) {
			// Fehlerbehandlung
			if (DEBUGMODE) {
				alert(err);
			}
		}
	},
	
	/**
	* Anzeigen des gewählten Bildes n Großansicht; 
	* ausblenden aller Anderen (faden)
	*/
	show: function(event) {
		for (var i = 0; i < this.arrSmalls.length && i < this.arrBigs.length; i++) {
			if (this.arrSmalls[i] == event.target) {
				//$(this.arrBigs[i]).appear( { duration: 0.5} );
				$(this.arrBigs[i]).style.display = 'block';
			}
			else {
				//$(this.arrBigs[i]).fade( { duration: 0.5} );
				$(this.arrBigs[i]).style.display = 'none';
			}
		}
	}
}

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

var SegmentPaging = Class.create();
SegmentPaging.prototype = {
	/**
	* Startprozedur
	* 
	* @param string CSS-Klassenname 
	*/
	initialize: function(classNamePageSegment) {
		try {
			this.arrSegments = $$('.' + classNamePageSegment);
			
			if (this.arrSegments.length < 2) return null;
			
			this.arrLinks = new Array();
			
			// Sub-Container für Seitennavi
			this.pageNavi = new Element('span');
			this.pageNavi.addClassName('floatRight');
			
			// Link Vorhergehendes
			this.linkPrev = new Element('a', { 'class': 'previous', href: 'javascript:', segment: this.arrSegments[0] }).update("Vorhergehende Seite");
			this.linkPrev.hide();
			this.linkPrev.segment = this.arrSegments[0];
			Event.observe(this.linkPrev, 'click', this.show.bindAsEventListener(this));
			this.pageNavi.insert(this.linkPrev);
			
			// Segment-Links
			for (var i = 0; i < this.arrSegments.length; i++) {
				// alle außer dem Ersten ausblenden
				if (i > 0) {
					this.arrSegments[i].style.display = 'none';
				}
				/*
				$(this.arrSegments[i]).setStyle({
					position: 'absolute'
				});
				*/
				// erstes wird aktiv gesetzt
				var a = new Element('a', { 'class': (i == 0 ? 'active' : ''), href: 'javascript:' }).update(i + 1);
				a.segment = this.arrSegments[i];
				Event.observe(a, 'click', this.show.bindAsEventListener(this));
				this.arrLinks.push(a);
				this.pageNavi.insert(a);
			}
		
			// Link Nächstes
			this.linkNext = new Element('a', { 'class': 'next', href: 'javascript:', segment: this.arrSegments[0] }).update("Naechste Seite");
			this.linkNext.segment = this.arrSegments[1];
			Event.observe(this.linkNext, 'click', this.show.bindAsEventListener(this));
			this.pageNavi.insert(this.linkNext);
			
		} catch (err) {
			//$(this.arrBigs[i]).fade( { duration: 0.5} );
			$(this.arrBigs[i]).style.display = 'none';
		}
	},
	
	/**
	* Anzeigen des Textsegments; 
	* ausblenden aller Anderen
	*/
	show: function(event) {
		for (var i = 0; i < this.arrSegments.length; i++) {
			if (event.target.segment == this.arrSegments[i]) {
				//this.arrSegments[i].appear( { duration: 0.5} );
				this.arrSegments[i].show();
				this.arrLinks[i].addClassName('active');
				
				// wenn erstes Segment angezeigt ist, dann Link Vorhergehendes ausblenden
				if (i == 0) this.linkPrev.hide();
				else this.linkPrev.show();
				
				// wenn letztes Segment angezeigt ist, dann Link Nächstes ausblenden
				if (i == this.arrSegments.length - 1) this.linkNext.hide();
				else this.linkNext.show();
			}
			else {
				//this.arrSegments[i].fade( { duration: 0.5} );
				this.arrSegments[i].hide();
				this.arrLinks[i].removeClassName('active');
			}
		}
		
		// neue Ziel-Segmente fuer Prev und Next setzen
		// nochmal in Extra-Schleife, da sonst der Nect-Link nicht funktioniert
		for (var i = 0; i < this.arrSegments.length; i++) {
			if (event.target.segment == this.arrSegments[i]) {				
				
				if (i > 0) this.linkPrev.segment = this.arrSegments[i - 1];
				if (i < this.arrSegments.length) this.linkNext.segment = this.arrSegments[i + 1];
				break;
			}
		}
	}
}

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

/**
* Startpunkt
*/
Event.observe(window, 'load', function() { 	
	// Bildergalerie
	var _Gallery = new Gallery('gallerySmall', 'galleryBig');
	
	// Paginierung
	var _SegmentPaging = new SegmentPaging('pageSegment');
	// var _pagingContainer = $('middleBottom').down('div.limiter').down('div.center').down('p');
	
	var _pagingContainer = $('pagenavigation');
	if (_pagingContainer) {
		_pagingContainer.update();
		_pagingContainer.addClassName('pageNavi');
		_pagingContainer.insert(_SegmentPaging.pageNavi);
	}
});