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

var ImagesSlideshow = Class.create();
ImagesSlideshow.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.toolkit_container = false;
		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, only if the toolkit was found
		if (this.toolkit_container !== false) {
			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.gif';
		}.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.gif';
		}.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.gif';
				} else {
				this.toolkit_stop.setAttribute('title', 'pause');
				this.toolkit_stop.src = 'images/javascript-slideshow/pause.gif';
				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;
		});
	}
	
}













var ImagesCarousel = Class.create();
ImagesCarousel.prototype = {
	
	//===================================================================
	//=== SETUP THE SLIDE SHOW
	//===================================================================
	initialize: function (container) {
		
		//extend the container
		this.container = $(container);
		
		//says if it is currently animating a change of picture
		this.carousel_activity = false;
		
		//find left arrow
		this.container.down('div[type="left"]', 0).observe('click', function() {
			
			if (this.carousel_activity == false) {
				
				this.carousel_activity = true;
				
				//get left image
				left_image = this.container.select('div[type="active"]')[0];
				left_image.writeAttribute('type', 'pending');
				
				//get right image
				right_image = this.container.select('div[type="active"]').last().next();
				right_image.writeAttribute('type', 'active');
				
				//left arrow clicked, so fade left active image then appear next active image
				left_image.down(1).fade({
					
					duration:0.5, 
					afterFinish:function () {
						//right_image.setStyle({display:'inline', visibility:'hidden'});
						right_image.down(1).appear({duration:0.5, afterFinish: function() { this.carousel_activity = false; }.bind(this) });
					}.bind(this)
					
				});
				
				//see if need to hide the left arrow because there are no more images
				if (right_image.next().readAttribute('type') == 'right') {
					//hide the arrow!
					this.container.down('div[type="left"]', 0).setStyle({visibility:'hidden'});
					} else {
					//hide the arrow!
					this.container.down('div[type="right"]', 0).setStyle({visibility:'visible'});
				}
				
			}
			
		}.bindAsEventListener(this));
		
		//find right arrow
		this.container.down('div[type="right"]', 0).observe('click', function() {
			
			if (this.carousel_activity == false) {
				
				this.carousel_activity = true;
				
				//get next image to show
				right_image = this.container.select('div[type="active"]').last();
				right_image.writeAttribute('type', 'pending');
				
				//get starting image
				left_image = this.container.select('div[type="active"]')[0].previous();
				left_image.writeAttribute('type', 'active');
				
				//left arrow clicked, so fade left active image then appear next active image
				right_image.down(1).fade({
					
					duration:0.5, 
					afterFinish:function () {
						//right_image.setStyle({display:'inline', visibility:'hidden'});
						left_image.down(1).appear({duration:0.5, afterFinish: function() { this.carousel_activity = false; }.bind(this) });
					}.bind(this)
					
				});
				
				//see if need to hide the left arrow because there are no more images
				if (left_image.previous().readAttribute('type') == 'left') {
					//hide the arrow!
					this.container.down('div[type="right"]', 0).setStyle({visibility:'hidden'});
					} else {
					//hide the arrow!
					this.container.down('div[type="left"]', 0).setStyle({visibility:'visible'});
				}
				
			}
			
		}.bindAsEventListener(this));
		
	}
	
}























document.observe('dom:loaded', function () {
	$$('span[rel="editable"]').each(function (item) {
		if (item.innerHTML == '') {
			item.update('(No Content Entered)');
		}
		if (parseInt(item.readAttribute('rows')) > 1) {
			new Ajax.InPlaceEditor(item, '?inline_edit=update&id=' + item.readAttribute('id'), 
				{ 
					rows: parseInt(item.readAttribute('rows')),
					cols: parseInt(item.readAttribute('cols')),
					externalControlOnly: true,
					cancelControl: 'button',
					textBetweenControls: ' ',
					okText: 'Save',
					cancelText: 'Cancel',
					highlightcolor: item.readAttribute('color_over'),
					highlightendcolor: item.readAttribute('color_out'),
					onLeaveEditMode: function (tmp) {
						tmp.element.update(tmp.element.innerHTML.replace(/<br>/ig, ''));
						tmp.element.update(tmp.element.innerHTML.replace(/\n/ig, '<br />\n'));
						tmp.hide();
					},
					onEnterEditMode: function (tmp) {
						tmp.element.update(tmp.element.innerHTML.replace(/<br>/ig, ''));
						tmp.element.update(tmp.element.innerHTML.replace(/<br \/>/ig, ''));
					}
				}
			);
			} else {
			new Ajax.InPlaceEditor(item, '?inline_edit=update&id=' + item.readAttribute('id'), 
				{ 
					size: parseInt(item.readAttribute('cols')),
					externalControlOnly: true,
					textBetweenControls: ' ',
					cancelControl: 'button',
					okText: 'Save',
					highlightcolor: item.readAttribute('color_over'),
					highlightendcolor: item.readAttribute('color_out'),
					cancelText: 'Cancel',
					onLeaveEditMode: function (tmp) {
						tmp.element.update(tmp.element.innerHTML.replace(/<br>/ig, ''));
						tmp.element.update(tmp.element.innerHTML.replace(/\n/ig, '<br />\n'));
						tmp.hide();
					},
					onEnterEditMode: function (tmp) {
						tmp.element.update(tmp.element.innerHTML.replace(/<br>/ig, ''));
						tmp.element.update(tmp.element.innerHTML.replace(/<br \/>/ig, ''));
					}
				}
			);
		}
		
	});
});