/*[version]2008-01-29 14:59[/version]*/
/**
Benötigt die Module event.js und geometry.js
Keine Unterstützung für Beschreibungen, obwohl bei display() ein Parameter
dafür existiert.
Registrierte Images werden zyklisch durchlaufen.
Div mit ID 'popbild' darf nur ein img-Tag enthalten und muss über die Klasse gestylt werden. ---> Stimmt nicht, können auch mehr sein.
Lediglich style="display:none;" ist erlaubt.

Aus der Sammlung eine Klasse machen und mit Beispiel dokumentieren.


Was wir alles können sollten:
	- Horizontal über dem Dokument zentrieren
	- Vertikal über dem Dokument zentrieren
	- Vertical über dem Viewport zentrieren
	- Mit fixem left positionieren
	- Mit fixem top positionieren
	- Mit fixer Höhen-/Breitenangabe zentrieren
	- Kombinationen der Positionierungsmöglichkeiten (zB. left fix, top über Viewport usw.)

onResizeAdjustment: resize-Event bekommt neue Höhe und Breite mit - könnte man ausnutzen.

*/
function PopupImage( width, height, file, text ){
	this.width = width;
	this.height = height;
	this.file = file;
	this.text = text;
	this.image = null;
}

PopupImage.prototype.load = function(){
	//var img = new Image();	// Da gibt's im Safari 2 Kompatibilitätsprobleme zu DOM Level 2.
	var img = document.createElement( "img" );
	img.src = this.file;
	img.width = this.width;
	img.height = this.height;
	if( img.setAttribute ){
		img.setAttribute( 'text', this.text );
	}else{
		img.text = this.text;
	}

	this.image = img;
};







var Popup = { };
Popup.loaded = false;
Popup.borders = {};	// Falls der Container ein Padding hat. Alles, was über die nackte Bildgröße hinausgeht.
Popup.borders.top = 18;
Popup.borders.right = 18;
Popup.borders.bottom = 36;
Popup.borders.left = 18;
Popup.transparency = 3;
Popup.image_path = '';
Popup.registeredImages = new Array();
Popup.registeredImagesIndex = 0;
Popup.numberOfImagesToPreload = 3;
Popup.coverId = 'cover';
Popup.isIE = false;
Popup.ieVersion = 0;
Popup.adjustOnResize = true;
Popup.onResizeAdjustmentRegistered = false;
// Handler, der, unmittelbar BEVOR das Bild angezeigt wird, aufgerufen wird.
// Als einziges Argument wird das Bild übergeben.
Popup.onImageDisplay = null;
// Wenn slide true, wird bei Klick auf das Bild das nächste Bild angezeigt.
Popup.slide = true;


/*
 * Positionierung kann über 4 Möglichkeiten gesteuert werden:
 *  - fixe X/Y (dh. left/top) Angaben	[fixed]
 *  - fixe Höhe/Breite					[fixedLength]
 *  - über Viewport zentriert			[viewportCentered]
 *  - über Dokument zentriert			[documentCentered]
 *
 * Die Möglichkeiten können auch kombiniert werden, dh. zB. vertikal mit fixem Y
 * und horizontal über dem Dokument zentriert.
 */
Popup.horizontalPositioning = 'documentCentered';
Popup.verticalPositioning = 'fixedLength';
// fixedLength-Parameter.
Popup.horizontalLength = 0;
Popup.verticalLength = 690;
// fixed-Parameter.
Popup.leftPosition = 0;
Popup.topPosition = 0;



Popup.registerImage = function( width, height, file, text ){
	Popup.registeredImages.push( new PopupImage(width, height, Popup.image_path+file, text) );
};

