document.observe('dom:loaded', function () {
	$$('div[application="jake_slideshow"]').each(function (container) {
		new ImagesSlideshowJake(container);
	});
});

var ImagesSlideshowJake = Class.create();
ImagesSlideshowJake.prototype = {
	
	//===================================================================
	//=== SETUP THE SLIDE SHOW
	//===================================================================
	initialize: function (container) {
		
		//extend the container
		this.container = $(container);
		
		//some preset vars
		this.auto_change = false;
		this.current_frame = 0;
		this.active_effect = false;
		this.show_toolkit = false;
		this.show_toolkit_timeout = false;
		
		//get the total frames in the slide show
		this.total_frames = 0;
		container.select('[slideshow="frame"]').each(function(element) {
			this.total_frames++;
		}.bind(this));
		
		//get more attributes for the slideshow
		this.timeout = this.container.getAttribute('timeout');
		this.repeat = this.container.getAttribute('repeat');
		this.fadetime = this.container.getAttribute('fadetime');
		
		//some aatributes that need a little processing
		switch (this.container.getAttribute('effect')) {
			case 'fade':
				this.effect_out = 'Fade';
				this.effect_in = 'Appear';
				break;
			case 'blind':
				this.effect_out = 'BlindUp';
				this.effect_in = 'BlindDown';
				break;
			case 'slide':
				this.effect_out = 'SlideUp';
				this.effect_in = 'SlideDown';
				break;
			case 'grow':
				this.effect_out = 'Shrink';
				this.effect_in = 'Grow';
				break;
			case 'drop':
				this.effect_out = 'DropOut';
				this.effect_in = 'Appear';
				break;
		}
		
		//get the elements of the buttons in the toolkit
		this.container.select('[slideshow="toolkit"]').each(function(element) {
			this.toolkit_container = $(element);
		}.bind(this));
		this.container.select('[slideshow="toolkit_previous"]').each(function(button) {
			this.toolkit_previous = $(button);
		}.bind(this));
		this.container.select('[slideshow="toolkit_next"]').each(function(button) {
			this.toolkit_next = $(button);
		}.bind(this));
		this.container.select('[slideshow="toolkit_stop"]').each(function(button) {
			this.toolkit_stop = $(button);
		}.bind(this));
		
		//load the toolkit
		this.load_toolkit();
		
		//start the slideshow
		this.start();
		
		//start preloading all the images
		this.preload_images();
		
	},
	
	//===================================================================
	//=== LOAD THE TOOLKIT AND ATTACH THE EVENTS
	//===================================================================
	load_toolkit: function() {
		
		//ATTACH EVENTS TO THE BUTTONS
		this.toolkit_previous.observe('click', function () {
			this.stop();
			this.previous();
			this.toolkit_stop.setAttribute('title', 'play');
			this.toolkit_stop.src = '../images/javascript-slideshow/play.png';
		}.bindAsEventListener(this));
		this.toolkit_next.observe('click', function () {
			this.stop();
			this.next();
			this.toolkit_stop.setAttribute('title', 'play');
			this.toolkit_stop.src = '../images/javascript-slideshow/play.png';
		}.bindAsEventListener(this));
		
		this.toolkit_stop.observe('click', function () {
			if (this.toolkit_stop.getAttribute('title') == 'pause') {
				//start it again
				this.stop();
				this.toolkit_stop.setAttribute('title', 'play');
				this.toolkit_stop.src = '../images/javascript-slideshow/play.png';
				} else {
				this.toolkit_stop.setAttribute('title', 'pause');
				this.toolkit_stop.src = '../images/javascript-slideshow/pause.png';
				this.start();
			}
		}.bindAsEventListener(this));
		
		//SHOW AND HIDE THE TOOLKIT (Uses a 0.5 second delay when moving off the overlay)
		
		//attach the mousemove event to ALL tags within the container to prevent them firing the mouseout event
		this.container.select('*').each(function(element) {
			element.observe('mousemove', 
				function() {
					clearTimeout(this.show_toolkit_timeout);
					this.show_toolkit = true;
					if (this.toolkit_container.visible() == false) {
						this.toolkit_container.visualEffect('Appear', { duration:0.5 });
					}
				}.bind(this)
			);
		}.bind(this));
		
		//when mouseout of the overlay,  hide the toolkit after 0.4 seconds
		this.container.observe('mouseout', 
			function() {
				this.show_toolkit = false;
				this.show_toolkit_timeout = setTimeout(function() {
					if (this.show_toolkit == false) {
						if (this.toolkit_container.visible() == true) {
							this.toolkit_container.visualEffect('Fade', { duration:0.4 });
						}
					}
				}.bind(this), 500);
			}.bind(this)
		);
		
		
	},
	
	//===================================================================
	//=== START SLIDE SHOW
	//===================================================================
	start: function() {
		this.auto_change = setInterval(function () {
			this.next();
		}.bind(this), this.timeout * 1000);
	},
	
	//===================================================================
	//=== STOP SLIDE SHOW
	//===================================================================
	stop: function() {
		clearInterval(this.auto_change);
	},
	
	//===================================================================
	//=== LOAD NEXT SLIDE
	//===================================================================
	next: function() {
		
		if (this.active_effect) {
			return '';
		}
		this.active_effect = true;
		
		this.container.down('[slideshow="frame"]', this.current_frame).visualEffect(this.effect_out, { duration: this.fadetime, afterFinish: function () {
				//workout what the next frame is 
				var next_frame = this.current_frame+1;
				if (next_frame >= this.total_frames) {
					next_frame = 0;
				}
				this.current_frame = next_frame;
				this.container.down('[slideshow="frame"]', this.current_frame).visualEffect(this.effect_in, { duration: this.fadetime, 
					afterFinish: function () {
						this.active_effect = false;
					}.bind(this)
				} );
			}.bind(this)
		});
		
	},
	
	//===================================================================
	//=== LOAD PREIOUS SLIDE
	//===================================================================
	previous: function() {
		
		if (this.active_effect) {
			return '';
		}
		this.active_effect = true;
		
		this.container.down('[slideshow="frame"]', this.current_frame).visualEffect(this.effect_out, { duration: this.fadetime, afterFinish: function () {
				//workout what the next frame is 
				var previous_frame = this.current_frame-1;
				if (previous_frame < 0) {
					previous_frame = this.total_frames - 1;
				}
				this.current_frame = previous_frame;
				this.container.down('[slideshow="frame"]', this.current_frame).visualEffect(this.effect_in, { duration: this.fadetime, 
					afterFinish: function () {
						this.active_effect = false;
					}.bind(this)
				} );
			}.bind(this)
		});
		
	},
	
	//===================================================================
	//=== PRE-LOAD IMAGES FROM SLIDES
	//===================================================================
	preload_images: function () {
		this.container.select('img').each(function (image) {
			var preload = new Image();
			preload.src = image.src;
		});
	}
	
}