var diashow = null;

function startDiashow()
{
	if(!diashow)
	{
		$("control-diashow").src = "images/diashow_stop.png";
		diashow = window.setInterval("loadPicture(1)", 7000);
	} 
	else
	{
		$("control-diashow").src = "images/diashow_start.png"; 
		window.clearInterval(diashow); 
		diashow = null;
	}
}


//Bild weiter oder zurück 
function loadPicture(par)
{
	loaded = loaded+par;
	if(loaded == pictures.length) 
	{
		loaded = 0; //Wenn am Ende, zurück an Anfang  
		if(diashow) startDiashow(); //Falls eine Diashow läuft, diese beenden
	}
	if(loaded < 0) loaded = pictures.length-1; //Wenn am Anfang, zurück ans Ende  
	//Ausblenden...
	new Effect.Fade($("image"),{
		duration: 0.2,
		afterFinish: function()
		{ 	
			//Neues Bild zuweisen
			temp.src = pictures[loaded]; 
		}
	});			
}

//Bild geladen, dann noch überprüfen, welcher Anzeigemodus
function pictureLoaded(pic)
{	
	//Schon ein Bild angezeigt?
	if($("image")) 
	{  	
		//Ist das Bild sichtbar? 
		if(!$("image").visible())
		{ 	
			//Wenn nein, dann den Rahmen skalieren			
			return scalePictureFrame(pic);								   
		}
	}
	//Beim ersten Aufruf den Ladebalken zeigen
	new Effect.Fade("bar-loader",
	{
	   	duration: 0.4,
		afterFinish: function()
		{			
			//Rahmen skalieren
			return scalePictureFrame(pic);
		}
	});
	
}

//Bildrahmen skalieren
function scalePictureFrame(pic)
{	  
	//Sichtbaren Bereich der Seite abfragen zwecks Größenskalierung des Bildes 
	var screenWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	var screenHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);	
	
	var picWidth = pic.getWidth();
	var picHeight = pic.getHeight();
	
	//Wenn Bild größer als sichtbarer Bereich der Seite...
	if(picHeight >= screenHeight)
	{ 	
		//...dannn die Maße anpassen 
		if(screenHeight < screenWidth)
		{							 
			var newSize = scaleProportional(pic, (screenHeight-100),null);
			picWidth = newSize[0];
			picHeight = newSize[1];
		}  
		else
		{	 
			var newSize = scaleProportional(pic, null, (screenWidth-100));
			picWidth = newSize[0];
			picHeight = newSize[1];
		}
	}
	
	//Bildobjekt und Kontrollen erstellen
	frame.update("<img src='"+pic.src+"' alt='' style='display: none' id='image' width='"+picWidth+"' height='"+picHeight+"' onClick='frameFadeOut()'><div id='button-back'><table style='height: 100%; display: none' id='back' cellpadding='0' cellspacing='0'><tr><td valign='middle'><img src='images/back.png' alt='' onClick='loadPicture(-1)'></td></tr></table></div><div id='button-next'><table style='height: 100%; display: none' id='next' cellpadding='0' cellspacing='0'><tr><td valign='middle'><img src='images/next.png' alt='' onClick='loadPicture(1)'></td></tr></table></div><div id='frame-controls'><table style='width: 100%; display: none' id='controls' cellpadding='0' cellspacing='0'><tr><td valign='middle' align='middle'><img src='images/diashow_start.png' alt='' onClick='startDiashow(this)' id='control-diashow'></td></tr></table></div>");		 
	//frame.insert("Test");
	
	//Wenn eine Diashow läuft, gleich den Button ändern
	if(diashow) $("control-diashow").src = "images/diashow_stop.png";
	
	//Prozentwerte zum vergrößern oder verkleinern des Image-Frames errechnen
	var percentX = picWidth/(frame.getWidth()/100);
	var percentY = picHeight/(frame.getHeight()/100);	
	
	//Breite des Bildrahmen gleich der Breite des neuen Bildes?
	if((frame.getWidth()-20) == picWidth | (frame.getWidth()-20) == (picWidth-2) | (frame.getWidth()-20) == (picWidth+2)| (frame.getWidth()-20) == (picWidth-1) | (frame.getWidth()-20) == (picWidth+1))
	{	
		//Höhe des Bildrahmen gleich der Höhe des neuen Bildes?
		if((frame.getHeight()-20) == picHeight | (frame.getHeight()-20) == (picHeight-1) | (frame.getHeight()-20) == (picHeight+1)| (frame.getHeight()-20) == (picHeight-2) | (frame.getHeight()-20) == (picHeight+2))	
		{ 
			reposition(frame);
			showPicture(pic); //Wenn ja, dann gleich das neue Bild einblenden
		}
		else
		{	
			reposition(frame);	 
			//Wenn nicht, Höhe neu skalieren
			new Effect.Scale("galerie-image-frame",	percentY,
			{
				scaleFromCenter: true,
				scaleX: false,
				duration: 0.6,	   
				transition: Effect.Transitions.sinoidal,
				afterFinish: function()
				{	
					reposition(frame);
					showPicture(pic); //Bild anzeigen
				}
			});
		}
	}	
	//Wenn nicht, Breite neu skalieren
	else
	{
		new Effect.Scale("galerie-image-frame",	percentX,
		{
			scaleFromCenter: true,
			scaleY: false, 
			duration: 0.6, 
			transition: Effect.Transitions.sinoidal,   //spring	1
			afterFinish: function()
			{	  
				//Höhe des Bildrahmen gleich der Höhe des neuen Bildes?
				if((frame.getHeight()-20) == picHeight | (frame.getHeight()-20) == (picHeight-1) | (frame.getHeight()-20) == (picHeight+1)| (frame.getHeight()-20) == (picHeight-2) | (frame.getHeight()-20) == (picHeight+2))	
				{
					reposition(frame);
					return showPicture(pic);	//Bild anzeigen
				}
				
				reposition(frame);
				//Wenn nicht, Höhe des Bildrahmens anpassen			
				new Effect.Scale("galerie-image-frame",	percentY,
				{
					scaleFromCenter: true,
					scaleX: false,
					duration: 0.6,	   
					transition: Effect.Transitions.sinoidal,
					afterFinish: function()
					{		   
						reposition(frame);
						showPicture(pic); //Bild anzeigen
					}
				});
			}
		});
	}
}

