/*[version]2007-11-26 16:08[/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.
Lediglich style="display:none;" ist erlaubt.

Aus der Sammlung eine Klasse machen und mit Beispiel dokumentieren.

*/
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.border_width = 17;	// Falls der Container ein Padding hat. Alles, was über die nackte Bildgröße hinausgeht.
Popup.transparency = 3;
Popup.image_path = './images/location/';
Popup.registeredImages = new Array();
Popup.registeredImagesIndex = 0;
Popup.numberOfImagesToPreload = 3;

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;
	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.load = function(){
	this.target = document.getElementById( 'popbild' );
	this.mainContainer = document.getElementById( 'maincont' );
	this.qt = document.getElementById( 'qt' );
	this.nav = document.getElementById( 'nav' );
	this.loaded = true;

	this.document_width = Geometry.getDocumentWidth();
	this.document_height = Math.max( Geometry.getDocumentHeight(), Geometry.getViewportHeight() );
	// Setze Maximalwerte, um unendliches Scrolling zu unterbinden.
	this.max_left = 0;
	this.max_top = 0;

	// 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 = this.width;
	img.height = this.height;
	if( img.setAttribute ){
		img.setAttribute( 'text', this.text );
	}else{
		img.text = this.text;
	}

	Popup.display( img );
};

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

	img.onclick = Popup.displayNextRegisteredImage;

	this.total_width = img.width + 2 * this.border_width;
	this.total_height = img.height + 2 * this.border_width;

	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];
	newNode.replaceChild( img, oldImg );
	this.target.parentNode.appendChild( newNode );
	Popup.center( newNode );
	newNode.style.display = '';
	this.target.style.display = 'none';


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

Popup.center = function(){
	this.max_left = this.document_width - this.total_width;
	this.max_top = this.document_height - this.total_height;

	// Vertikal zentriere über dem Dokument.
	var left = Math.round( (Geometry.getDocumentWidth() - this.total_width) / 2 );
	var top = Geometry.getVerticalScroll() + Math.round( (Geometry.getViewportHeight() - this.total_height) / 2 );

	var container = this.target;
	if( arguments.length > 0 ){
		container = arguments[0];
	}

	left = (left>this.max_left) ? this.max_left : left;
	left = (left<0) ? 0 : left;
	top = (top>this.max_top) ? this.max_top : top;
	top = (top<0) ? 0 : top;

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

	window.onscroll = centerPopup;
	window.onresize = centerPopup;
}

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

	this.mainContainer.style.opacity = 100;
	this.mainContainer.style.filter = 'alpha(opacity=' + 100 + ')';
	if( this.qt ){
		this.qt.style.opacity = 100;
		this.qt.style.filter = 'alpha(opacity=' + 100 + ')';
	}
	if( this.nav ){
		this.nav.style.opacity = 100;
		this.nav.style.filter = 'alpha(opacity=' + 100 + ')';
	}
}

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