function getDivById(divid)
{
	var div = document.getElementById(divid);
	if (div == null)
	{
		alert("ERROR: Could not find div with id \"" + divid + "\".");
	}
	return div;
};

function ImageEvent(imageSrc, action)
{
	this.imageSrc = imageSrc;
	this.action = action;
}

function ImageScroller(name, containerid, timePerAnimation, stepsPerAnimation, imageHeight, imageWidth)
{
	this.debug = false;
	
	this.name = name;

	this.divContainer = getDivById(containerid);
	this.timePerAnimation = timePerAnimation;
	this.stepsPerAnimation = stepsPerAnimation;
	this.imageHeight = imageHeight;
	this.imageWidth = imageWidth;
	
	this.divViewWindow = null;
	this.divAnimationWindow = null;
	this.image1 = null;
	this.image2 = null;
	
	this.events = new Array();
	this.eventInMotion = false;
	
	this.init = function()
	{		
		var innerHtml = "";
		innerHtml += "<div id='ImageScrollerViewWindow'>";
		innerHtml += "<div id='ImageScrollerAnimationWindow'>";
		innerHtml += "	<img id='ImageScrollerImage1'>";
		innerHtml += "	<img id='ImageScrollerImage2'>";
		innerHtml += "</div></div>";
		
		this.divContainer.innerHTML += innerHtml;
		
		this.divViewWindow = getDivById('ImageScrollerViewWindow');
		this.divAnimationWindow = getDivById('ImageScrollerAnimationWindow');
		this.image1 = getDivById('ImageScrollerImage1');
		this.image2 = getDivById('ImageScrollerImage2');
		
		this.divViewWindow.style.width = this.imageWidth + "px";
		this.divViewWindow.style.height = this.imageHeight + "px";
		this.divViewWindow.style.marginLeft = 'auto';
		this.divViewWindow.style.marginRight = 'auto';
		this.divViewWindow.style.position = 'absolute';
		this.divViewWindow.style.zIndex = 7;
		this.image1.style.top = 0 + "px";
		this.image1.style.left = 0 + "px";
		
		this.divAnimationWindow.style.width = (this.imageWidth * 3) + "px";
		this.divAnimationWindow.style.height = (this.imageHeight * 3) + "px";
		this.divAnimationWindow.style.position = 'absolute';
		this.divAnimationWindow.style.top = '-' + this.imageHeight + "px";
		this.divAnimationWindow.style.left = '-' + this.imageWidth + "px";
		this.divAnimationWindow.style.zIndex = 8;
		
		this.image1.style.width = this.imageWidth + "px";
		this.image1.style.height = this.imageHeight + "px";
		this.image1.style.position = 'absolute';
		this.image1.style.top = this.imageHeight + "px";
		this.image1.style.left = this.imageWidth + "px";
		this.image1.style.zIndex = 9;
		
		this.image2.style.width = this.imageWidth + "px";
		this.image2.style.height = this.imageHeight + "px";
		this.image2.style.position = 'absolute';
		this.image2.style.top = this.imageHeight + "px";
		this.image2.style.left = (this.imageWidth * 2) + "px";
		this.image2.style.zIndex = 9;
		
		this.divViewWindow.style.overflow = 'hidden';
		
		if (this.debug)
		{
			this.divViewWindow.style.overflow = 'visible';
			this.divViewWindow.style.backgroundColor = 'blue';
		}
	}
	
	this.showImage = function(imageSrc)
	{
		this.image1.src = imageSrc;
		this.image1.style.top = this.imageHeight + "px";
		this.image1.style.left = this.imageWidth + "px";
		this.divAnimationWindow.style.top = '-' + this.imageHeight + "px";
		this.divAnimationWindow.style.left = '-' + this.imageWidth + "px";
	}
	
	this.scrollImageFromLeft = function(imageSrc)
	{
		this.events.push(new ImageEvent(imageSrc, 'left'));
		this.startNextEvent(false);
	}
	
	this.scrollImageFromRight = function(imageSrc)
	{
		this.events.push(new ImageEvent(imageSrc, 'right'));
		this.startNextEvent(false);
	}
	
	this.scrollImageFromTop = function(imageSrc)
	{
		this.events.push(new ImageEvent(imageSrc, 'top'));
		this.startNextEvent(false);
	}
	
	this.scrollImageFromBottom = function(imageSrc)
	{
		this.events.push(new ImageEvent(imageSrc, 'bottom'));
		this.startNextEvent(false);
	}
	
	this.startNextEvent = function(previousAnimationIsFinished)
	{
		if (previousAnimationIsFinished == true)
		{
			this.eventInMotion = false;
		}
	
		if (this.eventInMotion)
		{
			return;
		}
	
		var event = this.events.shift();
		if (event == null)
		{
			return;
		}
		
		if (event.action == 'left')
		{
			this.image2.style.top = this.imageHeight + "px";
			this.image2.style.left = (this.imageWidth * 2) + "px";	
		}
		else if (event.action == 'right')
		{
			this.image2.style.top = this.imageHeight + "px";
			this.image2.style.left = 0 + "px";
		}
		else if (event.action == 'top')
		{
			this.image2.style.top = 0 + "px";
			this.image2.style.left = this.imageWidth + "px";
		}
		else if (event.action == 'bottom')
		{
			this.image2.style.top = (this.imageHeight * 2) + "px";
			this.image2.style.left = this.imageWidth + "px";
		}
		
		this.image2.src = event.imageSrc;
		
		this.scrollMode = event.action;
		
		this.eventInMotion = true;
		
		this.scrollImage();
	}
	
	this.scrollImage = function()
	{
		var keepMoving = true;
		
		if (this.scrollMode == 'left')
		{
			var newDim = this.divAnimationWindow.offsetLeft - (this.imageWidth / this.stepsPerAnimation);
			if (newDim <= (this.imageWidth * -2))
			{
				newDim = (this.imageWidth * -2);
				keepMoving = false;
			}

			this.divAnimationWindow.style.left = newDim + "px";

		}
		else if (this.scrollMode == 'right')
		{
			var newDim = this.divAnimationWindow.offsetLeft + (this.imageWidth / this.stepsPerAnimation);
			if (newDim >= 0)
			{
				newDim = 0;
				keepMoving = false;
			}
			
			this.divAnimationWindow.style.left = newDim + "px";
		}
		else if (this.scrollMode == 'top')
		{
			var newDim = this.divAnimationWindow.offsetTop + (this.imageHeight / this.stepsPerAnimation);
			if (newDim >= 0)
			{
				newDim = 0;
				keepMoving = false;
			}

			this.divAnimationWindow.style.top = newDim + "px";
		}
		else if (this.scrollMode == 'bottom')
		{
			var newDim = this.divAnimationWindow.offsetTop - (this.imageHeight / this.stepsPerAnimation);
			if (newDim <= (this.imageHeight * -2))
			{
				newDim = (this.imageHeight * -2);
				keepMoving = false;
			}

			this.divAnimationWindow.style.top = newDim + "px";
		}
		
		//alert(this.divAnimationWindow.style.left + this.scrollMode + " " + newDim);
		
		if (keepMoving)
		{
			window.setTimeout(this.name + ".scrollImage();", (this.timePerAnimation / this.stepsPerAnimation));
		}
		else
		{			
			//reset everything back to normal with image1 in the middle..
			this.showImage(this.image2.src);
			window.setTimeout(this.name + ".startNextEvent(true);", (this.timePerAnimation / this.stepsPerAnimation) * 3);
		}
	}
}