/*
 *	JavaScript-Slider
 *  Überblendet Bilder in einem <div>
 *  Author: Marco Nätlitz
 *  Agentur: e8media | agentur für digitale medien
 */

/*
 * Konfiguration
 */
var iOpacityStart = 1.0;	// Startwert der Deckkraft
var steps = 0.04;			// Prozent der Deckkraft
var fadeTime = 50;			// Zeit pro Step in Millisekuden
var nextFade = 7500 		// Zeit zwischen den Animationen

//globare Referenz für setTimeout-Kram, damit der von außen stoppbar ist
var timeout;

var divID = "slideshow";	// CSS ID des Containers
var pID = "slide_description";

images = new Array();
var imgLink = new Array();
desc = new Array();

//Funktionen zum Setzen der Slideshows

function setStandardSlideshow() {
	images[0] =		"/templates/default/img/arge_slideshow/1.jpg";
	images[1] =		"/templates/default/img/arge_slideshow/2.jpg";
	images[2] =		"/templates/default/img/arge_slideshow/3.jpg";
	images[3] =		"/templates/default/img/arge_slideshow/4.jpg";
	images[4] =		"/templates/default/img/arge_slideshow/5.jpg";
	images[5] =	"/templates/default/img/arge_slideshow/14.jpg";
	images[6] =	"/templates/default/img/arge_slideshow/15.jpg";
	images[7] =	"/templates/default/img/arge_slideshow/16.jpg";
	images[8] =	"/templates/default/img/arge_slideshow/17.jpg";
	images[9] =	"/templates/default/img/arge_slideshow/19.jpg";
	images[10] =	"/templates/default/img/arge_slideshow/20.jpg";
	images[11] =	"/templates/default/img/arge_slideshow/21.jpg";
	images[12] =	"/templates/default/img/arge_slideshow/23.jpg";
	images[13] =	"/templates/default/img/arge_slideshow/24.jpg";

	desc[0] = "Aachener Tor in Bergheim";
	desc[1] = "Abtei Brauweiler";
	desc[2] = "Abtei Brauweiler";
	desc[3] = "Blick aufs Gewerbegebiet H&uuml;rth-Knapsack";
	desc[4] = "Die Erft bei Bergheim";
	desc[5] = "Industriepark Bergheim";
	desc[6] = "";
	desc[7] = "Kraftwerk Niederau&szlig;em";
	desc[8] = "Das Marienfeld in Kerpen";
	desc[9] = "Der Rhein bei Wesseling";
	desc[10] = "Schloss Bedburg";
	desc[11] = "Schloss Paffendorf in Bergheim";
	desc[12] = "Stommeler M&uuml;hle";
	desc[13] = "Br&uuml;hler Schloss";

}


/*
 * globale Variablen
 */
var bild1;
var bild2;
myCounter = 1;
var iOpacity;
pre = Array();
indizes = Array();

//Einmal beim Laden der .js die normale Slideshow initialisieren
setStandardSlideshow();

/* ---------------- Funktion: tkStart ----------------
 * 	Onload Funktionen, startet alle anderen
 */
function tkStart(direct)
{
	// Default-Wert für direct festlegen
	var direct = (direct == null) ? "false" : direct;
	tkPreload();
	tkCheckPreload();
	
	indizes=[];
	
	for(i=0; i<images.length; i++)
	{
		//Einmal initialisieren, damit die while nicht sofort abbricht
		newindex = GetRandom(0,images.length-1);
		
		// Checken, ob Index schon vorhanden ist - geht nicht einfacher
		while(inArray(indizes,newindex))
		{
			newindex = GetRandom(0,images.length-1);
		}
		
		//Jetzt ist sicher, dass der newindex bisher nicht vorhanden ist
		indizes.push(newindex);
	}
	
	if(direct == "true") {
		tkAnimation();
	} else {
		timeout = setTimeout("tkAnimation()", nextFade);
	}
}

/* ---------------- Funktion: tkPreload ----------------
 * 	Bilder vorladen
 */
function tkPreload()
{
	for(i=0; i<images.length; i++)
	{
		pre[i] = new Image();
		pre[i].src = images[i];
	}
}


/* ---------------- Funktion: tkCheckPreload ----------------
 * 	testet ob alle Bilder vorgeladen sind (rekursiv)
 */
function tkCheckPreload()
{
	var loaded = 0;
	for(i=0; i<pre.length; i++)
	{
		if(pre[i].complete)
		{
			loaded++;
		}
	}
	if(loaded<pre.length)
	{
		setTimeout("tkCheckPreload()", 500);
	}
	else
	{
		clearTimeout();
	}
}

/* ---------------- Funktion: tkAnimation ----------------
 *  Animation: Bilder Faden
 */
function tkAnimation()
{
	change_image(indizes[myCounter]);
	myCounter++;
	if(myCounter > (images.length-1))
	{
		myCounter=0;
	}
	timeout = setTimeout("tkAnimation()", nextFade);
}

/* ---------------- Funktion: change_image ----------------
 * 	Fuegt das zu fadende Bild ein und ruft die fade-funktion aus
 *	Uebergabeparameter: newImage -> Das neue Bild inkl. Pfad
 */
function change_image(myKey)
{
	// Startwert der Deckkraft einstellen
	iOpacity = iOpacityStart;

	// Derzeitiges Bild (1. Kind im DOM)
	myLink = $(divID).down();
	
	//myLink.href = imgLink[myKey];

	bild1 = myLink.down();

	// Neues Bild
	bild2 = bild1.cloneNode(true);
	bild2.src = images[myKey];
	setOpacity(bild2, 0);

	// Neues Bild einbinden
	myLink.appendChild(bild2);

	// Ueberblenden
	fade_images();
	
	// Texte tauschen
	p = $(pID);
	p.innerHTML = desc[myKey];
}

/* ---------------- Funktion: fade_images ----------------
 * 	Ueberblendet zwei Bilder, das ausgeblendete wird entfernt
 */
function fade_images()
{
	// Deckkreft verringern
	iOpacity -= steps;
	// Ist das Bild noch sichtbar?
	if(iOpacity >= 0)
	{
		// Deckfraft setzen
		setOpacity(bild1, iOpacity);
		setOpacity(bild2, (1-iOpacity));

		// Funktion neu aufrufen
		setTimeout("fade_images()", fadeTime);
	}
	else
	{
		// ausgeblendetes Bild entfernen
		bild1.remove();
		return false;
	}
}

/* ---------------- Funktion: setOpacity ----------------
 * 	Setzt die die Deckkraft (Dezimal)
 */
function setOpacity(element, opacity)
{
	element.style.MozOpacity = opacity;
	element.style.opacity = opacity;
	element.style.filter = "alpha(opacity=" + (opacity*100) + ")";
}

// Einfache Funktion, um Zufallszahlen zu generieren
function GetRandom( min, max ) {
	if( min > max ) {
		return( -1 );
	}
	if( min == max ) {
		return( min );
	}

	var r = parseInt( Math.random() * ( max+1 ) );

	return( r + min <= max ? r + min : r );
}

// Äquivalent zu PHP "in_array"
function inArray (array, elem) {
  var i;
  for (i = 0; i < array.length; i++) {
    if (array[i] == elem) {
      return true;
    }
  }

  return false;
}