/**
 * Class AnemaGalleryImage
 * Requires Acu.js
 *
 * Ctor-Parameter:
 *		- data siehe weiter unten
 *		- creatorFunction: Funktion, der das AnemaGalleryImage-Objekt übergeben wird
 *			und das in selbigen die Properties domElement, thumb und optional image
 *			auf DOM-Elemente setzt.
 *		- parentGallery: die Galerie, der das Bild zugeordnet ist und in deren
 *			DOM-Element es eingefügt werden soll.
 *
 * Status, hierarchisch bis auf error:
 *		- new
 *		- data			Properties gesetzt
 *		- created		DOM-Element(e) erzeugt
 *		- attached		in DOM eingefügt
 *		- activated		Event-Handling aktiviert
 *		- error
 *
 * Alle Properties in Parameter data werden am Objekt gespeichert.
 * Dh. es können für die creatorFunction auch Style-Angaben und sonstiges mitgeschickt werden.
 *
 * Required Properties:
 *		- id
 *		- domId
 *		- thumbPath
 *		- thumbWidth
 *		- thumbHeight
 *
 * Optional Properties (das große Bild ist optional, daher auch alle Angaben dazu):
 * 		- imagePath
 * 		- imageWidth
 * 		- imageHeight
 *		- thumbOnClickHandler( event, image )
 *		- thumbOnLoadHandler( event, image )
 *		- thumbOnMouseOverHandler( event, image )
 *		- thumbOnMouseOutHandler( event, image )
 *		- imageOnClickHandler( event, image )
 *		- imageOnLoadHandler( event, image )
 *		- onLoadDataHandler( self )		wird bei Aufruf der Methode loadData aufgerufen (falls gesetzt).
 * Alle Handler bekommen den Event und das AnemaGalleryImage-Objekt übergeben.
 *
 * Die Properties thumb, image und domElement müssen von der creatorFunction gesetzt werden
 * (image nur optional). Das domElement bezeichnet kann ein <img>-Tag sein, aber auch ein
 * eventuell umgebender Container (<div>, <td>, whatever).
 * Die Properties image und thumb dagegen MÜSSEN <img>-Tags sein.
 * Property image ist das große Bild, das normalerweise onClick angezeigt wird.
 *
 * Bei onLoad des Thumbnails wird das Visibility-Style-Attribut von thumb und domElement
 * IMMER auf "visible" gesetzt. Das ermöglicht das Auftauchen der Bilder sobald sie geladen
 * sind. Danach wird der thumbOnLoadHandler aufgerufen.
 *
 * image ist Schas, weil dauert zu lange, wenn's gleich erzeugt und geladen wird.
 *
 *
 */

function AnemaGalleryImage( data, creatorFunction, parentGallery ){
	this.status = "new";
	if( typeof creatorFunction != "function" ) throw "[AnemaGalleryImage] constructor: creatorFunction not a function";
	this.creatorFunction = creatorFunction;

	if( !parentGallery ) throw "[AnemaGalleryImage] constructor: missing parent gallery";
	this.parentGallery = parentGallery;

	this.loadData( data );

	this.thumb = null;
	this.image = null;
	this.domElement = null;

	var self = this;
	this.thumbEventHandler = function( e ){
		if( !e ) e = window.event;
		//alert( e.type );
		switch( e.type.toLowerCase() ){
			case "click": if( self.thumbOnClickHandler ) self.thumbOnClickHandler( e, self ); break;
			case "load":
//alert( self.id + " done loading" )
				self.parentGallery.thumbsLoaded++;	// Wieder ein Thumb geladen.
//alert(self.domElement.parentNode.innerHTML);
				if( self.thumbOnLoadHandler ) self.thumbOnLoadHandler( e, self );
				break;
			case "mouseover": if( self.thumbOnMouseOverHandler ) self.thumbOnMouseOverHandler( e, self ); break;
			case "mouseout": if( self.thumbOnMouseOutHandler ) self.thumbOnMouseOutHandler( e, self ); break;
			//case "": if( self.on ) self.on( e, self ); break;
		}
	};
	this.imageEventHandler = function( e ){
		if( !e ) e = window.event;
		switch( e.type ){
			case "click": if( self.imageOnClickHandler ) self.imageOnClickHandler( e, self ); break;
			case "load": if( self.imageOnLoadHandler ) self.imageOnLoadHandler( e, self ); break;
			//case '': if( self.on ) self.on( e, self ); break;
		}
	};

	this.status = "data";
}
AnemaGalleryImage.MAX_DISPLAY_DELAY_MS = 700;	// Nach wie vielen Millisekunden soll ein Thumb spätestens angezeigt werden?
AnemaGalleryImage.STD_DISPLAY_DELAY_MS = 50;	// Wie viele Millisekunden nach dem Auslösen des onLoad-Handlers soll ein Thumb standardmäßig angezeigt werden?


