window.onload = init;
var d=document;
var zInterval=null;

var imageCoordinates = new Array();
var imageObjects = new Array();
var imageDimensions = new Array();
var imageStart = new Array();
var imageCourse = new Array();
var currentOpacity = new Array();
var activeImage=-1;
var prevImage=-1;
var animationIndex = new Array();
var movementSteps = new Array();
var useOpacity=0;
var iSpeed=6;
var isAnimated=0;

var TOTAL_IMAGES=1;
var IMAGES_PER_ROW=1;
var IMAGE_MIN_SIZE=1;
var IMAGE_MAX_WIDTH=868;
var IMAGE_MAX_HEIGHT=300;
var IMAGE_SPACING=6;
var DEST_Y=-30;
var DEST_X=-470;
var DEFAULT_CAPTION="Klicken Sie auf ein Bild,<br />um es zu vergrößern"

function init() {
	if(!document.getElementById)return;
	initThumbnails();
	initCourse();
	initSteps();
}

function initThumbnails() {
	x=0; y=0; i=0; z=0;
	//d.getElementById("caption").innerHTML = DEFAULT_CAPTION;
	while(i<TOTAL_IMAGES)
	{
		if(!imageObjects[i])imageObjects[i]=d.getElementById("image"+i);
		imageObjects[i].style.left = x + "px";
		imageObjects[i].style.top = y + "px";
		imageObjects[i].xid=i;
		imageObjects[i].onclick=function()
		{
			animate(this.xid)
		}
		if(!imageStart[i])
			imageStart[i]=new Array(x,y);
		x+=IMAGE_MIN_SIZE+IMAGE_SPACING;
		imageCoordinates[i]=new Array(x,y);
		imageDimensions[i] = new Array(48,48);
		currentOpacity[i]=document.all?50:.5;
		animationIndex[i]=0;
		z++;
		if(z>=IMAGES_PER_ROW) {
			x=0; z=0;
			y+=IMAGE_MIN_SIZE+IMAGE_SPACING;
		}
		i++;
	}
}

function initCourse()
{
	for(i=0;i<imageStart.length;i++)
		imageCourse[i] = plotCourse(DEST_X,DEST_Y,imageStart[i][0],imageStart[i][1]);
}

function initSteps()
{
	for(i=0;i<imageCourse.length;i++)
	{
		wStep = Math.round(imageCourse[i].length/iSpeed);
		wStep = Math.round(868/wStep);
		hStep = Math.round(imageCourse[i].length/iSpeed);
		hStep = Math.round(300/hStep);
		movementSteps[i]=new Array(wStep,hStep);
	}
}

function animate(index)
{
	if(zInterval)
		return;
	if(activeImage==-1)
		prevImage=-1;
	if(index==activeImage)
	{
		prevImage=activeImage;
		imageObjects[activeImage].style.zIndex=100;
		activeImage=-1;	
	}
	else
	{
		if(activeImage>-1)
			prevImage=activeImage;
		activeImage=index;
		imageObjects[activeImage].style.zIndex=100;
		if(prevImage>-1)
			imageObjects[prevImage].style.zIndex=1;
	}
	zInterval = setInterval("slideImage()",10);
}

function setImagePosition(index)
{
	try
	{
		imageObjects[index].style.top = imageCourse[index][animationIndex[index]][1]+"px";
		imageObjects[index].style.left = imageCourse[index][animationIndex[index]][0]+"px";
		imageObjects[index].style.width=imageDimensions[index][0]+"px";
		imageObjects[index].style.height=imageDimensions[index][1]+"px";
	}
	catch(err)
	{ }
}

function setImageOpacity(index)
{
	if(!useOpacity)
		return;
	imageObjects[index].style.filter="alpha(opacity=" + currentOpacity[activeImage] + ")";
	imageObjects[index].style.MozOpacity=currentOpacity[activeImage];
	imageObjects[index].style.opacity=currentOpacity[activeImage];
}

