var refreshspeed = 30;
var picBoxes = new Object();
var aktiv;
var ie;
//var direction = true;
//var lastdirection = true;
output = document.getElementById("output");
IECheck();
//timer
var aktiv = window.setInterval("PicMove()", refreshspeed);
function CreatePicbox(id)
{
  picBoxes[id] = new PicBox(id);
}
function PicBox(id)
{
	this.container = document.getElementById("container_" + id);
	this.image = document.getElementById("image_" + id);
	this.active = 1;
	this.percentageY = 0;
	this.percentagecurrentY = 0;
	this.diffY = 0;
	this.mouse = new PicBoxMouse();
	this.shift = new PicBoxShift();
	this.speed = new PicBoxSpeed();
}

function PicBoxSpeed()
{
	if(!this.y)	this.y = 1;
}
function PicBoxMouse()
{
	this.y = 0;
}
function PicBoxShift()
{
	this.y = 0;
}
function PicMove()
{
	for(var boxId in picBoxes)
	{
		var box = picBoxes[boxId];
		SetNewPosition(box);
	}
}
function GetDifference(box)
{
	box.diffY = box.shift.y - parseInt(box.image.style.top);






	if(box.shift.y < parseInt(box.image.style.top))
	{
		box.percentagecurrentY = 100 / box.shift.y * parseInt(box.image.style.top);
	}
	else
	{
		box.percentagecurrentY = 100 /  parseInt(box.image.style.top) * box.shift.y;
	}
	box.percentagecurrentY = 100 - box.percentagecurrentY;
	if(box.percentagecurrentY < 0) box.percentagecurrentY = box.percentagecurrentY * -1;
	if(isNaN(box.percentagecurrentY))	box.percentagecurrentY = 0;
	if(box.percentagecurrentY == Infinity)	box.percentagecurrentY = 100;
}
function SetSpeed(box)
{
	if(box.percentagecurrentY > 15 )
	{
		//beschleunigen
		if(box.speed.y < 25 && box.speed.y > -25)
		{
			if(box.diffY > 0)
			{
				box.speed.y += 1;
			}
			else
			{
				box.speed.y -= 1;
			}
		}
	}
	else
	{
		//abbremsen
		if(box.diffY > 0)
		{
			box.speed.y = box.diffY / 4;
		}
		else
		{
			box.speed.y = box.diffY / 4;
		}
		//if(box.speed.y < 1)	box.speed.y = 0;
	}
}

function SetNewPosition(box)
{
	GetDifference(box);
	SetSpeed(box);
	SetY(box);
	//lastdirection = direction;
}
function SetY(box)
{
	if(box.diffY > -2 && box.diffY < 2)		box.image.style.top = box.shift.y + "px";
	var top = parseInt(box.image.style.top);
	var newTop = top + parseInt(box.speed.y);
	if(newTop)
	{
		if(box.image.offsetHeight < box.container.offsetHeight)	return;
		var max = -1 * box.image.offsetHeight - box.container.offsetHeight;
		if(newTop > 0)	newTop = 0;
		if(newTop < max)
		{
			newTop = max;
		}
		box.image.style.top = newTop + "px";
	}
}

//Mauspositionierung
function PicboxSetPos(event, id)
{
	if(!picBoxes[id])	return;
	box = picBoxes[id];
	if(!box.active)	return;
	mouse = picBoxes[id]["mouse"];
	shift = picBoxes[id]["shift"];
	container_height = picBoxes[id].container.offsetHeight - 2;
	image_height = picBoxes[id].image.offsetHeight;
	if(ie)
	{
		mouse.y = window.event.offsetY + 4;
	}
	else
	{
		mouse.y = event.layerY + 4;
	}
	box.percentageY = 100 / container_height * mouse.y;
	y = -1 * (image_height - container_height) / 100 * box.percentageY;
	if(shift.y <= 0) shift.y = y;
}

function DestroyPicBox(id)
{
	var box = picBoxes[id];
	box.shift.y = 0;
	box.mouse.y = 0;
	delete box.active;
}

function ClearPicBox(id)
{
	delete picBoxes[id];
	//time aufräumen
	var c = 0;
	for (var boxes in picBoxes)	c++;
	if(c == 0)
	{
		clearInterval(aktiv);
	}
}
function IECheck()
{
	var agent = navigator.userAgent.toLowerCase();
	if (agent.indexOf('msie') > -1)
	{
		ie = true;
	}
	else
	{
		ie = false
	}
}
function Center(id)
{
	//var container = document.getElementById("container_" + id);
	var image = document.getElementById("image_" + id);
	if(image.offsetWidth != 0 && image.complete == true)
	{
		DoCenter(id);
	}
	else
	{
		setTimeout("Center('" + id + "')", 300);
		return;
	}
}
function DoCenter(id)
{
	var image = document.getElementById("image_" + id);
	if(image.offsetWidth)
	{
		var left = 60 - image.offsetWidth/2;
	}
	else
	{
		var left = 0;
	}
	image.style.left = left + "px";
}