/* 	individuelle image-gallery für 08schulzedesign.de
	von Philip Hirt
	
	noob-code, wer ahnung von javascript hat sollte hier
	besser nicht reinschauen ;)
	
	allen anderen viel spaß, vielleicht kommt ihr auf
	ideen und könnt es dann besser machen.
	
	für anregungen und verbesserungsvorschläge
	schickt mir ne mail an: spammefull@gmx.de
*/

// ------------------ Globale Variablen ----------------------------

// Bild-Array, Bilder aus dem div "gallerie_bilder"
var images = new Array();
// aktuelles Bild
var galleryImage;
// aktuelle beschreibung, alt des aktuellen Bildes
var beschreibung;
var beschreibungContainer;
// skip-buttons und der Bereich in dem sie sichtbar werden
// + close Button
var nextButton;
var prevButton;
var nextButtonArea;
var prevButtonArea;
var closeButton;
// Fade Status: 1 ausblenden, 2 einblenden
var fadeState = 1;
// Wird nach dem Ende der Animation auf true gesetzt
var animationDone = true;
// Positions-Variablen für den Image-Slider
var x1 = 0;
var x2 = -1920;
var x3 = -3840;
// Variable zum stoppen des Image-Sliders
var stop = false;
// Index für Bilder und Beschreibungen
// wenn die Gallerie mit einem bestimten Bild geöffnet werden
// soll wird vorher der Index des Bildes ermittelt und next zugewisen
var next=0;

