// dir: next or prev
// and title
function changePic(dir){
	var lbmainpic = document.getElementById('lbmainpic');
	var lbpictitle = document.getElementById('lbpictitle');
	
	// Anzahl der vorhandenen Bilder: lbContent.pic.length()
	// Offset-Variable neu setzen
	if (dir == 'prev'){
		// Erstes Bild wird angezeigt -> letztes Bild markieren
		if (lbContent.actPic == 0){
			lbContent.actPic = lbContent.pic.length-1;
		}
		else{
			lbContent.actPic--;
		}
	}
	if (dir == 'next'){
		// Letztes Bild wird angezeigt -> erstes Bild markieren
		if (lbContent.actPic == lbContent.pic.length-1){
			lbContent.actPic = 0;
		}
		else{
			lbContent.actPic++;
		}
	}
	
	// Neues Bild anzeigen
	lbmainpic.src = lbContent.pic[lbContent.actPic].src;
	lbpictitle.innerHTML = lbContent.pic[lbContent.actPic].date+' - '+lbContent.pic[lbContent.actPic].game;
}

/**
  * Steuerung der Anzeige eines Bildes
  * picCounter - integer - Nummer des Bildes im lbContent-Objekt
  * color - Hintergrundfarbe für das den normalen Inhalt der Seite überlagernde DIV
  */
function showPic(picCounter,color){
	/* Bildergröße: 970 x 550 px - Thumb: 120 x 60 px */

	/*
	alert(picCounter);
	alert(lbContent.pic);
	alert(lbContent.pic[2].game);
	alert(lbContent.pic["2"].src);
	//*/
	
	// Offset des neuen Bildes setzen
	lbContent.actPic = picCounter;
	
	// Funktionen aus der Lightbox
	var pageSize = getPageSize();
	var pageScroll = getPageScroll();
	
	/*
	alert(getPageSize()[0]);
	alert(getPageSize()[1]);
	alert(getPageSize()[2]);
	alert(getPageSize()[3]);
	//*/
	
	/*
	alert(getPageScroll()[0]);
	alert(getPageScroll()[1]);
	//*/
	
	/*
	html{
overflow:hidden !important;
}
	*/
	
	// ---
	// Hintergrund mit bestimmtem Grad an Durchlässigkeit
	var div = document.createElement('div');
	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementsByTagName('body')[0].lastChild.setAttribute('id', 'picBackground');
	
	document.getElementById('picBackground').style.width = '990px';
	document.getElementById('picBackground').style.height = pageSize[1]+'px';
	document.getElementById('picBackground').style.backgroundColor = color;
	
	// ---
	// Navigationsbox erstellen
	var div = document.createElement('div');
	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementsByTagName('body')[0].lastChild.setAttribute('id', 'picNavi');
	
	var inner = '<img src="_icons/picnav_left.png" alt="Vorheriges Bild" title="Vorheriges Bild." style="left:5px;" onclick="changePic(\'prev\');" />';
	inner += '<span id="lbpictitle">'+lbContent.pic[picCounter].date+' - '+lbContent.pic[picCounter].game+'</span>';
	inner += '<img src="_icons/picnav_right.png" alt="Nächstes Bild" title="Nächstes Bild." style="right:5px;" onclick="changePic(\'next\');" />';

	document.getElementById('picNavi').innerHTML = inner;
	document.getElementById('picNavi').style.top = pageScroll[1]+10+'px';
	document.getElementById('picNavi').style.backgroundColor = color;
	
	// ---
	// Box zum Schließen des Bildes
	var div = document.createElement('div');
	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementsByTagName('body')[0].lastChild.setAttribute('id', 'picCloser');
	
	var inner = '';
	inner += '<img src="_icons/picnav_close.png" alt="Bildansicht schließen." title="Bildansicht schließen." style="left:3px;" onclick="closePic();" />';
	// hier noch korrekten Abstand angeben !!!

	document.getElementById('picCloser').innerHTML = inner;
	document.getElementById('picCloser').style.top = pageScroll[1]+10+'px'; // 560 = maximale Höhe des Hauptbildes
	document.getElementById('picCloser').style.backgroundColor = color;
	
	// ---
	// Box für eigentliches Bild und Bild erstellen
	var div = document.createElement('div');
	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementsByTagName('body')[0].lastChild.setAttribute('id', 'picHolder');
	//document.getElementById('picHolder').style.backgroundColor = color;
	
	inner = '<span> <img src = "'+lbContent.pic[picCounter].src+'" id="lbmainpic"> </span>';
	
	document.getElementById('picHolder').innerHTML = inner;
	document.getElementById('picHolder').style.top = pageScroll[1]+10+27+10+'px'; // 27 = Höhe der picNavi inkl. padding und border
	
	// Scrolling deaktivieren
	document.getElementsByTagName('html')[0].style.overflow = "hidden";
	window.scroll(0, pageScroll[1]); // FF2 Korrektur
}

// Schließen der Lightbox
function closePic(){
	document.getElementsByTagName('html')[0].style.overflow = "scroll";
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('picHolder'));
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('picCloser'));
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('picNavi'));
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('picBackground'));
}

/*
	Functions getPageScroll() and function getPageSize() taken from 
	
	Lightbox JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox/

	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)
*/

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}