var ImgDisplay = Class.create({
	initialize: function( elemContainer, srcPath){
		
//		alert('initialize');
		//this.images = arrImages;
		this.images = new Array();
		
		this.container = elemContainer;
		this.src = (srcPath.endsWith('/')) ? srcPath : srcPath +'/';
		this.activeImage = 0;
		
		//nicht benötigt
		this.extAl1 = {
			addInstance: function(element, oI) {
				element = $(element);
				element.oI = oI;
				//alert('addInstance: '+ element.inspect() +' '+ element.oI);
			}
		};
		Element.addMethods(this.extAl1);				
//		alert('methods added');
			
				
		// leeres image element erzeugen
		this.img = new Element('img', {'id':'greenImage'});
//		alert('created img: '+this.img);
		this.container.appendChild(this.img);
		
		// loader animation
		this.loader = new Element('div', {'id':'imgLoading'});
		//this.loader.appendChild( new Element('img', {'src':'resources/assets/ajax-loader.gif'}));
		
		
		this.container.appendChild(this.loader);
		//alert('append img');
		
		
		// navigation / anzeige erzeugen
		this.navPanel = new Element('div', {'id':'hoverNav'});
			
		this.prevLink = new Element('a',{'id':'imagePrev','href':'#', 'title':'zurück'});
		this.nextLink = new Element('a',{'id':'imageNext','href':'#', 'title':'vor'});
		//this.prevLink.setOpacity(0.3);
		//this.panelData = new Element('span',{'id':'panelData'});
		//alert('created navpanel items');
		this.container.appendChild(this.navPanel);
		
		//var prevContainer = new Element('div',{'class':'link'});
		//prevContainer.appendChild(this.prevLink);
		this.navPanel.appendChild(this.prevLink);
		
		//var nextContainer = new Element('div',{'class':'link'});
		//nextContainer.appendChild(this.nextLink);
		this.navPanel.appendChild(this.nextLink);
		
		//this.navPanel.appendChild(prevContainer);
		//this.navPanel.appendChild(this.panelData);
		//this.navPanel.appendChild(nextContainer);
//		alert('append navpanel items');
		
		//this.panelData.absolutize();
		var pdim = this.navPanel.getDimensions();
//		alert(Element.getWidth(this.navPanel));
//		var pdim = this.panelData.parentNode.getDimensions();
		
//		alert(pdim.width +' / ' + pdim.height);
//		var off = this.panelData.cumulativeScrollOffset();
		
//		alert(off);
		
		//hiding
		/*
		this.navPanel.hide();
		this.prevLink.navPanel.hide();
		this.nextLink.navPanel.hide();
		this.panelData.navPanel.hide();
		*/

		//v2
		
		
		// preloader erzeugen
//		alert('creating Preloader...');
	//	this.imgPreloader = new Image();
	
		this.imgPreloader = new Element('img');
//		alert('adding methods'+ this.imgPreloader);
		Element.extend(this.imgPreloader);		
//		alert('extended'+ this.imgPreloader.inspect());
		
		Element.extend(this.nextLink);	
//		alert('extended'+ this.nextLink.inspect());
		/*
		this.prevLink.addInstance(this);
		this.nextLink.addInstance(this);
		
		alert('links instance added...');
		*/
		this.imgPreloader.onload = function () {
//			alert(' preloaderSrc '+this.src);
			//this.img.writeAttribute('src',imgSrc);
			//this.showImage();
			$('greenImage').src = this.src;
			this.oI.showImage();			
		}
//		alert('preloader onload added...');
		
		//$(this.imgPreloader).addInstance(this);
		
		try {
			$($(this.imgPreloader)).addInstance(this);
			}
		catch(e) {
			$('msg').update('imgPreloader' + e +'<br> '+ e.name +'<br> '+ e.message);
		}
		
//		alert('preloader instance added...');
		
		
		try {
			$($(this.prevLink)).addInstance(this);
			}
		catch(e) {
			$('msg').update('prevLink: ' + e +'<br> '+ e.name +'<br> '+ e.message);
		}
		
//		alert('prevLink instance added...');
		
		try {
			this.nextLink.addInstance(this);
			}
		catch(e) {
			$('msg').update('nextLink: ' + e +'<br> '+ e.name +'<br> '+ e.message);
		}
//		alert('nextLink instance added...');
		
//		alert('links instance added...');
		
	},
	// nichtmehr benötigt...
	/*
	createIO: function() {
	
		this.numInstance = imageDisplays.length;
		
		imageDisplays[this.numInstance] = this;
		
		//alert('numInstance: ' + this.numInstance);
	},
	*/
	start: function( arrImages ) {
		

		this.images = arrImages;
		this.activeImage = 0;
		if (this.images.length < 1) {
			//this.img.hide();
			//this.navPanel.hide();
			this.container.hide();
		} else {
			this.container.show();
			this.changeImage(this.activeImage);
		}
		
		//alert('starting'+ arrImages.length);
	},
	
	next: function() {
		this.changeImage(this.activeImage + 1);
	},
	
	prev: function() {
		this.changeImage(this.activeImage - 1);
	},
	
	changeImage: function(numImage) {
		
//		alert('changeImage: '+ this.activeImage +' ' + numImage);
		
		
		this.activeImage = numImage;
		
		//alert('changeImage: '+ this.activeImage +' ' + numImage);
		// aktuelle elemente ausblenden
		this.img.hide();
		this.navPanel.hide();
		//alert(this.images.length);
		
		this.loader.show();
				
//alert('changeImage: '+ this.activeImage +' ' + numImage);
		var imgSrc = this.src + this.images[this.activeImage];
		
//		alert('imgSrc: '+ imgSrc + ' '+ this.img );
		
		
		// kommt in den constructor
		// vorladen übers image object, wenn geladen anzeigen und panel bauen
		//imgPreloader = new Image();
		/*alert('adding methods'+ imgPreloader);
		Element.extend(imgPreloader);
		
		alert('extended'+ imgPreloader.inspect());
		*/
		
		
		//imgPreloader.addMethods(myVeryOwnElementMethods);
		
		//Element.addMethods(this.extAl1);
		//alert('methods added');
		// der kennt 'this' nicht!!
		/*
		imgPreloader.onload = function () {
			alert(' preloaderSrc '+this.src);
			//this.img.writeAttribute('src',imgSrc);
			//this.showImage();
			
			$('winnerImage').src = this.src;
			this.oI.showImage();
			
		}
		*/
		
		this.imgPreloader.src = imgSrc;
//		imgPreloader.addInstance(this);
		//this.imgPreloader.al1();		
		//this.imgPreloader.addInstance(this);
		
	},
	
	showImage: function() {
		//alert('showImage w/h: '+ this.img.getWidth() +' / '+ this.img.getHeight() );
		this.resizeContainer();
		this.loader.hide();
		this.img.show();
		this.updatePanel();
	},
	
	updatePanel: function() {
//		alert('updatePanel: '+ (this.images.length > 1));
		// mal vorsichtshalber ausschalten/verbergen
		if(this.prevLink.visible())
			this.prevLink.toggle();
//		this.prevLink.hide();
		if(this.nextLink.visible())
			this.nextLink.toggle();
//		this.nextLink.hide();
		//this.panelData.hide();
		this.navPanel.hide();
		
		if (this.images.length > 1) {
			
			//this.panelData.update( eval(this.activeImage + 1) +' von '+ this.images.length);
			//this.panelData.show();
			
			this.updateNav();
		}
	},
	
	updateNav: function() {
//		alert('updateNav: aI '+ this.activeImage );
		// prevLink
		
		this.navPanel.show();
		
		
		if(this.activeImage != 0) {
			this.prevLink.onclick = function() {
				this.oI.prev(); return false;
				//imageDisplays[this.numInstance].changeImage(this.activeImage - 1); return false;
			}
			//this.prevLink.show();
			this.prevLink.toggle();
		}
		
		//nextLink
		//var next = this
		
		//this.nextLink.addInstance(this);
		
		if(this.activeImage != (this.images.length - 1)) {
//			alert('preparing nextLink');
			this.nextLink.onclick = function() {
				//imageDisplays[this.numInstance].changeImage(this.activeImage + 1); return false;
				this.oI.next(); return false;
			}
			this.nextLink.show();
		} // if
		
	},
	
	resizeContainer: function() {
		//alert('resizeContainer w/h: '+ this.img.getWidth() +' / '+ this.img.getHeight() );
		
		var imgHeight = this.img.getHeight();
		this.container.setStyle({height: imgHeight+'px'})
		this.navPanel.setStyle({height: imgHeight+'px'});
		this.loader.setStyle({height: imgHeight+'px'});
		
	}
});