// JavaScript Document

lastPic = 32;

function blendIN(obj,maxWert,einheit, add,speed){
einheitIndex = obj.style.height.lastIndexOf(einheit);
alterWert = obj.style.height.substring(0,(einheitIndex));
neuerWert = parseInt(alterWert)+add;

obj.style.height = neuerWert+einheit;

if (alterWert < neuerWert){
obj.style.top = ((((windowHeight-neuerWert))/windowHeight)*100)/2+((document.body.scrollTop/windowHeight)*100)+"%";
}
 
if (neuerWert < maxWert){
start = "blendIN("+obj.id+","+maxWert+", '"+einheit+"', "+add+", "+speed+")";
window.setTimeout(start,speed);
}
else{
rightBtn.style.visibility = "visible";
leftBtn.style.visibility = "visible";
obj.style.height = maxWert;
obj.style.top = ((((windowHeight-neuerWert))/windowHeight)*100)/2+((document.body.scrollTop/windowHeight)*100)+"%";
}
}

function showStage(id){

Pic = new Image();
Pic.src =  document.getElementById(id).src;
var w = Pic.width+100;
var h = Pic.height+100;

var firstID = 'img1';
var lastID = 'img'+lastPic;
var endID = 'img'+(lastPic+1);

var nextID='img'+(id.substring(3)-(-1));
var prevID='img'+(id.substring(3)-1);


imageContent.innerHTML= '<img src="'+document.getElementById(id).src+'" />';
if (self.innerWidth) { windowWidth = self.innerWidth }
   else if (document.body.clientWidth) { windowWidth = document.body.clientWidth }
if (self.innerHeight) { windowHeight = self.innerHeight }
   else if (document.body.clientHeight) { windowHeight = document.body.clientHeight }

lleft = stageDIV.style.left = (((windowWidth-(w))/windowWidth)*100)/2+"%";
if (windowWidth-(w) > 0) { lleft ;} else { stageDIV.style.left = "0px";}

if (nextID != endID){
rightBtn.onclick = function () { showStage(nextID)};
}else{
rightBtn.onclick = function () { showStage(firstID)};
}

if (prevID != 'img0'){
leftBtn.onclick = function () { showStage(prevID)};
}else{
leftBtn.onclick = function () { showStage('img'+lastPic)};
}

stageDIV.style.width = (w)+"px";
	if (stageDIV.style.visibility != "visible"){
	stageDIV.style.visibility = "visible";
	stageDIV.style.height = "1px";
	blendIN(stageDIV, (h+30), 'px', 15,1);
	}
	else{
	stageDIV.style.visibility = "visible";
	stageDIV.style.height = h+30;+"px";
	}
}


function closeAll (Ereignis) {
rightBtn.style.visibility = "hidden";
leftBtn.style.visibility = "hidden";
stageDIV.style.visibility = "hidden";
}