// JavaScript Document
/*
NÖTIGE INCLUDES:
<script type="text/javascript" src="../js/prototype.js"></script> Version 1.6.0 oder größer
<script type="text/javascript" src="../js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="stepcarousel.js"></script>

*/

/* Globale Variabeln wegen Referenzproblem von setTIMEOUT */
var myGalerieReferenz = null;


/* 	Klasse ImageData
	DatenStukut für die Images */
var ImageData = Class.create({
	
	initialize: function(url, thumburl, width, height)
	{
		this.url = url;
		this.width = width;
		this.height = height;
		this.thumburl = thumburl;
	},
	
	getURL: function() // URL des Bildes
	{
		return this.url;
	},
	
	getWidth: function()
	{
		return this.width;
	},
	
	getHeight: function()
	{
		return this.height;
	},
	
	getThumb: function()
	{
		return this.thumburl;
	}
							 
});






// Vorschau Galerie Classe (Das große Bild)
var Galerie = Class.create({

/*
 Parameter:
 - imageDataArray: Daten für die Großen Bildern und Thumbs; TYP: ImageData ARRAY
 - maxWidth: maximale Breite für das Große Bild; TYP: int
 - carouselWidht: Die Breite des Carousels; TYP: int
 - carouselHeight: Die Höhe des Carousels; TYP: int
 - widthThumb: Die Breite eines Thumbbildes; TYP: int
 - heightThumb: Dei Höhe eines Thumbbildes; TYP: int
 - thumbRows: anzahl an Zeilen pro Page(seite); TYP: int
 - thumbColumns: anzahl an Spalten pro Page(seite) TYP: int
 - thumbSpacerRows: Abstand zwischen zwei Zeilen-Thumbs; TYP:int
 - thumbsSpacerColumn: Abstabd zwischen 2 Thumbs; TYP: int
 - nextLabel: Der Text der unter dem Carousel steht, für die nächste Seite
 - previousLabel: Der Text der unter dem Carousel steht, für die vorherige Seite
*/

	initialize: function(imageDataArray, maxWidth, carouselWidth, carouselHeight, widthThumb, heightThumb, thumbRows, thumbColumns, thumbSpacerRow, thumbsSpacerColumn, nextLabel, previousLabel) 
	{
		
		this.index= (-1);
		this.image = new Image();
		this.imageData=imageDataArray; // 
		this.maxWidth = maxWidth;
		
		myGalerieReferenz= this; // Globale Variabel !
		
		
		
		
		// HTML CODE für großes Bild generieren:
		
		
		
// <!-- Großes Bild zentriert -->
document.writeln('<div align="center">');

	//<!-- großes Bildanzeige -->

    document.writeln('<div id="Picture" class="picture" align="center">');  
    document.writeln('	<center>');
       
    document.writeln('    <div id="LoadingPicture" class="loadingPicture">');
    document.writeln('       <img src="images/Galerie/loading_image.gif" alt="Loading"/>');
    document.writeln('    </div>');
    
    
    document.writeln('   <div id="DisplayingPicture" class="displayingPicture" style="display:none;">');
    document.writeln('        <img id="Image" src="images/Galerie/gal1/AmFelstor.jpg" alt="Picture" />');
    document.writeln('    </div>');
       
    document.writeln('	</center>');
        
    document.writeln('</div>');
    
//<!-- ende Bildanzeige -->

document.writeln('</div> <!-- Ende Großes Bild zentrum -->');


// SPACER
document.writeln('<div class="pictureToThumbSpacer"></div>');
// SPACER


// BEGIN Carusel integrieren



document.writeln('<center>');
document.writeln('<div id="mygallery" class="stepcarousel" style="width:'+carouselWidth+'px; height:'+carouselHeight+'px;">');
document.writeln('<div class="belt">');

var bilder = 0;
while (bilder <imageDataArray.length)
{ // create new Page
	document.writeln('<div class="panel" style="width:'+(carouselWidth-20)+'px;">');
	document.writeln('	        <table cellpadding="0" cellspacing="0" > ');
	//	          <!-- Tabelleninhalt 1 -->
	var i =0;
	for (i=0; i<thumbRows;i++)
	{
	document.writeln('                <tr>');
		
		var j =0;
		for (j=0; j<thumbColumns; j++)
		{
			document.writeln('                   <td>');
	
			if (bilder<imageDataArray.length)
			{
				document.writeln('                        <div class="thumbPictureBox" onmouseover="this.className=\'thumbPictureBoxHover\';" 		onmouseout="this.className=\'thumbPictureBox\'" onclick="javascript:galerie.switchImage('+bilder+')" style="width:'+widthThumb+'px; height:'+heightThumb+'px; background-image:url('+imageDataArray[bilder].getThumb()+');"></div> ');
			bilder++;
			}
			document.writeln('                    </td> ');
			if (j!=(thumbColumns-1)) 
			document.writeln('                    <td style="width:'+thumbsSpacerColumn+'px;"></td> <!-- Abstand zwischen 2 Thumbs nebeneinander --> ');
		} // ENDE Columns
	
	document.writeln('                 </tr>');
	
		if (i!=(thumbRows-1))
		{
			document.writeln('<tr>');
				document.writeln('<td colspan="'+(thumbColumns*2 - 1 )+'" style="height:'+thumbSpacerRow+'px"></td> <!-- Freiraum zwischen 2 Zeilen -->');
			document.writeln('</tr>');
		}
	} // ENDE  ROWs
	document.writeln('	        </table>');
	
	document.writeln('</div>');
}
document.writeln('</div>');
document.writeln('</div>');

document.writeln('<div style="width:'+carouselWidth+'px;">');
document.writeln('	<div class="thumbPrevious" onmouseover="this.className=\'thumbPreviousHover\';" onmouseout="this.className=\'thumbPrevious\'" onclick="javascript:stepcarousel.stepBy(\'mygallery\', -1)">'+previousLabel+'</div> ');
document.writeln('	<div class="thumbNext" onmouseover="this.className=\'thumbNextHover\';" onmouseout="this.className=\'thumbNext\'" onclick="javascript:stepcarousel.stepBy(\'mygallery\', 1)">'+nextLabel+'</div>');
    
document.writeln('    <div style="clear:both"></div>');
document.writeln('</div>');

document.writeln('</center>');




// ENDE Carousel

		
		/* Die maxWidth für die Elemente setzen: CSS style max-width 
		document.getElementById('Picture').style.maxWidth= maxWidth;
		document.getElementById('DisplayingPicture').style.maxWidth= maxWidth;
		document.getElementById('Image').style.maxWidth= maxWidth;
		*/
	},
	
	imageLoaded: function()
	{   
		
		if( myGalerieReferenz.image.complete )
		{
			return true;
		}
		else
		{	
			setTimeout(myGalerieReferenz.imageLoaded,200);
			
		}
	
	},
	
	showLoading: function()
	{
		new Effect.Fade('DisplayingPicture', {duration: 0.5, afterFinish: function()
			{
				new Effect.Appear('LoadingPicture', {duration: 0.5});
			}
		});
	},
	
	
	
	showImage: function()
	{
		// Skalierung berechnen
		
		var newWidth = 0;
		var newHeight =0;
		// nw    iw
		// --  = -- 
		// nh    ih
	
			newHeight = this.imageData[this.index].getHeight();
			newWidth = this.imageData[this.index].getWidth();
	
	
		document.getElementById('Image').src = this.imageData[this.index].getURL();
					
					
		
		if (this.imageData[this.index].getWidth()>this.maxWidth)
		{
			newHeight = Math.floor(this.maxWidth * this.imageData[this.index].getHeight() / this.imageData[this.index].getWidth()); 
			newWidth = this.maxWidth;
		}
		
		var styling ="width:"+newWidth+"px;height:"+newHeight+"px;";
		
		new Effect.Fade('LoadingPicture', { duration:1}); 
		
		new Effect.Morph('Picture', {style: styling, duration: 1, objekt:this, afterFinish: function()
				{
					
					document.getElementById('Image').src = this.objekt.imageData[this.objekt.index].getURL();
				    document.getElementById('Image').style.width = newWidth + "px";

					new Effect.Appear('DisplayingPicture', {duration: 1}); // Das bild einblenden}); 
				}
		});
	},
	
	switchImage: function(i)
	{
		if (i != this.index)
		{
			
			document.getElementById('DisplayingPicture').style.display="none";
		
			this.image.src=this.imageData[i].getURL(); // Neues Bild laden, URL
			this.index=i;
			this.image.onLoad=this.imageLoadedHandler();
		
			this.showLoading(); // Loading anzeigen
			//this.imageLoaded(); // Überprüfen ob neues Bild geladen wurde
			//setTimeout("",200);
			
		}
	},
	
	start: function()
	{
		this.switchImage(0);
	},
	
	imageLoadedHandler:function()
	{
		this.showImage();  // neues Bild anzeigen
	}




		
});