/**
 * Copyright (c) 2009 Anders Ekdahl (http://coffeescripter.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.2.2
 *
 * Demo and documentation: http://coffeescripter.com/code/ad-gallery/
 */
(function($) {
	$.fn.adGallery = function(options) {
		var defaults = { loader_image: 'loader.gif',
			start_at_index: 0,
			thumb_opacity: 0.7,
			animate_first_image: false,
			animation_speed: 400,
			width: false,
			height: false,
			display_next_and_prev: true,
			display_back_and_forward: true,
			scroll_jump: 0, // If 0, it jumps the width of the container
			slideshow: {
				enable: true,
				autostart: false,
				speed: 5000,
				start_label: 'Start',
				stop_label: 'Stop',
				stop_on_scroll: true,
				countdown_prefix: '(',
				countdown_sufix: ')',
				onStart: false,
				onStop: false
			},
			effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
			enable_keyboard_move: true,
			cycle: true,
			callbacks: {
				init: false,
				afterImageVisible: false,
				beforeImageVisible: false
			}
		};
		var settings = $.extend(false, defaults, options);
		if (options && options.slideshow) {
			settings.slideshow = $.extend(false, defaults.slideshow, options.slideshow);
		};
		if (!settings.slideshow.enable) {
			settings.slideshow.autostart = false;
		};
		var galleries = [];
		$(this).each(function() {
			var gallery = new AdGallery(this, settings);
			galleries[galleries.length] = gallery;
		});
		// Sorry, breaking the jQuery chain because the gallery instances
		// are returned so you can fiddle with them
		return galleries;
	};

	function VerticalSlideAnimation(img_container, direction, desc) {
		var current_top = parseInt(img_container.css('top'), 10);
		if (direction == 'left') {
			var old_image_top = '-' + this.image_wrapper_height + 'px';
			img_container.css('top', this.image_wrapper_height + 'px');
		} else {
			var old_image_top = this.image_wrapper_height + 'px';
			img_container.css('top', '-' + this.image_wrapper_height + 'px');
		};
		if (desc) {
			desc.css('bottom', '-' + desc[0].offsetHeight + 'px');
			desc.animate({ bottom: 0 }, this.settings.animation_speed * 2);
		};
		return { old_image: { top: old_image_top },
			new_image: { top: current_top}
		};
	};

	function HorizontalSlideAnimation(img_container, direction, desc) {
		var current_left = parseInt(img_container.css('left'), 10);
		if (direction == 'left') {
			var old_image_left = '-' + this.image_wrapper_width + 'px';
			img_container.css('left', this.image_wrapper_width + 'px');
		} else {
			var old_image_left = this.image_wrapper_width + 'px';
			img_container.css('left', '-' + this.image_wrapper_width + 'px');
		};
		if (desc) {
			desc.css('bottom', '-' + desc[0].offsetHeight + 'px');
			desc.animate({ bottom: 0 }, this.settings.animation_speed * 2);
		};
		return { old_image: { left: old_image_left },
			new_image: { left: current_left}
		};
	};

	function ResizeAnimation(img_container, direction, desc) {
		var image_width = img_container.width();
		var image_height = img_container.height();
		var current_left = parseInt(img_container.css('left'), 10);
		var current_top = parseInt(img_container.css('top'), 10);
		img_container.css({ width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2 });
		return { old_image: { width: 0,
			height: 0,
			top: this.image_wrapper_height / 2,
			left: this.image_wrapper_width / 2
		},
			new_image: { width: image_width,
				height: image_height,
				top: current_top,
				left: current_left}
			};
		};

		function FadeAnimation(img_container, direction, desc) {
			img_container.css('opacity', 0);
			return { old_image: { opacity: 0 },
				new_image: { opacity: 1}
			};
		};

		// Sort of a hack, will clean this up... eventually
		function NoneAnimation(img_container, direction, desc) {
			img_container.css('opacity', 0);
			return { old_image: { opacity: 0 },
				new_image: { opacity: 1 },
				speed: 0
			};
		};

		function AdGallery(wrapper, settings) {
			this.init(wrapper, settings);
		};
		AdGallery.prototype = {
			// Elements
			wrapper: false,
			image_wrapper: false,
			gallery_info: false,
			nav: false,
			loader: false,
			preloads: false,
			thumbs_wrapper: false,
			scroll_back: false,
			scroll_forward: false,
			next_link: false,
			prev_link: false,

			slideshow: false,
			image_wrapper_width: 0,
			image_wrapper_height: 0,
			current_index: 0,
			current_image: false,
			nav_display_width: 0,
			settings: false,
			images: false,
			in_transition: false,
			animations: false,
			init: function(wrapper, settings) {
				var context = this;
				this.wrapper = $(wrapper);
				this.settings = settings;
				this.setupElements();
				this.setupAnimations();
				if (this.settings.width) {
					this.image_wrapper_width = this.settings.width;
					this.image_wrapper.width(this.settings.width);
					this.wrapper.width(this.settings.width);
				} else {
					this.image_wrapper_width = this.image_wrapper.width();
				};
				if (this.settings.height) {
					this.image_wrapper_height = this.settings.height;
					this.image_wrapper.height(this.settings.height);
				} else {
					this.image_wrapper_height = this.image_wrapper.height();
				};
				this.nav_display_width = this.nav.width();
				this.current_index = 0;
				this.current_image = false;
				this.in_transition = false;
				this.findImages();
				if (this.settings.display_next_and_prev) {
					this.initNextAndPrev();
				};
				// The slideshow needs a callback to trigger the next image to be shown
				// but we don't want to give it access to the whole gallery instance
				var nextimage_callback = function(callback) {
					return context.nextImage(callback);
				};
				this.slideshow = new AdGallerySlideshow(nextimage_callback, this.settings.slideshow);
				this.controls.append(this.slideshow.create());
				if (this.settings.slideshow.enable) {
					this.slideshow.enable();
				} else {
					this.slideshow.disable();
				};
				if (this.settings.display_back_and_forward) {
					this.initBackAndForward();
				};
				if (this.settings.enable_keyboard_move) {
					this.initKeyEvents();
				};
				var start_at = this.settings.start_at_index;
				if (window.location.hash && window.location.hash.indexOf('#ad-image') === 0) {
					start_at = window.location.hash.replace(/[^0-9]+/g, '');
					// Check if it's a number
					if ((start_at * 1) != start_at) {
						start_at = this.settings.start_at_index;
					};
				};

				this.loading(true);
				this.showImage(start_at,
        function() {
        	// We don't want to start the slideshow before the image has been
        	// displayed
        	if (context.settings.slideshow.autostart) {
        		context.preloadImage(start_at + 1);
        		context.slideshow.start();
        	};
        }
      );
				this.fireCallback(this.settings.callbacks.init);
			},
			setupAnimations: function() {
				this.animations = {
					'slide-vert': VerticalSlideAnimation,
					'slide-hori': HorizontalSlideAnimation,
					'resize': ResizeAnimation,
					'fade': FadeAnimation,
					'none': NoneAnimation
				};
			},
			setupElements: function() {
				this.controls = this.wrapper.find('.ad-controls');
				this.gallery_info = $('<p class="ad-info"></p>');
				this.controls.append(this.gallery_info);
				this.image_wrapper = this.wrapper.find('.ad-image-wrapper');
				this.image_wrapper.empty();
				this.nav = this.wrapper.find('.ad-nav');
				this.thumbs_wrapper = this.nav.find('.ad-thumbs');
				this.preloads = $('<div class="ad-preloads"></div>');
				this.loader = $('<img class="ad-loader" src="' + this.settings.loader_image + '">');
				this.image_wrapper.append(this.loader);
				this.loader.hide();
				$(document.body).append(this.preloads);
			},
			loading: function(bool) {
				if (bool) {
					this.loader.show();
				} else {
					this.loader.hide();
				};
			},
			addAnimation: function(name, fn) {
				if ($.isFunction(fn)) {
					this.animations[name] = fn;
				};
			},
			findImages: function() {
				var context = this;
				this.images = [];
				var thumb_wrapper_width = 0;
				var thumbs_loaded = 0;
				var thumbs = this.thumbs_wrapper.find('a');
				var thumb_count = thumbs.length;
				if (this.settings.thumb_opacity < 1) {
					thumbs.find('img').css('opacity', this.settings.thumb_opacity);
				};
				thumbs.each(
        function(i) {
        	var link = $(this);
        	var image_src = link.attr('href');
        	var thumb = link.find('img');
        	// Check if the thumb has already loaded
        	if (!context.isImageLoaded(thumb[0])) {
        		thumb.load(
              function() {
              	thumb_wrapper_width += this.parentNode.parentNode.offsetWidth;
              	thumbs_loaded++;
              }
            );
        	} else {
        		thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth;
        		thumbs_loaded++;
        	};
        	link.addClass('ad-thumb' + i);
        	link.click(
            function() {
            	context.showImage(i);
            	context.slideshow.stop();
            	return false;
            }
          ).hover(
            function() {
            	if (!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
            		$(this).find('img').fadeTo(300, 1);
            	};
            	context.preloadImage(i);
            },
            function() {
            	if (!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
            		$(this).find('img').fadeTo(300, context.settings.thumb_opacity);
            	};
            }
          );
        	var desc = false;
        	if (thumb.data('ad-desc')) {
        		desc = thumb.data('ad-desc');
        	} else if (thumb.attr('longdesc') && thumb.attr('longdesc').length) {
        		desc = thumb.attr('longdesc');
        	};
        	var title = false;
        	if (thumb.data('ad-title')) {
        		title = thumb.data('ad-title');
        	} else if (thumb.attr('title') && thumb.attr('title').length) {
        		title = thumb.attr('title');
        	};
        	context.images[i] = { thumb: thumb.attr('src'), image: image_src, error: false,
        		preloaded: false, desc: desc, title: title, size: false
        	};
        }
      );
				// Wait until all thumbs are loaded, and then set the width of the ul
				var inter = setInterval(
        function() {
        	if (thumb_count == thumbs_loaded) {
        		context.nav.find('.ad-thumb-list').css('width', thumb_wrapper_width + 'px');
        		clearInterval(inter);
        	};
        },
        100
      );
			},
			initKeyEvents: function() {
				var context = this;
				$(document).keydown(
        function(e) {
        	if (e.keyCode == 39) {
        		// right arrow
        		context.nextImage();
        		context.slideshow.stop();
        	} else if (e.keyCode == 37) {
        		// left arrow
        		context.prevImage();
        		context.slideshow.stop();
        	};
        }
      );
			},
			initNextAndPrev: function() {
				this.next_link = $('<div class="ad-next"><div class="ad-next-image"></div></div>');
				this.prev_link = $('<div class="ad-prev"><div class="ad-prev-image"></div></div>');
				this.image_wrapper.append(this.next_link);
				this.image_wrapper.append(this.prev_link);
				var context = this;
				this.prev_link.add(this.next_link).mouseover(
        function(e) {
        	// IE 6 hides the wrapper div, so we have to set it's width
        	$(this).css('height', context.image_wrapper_height);
        	$(this).find('div').show();
        }
      ).mouseout(
        function(e) {
        	$(this).find('div').hide();
        }
      ).click(
        function() {
        	if ($(this).is('.ad-next')) {
        		context.nextImage();
        		context.slideshow.stop();
        	} else {
        		context.prevImage();
        		context.slideshow.stop();
        	};
        }
      ).find('div').css('opacity', 0.7);
			},
			initBackAndForward: function() {
				var context = this;
				this.scroll_forward = $('<div class="ad-forward"></div>');
				this.scroll_back = $('<div class="ad-back"></div>');
				this.nav.append(this.scroll_forward);
				this.nav.prepend(this.scroll_back);
				var has_scrolled = 0;
				var thumbs_scroll_interval = false;
				$(this.scroll_back).add(this.scroll_forward).click(
        function() {
        	// We don't want to jump the whole width, since an image
        	// might be cut at the edge
        	var width = context.nav_display_width - 50;
        	if (context.settings.scroll_jump > 0) {
        		var width = context.settings.scroll_jump;
        	};
        	if ($(this).is('.ad-forward')) {
        		var left = context.thumbs_wrapper.scrollLeft() + width;
        	} else {
        		var left = context.thumbs_wrapper.scrollLeft() - width;
        	};
        	if (context.settings.slideshow.stop_on_scroll) {
        		context.slideshow.stop();
        	};
        	context.thumbs_wrapper.animate({ scrollLeft: left + 'px' });
        	return false;
        }
      ).css('opacity', 0.6).hover(
        function() {
        	var direction = 'left';
        	if ($(this).is('.ad-forward')) {
        		direction = 'right';
        	};
        	thumbs_scroll_interval = setInterval(
            function() {
            	has_scrolled++;
            	// Don't want to stop the slideshow just because we scrolled a pixel or two
            	if (has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) {
            		context.slideshow.stop();
            	};
            	var left = context.thumbs_wrapper.scrollLeft() + 1;
            	if (direction == 'left') {
            		left = context.thumbs_wrapper.scrollLeft() - 1;
            	};
            	context.thumbs_wrapper.scrollLeft(left);
            },
            10
          );
        	$(this).css('opacity', 1);
        },
        function() {
        	has_scrolled = 0;
        	clearInterval(thumbs_scroll_interval);
        	$(this).css('opacity', 0.6);
        }
      );
			},
			_afterShow: function() {
				this.gallery_info.html((this.current_index + 1) + ' / ' + this.images.length);
				if (!this.settings.cycle) {
					// Needed for IE
					this.prev_link.show().css('height', this.image_wrapper_height);
					this.next_link.show().css('height', this.image_wrapper_height);
					if (this.current_index == (this.images.length - 1)) {
						this.next_link.hide();
					};
					if (this.current_index == 0) {
						this.prev_link.hide();
					};
				};
				this.fireCallback(this.settings.callbacks.afterImageVisible);
			},
			/**
			* Checks if the image is small enough to fit inside the container
			* If it's not, shrink it proportionally
			*/
			_getContainedImageSize: function(image_width, image_height) {
				if (image_height > this.image_wrapper_height) {
					var ratio = image_width / image_height;
					image_height = this.image_wrapper_height;
					image_width = this.image_wrapper_height * ratio;
				};
				if (image_width > this.image_wrapper_width) {
					var ratio = image_height / image_width;
					image_width = this.image_wrapper_width;
					image_height = this.image_wrapper_width * ratio;
				};
				return { width: image_width, height: image_height };
			},
			/**
			* If the image dimensions are smaller than the wrapper, we position
			* it in the middle anyway
			*/
			_centerImage: function(img_container, image_width, image_height) {
				img_container.css('top', '0px');
				if (image_height < this.image_wrapper_height) {
					var dif = this.image_wrapper_height - image_height;
					img_container.css('top', (dif / 2) + 'px');
				};
				img_container.css('left', '0px');
				if (image_width < this.image_wrapper_width) {
					var dif = this.image_wrapper_width - image_width;
					img_container.css('left', (dif / 2) + 'px');
				};
			},
			_getDescription: function(image) {
				var desc = false;
				if (image.desc.length || image.title.length) {
					var title = '';
					if (image.title.length) {
						title = '<strong class="ad-description-title">' + image.title + '</strong>';
					};
					var desc = '';
					if (image.desc.length) {
						desc = '<span>' + image.desc + '</span>';
					};
					desc = $('<p class="ad-image-description">' + title + desc + '</p>');
				};
				return desc;
			},
			/**
			* @param function callback Gets fired when the image has loaded, is displaying
			*                          and it's animation has finished
			*/
			showImage: function(index, callback) {
				if (this.images[index] && !this.in_transition) {
					var context = this;
					var image = this.images[index];
					this.in_transition = true;
					if (!image.preloaded) {
						this.loading(true);
						this.preloadImage(index, function() {
							context.loading(false);
							context._showWhenLoaded(index, callback);
						});
					} else {
						this._showWhenLoaded(index, callback);
					};
				};
			},
			/**
			* @param function callback Gets fired when the image has loaded, is displaying
			*                          and it's animation has finished
			*/
			_showWhenLoaded: function(index, callback) {
				if (this.images[index]) {
					var context = this;
					var image = this.images[index];
					var img_container = $(document.createElement('div')).addClass('ad-image');
					var img = $(new Image()).attr('src', image.image);
					img_container.append(img);
					this.image_wrapper.prepend(img_container);
					var size = this._getContainedImageSize(image.size.width, image.size.height);
					img.attr('width', size.width);
					img.attr('height', size.height);
					img_container.css({ width: size.width + 'px', height: size.height + 'px' });
					this._centerImage(img_container, size.width, size.height);
					var desc = this._getDescription(image, img_container);
					if (desc) {
						img_container.append(desc);
						var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10);
						desc.css('width', width + 'px');
					};
					this.highLightThumb(this.nav.find('.ad-thumb' + index));

					var direction = 'right';
					if (this.current_index < index) {
						direction = 'left';
					};
					this.fireCallback(this.settings.callbacks.beforeImageVisible);
					if (this.current_image || this.settings.animate_first_image) {
						var animation_speed = this.settings.animation_speed;
						var easing = 'swing';
						var animation = this.animations[this.settings.effect].call(this, img_container, direction, desc);
						if (typeof animation.speed != 'undefined') {
							animation_speed = animation.speed;
						};
						if (typeof animation.easing != 'undefined') {
							easing = animation.easing;
						};
						if (this.current_image) {
							var old_image = this.current_image;
							old_image.animate(animation.old_image, animation_speed, easing,
              function() {
              	old_image.remove();
              }
            );
						};
						img_container.animate(animation.new_image, animation_speed, easing,
            function() {
            	context.current_index = index;
            	context.current_image = img_container;
            	context.in_transition = false;
            	context._afterShow();
            	context.fireCallback(callback);
            }
          );
					} else {
						this.current_index = index;
						this.current_image = img_container;
						this.in_transition = false;
						context._afterShow();
						this.fireCallback(callback);
					};
				};
			},
			nextIndex: function() {
				if (this.current_index == (this.images.length - 1)) {
					if (!this.settings.cycle) {
						return false;
					};
					var next = 0;
				} else {
					var next = this.current_index + 1;
				};
				return next;
			},
			nextImage: function(callback) {
				var next = this.nextIndex();
				if (next === false) return false;
				this.preloadImage(next + 1);
				this.showImage(next, callback);
				return true;
			},
			prevIndex: function() {
				if (this.current_index == 0) {
					if (!this.settings.cycle) {
						return false;
					};
					var prev = this.images.length - 1;
				} else {
					var prev = this.current_index - 1;
				};
				return prev;
			},
			prevImage: function(callback) {
				var prev = this.prevIndex();
				if (prev === false) return false;
				this.preloadImage(prev - 1);
				this.showImage(prev, callback);
				return true;
			},
			preloadAll: function() {
				var context = this;
				var i = 0;
				function preloadNext() {
					if (i < context.images.length) {
						i++;
						context.preloadImage(i, preloadNext);
					};
				};
				context.preloadImage(i, preloadNext);
			},
			preloadImage: function(index, callback) {
				if (this.images[index]) {
					var image = this.images[index];
					if (!this.images[index].preloaded) {
						var img = $(new Image());
						img.attr('src', image.image);
						if (!this.isImageLoaded(img[0])) {
							this.preloads.append(img);
							var context = this;
							img.load(
              function() {
              	image.preloaded = true;
              	image.size = { width: this.width, height: this.height };
              	context.fireCallback(callback);
              }
            ).error(
              function() {
              	image.error = true;
              	image.preloaded = false;
              	image.size = false;
              }
            );
						} else {
							image.preloaded = true;
							image.size = { width: img[0].width, height: img[0].height };
							this.fireCallback(callback);
						};
					} else {
						this.fireCallback(callback);
					};
				};
			},
			isImageLoaded: function(img) {
				if (typeof img.complete != 'undefined' && !img.complete) {
					return false;
				};
				if (typeof img.naturalWidth != 'undefined' && img.naturalWidth == 0) {
					return false;
				};
				return true;
			},
			highLightThumb: function(thumb) {
				this.thumbs_wrapper.find('.ad-active').removeClass('ad-active');
				thumb.addClass('ad-active');
				if (this.settings.thumb_opacity < 1) {
					this.thumbs_wrapper.find('a:not(.ad-active) img').fadeTo(300, this.settings.thumb_opacity);
					thumb.find('img').fadeTo(300, 1);
				};
				var left = thumb[0].parentNode.offsetLeft;
				left -= (this.nav_display_width / 2) - (thumb[0].offsetWidth / 2);
				this.thumbs_wrapper.animate({ scrollLeft: left + 'px' });
			},
			fireCallback: function(fn) {
				if ($.isFunction(fn)) {
					fn.call(this);
				};
			}
		};

		function AdGallerySlideshow(nextimage_callback, settings) {
			this.init(nextimage_callback, settings);
		};
		AdGallerySlideshow.prototype = {
			start_link: false,
			stop_link: false,
			countdown: false,
			controls: false,

			settings: false,
			nextimage_callback: false,
			enabled: false,
			running: false,
			countdown_interval: false,
			init: function(nextimage_callback, settings) {
				var context = this;
				this.nextimage_callback = nextimage_callback;
				this.settings = settings;
			},
			create: function() {
				this.start_link = $('<span class="ad-slideshow-start">' + this.settings.start_label + '</span>');
				this.stop_link = $('<span class="ad-slideshow-stop">' + this.settings.stop_label + '</span>');
				this.countdown = $('<span class="ad-slideshow-countdown"></span>');
				this.controls = $('<div class="ad-slideshow-controls"></div>');
				this.controls.append(this.start_link).append(this.stop_link).append(this.countdown);
				this.countdown.hide();

				var context = this;
				this.start_link.click(
        function() {
        	context.start();
        }
      );
				this.stop_link.click(
        function() {
        	context.stop();
        }
      );
				$(document).keydown(
        function(e) {
        	if (e.keyCode == 83) {
        		// 's'
        		if (context.running) {
        			context.stop();
        		} else {
        			context.start();
        		};
        	};
        }
      );
				return this.controls;
			},
			disable: function() {
				this.enabled = false;
				this.stop();
				this.controls.hide();
			},
			enable: function() {
				this.enabled = true;
				this.controls.show();
			},
			toggle: function() {
				if (this.enabled) {
					this.disable();
				} else {
					this.enable();
				};
			},
			start: function() {
				if (this.running || !this.enabled) return false;
				var context = this;
				this.running = true;
				this.controls.addClass('ad-slideshow-running');
				this._next();
				this.fireCallback(this.settings.onStart);
				return true;
			},
			stop: function() {
				if (!this.running) return false;
				this.running = false;
				this.countdown.hide();
				this.controls.removeClass('ad-slideshow-running');
				clearInterval(this.countdown_interval);
				this.fireCallback(this.settings.onStop);
				return true;
			},
			_next: function() {
				var context = this;
				var pre = this.settings.countdown_prefix;
				var su = this.settings.countdown_sufix;
				clearInterval(context.countdown_interval);
				this.countdown.show().html(pre + (this.settings.speed / 1000) + su);
				var slide_timer = 0;
				this.countdown_interval = setInterval(
        function() {
        	slide_timer += 1000;
        	if (slide_timer >= context.settings.speed) {
        		var whenNextIsShown = function() {
        			// A check so the user hasn't stoped the slideshow during the
        			// animation
        			if (context.running) {
        				context._next();
        			};
        			slide_timer = 0;
        		};
        		if (!context.nextimage_callback(whenNextIsShown)) {
        			context.stop();
        		};
        		slide_timer = 0;
        	};
        	var sec = parseInt(context.countdown.text().replace(/[^0-9]/g, ''), 10);
        	sec--;
        	if (sec > 0) {
        		context.countdown.html(pre + sec + su);
        	};
        },
        1000
      );
			},
			fireCallback: function(fn) {
				if ($.isFunction(fn)) {
					fn.call(this);
				};
			}
		};
	})(jQuery);