// Alte Properties werden NICHT automatisch zurückgesetzt.
// Thumb wird durch den Aufruf deaktiviert und muss, falls gewünscht,
// nach dem Aufruf dieser Methode wieder reaktiviert werden.
AnemaGalleryImage.prototype.loadData = function( data ){
	if( typeof data != "object" ) throw "[AnemaGalleryImage] loadData: missing data";
	for( var p in data ){
		this[p] = data[p];
	}

	if( !this.id ) throw "[AnemaGalleryImage] loadData: missing id";
	if( !this.domId ) throw "[AnemaGalleryImage] loadData: missing domId";
	if( !this.thumbPath ) throw "[AnemaGalleryImage] loadData: missing thumbPath";
	if( !this.thumbWidth ) throw "[AnemaGalleryImage] loadData: missing thumbWidth";
	if( !this.thumbHeight ) throw "[AnemaGalleryImage] loadData: missing thumbHeight";

	if( this.domElement ) this.domElement.id = this.domId;

	this.deactivate();
	if( this.thumb ){
		this.hide();	// Wir wollen nicht, dass das Bild verzerrt wird oder springt.
		this.thumb.width = this.thumbWidth;
		this.thumb.height = this.thumbHeight;
		this.thumb.src = this.thumbPath;
	}

	if( this.image ){
		this.image.width = this.imageWidth;
		this.image.height = this.imageHeight;
		this.image.src = this.imagePath;
	}

	var self = this;
	var h = function(){ self.show(); }
	setTimeout( h, AnemaGalleryImage.MAX_DISPLAY_DELAY_MS );

	if( this.onLoadDataHandler ) this.onLoadDataHandler( this );
};

// Erzeuge DOM-Element mit übergebener Funktion.
// Prüfe, ob thumb, domElement und optional image
// gesetzt wurden. thumb und image müssen <img>-Tags sein.
// Macht gegebenenfalls Regress bis auf Stufe "created",
// um bereits existierende Eventhandler sauber zu entfernen.
AnemaGalleryImage.prototype.create = function(){
	if( this.status == "activated" ) this.deactivate();
	if( this.status == "attached" ) this.detachFromDOM();

	if( !this.creatorFunction ) throw "[AnemaGalleryImage] create: missing creator function";
	if( typeof this.creatorFunction != "function" ) throw "[AnemaGalleryImage] create: creator function not a function";
	this.creatorFunction( this );	// Setzt (hoffentlich) die Properties thumb, domElement und optional image
	if( !this.domElement ) throw "[AnemaGalleryImage] create: DOM element not set";
	if( !this.thumb ) throw "[AnemaGalleryImage] create: thumb image not set";

	if( this.thumb.tagName.toLowerCase() != "img" ) throw "[AnemaGalleryImage] create: thumb element not an <img> tag";
	if( this.image && this.image.tagName.toLowerCase() != "img" ) throw "[AnemaGalleryImage] create: image element not an <img> tag";

	var self = this;
	var h = function(){ self.show(); }
	setTimeout( h, AnemaGalleryImage.MAX_DISPLAY_DELAY_MS );

	this.status = "created";
};

// Füge in das DOM-Element der Galerie ein.
// Falls aktiviert, deaktiviere und hänge aus dem derzeitigen
// Container aus.
AnemaGalleryImage.prototype.attachToDOM = function(){
	if( this.status == "activated" ) this.deactivate();
	if( this.status == "attached" ) this.detachFromDOM();
	if( this.status == "data" ) this.create();

	// Füge in den Container der Elterngalerie ein.
	if( !this.domElement ) throw "[AnemaGalleryImage] attachToDOM: missing DOM element";
	if( !this.parentGallery.getDomElement() ) throw "[AnemaGalleryImage] attachToDOM: parent gallery has no DOM element";
	this.parentGallery.getDomElement().appendChild( this.domElement );

	this.status = "attached";
};

