/*
	Bilder Faden, Links wechseln und noch ein paar Funktionen
	von Tobi Kivelip, mailto:tobi@kivelip.net
*/

// ---------------- 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 = 5000 		// Zeit zwischen den Animationen

var divID = "right_gal";		// CSS ID des Containers

var images = new Array();
var imgLink = new Array();
images[0] =		"/img/slideshow_right_bar/1.jpg";
images[1] =		"/img/slideshow_right_bar/2.jpg";
images[2] =		"/img/slideshow_right_bar/3.jpg";
images[3] =		"/img/slideshow_right_bar/4.jpg";
images[4] =		"/img/slideshow_right_bar/5.jpg";
images[5] =		"/img/slideshow_right_bar/6.jpg";
images[6] =		"/img/slideshow_right_bar/7.jpg";
images[7] =		"/img/slideshow_right_bar/8.jpg";
images[8] =		"/img/slideshow_right_bar/9.jpg";
images[9] =		"/img/slideshow_right_bar/10.jpg";
images[10] =	"/img/slideshow_right_bar/11.jpg";

imgLink[0] = "/img/slideshow_right_bar/big/1.jpg";
imgLink[1] = "/img/slideshow_right_bar/big/2.jpg";
imgLink[2] = "/img/slideshow_right_bar/big/3.jpg";
imgLink[3] = "/img/slideshow_right_bar/big/4.jpg";
imgLink[4] = "/img/slideshow_right_bar/big/5.jpg";
imgLink[5] = "/img/slideshow_right_bar/big/6.jpg";
imgLink[6] = "/img/slideshow_right_bar/big/7.jpg";
imgLink[7] = "/img/slideshow_right_bar/big/8.jpg";
imgLink[8] = "/img/slideshow_right_bar/big/9.jpg";
imgLink[9] = "/img/slideshow_right_bar/big/10.jpg";
imgLink[10] = "/img/slideshow_right_bar/big/11.jpg";


// ---------------- Globale Variablen ----------------
var bild1;
var bild2;
var myCounter = 1;
var iOpacity;
var pre = Array();

/* ---------------- Funktion: tkStart ----------------
 * 	Onload Funktionen, startet alle anderen
 */
function tkStart()
{
    // ------------ Load hover-function if browser is IE ----------------
    if (document.all && document.getElementById)
    {
        window.onload = addHover;
    }
	tkPreload();
	tkCheckPreload();

	setTimeout("tkAnimation()", nextFade);
}

// ---------------- Add hover-effect for all list items, necessary for all IE ----------------
addHover = function()
{
    // ---- Get all list items
    var liItems = document.getElementsByTagName("LI");
    // ---- Pass through all list items
    for (var i=0; i < liItems.length; i++)
    {
        // ---- Add mouseover-function
        liItems[i].onmouseover = function()
        {
            this.className += " hoverIt";
        }
        // ---- Add mouseout-function
        liItems[i].onmouseout =function ()
        {
            this.className = this.className.replace(" hoverIt", "");
        }
    }
}

/* ---------------- 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(myCounter);
	myCounter++;
	if(myCounter > (images.length-1))
	{
		myCounter=0;
	}
	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();
}

/* ---------------- 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) + ")";
}



// ----- PopUp Funktion -----
function pop(file)
{
    var x_size = window.screen.width;
    x_size = x_size - 450;
    x_size = x_size / 2;
    x_size = Math.round(x_size);

    var y_size = window.screen.height;
    y_size = y_size - 570;
    y_size = y_size / 2;
    y_size = Math.round(y_size);
    y_size -= 30;

    popupwindow = window.open(file,"pophelp","scrollbars=yes, toolbar=no,location=no,directories=no,status=no,menubar=no,width=550,height=600, left=" + x_size + ",top=" + y_size);
    popupwindow.focus();
    return false;
}