function slideImage()
{
	if(activeImage>-1)
	{
		setImagePosition(activeImage);
		currentOpacity[activeImage]+=d.all?5:.05;
		setImageOpacity(activeImage);
		if(imageDimensions[activeImage][0]<868)
			imageDimensions[activeImage][0]+= movementSteps[activeImage][0];
		if(imageDimensions[activeImage][1]<300)
			imageDimensions[activeImage][1]+= movementSteps[activeImage][1];
		animationIndex[activeImage]+=iSpeed;
	}
	if(prevImage>-1)
	{
		setImagePosition(prevImage);
		currentOpacity[prevImage]-=d.all?5:.05;
		setImageOpacity(prevImage);
		if(imageDimensions[prevImage][0]>268)imageDimensions[prevImage][0]-=movementSteps[prevImage][0];
		if(imageDimensions[prevImage][1]>100)imageDimensions[prevImage][1]-=movementSteps[prevImage][1];
		animationIndex[prevImage]-=iSpeed;
	}
	if(isFinished())
	{
		if(activeImage==-1)
		{
			//d.getElementById("caption").innerHTML = DEFAULT_CAPTION;
			animationIndex[prevImage]=0;
		}
		if(activeImage>-1)
		{
			animationIndex[activeImage] = imageCourse[activeImage].length;
			imageObjects[activeImage].style.top=DEST_Y+"px";
			imageObjects[activeImage].style.left=DEST_X+"px";
			imageObjects[activeImage].style.width="868px";
			imageObjects[activeImage].style.height="300px";
			if(useOpacity)
			{
				imageObjects[activeImage].style.MozOpacity=.99;
				imageObjects[activeImage].style.filter="alpha(opacity=100)";
				imageObjects[activeImage].style.opacity=1.0;
			}
			//d.getElementById("caption").innerHTML = imageObjects[activeImage].title;
		}
		if(prevImage>-1)
		{
			animationIndex[prevImage]=0;
			imageObjects[prevImage].style.top = imageStart[prevImage][1]+"px";
			imageObjects[prevImage].style.left = imageStart[prevImage][0]+"px";
			imageObjects[prevImage].style.width="268px";
			imageObjects[prevImage].style.height="100px";
			if(useOpacity)
			{
				imageObjects[prevImage].style.MozOpacity=.5;
				imageObjects[prevImage].style.filter="alpha(opacity=50)";
				imageObjects[prevImage].style.opacity=.5;
			}
		}
		clearInterval(zInterval);
		zInterval=null;
	}
}

function isFinished()
{
	if(activeImage>-1 && prevImage>-1)
		if(animationIndex[activeImage]>=imageCourse[activeImage].length && animationIndex[prevImage]<=0)
			return true;
	if(activeImage>-1 && prevImage==-1)
		if(animationIndex[activeImage]>=imageCourse[activeImage].length)
			return true;
	if(activeImage==-1 && prevImage>-1)
		if(animationIndex[prevImage]<=0)
			return true;
	return false;
}

function disableOpacity(bool)
{
	if(bool)
	{
		useOpacity=0;
		for(i=0;i<imageObjects.length;i++)
		{
			imageObjects[i].style.MozOpacity=1.0;
			imageObjects[i].style.opacity=1.0;
			imageObjects[i].style.filter="alpha(opacity=100)";
		}
	}
	else
	{
		location.reload();
	}
}

function plotCourse(fX,fY,oX,oY)
{

	dx = Math.abs(fX-oX);
	dy = Math.abs(fY-oY);
	max = dx > dy ? dx : dy;
	x_inc = dx / max;
	y_inc = dy / max;

	Xp = oX
	Yp = oY;

	path = new Array();
	pathCount = 0;

	if(fX>oX && fY > oY)
	{
		if(oX<fX && oY<fY)
		{
			while (Xp < fX)
			{
				nextX = Math.round(Xp);
				nextY = Math.round(Yp);
				path[pathCount] = new Array(nextX,nextY);
				pathCount++;
				Xp += x_inc;
				Yp += y_inc;
			}
		}
		else
		{
			while (Xp > fX)
			{
				nextX = Math.round(Xp);
				nextY = Math.round(Yp);
				path[pathCount] = new Array(nextX,nextY);
				pathCount++;
				Xp -= x_inc;
				Yp += y_inc;
			}		
		}	
	}
	else
	{
		if(oX<fX && oY>fY)
		{
			while (Xp < fX)
			{
				nextX = Math.round(Xp);
				nextY = Math.round(Yp);
				path[pathCount] = new Array(nextX,nextY);
				pathCount++;
				Xp += x_inc;
				Yp -= y_inc;
			}
		}
		else
		{
			while (Xp > fX)
			{
				nextX = Math.round(Xp);
				nextY = Math.round(Yp);
				path[pathCount] = new Array(nextX,nextY);
				pathCount++;
				Xp -= x_inc;
				Yp -= y_inc;
			}
		}
	}
	return path;
}

