var talking_ants = false;

var ant_film =
{
	init: function()
	{
		ant_film.div = document.getElementById("ant_film");
		ant_film.frameWidth = 20;
		ant_film.frames = 80;
		ant_film.offsetX = -20;

		/* Create the start and stop buttons with event listeners 
		var start = document.getElementById("start");
		Core.addEventListener(start, "click", ant_film.clickStart);
		var stop = document.getElementById("stop");
		Core.addEventListener(stop, "click", ant_film.clickStop);
		
		var stopped = false;*/
		
		/* Include this code to run animation on opening the page */
		ant_film.animate();
	},
	
	clickStart: function()
	{
		/* Only start the animation if it's not already running so there aren't multiple instances */
		if (ant_film.offsetX == 0)
		{
			/* To start from frame 0, reset offsetX, else restart from the last drawn frame before Stop was clicked */
			/*ant_film.offsetX = 0;*/
			ant_film.timer = setTimeout(ant_film.animate, 100);
		}
		/* If the animation has been paused by the Stop button, restart it when Start is clicked */
		else if (stopped == true)
		{
			stopped = false;
			ant_film.timer = setTimeout(ant_film.animate, 100);
		}
	},
	
	clickStop: function()
	{
		if (ant_film.timer)
		{
			stopped = true;
			clearTimeout(ant_film.timer);
		}
	},
	
	animate: function()
	{
		if (talking_ants == true)
		{
			talking_ants = false;

			document.getElementById("ant_film").style.background = "#eeeeff url(backgrounds/ant3.png) no-repeat";
			ant_film.div.style.backgroundPosition = ant_film.offsetX + "px" + " 0";
			document.getElementById("ant_film2").style.background = "#eeeeff url(backgrounds/ant2.png) no-repeat";
			ant_film2.div.style.backgroundPosition = ant_film2.offsetX + "px" + " 0";

/*			setTimeout(setTimeout(ant_film.animate, 400), 3000);
			setTimeout(setTimeout(ant_film2.animate, 500), 3000);*/
		}

		ant_film.offsetX += ant_film.frameWidth;
		
		/* Use this code to play an infinite loop */
		if (ant_film.offsetX >= ant_film.frameWidth * ant_film.frames)
		{
			ant_film.offsetX = 0;
		}

		ant_film.div.style.backgroundPosition = ant_film.offsetX + "px" + " 0";
		
		ant_film.timer = setTimeout(ant_film.animate, 100);
		
		/* Use this code to play the animation once then stop */
		/*if (ant_film.offsetX <= -ant_film.frameWidth * ant_film.frames)
		{*/
			/* Display the last frame when the animation stops */
			/*ant_film.offsetX += ant_film.frameHeight;
			ant_film.div.style.backgroundPosition = ant_film.offsetX + "px" + " 0";*/

			/* Reset the frame for the next time Start is clicked */
			/*ant_film.offsetX = 0;*/

			/* Stop the animation */
			/*clearTimeout(ant_film.timer);*/
		/*}*/
	}
}

var ant_film2 =
{
	init: function()
	{
		ant_film2.div = document.getElementById("ant_film2");
		ant_film2.frameWidth = 20;
		ant_film2.frames = 80;
		ant_film2.offsetX = 1600;

		/* Include this code to run animation on opening the page */
		ant_film2.animate();
	},
	
	animate: function()
	{
		ant_film2.offsetX -= ant_film2.frameWidth;
		
		/* Use this code to play an infinite loop */
		if (ant_film2.offsetX <= 0)
		{
			ant_film2.offsetX = 1600;
		}

		ant_film2.div.style.backgroundPosition = ant_film2.offsetX + "px" + " 0";
		
		ant_film2.timer = setTimeout(ant_film2.animate, 125);

		/* Create a little interation between the 2 ants if both are displayed */
		if (ant_film2.offsetX == ant_film.offsetX)
		{
			document.getElementById("ant_film").style.background = "#eeeeff url(backgrounds/ant4.png) no-repeat"
			ant_film.div.style.backgroundPosition = ant_film.offsetX + "px" + " 0";
			document.getElementById("ant_film2").style.background = "#eeeeff url(backgrounds/ant5.png) no-repeat";
			ant_film2.div.style.backgroundPosition = ant_film2.offsetX + "px" + " 0";

			talking_ants = true;
		}
	}
}

/* Ensure the javascript only runs on completion of page load */
Core.start(ant_film);
Core.start(ant_film2);