Popup.displayRegisteredImage = function( index ){
	if( Popup.registeredImages.length < 1 ){
		return;	// No images. Return silently.
	}

	// Registrierte Bilder werden zyklisch durchlaufen.
	if( index < 0 ){
		index = Popup.registeredImages.length - 1;
	}else if( index >= Popup.registeredImages.length ){
		index = 0;
	}

	Popup.registeredImagesIndex = index;

	if( Popup.registeredImages[index].image == null ){
		Popup.registeredImages[index].load();
	}

	if( !Popup.registeredImages[index].image.width || !Popup.registeredImages[index].image.height ){
		// Im IE gehen auf seltsame Weise die width/height-Attribute des Bildes
		// bei wiederholter Anzeige verloren. Mit dem händischen Setzen der
		// Attribute ist es leider nicht getan, das Bild MUSS nachgeladen werden,
		// weil IE auch vergessen hat, dass es sich bei dem Objekt um ein IMG
		// handelt.
		Popup.registeredImages[index].load();
	}

	var img = Popup.registeredImages[index].image;

	this.cover.style.display = '';
	Popup.display( img );

	Popup.registeredImagesIndex = index;

	// Preload next images.
	index++;	// Set index to next image.
	for( var i=0; i<Popup.numberOfImagesToPreload && index<Popup.registeredImages.length; i++ ){
		// Look for next unpreloaded image.
		while( index < Popup.registeredImages.length && Popup.registeredImages[index].image != null ){
			index++;
		}
		if( index < Popup.registeredImages.length ){
			Popup.registeredImages[index].load();
		}
	}
};

Popup.displayNextRegisteredImage = function(){
	Popup.displayRegisteredImage( Popup.registeredImagesIndex + 1 );
};

Popup.displayPreviousRegisteredImage = function(){
	Popup.displayRegisteredImage( Popup.registeredImagesIndex - 1 );
};

Popup.initializeOnload = function(){
	Popup.registerEvent( window, "load", Popup.init );
};

Popup.init = function(){
	Geometry.load();
	Popup.load();
};

Popup.adjustCoverHeight = function(){
	// Im IE6 funktioniert 100%ige Höhe nicht.
	// Im IE 7 ist's besser, da wird die Viewport-Höhe 100%ig abgedeckt.
	// Firefox ist dasselbe wie im IE7.
	// Das Dokument allerdings nicht.
	// Bei dem Stinker müssen wir daher die Höhe händisch setzen.
	Popup.cover.style.height = Geometry.getDocumentHeight() + "px";
};

Popup.load = function(){
	this.target = document.getElementById( 'popbild' );
	this.cover = document.getElementById( this.coverId );
	this.loaded = true;

	if( document.attachEvent ){
		// Ein IE isses wohl.
		var version = navigator.appVersion;
		var regex = /MSIE [0-9]+\.[0-9]+/i;
		var match = version.match( regex )[0];	// Uns interessiert nur der erste Treffer.
		if( match != null ){
			Popup.isIE = true;
			Popup.ieVersion = new Number( match.substr(5) );
		}
		//alert( navigator.appVersion );
	}
	// Auch der IE 7 checkt die 100%ige Höhe nicht. Dort bezieht sie sich auf den Viewport.
	// Im Firefox dasselbe.
	//if( Popup.isIE /*&& Popup.ieVersion < 7*/ ){
		Popup.adjustCoverHeight();
		Popup.registerEvent( window, "resize", Popup.adjustCoverHeight );
	//}

	// Preload first image.
	if( Popup.registeredImages.length > 0 ){
		Popup.registeredImages[0].load();
	}
};

Popup.displayImage = function( width, height, file, text ){
	if( !this.loaded ){
		this.load();
	}

	var img = new Image();
	img.src = Popup.image_path + file;
	img.width = width;
	img.height = height;
	if( img.setAttribute ){
		img.setAttribute( 'text', text );
	}else{
		img.text = text;
	}

	Popup.display( img );
};

