///////////////////////////////////////////////////////////////////////////////////////////////////////////
///
///		JavaScript Animation Library
///
///				by Mike Annonson
///		based upon ideas, concepts, and code by www.hesido.com
///
//////////////////////////////////////////////////////////////////////////////////////////////////////////
///
///		Designed to be as general purpose as possible, this library has a heavy reliance on planning by the artist
///		to set much of the distances and animations up before hand.  It relies upon initializing the animations
///		first, then using generic functions to act upon these predetermined animations.
///
///		To begin, you need to call one of the initialize functions during an onLoad() call.  You can set each animation
///		step's settings manually, one by one, if you wish.  You may also use the EaseInOut() function to create the 
///		values for you.   Complex animations, such as overshoot and settle, are  fully allowed by combining the output 
///		of multiple EaseInOut() runs.


//////////////////////////////////////////////////////////////////////////////////////////////////////////
///
///		Setup Functions
///
//////////////////////////////////////////////////////////////////////////////////////////////////////////


//	Most values are self-explanitory.  Size and Pos are arrays, X first, Y second.  MoveRelative is true or false;
//	true means that the inputs here are relative to the position of the item when moved, false means absolute position within the 
//	container element.  Time is in milliseconds.  FrameRate is, oddly enough, the frames in one second.
function SetZoom(img, SmallImage, LargeImage, SmallSize, LargeSize, MoveRelative, SmallPos, LargePos, Time, FrameRate)
{
	var elem = document.getElementById(img);
	
	elem.SmallImage = SmallImage;
	elem.LargeImage = LargeImage;
	
	elem.CurrentFrame = 0;
	TotalFrames = Math.ceil(FrameRate / 1000 * Time);
	elem.TotalFrames = TotalFrames - 1;
	elem.FrameSpeed = Math.ceil(1000 / FrameRate);

	if (MoveRelative == 1)
	{
		SmallPos = [(parseInt(elem.style.left) + SmallPos[0]),(parseInt(elem.style.top) + SmallPos[1])];
		LargePos = [(parseInt(elem.style.left) + LargePos[0]),(parseInt(elem.style.top) + LargePos[1])];
	}

	elem.PosAnimation = new Array(TotalFrames);
	elem.PosAnimation[0] = SmallPos;
	elem.PosAnimation[TotalFrames - 1] = LargePos;

	elem.SizeAnimation = new Array(TotalFrames);
	elem.SizeAnimation[0] = SmallSize;
	elem.SizeAnimation[TotalFrames - 1] = LargeSize;

	
	if (TotalFrames > 2)
	{
		var frem = TotalFrames -2;
		for (i=1; i <= frem; i++)
		{
			elem.PosAnimation[i] = [easeInOut(SmallPos[0],LargePos[0],TotalFrames,i+1,1), easeInOut(SmallPos[1],LargePos[1],TotalFrames,i+1,1)];
			elem.SizeAnimation[i] = [easeInOut(SmallSize[0],LargeSize[0],TotalFrames,i+1,1), easeInOut(SmallSize[1],LargeSize[1],TotalFrames,i+1,1)];
		}
	}
}

function SetSlide(box, ElementWidth, ElementShow, ElementTotal, Time, FrameRate)
{
	var elem = document.getElementById(box);
	
	elem.CurrentFrame = 0;
	elem.ElementFrames = Math.ceil(FrameRate / 1000 * Time);
	elem.FrameSpeed = Math.ceil(1000 / FrameRate);
	
	elem.ElementWidth = ElementWidth;
	elem.ElementShow = ElementShow;
	elem.LastShow = ElementShow;
	elem.ElementTotal = ElementTotal;
	
	elem.Animating = 0;
}