// Kopple vom DOM-Baum ab. Dazu muss der Status "attached gegeben sein.
// Falls Status "activated, wird deaktiviert.
// Status sinkt auf "created".
AnemaGalleryImage.prototype.detachFromDOM = function(){
	if( this.status == "activated" ) this.deactivate();
	if( this.status != "attached" ) return;
	//if( this.status != "attached" ) throw "[AnemaGalleryImage] detachFromDOM: cannot detach what isn't attached yet";
	if( this.domElement && this.domElement.parentNode ) this.domElement.parentNode.removeChild( this.domElement );
	this.status = "created";
};

// Status muss zumindest "attached sein".
// Falls Status "activated", wird zuerst deaktiviert.
// Setzt die src-Property auf thumb und image noch einmal,
// um den eventuell gesetzten onLoad-Handler zu triggern.
AnemaGalleryImage.prototype.activate = function(){
	if( this.status == "activated" ) this.deactivate();
	if( this.status != "attached" ) this.attachToDOM();
	if( !this.thumb ) throw "[AnemaGalleryImage] activate: no thumb element set";
	Acu.registerEvent( this.thumb, "click", this.thumbEventHandler );
	Acu.registerEvent( this.thumb, "load", this.thumbEventHandler );
	Acu.registerEvent( this.thumb, "mouseover", this.thumbEventHandler );
	Acu.registerEvent( this.thumb, "mouseout", this.thumbEventHandler );
	if( this.thumb.src != this.thumbPath ){
		this.hide();
		this.thumb.src = this.thumbPath;
	}

	if( this.image ){
		Acu.registerEvent( this.image, "click", this.imageEventHandler );
		Acu.registerEvent( this.image, "load", this.imageEventHandler );
		this.image.src = this.imagePath;
	}

	this.status = "activated";
};

// Status muss "activated" sein.
// Status fällt auf "attached".
AnemaGalleryImage.prototype.deactivate = function(){
	if( this.status != "activated" ) return;
	//if( this.status != "activated" ) throw "[AnemaGalleryImage] deactivate: cannot deactivate what isn't activated";
	if( !this.thumb ) throw "[AnemaGalleryImage] deactivate: no thumb element set";
	Acu.unregisterEvent( this.thumb, "click", this.thumbEventHandler );
	Acu.unregisterEvent( this.thumb, "load", this.thumbEventHandler );
	Acu.unregisterEvent( this.thumb, "mouseover", this.thumbEventHandler );
	Acu.unregisterEvent( this.thumb, "mouseout", this.thumbEventHandler );

	if( this.image ){
		Acu.unregisterEvent( this.image, "click", this.imageEventHandler );
		Acu.unregisterEvent( this.image, "load", this.imageEventHandler );
	}

	this.status = "attached";
};

AnemaGalleryImage.prototype.setDomElement = function( obj ){
	if( typeof obj == "string" ) obj = document.getElementById( obj );
	if( !obj ) throw "[AnemaGalleryImage] setDomElement: no element specified";
	this.domElement = obj;
};

AnemaGalleryImage.prototype.setThumb = function( obj ){
	if( typeof obj == "string" ) obj = document.getElementById( obj );
	if( !obj ) throw "[AnemaGalleryImage] setThumb: no element specified";
	if( obj.tagName.toLowerCase() != "img" ) throw "[AnemaGalleryImage] setThumb: element must be an <img> tag";
	this.thumb = obj;
};

AnemaGalleryImage.prototype.setImage = function( obj ){
	if( typeof obj == "string" ) obj = document.getElementById( obj );
	if( !obj ) throw "[AnemaGalleryImage] setImage: no element specified";
	if( obj.tagName.toLowerCase() != "img" ) throw "[AnemaGalleryImage] setImage: element must be an <img> tag";
	this.image = obj;
};

AnemaGalleryImage.prototype.hide = function(){
	if( this.domElement ) this.domElement.style.visibility = "hidden";
	if( this.thumb ) this.thumb.style.visibility = "hidden";
};

AnemaGalleryImage.prototype.show = function(){
	if( this.domElement ) this.domElement.style.visibility = "visible";
	if( this.thumb ) this.thumb.style.visibility = "visible";
};





AnemaGalleryImage.prototype.xx = function(){
	throw "[AnemaGalleryImage] xx not yet implemented";
};