Popup.display = function( img ){
	if( !this.loaded ){
		this.load();
	}

	this.total_width = img.width + this.borders.left + this.borders.right;
	this.total_height = img.height + this.borders.top + this.borders.bottom;

	var newNode = document.createElement( "div" );
	newNode.className = this.target.className;
	newNode.innerHTML = this.target.innerHTML;
	newNode.style.display = 'none';
	newNode.style.width = img.width + "px";
	newNode.style.height = img.height + "px";
	var oldImg = newNode.getElementsByTagName( "img" )[0];

	var replacement = null;
	if( Popup.isIE ){
		// Im IE verschwinden die Attribute des neuen Knotens nach dem Austausch
		// auf rätselhafte Weise. Wir füttern die Methode daher mit einem Klon,
		// nachdem das Kopieren und wieder Setzen der Eigenschaften fehlgeschlagen
		// hat.
		replacement = img.cloneNode();
		//newNode.replaceChild( img.cloneNode(), oldImg );
	}else{
		replacement = img;
		//newNode.replaceChild( img, oldImg );
	}
	if( Popup.slide ) replacement.onclick = Popup.displayNextRegisteredImage;
	newNode.replaceChild( replacement, oldImg );

	this.target.parentNode.appendChild( newNode );
	Popup.setPosition( newNode );
	this.target.style.display = 'none';

	this.target.parentNode.removeChild( this.target );
	this.target = newNode;

	if( Popup.onImageDisplay ){ Popup.onImageDisplay( img ); }

	newNode.style.display = '';
};


Popup.getLeftPosition = function( totalWidth ){
	// Der einfachste Fall: fixer X-Wert.
	if( this.horizontalPositioning == "fixed" ) return this.leftPosition;

	// Wir müssen über einer Breite zentrieren - welcher, bleibt zu sehen.
	if( !Geometry.loaded ) Geometry.load();
	var length = 0, left = 0;
	if( this.horizontalPositioning == "fixedLength" ) length = this.horizontalLength;
	if( this.horizontalPositioning == "documentCentered" ) length = Geometry.getDocumentWidth();
	if( this.horizontalPositioning == "viewportCentered" ) length = Geometry.getViewportWidth();

	maxLeft = length - totalWidth;

	left = Math.round( (length - totalWidth) / 2 );
	left = (left>maxLeft) ? maxLeft : left;
	left = (left<0) ? 0 : left;

	return left;
}

Popup.getTopPosition = function( totalHeight ){
	// Der einfachste Fall: fixer Y-Wert.
	if( this.verticalPositioning == "fixed" ) return this.topPosition;

	// Wir müssen über einer Höhe zentrieren - welcher, bleibt zu sehen.
	if( !Geometry.loaded ) Geometry.load();
	var length = 0, top = 0;
	if( this.verticalPositioning == "fixedLength" ) length = this.verticalLength;
	if( this.verticalPositioning == "documentCentered" ) length = Geometry.getDocumentHeight();
	if( this.verticalPositioning == "viewportCentered" ) length = Geometry.getViewportHeight();
//alert( length );
//alert( totalHeight );
	maxTop = length - totalHeight;

	top = Math.round( (length - totalHeight) / 2 );
	top = (top>maxTop) ? maxTop : top;
	top = (top<0) ? 0 : top;

	return top;
}

// total_width und total_height müssen gesetzt sein.
Popup.setPosition = function(){
	var container = this.target;
	if( arguments.length > 0 ){
		container = arguments[0];
	}

	var left = this.getLeftPosition( this.total_width );
	var top = this.getTopPosition( this.total_height );

	container.style.left = left + 'px';
	container.style.top = top + 'px';

	if( !Popup.onResizeAdjustmentRegistered && Popup.adjustOnResize ){
		Popup.registerEvent( window, "scroll", setPopupPosition );
		Popup.registerEvent( window, "resize", setPopupPosition );
		Popup.onResizeAdjustmentRegistered = true;
	}
}


Popup.close = function(){
	if( !this.loaded ){
		this.load();
	}
	this.target.style.display = 'none';
	this.cover.style.display = 'none';
}

// Globale Funktion zur Verwendung als Handler.
function setPopupPosition(){
	Popup.setPosition.call( Popup );
}

Popup.registerEvent = function( target, eventType, handler ){
	if( target.addEventListener ){
		target.addEventListener( eventType, handler, false );
	}else if( target.attachEvent ){
		target.attachEvent( "on"+eventType, handler );
	}else{
		target["on"+eventType] = handler;
	}
};