/*
=======  Animation Object =========
Create a new animation with:

var exhibit = new animation( image_list, delay, image_element_id, loading_message_id )

where 'image_list' contains the array of filenames for the images, 'delay' is the number of seconds between each image change, 'image_element_id' contains the id attribute of the image element on the page to be used to show the animation and 'loading_message_id' contains the id attribute of the div containing the message to be shown while the images are downloaded.

Once the animation object is create two methods are available:

exhibit.start()

will download all the images and then start the animation, whereas

exhibit.preload_images()

will just download the images, but not start the animation.
*/

// Global variables to work around Javascript not allowing events and timers to be objects.
// This limits each page to contain only one animation.
var preload_count = 0;
var instance_name = 'exhibit';

function animation ( image_list, delay, img_id, load_msg_id ) {
		// 
		this.message_id = load_msg_id;
		// Store number of images contained in image list and work out percentage 
		this.image_list = image_list;
		this.active_image = 0;
		this.percent_increment = Math.round( 100 / this.image_list.length );
		// 
		this.image_id = img_id;
		this.delay = delay;
		}

animation.prototype.start = function () {
		this.preload_only = false;
		this.preload_images ();
		}

animation.prototype.preload_images = function () {
		// Set up download message if relevant
		this.download_message = document.getElementById ( this.message_id );
		if ( this.download_message ) {
			this.download_percent = document.createTextNode ( ' - 0%' );
			this.download_message.appendChild ( this.download_percent );
			var progress_bar = document.createElement( 'div' );
			progress_bar.setAttribute ( 'id', 'download_progress_bar' );
			this.download_bar = document.createElement( 'div' );
			this.download_bar.setAttribute ( 'id', 'download_inside_bar' );
			progress_bar.appendChild( this.download_bar );
			this.download_message.appendChild ( progress_bar );
			// Set timer to display message after two seconds. 
			this.download_message_timer = window.setTimeout( instance_name+'.display_loading_message()', 2000 );
			}
		// Start loading images into browser cache for smooth animation
		this.preload = new Image;
		this.preload.onload = preload_next;
		if ( this.preload_only == null ) {
			this.preload_only = true; }
		preload_count = 0;
		window.setTimeout( instance_name + '.preload.src = ' + instance_name + '.image_list[ preload_count ]', 1 );
		}		

function preload_next ( ) {
		preload_count ++;
		// Show progress
		exhibit.update_loading_message();
		if ( preload_count  == image_list.length )
			{ exhibit.animate();
			return;
			}
		window.setTimeout( instance_name + '.preload.src = ' + instance_name + '.image_list[ preload_count ]', 1 );
		}

animation.prototype.animate = function () {
		// Hide download message after two seconds.
		if ( this.download_message ) {
			window.setTimeout ( instance_name + '.hide_loading_message()', 2000 );
			}
		// Set timer to animate images.
		if ( !this.preload_only ) {
			window.setInterval ( instance_name+'.rotate_image()' , this.delay * 1000 );
			}
		}

animation.prototype.rotate_image = function () {
		this.active_image ++;
		if ( this.active_image >= this.image_list.length )
			{ this.active_image = 0 }
		var image = document.getElementById( this.image_id );
		image.src = this.image_list[ this.active_image ];
		}

animation.prototype.update_loading_message = function () {
		if ( this.download_message ) {
			var percent_progress = preload_count * this.percent_increment;
			if ( percent_progress > 100 ) { percent_progress = 100 };
			this.download_percent.nodeValue = ' - ' + percent_progress + '%';
			this.download_bar.style.width = percent_progress + '%';
			if ( (preload_count == this.image_list.length) && this.download_message_timer ) {
				window.clearTimeout( this.download_message_timer );
				}
			}
		}

animation.prototype.display_loading_message = function () {
		this.download_message.style.display = 'block';
		}

animation.prototype.hide_loading_message = function () {
		this.download_message.style.display = 'none';
		}