function Zoom(image, direction)
{
// imgage	= the ID of whatever image you wish to zoom
// direction	= either "up" or "down" as input; anything else does nothing

	var elem = document.getElementById(image);

	// Cleaning up after partial runs and/or fucked up errors that might have happened.
	if (elem.Animate) window.clearInterval(elem.Animate);
	if (elem.CurrentFrame < 0) elem.CurrentFrame = 0;
	if (elem.CurrentFrame > elem.TotalFrames) elem.CurrentFrame = elem.TotalFrames;

	if (direction == "up")
	{
		elem.style.zIndex = 3;
		elem.src = elem.LargeImage;
	
		elem.Animate = window.setInterval(
			function()
			{
				elem.CurrentFrame++;

				elem.style.width = elem.SizeAnimation[elem.CurrentFrame][0] + "px";
				elem.style.height = elem.SizeAnimation[elem.CurrentFrame][1] + "px";
				elem.style.left = elem.PosAnimation[elem.CurrentFrame][0] + "px";
				elem.style.top = elem.PosAnimation[elem.CurrentFrame][1] + "px";
				
				if (elem.CurrentFrame >= elem.TotalFrames) window.clearInterval(elem.Animate);
			}
			, elem.FrameSpeed)
	
	}
	
	if (direction == "down")
	{
		elem.Animate = window.setInterval(
			function()
			{
				elem.CurrentFrame = elem.CurrentFrame - 1;

				elem.style.width = elem.SizeAnimation[elem.CurrentFrame][0] + "px";
				elem.style.height = elem.SizeAnimation[elem.CurrentFrame][1] + "px";
				elem.style.left = elem.PosAnimation[elem.CurrentFrame][0] + "px";
				elem.style.top = elem.PosAnimation[elem.CurrentFrame][1] + "px";
				
				if (elem.CurrentFrame <= 0) window.clearInterval(elem.Animate);
			}
			, elem.FrameSpeed)
		
		elem.style.zIndex = 1;
		elem.src = elem.SmallImage;
	}

}


function BannerSlide(box, direction)
{
	var elem = document.getElementById(box);

	// Check if in the middle of an animation, and if so, to do nothing instead.  Then, if not animatin, to clear the Interval so that a new animation can occur.
	if (elem.Animating) direction = "null";
	else if (elem.Animate) window.clearInterval(elem.Animate);

	if (direction == "left")
	{
		if (elem.LastShow > elem.ElementShow)
		{
			elem.CurrentFrame = 0;
			elem.Animating = 1;
			var OriginLeft = parseInt(elem.style.left);
			var CurrentLeft = OriginLeft;
			var TargetLeft = OriginLeft + elem.ElementWidth;
			
			elem.Animate = window.setInterval(
				function()
				{
					elem.CurrentFrame = elem.CurrentFrame + 1;
	
					elem.style.left = easeInOut(OriginLeft,TargetLeft,elem.ElementFrames,elem.CurrentFrame,1) + "px";
					
					if (elem.CurrentFrame > elem.ElementFrames) 
					{
						window.clearInterval(elem.Animate);
						elem.Animating = 0;
					}
				}
				, elem.FrameSpeed)
			elem.LastShow = elem.LastShow - 1;
		}
	}

	if (direction == "right")
	{
		if (elem.LastShow < elem.ElementTotal)
		{
			elem.CurrentFrame = 0;
			elem.Animating = 1;
			var OriginLeft = parseInt(elem.style.left);
			var CurrentLeft = OriginLeft;
			var TargetLeft = OriginLeft - elem.ElementWidth;
			
			elem.Animate = window.setInterval(
				function()
				{
					elem.CurrentFrame = elem.CurrentFrame + 1;
	
					elem.style.left = easeInOut(OriginLeft,TargetLeft,elem.ElementFrames,elem.CurrentFrame,1) + "px";
					
					if (elem.CurrentFrame > elem.ElementFrames) 
					{
						window.clearInterval(elem.Animate);
						elem.Animating = 0;
					}
				}
				, elem.FrameSpeed)
			elem.LastShow = elem.LastShow + 1;
		}
	}

}


/// Support Functions


/*
This generic animation step value churner is my best friend. We can simply give minValue / maxValue, the totalSteps of the animation, 
and the actual step we request the value of, with a power (powr) so we can decide for ease-in and ease-out type values: powr > 1 produces 
ease-in, < 1 produces ease-out, = 1 produces linear animations. By increasing the actualStep in every animation step, we simply have each 
animation value on request. Choosing between ease-in and ease-out is enough for me, but you can prepare a function that will return an 
ease-in + ease-out values, or you can break the animation into two parts and use this cute(!) little function.
*/
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) { 
//Generic Animation Step Value Generator By www.hesido.com 
    var delta = maxValue - minValue; 
    var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta); 
    return Math.ceil(stepp) 
    }