var fade_in_progress = false;

//Bild anzeigen
function showPicture(pic)
{	 
	new Effect.Appear("image", 
	{ 
		duration: 0.4,
		afterFinish: function()
		{		 
			//Bild aufblitzen lassen
			new Effect.Pulsate('image', { pulses: 1, duration: 0.2 });	
			//Kontrollen positionieren
			$("button-back").style.height = $("image").getHeight()+"px";
			$("button-next").style.height = $("image").getHeight()+"px";
			$("button-next").style.left = ($("image").getWidth()-76)+"px";
			$("frame-controls").style.top = ($("image").getHeight()-76)+"px";
			$("frame-controls").style.width = $("image").getWidth()+"px";
			//OnMouseOver weise ich hier zu, da sonst die Update-Funktion noch länger wird...
			$("button-back").onmouseover = function()	
			{	
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Appear("back",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}  
			$("back").onmouseout = function(e)		
			{
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Fade("back",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}	
			
			$("button-next").onmouseover = function()	
			{	
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Appear("next",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}
			$("next").onmouseout = function(e)		
			{	
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Fade("next",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}	
			
			$("frame-controls").onmouseover = function()	
			{	
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Appear("controls",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}
			$("controls").onmouseout = function(e)		
			{	
				if(fade_in_progress) return false;
				fade_in_progress = true;
				new Effect.Fade("controls",  
				{ 
					queue: 'start',
					duration: 0.4,
					afterFinish: function()
					{
						fade_in_progress = false;
					} 
				});	
			}																					
		}
	});
}

//Bildrahmen ausblenden
function frameFadeOut()
{	
	//Wenn eine Diashow läuft, diese beenden
	if(diashow) startDiashow();
	
	new Effect.Fade(frame,
	{
		duration: 0.4,
		afterFinish: function()
		{		

			//Wieder auf Standard zurücksetzten
			frame.update("<img src='images/ll.gif' alt='' id='bar-loader'>");	
			frame.style.width = "280px";
			frame.style.height = "50px";
			frame.style.padding = "10px";
		}
	});
	
	//Hintergrund abdunkeln
	new Effect.Fade(bg,
	{
		duration: 0.4
	});	 
	frame_open = false;
}

//Bildrahmen neu positionieren
function reposition(obj)
{
	//Sichtbaren Bereich der Seite abfragen zwecks Positionsbestimmung 
	var screenWidth = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	var screenHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);	
							
	var newLeft = (screenWidth/2)-(obj.getWidth()/2)-20;
	var newTop = (screenHeight/2)-(obj.getHeight()/2)-20;
	
	obj.style.left = newLeft+"px";
	obj.style.top = newTop+"px";
	
}

//Bild anzeigen
function pictureFadeIn(key)
{ 
	//Frame mittig positionieren 		
	reposition(frame);
	//Frame anzeigen
	new Effect.Appear(frame,
	{
		duration: 0.4,
		afterFinish: function()
		{
			//Bild vorladen 
			temp.src = pictures[key]; 
			loaded = key;
		}
	});
	
	//Hintergrund abdunkeln
	new Effect.Appear(bg,
	{
		duration: 0.4,
		from: 0.0,
		to: 0.8
	});			
}

 /*

	THUMBNAIL FADE

*/
function moveTimer(key)	 //Wird benötigt, um unschönes Flackern zu verhindern
{				  
	if(time_out) 
	{
		window.clearTimeout(time_out); 
		time_out = null;
	}
	time_out = window.setTimeout("moveIn("+key+")", 100); //Zeit in Millisekunden, die der User auf dem Thumb verharren muss
}

//Thumbnail halbtransparent machen
function moveIn(key)
{					   
	obj = $("thumb"+key);
 
	new Effect.Fade(obj, {
		from: 1.0,
		to: 0.4,
		duration: 0.3
	});		
}  

//Thumbnail sichtbar machen
function moveOut(e)
{	  
	if(!e) var e = window.event;
	//Target ermitteln
	obj = getTargetObj(e);
	op = obj.getStyle('opacity'); 
	
	//Timeout zurücksetzten
	if(time_out) 
	{
		window.clearTimeout(time_out); 
		time_out = null;
	}
	
	if(op == 1.0) return false;	//Bild schon sichtbar?
	if(time_out) return false;			
	
	new Effect.Appear(obj, {
		from: 0.4,
		to: 1.0,
		duration: 0.1,
		queue: 'end'
	});	
}	

var intLoaded = 0;
// Preloader
function checkLoad()
{
  	// Bildarray durchlaufen
  	for(var i=0; i < arrPre.length; i++)
  	{
    	// Falls das aktuelle Bild bisher noch nicht geladen wurde UND nun fertig geladen ist
    	if((arrPre[i].loaded==0) && (arrPre[i].width>0))
		{
	      	arrPre[i].loaded = 1;  // Als geladen markieren
	      	intLoaded++;
	      	checkLoad();
	      	return;
    	}
  	}
 
 	// Falls alle Bilder geladen wurden
 	if(intLoaded==arrPre.length)
	{
    	// Falls alle Bilder geladen sind -> in zufälliger Reihenfolge anzeigen
    	for(var thumb=0; thumb < thumbnail_ids.length; thumb++)
		{
      		thumbnailAppear(parseInt(thumbnail_ids[thumb]));
    	}
  	}
	else
	{	  
		//Wenn nicht, Funktion erneut aufrufen
    	window.setTimeout(function(){checkLoad();}, 10);
  	}
} 

function thumbnailAppear(key)
{	
	//Ladeanimation ausbleden
		new Effect.Fade($("thumb"+key),
	{  
		duration: 0.1, //Je größer, desto länger dauert es, bis ALLE Bilder eingeblendet werden
		queue: 'end', //Wird an's Ende gestellt damit nicht alle auf einmal erscheinen
		afterFinish: function()
		{  	 
			//Wenn li ausgeblendet, neuen Hintergrund zuweisen...
			$("thumb"+key).style.background = "url("+thumbnails[key]+")"; 
			//...und einblenden
			new Effect.Appear($("thumb"+key),
			{	 
				duration: 0.3, //Kann verändert werden, um sauberes Einblenden zu gewährleisten
				afterFinish: function()
				{		
					//Mouseover zuweisen
					$("thumb"+key).onmouseover = new Function("startMove", "moveTimer("+key+")");
					$("thumb"+key).onmouseout = moveOut;	  
					$("thumb"+key).onclick = new Function("startFade", "pictureFadeIn("+key+")");
				}
			});	 
		}
	});		
}