// ----------------- Funktionen --------------------------------------
	
	// fade function  	
	function fade(animationTime, animationTimeLeft, tick, id, value){
		if(fadeState == 0 && animationDone == true){
			fadeIn(animationTime, animationTimeLeft, tick, id, value);
		}
		else if(fadeState == 1 && animationDone == true){
			fadeOut(animationTime, animationTimeLeft, tick, id, value);
		}
	}
	
	// fade in function	
	function fadeIn(animationTime, animationTimeLeft, tick, id, value){
		var time = new Date();
		var elapsedTime = time - tick;
		var timeLeft = animationTimeLeft - elapsedTime;
		document.getElementById(id).style.opacity = (1 - (timeLeft/animationTime))*value;
		document.getElementById(id).style.filter = "alpha(opacity="+((1 - (timeLeft/animationTime))*100)*value+")";
		if (timeLeft > 0){
			animationDone = false;
			setTimeout(function(){fadeIn(animationTime,timeLeft,time,id, value)},33);
		}
		else{
			animationDone = true;
			fadeState = 1;
		}
	}
	
	// fade out function
	function fadeOut(animationTime, animationTimeLeft, tick, id, value){
		var time = new Date();
		var elapsedTime = time - tick;
		var timeLeft = animationTimeLeft - elapsedTime;
		document.getElementById(id).style.opacity = (timeLeft/animationTime)*value;
		document.getElementById(id).style.filter = "alpha(opacity = "+((timeLeft/animationTime)*100)*value+")";
		if (timeLeft > 0){
			animationDone = false;
			setTimeout(function(){fadeOut(animationTime,timeLeft,time,id, value)},33);
		}
		else{
			animationDone = true;
			fadeState = 0;
		}
	}
	
	//Image Slider
	function fly(){
		if(stop==false){
			document.getElementById("flying9").style.left = x1+"px";
			document.getElementById("flying8").style.left = x2+"px";
			if(x1 >= document.body.clientWidth){
				x1 = -1920+(x2);
				document.getElementById("flying9").style.left = x1+"px";
			}
			if(x2 >= document.body.clientWidth){
				x2 = -1920+(x1);
				document.getElementById("flying8").style.left = x2+"px";
			}
			x1++;
			x2++;
		}
		setTimeout("fly()",33);
		document.getElementById("slider").onmouseover = function(){stop = true;};
		document.getElementById("slider").onmouseout = function(){stop = false;};	
	}
	
	// Bilder werden ins Array geladen und anschließend aus der Seite gelöscht
	function loadImages(){
		while(document.getElementById("gallerie_bilder").firstChild){
			images.push(document.getElementById("gallerie_bilder").firstChild);
			document.getElementById("gallerie_bilder").removeChild(document.getElementById("gallerie_bilder").firstChild);
		}
	}
	
	/*
	//Image Slider
	function fly(){
		if(stop==false){
			document.getElementById("flying9").style.left = x1+"px";
			document.getElementById("flying8").style.left = x2+"px";
			document.getElementById("flying7").style.left = x3+"px";
			if(x1 >= document.body.clientWidth){
				x1 = -3840+(x2);
				document.getElementById("flying9").style.left = x1+"px";
			}
			if(x2 >= document.body.clientWidth){
				x2 = -3840+(x3);
				document.getElementById("flying8").style.left = x2+"px";
			}
			if(x3 >= document.body.clientWidth){
				x3 = -3840+(x1);
				document.getElementById("flying7").style.left = x3+"px";
			}
			x1++;
			x2++;
			x3++;
		}
		setTimeout("fly()",33);
		document.getElementById("slider").onmouseover = function(){stop = true;};
		document.getElementById("slider").onmouseout = function(){stop = false;};	
	}
	
	// Bilder werden ins Array geladen und anschließend aus der Seite gelöscht
	function loadImages(){
		while(document.getElementById("gallerie_bilder").firstChild){
			images.push(document.getElementById("gallerie_bilder").firstChild);
			document.getElementById("gallerie_bilder").removeChild(document.getElementById("gallerie_bilder").firstChild);
		}
	}
	*/
	
	// so, ab hier wirds kracee
	
	// öffnet die Gallerie
	function openGallery(){
		// aktuelles Bild erstelen und laden
		galleryImage = document.createElement("img");
		galleryImage.src=images[next].src;
		document.getElementById("gallerie_bilder").appendChild(galleryImage);
		// gallerie einblenden
		fadeState = 0;
		document.getElementById("gallerie").style.display = "block";
		fade(300,300,new Date(),'gallerie',0.6);
		document.getElementById("gallerie_navigation").style.display = "block";
		document.getElementById("gallerie_navigation").style.top = "100px";
		document.getElementById("gallerie_navigation").style.left = (document.body.clientWidth/2)-470+"px";
		document.getElementById("gallerie_bilder").style.display = "block";
		document.getElementById("gallerie_bilder").style.top = "130px";
		document.getElementById("gallerie_bilder").style.left = (document.body.clientWidth/2)-470+"px";
		document.getElementById("gallerie_beschreibung").style.display = "block";
		document.getElementById("gallerie_beschreibung").style.top = "530px";
		document.getElementById("gallerie_beschreibung").style.left = (document.body.clientWidth/2)-470+"px";
		document.getElementById("gallerie").style.height = 140+"%";
		// Bildbeschreibung festlegen
		beschreibungContainer = document.getElementById("gallerie_beschreibung");
		beschreibung = images[next].alt;
		beschreibungContainer.appendChild(document.createTextNode(beschreibung));
		// Markierung von Bild bei doppelklick nicht zulassen   
		document.getElementById("gallerie_bilder").onmousedown = function(){return false};
		// Vor- Zurück-Buttons + Bildbeschreibung + Navigation + Schließen-Button
		// anzeigen und...
		closeButton = document.createElement("div");
		closeButton.setAttribute("id","close_button");
		closeButton.style.visibility = "visible";
		nextButton = document.createElement("div");
		nextButton.setAttribute("id", "next_button", 1);
		nextButtonArea = document.createElement("div");
		nextButtonArea.setAttribute("id", "next_button_area", 1);
		prevButton = document.createElement("div");
		prevButton.setAttribute("id", "prev_button", 1);
		prevButtonArea = document.createElement("div");
		prevButtonArea.setAttribute("id", "prev_button_area", 1);
		document.getElementById("gallerie").appendChild(closeButton);
		document.getElementById("gallerie_bilder").appendChild(nextButton);
		document.getElementById("gallerie_bilder").appendChild(prevButton);
		document.getElementById("gallerie_bilder").appendChild(nextButtonArea);
		document.getElementById("gallerie_bilder").appendChild(prevButtonArea);
		//...Funktionalität hinzufügen
		closeButton.onmouseover = function(){
			closeButton.setAttribute("id", "close_button_visible", 1);
		};
		closeButton.onmouseout = function(){
			closeButton.setAttribute("id", "close_button", 1);
		};
		nextButtonArea.onmouseover = function(){
			nextButton.setAttribute("id", "next_button_visible", 1);
		};
		nextButtonArea.onmouseout = function(){
			nextButton.setAttribute("id", "next_button", 1);
		};
		prevButtonArea.onmouseover = function(){
			prevButton.setAttribute("id", "prev_button_visible", 1);
		};
		prevButtonArea.onmouseout = function(){
			prevButton.setAttribute("id", "prev_button", 1);
		};
		nextButton.onmouseover = function(){
			nextButton.setAttribute("id", "next_button_visible", 1);
		};
		prevButton.onmouseover = function(){
			prevButton.setAttribute("id", "prev_button_visible", 1);
		};
	}
	
	// Funktion für Bild/Beschreibungs-Wechsel
	function nextImage(){
		nextButton.onclick= function(){
			next++;if(next==images.length)next=0;galleryImage.src=images[next].src;
			beschreibungContainer = document.getElementById("gallerie_beschreibung");
			beschreibung = images[next].alt;
			beschreibungContainer.removeChild(beschreibungContainer.firstChild);
			beschreibungContainer.appendChild(document.createTextNode(beschreibung));
		};
		prevButton.onclick= function(){
			next--;if(next==-1)next=images.length-1;galleryImage.src=images[next].src;
			beschreibungContainer = document.getElementById("gallerie_beschreibung");
			beschreibung = images[next].alt;
			beschreibungContainer.removeChild(beschreibungContainer.firstChild);
			beschreibungContainer.appendChild(document.createTextNode(beschreibung));
		};
	}
	
	// Gallerie schließen, bestimmte Variablen zurücksetzen und Knoten löschen etc.
	// clean up!
	function closeGallery(){
		closeButton.onclick= function(){
			fadeState = 1;
			fade(500,500,new Date(),'gallerie',0.6);
			while(document.getElementById("gallerie_bilder").firstChild){
				document.getElementById("gallerie_bilder").removeChild(document.getElementById("gallerie_bilder").firstChild);
			}
			while(beschreibungContainer.firstChild){
				beschreibungContainer.removeChild(beschreibungContainer.firstChild);
			}
			while(document.getElementById("gallerie").firstChild){
				document.getElementById("gallerie").removeChild(document.getElementById("gallerie").firstChild);
			}
			document.getElementById("gallerie_bilder").style.display = "none";
			document.getElementById("gallerie_beschreibung").style.display = "none";
			document.getElementById("gallerie_navigation").style.display = "none";
			
			setTimeout("document.getElementById('gallerie').style.display = 'none';",500);
			next=0;
		};
	}
	
	// puts all together
	function gallery(){
		openGallery();
		nextImage();
		closeGallery();
	}	
	
	// do it onload
	window.onload = function(){
		// Refernezen Link ausschalten
		document.getElementById("off").onclick = function(){location.href="http://www.08schulzedesign.de/referenzen/innen.html";return false};
		// Bilder laden
		loadImages();
		// Slider Breite ermitteln
		document.getElementById("slider").style.width = document.body.clientWidth+"px";
		// Slider starten
		fly();
		// Slider links aktivieren
		//document.getElementById("flying7").onclick = function(){location.href="http://www.08schulzedesign.de/referenzen/leinwände.html";};
		document.getElementById("flying8").onclick = function(){location.href="http://www.08schulzedesign.de/referenzen/außen.html";};
		document.getElementById("flying9").onclick = function(){location.href="http://www.08schulzedesign.de/referenzen/innen.html";};
	};