///////////////////////////////////////////////////////////////////////
// you can drop in as many images as you like here, they will load 
// and amimate in the order you load them.
function loadSlider()
{
	BionicleAnimator.preload("images/bluetext/frame1_18.gif", 680, 95);
	BionicleAnimator.preload("images/bluetext/frame2_18.gif", 680, 95);
	BionicleAnimator.preload("images/bluetext/frame3_18.gif", 680, 95);
	BionicleAnimator.slide();
}
// you should not need to edit anything below this
///////////////////////////////////////////////////////////////////////

function AnimatedImage(img)
{
	this.totalPauseFrames = 80;
	this.pauseX = 326;
	this.pauseY = 95;
	this.shrinkX = 290;
	this.zoomOffX = 271;
	this.width = 430;
	this.height = 72;
	this.currentWidth = 0;	
	this.arrayIndex = 0;
	this.z = "100";
	this.opacity = 100;
	this.animationId = false;
	this.isAnimating = false;
	this.pauseFrames = 100;
	this.x = 680;
	this.y = 95;
	this.imgObject = new Image();
	this.imgObject.src = img;
	this.image = document.createElement('img');
	this.image.src = this.imgObject.src;
	this.image.style.position = "absolute";
	this.image.style.top = this.y + "px";
	this.image.style.left = this.x + "px";
	this.image.style.width = this.currentWidth + "px";
	this.image.style.visibility = "hidden";
	this.image.style.zIndex = this.z;
	
	this.setX = function(val)
	{
		this.x = val;
		this.image.style.left = val + "px";
	};
	this.setY = function(val)
	{
		this.y = val;
		this.image.style.top = val + "px";
	};
	this.alpha = function(a)
	{
		this.image.style.opacity = a/100+"";
		this.image.style.filter = "alpha("+a+")";
	}
	this.slide = function()
	{	
		this.image.style.visibility = "visible";
		this.image.style.zIndex = "100";	
		if (this.x < this.shrinkX)
		{
			// should start shrink
			this.currentWidth = this.rapidDecelerate(this.currentWidth, 0);
			this.image.style.width = this.currentWidth + "px";
			this.image.style.height = this.height + "px";
		}
		else
		{
			this.currentWidth = this.rapidDecelerate(this.currentWidth,this.width);
			this.image.style.width = this.currentWidth + "px";
			this.image.style.height = this.height + "px";
		}
		
		// check for reset state first
		if (this.x == this.zoomOffX)
		{
			this.resetSlide();
		}
		else if (this.x > this.pauseX)
		{
			var newX = this.decelerate(this.x, this.pauseX)
			this.setX(newX);
		}
		else if (this.pauseFrames == 1)
		{
			this.pauseFrames --;
			var nextImg = this.arrayIndex + 1 < BionicleAnimator.images.length ? this.arrayIndex + 1 : 0;
			
			BionicleAnimator.images[nextImg].animationId = 
				setInterval(function() { 
					BionicleAnimator.images[nextImg].slide() 
			},60);
		}
		else if (this.pauseFrames == 0)
		{
			var newX = this.decelerate(this.x, this.zoomOffX);
			this.setX(newX);
		}
		else
		{
			this.pauseFrames --;
		}
	};
	this.resetSlide = function()
	{
		clearInterval(this.animationId);
		this.animationId = false;
		this.image.style.visibility = "hidden";
		this.setX(680);
		this.pauseFrames = this.totalPauseFrames;
	};
	this.decelerate = function (from, to)
	{
		var n = Math.floor(from - ( (from - to ) * .4 ));
		if (n > 0) return n;
		else return 0;
	};
	this.rapidDecelerate = function (from, to)
	{
		var n = Math.floor(from - ( (from - to ) * .7 ));
		if (n > 0) return n;
		else return 0;
	};
}

function ref(id)
{
	return document.getElementById(id) ? document.getElementById(id) : false;
}

var BionicleAnimator =
{
	images: new Array(),
	preload: function(path, x ,y)
	{
		var i = new AnimatedImage(path);
		i.arrayIndex = this.images.length;
		i.setX(x);
		i.setY(y);	
		this.images.push(i);
		ref('content').appendChild(i.image);
	},
	initSlide: function()
	{
		BionicleAnimator.images[0].animationId = setInterval( 
				function() 
				{ 
					BionicleAnimator.images[0].slide(); 
				}
			,60);
	},
	slide: function()
	{
		// allow 1 second for image load catch up
		setTimeout("BionicleAnimator.initSlide()", 1000);	
	}	
};