window.onload = showHomeImages;


// ----------------------------------------- global variables --------------------------------------------


var homeImageButtons = new Array();


// ----------------------------------------- main functions ---------------------------------------------


function showHomeImages()
{	
	showCenterImage();
	
	for (var i = 0; i < homeImageButtons.length; i++)
	{
		showHomeImageButton(homeImageButtons[i]);
	}
}


// makes the designated center image visible, and positions it at the center of the screen
function showCenterImage()
{
	var centerImage = document.getElementById("homeCenterImage");
	centerImage.style.left = centerImageLeftPosition(centerImage) + "px";
	centerImage.style.top = centerImageTopPosition(centerImage) + "px";
	centerImage.style.visibility = "visible";
}


// shows an image button by placing it behind the centerwindow and then moving it towards a designated endposition
function showHomeImageButton(homeImageButton)
{
	var imageContainer = homeImageButton.imageContainer;
	var topImageDiv =  homeImageButton.topImageDiv;
	var bottomImageDiv = homeImageButton.bottomImageDiv;
	var travelDistanceX = homeImageButton.travelDistanceX;
	var travelDistanceY = homeImageButton.travelDistanceY;
	
	var centerImage = document.getElementById("homeCenterImage");
	setStartPosition(imageContainer, centerImage);
	imageContainer.style.visibility = "visible"; // only show image when it is placed at the correct starting position
	increaseOpacity(topImageDiv, bottomImageDiv, 0);
    moveImage(centerImageLeftPosition(centerImage), centerImageTopPosition(centerImage), imageContainer, travelDistanceX, travelDistanceY); 
}


function pressIn(imageButton)
{
	var currentXPostion = imageButton.style.left;
	var currentYPosition = imageButton.style.top;
	var newXPosition = parseInt(currentXPostion.replace("px", "")) + 3 + 'px';
	var newYPosition = parseInt(currentYPosition.replace("px", "")) + 3 + 'px';
	imageButton.style.left = newXPosition;
	imageButton.style.top = newYPosition;
}


function pressOut(imageButton)
{
	var currentXPostion = imageButton.style.left;
	var currentYPosition = imageButton.style.top;
	var newXPosition = parseInt(currentXPostion.replace("px", "")) - 3 + 'px';
	var newYPosition = parseInt(currentYPosition.replace("px", "")) - 3 + 'px';
	imageButton.style.left = newXPosition;
	imageButton.style.top = newYPosition;
}


// ----------------------------------------- helper functions --------------------------------------------


function setStartPosition(imageContainer, centerImage)
{
	imageContainer.style.left = contentWidth() / 2 + "px";
	imageContainer.style.top = contentHeight() / 2 + "px";
}


function centerImageLeftPosition(centerImage)
{
	var centerLeft = (contentWidth() - centerImage.width) / 2;
	return centerLeft;
}


function centerImageTopPosition(centerImage)
{
	var centerTop= (contentHeight() - centerImage.height) / 2;
	return centerTop;
}


// returns the width of the div that contains the center content => masterpage
function contentWidth()
{
	return 800;
}


// returns the height of the div that contains the center content,
// together with the height of the topImage and menu divs => masterpage
function contentHeight()
{
	return 600;
}


//function clientWidth() {
//	return Math.max(
//		window.innerWidth ? window.innerWidth : 0,
//		document.documentElement ? document.documentElement.clientWidth : 0,
//		document.body ? document.body.clientWidth : 0
//	);
//}


//function clientHeight() {
//	return Math.max(
//		window.innerHeight ? window.innerHeight : 0,
//		document.documentElement ? document.documentElement.clientHeight : 0,
//		document.body ? document.body.clientHeight : 0
//	);
//}


function increaseOpacity(topImageDiv, bottomImageDiv, fadeAmount)
{
    if (fadeAmount < 100)
    {
        topImageDiv.style.filter = "alpha(opacity=" + fadeAmount + ")";
        bottomImageDiv.style.filter = "alpha(opacity=" + fadeAmount + ")";
        
        var funcRef = function(){increaseOpacity(topImageDiv, bottomImageDiv, fadeAmount + 2)};
        setTimeout(funcRef, 5); 
    }
}


//TODO: the initial movement is not correct around the zero => -1, 0, and 1 have large differences in starting positions.
function moveImage(currentPositionX, currentPositionY, imageContainer, currentTravelDistanceX, currentTravelDistanceY)
{	
	var newPositionX = currentPositionX;
	var newPositionY = currentPositionY;
	var newTravelDistanceX = currentTravelDistanceX;
	var newTravelDistanceY = currentTravelDistanceY;
	var travelstep;
	
	if (currentTravelDistanceX == 0 && currentTravelDistanceY == 0)
	{
		return;
	}
	
	var absTravelDistanceX = Math.abs(currentTravelDistanceX);
	var absTravelDistanceY = Math.abs(currentTravelDistanceY);
	
    if (absTravelDistanceX > 0)
    {
   		travelstep = calculateTravelStep(currentPositionX, currentTravelDistanceX);
		newPositionX = currentPositionX + travelstep;
		newTravelDistanceX = currentTravelDistanceX - travelstep; 
		imageContainer.style.left = newPositionX + "px"; 
    }
   else
   {
		if (absTravelDistanceY > 0)
		{
   			travelstep = calculateTravelStep(currentPositionY, currentTravelDistanceY);
			newPositionY = currentPositionY + travelstep;
			newTravelDistanceY = currentTravelDistanceY - travelstep; 
			imageContainer.style.top = currentPositionY + "px";
		}
		else
		{
			alert("no more traveldistance => image should stop moving in 'moveImage'!");
		}
   } 

    var moveFurther = function(){moveImage(newPositionX, newPositionY, imageContainer, newTravelDistanceX, newTravelDistanceY);};
    setTimeout(moveFurther, 1);
}


function calculateTravelStep(nextPosition, travelDistance)
{
	var absTravelDistance = Math.abs(travelDistance);
	var defaultTravelStep = 15;
	var travelstep = absTravelDistance - defaultTravelStep < 0 ? absTravelDistance : defaultTravelStep;
	
	if (travelDistance < 0)
	{
		travelstep = 0 - travelstep;
	}
	
	return travelstep;
}


function addHomeImageButton(homeImageButton)
{
	homeImageButtons.push(homeImageButton);
}


// --------------------------------------------- classes --------------------------------------------------


function HomeImageButton(_imageContainer, _topImageDiv, _bottomImageDiv, _travelDistanceX, _travelDistanceY)
{
	this.imageContainer = _imageContainer;
	this.topImageDiv = _topImageDiv;
	this.bottomImageDiv = _bottomImageDiv;
	this.travelDistanceX = _travelDistanceX;
	this.travelDistanceY = _travelDistanceY;
}