/**
 * 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/
 *
 * Modifed by Barney Kim
 */
(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,
			thumbnail_width: 143,
			thumbnail_height: 84,
			youtube_width: 640,
			youtube_height: 385,
			youtube_language: "ko_KR",
			width: false,
			height: false,
			display_gallery_info: false,
			display_next_and_prev: false,
			display_back_and_forward: false,
			scroll_jump: 0,
			// If 0, it jumps the width of the container
			effect: 'fade',
			// 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);
		return new AdGallery(this, settings);
	};

	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,
		initialized: 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);
			};
			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('#media-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;
				};
			};
			
			// KMKIM
			this.loading(true);
			this.showImage(start_at, function () {});

			this.fireCallback(this.settings.callbacks.init);
			this.initialized = true;
		},
		setupAnimations: function () {
			this.animations = {
				'slide-vert': VerticalSlideAnimation,
				'slide-hori': HorizontalSlideAnimation,
				'resize': ResizeAnimation,
				'fade': FadeAnimation,
				'none': NoneAnimation
			};
		},
		setupElements: function () {
			this.controls = this.wrapper.find('.media-controls');
			this.gallery_info = $('<p class="media-info"></p>');
			if (this.settings.display_gallery_info) {
				this.controls.append(this.gallery_info);
			}
			this.image_wrapper = this.wrapper.find('.media-image-wrapper');
			this.image_wrapper.empty();
			this.nav = this.wrapper.find('.media-nav');
			this.thumbs_wrapper = this.nav.find('.media-thumbs');
			this.preloads = $('<div class="media-preloads"></div>');
			this.loader = $('<img class="media-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;
			};
		},
		refreshImages: function(el, s) {
			context = this;
			this.thumbs_wrapper.fadeTo(context.settings.animation_speed, 0.1);
			var inter = setInterval(function() {
				$(el).html(s);
				context.findImages();
				context.thumbs_wrapper.fadeTo(context.settings.animation_speed, context.settings.thumb_opacity);
				clearInterval(inter);
				
			}, context.settings.animation_speed);
		},
		_resizeThumbnail:function(thumb) {
			context = this;
			var tw = thumb.attr('width');
			var th = thumb.attr('height');
			if (tw < context.settings.thumbnail_width) {
				var twp = Math.round((context.settings.thumbnail_width - tw) / 2);
				thumb.css({
					paddingRight: twp + 'px',
					paddingLeft: twp + 'px'
				});
			}
			if (th < context.settings.thumbnail_height) {
				var thp = Math.round((context.settings.thumbnail_height - th) / 2);
				thumb.css({
					paddingTop: thp + 'px',
					paddingBottom: thp + 'px'
				});
			}
		},
		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 media_type = link.attr('class');
				var image_src = link.attr('href');
				var thumb = link.find('img');
				
				if(!context.initialized) {
					//context._resizeThumbnail(thumb);
				}
				thumb.load(function () {
					//context._resizeThumbnail(thumb);
				});
				
				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('media-thumb' + i);
				link.click(
				function () {
					context.showImage(i);
					return false;
				}).hover(
				function () {
					// KMKIM
					//if (!$(this).is('.media-active') && context.settings.thumb_opacity < 1) {
					//	$(this).find('img').fadeTo(300, 1);
					//};
					context.preloadImage(i);
				}, function () {
					// KMKIM
					//if (!$(this).is('.media-active') && context.settings.thumb_opacity < 1) {
					//	$(this).find('img').fadeTo(300, context.settings.thumb_opacity);
					//};
				});
				var desc = false;
				if (thumb.data('media-desc')) {
					desc = thumb.data('media-desc');
				} else if (thumb.attr('longdesc') && thumb.attr('longdesc').length) {
					desc = thumb.attr('longdesc');
				};
				var title = false;
				if (thumb.data('media-title')) {
					title = thumb.data('media-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,
					media_type: media_type
				};
			});
		},
		initKeyEvents: function () {
			var context = this;
			$(document).keydown(

			function (e) {
				if (e.keyCode == 39) { // right arrow
					context.nextImage();
				} else if (e.keyCode == 37) { // left arrow
					context.prevImage();
				};
			});
		},
		initNextAndPrev: function () {
			this.next_link = $('<div class="media-next"><div class="media-next-image"></div></div>');
			this.prev_link = $('<div class="media-prev"><div class="media-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('.media-next')) {
					context.nextImage();
				} else {
					context.prevImage();
				};
			}).find('div').css('opacity', 0.7);
		},
		initBackAndForward: function () {
			var context = this;
			this.scroll_forward = $('<div class="media-forward"></div>');
			this.scroll_back = $('<div class="media-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('.media-forward')) {
					var left = context.thumbs_wrapper.scrollLeft() + width;
				} else {
					var left = context.thumbs_wrapper.scrollLeft() - width;
				};
				context.thumbs_wrapper.animate({
					scrollLeft: left + 'px'
				});
				return false;
			}).css('opacity', 0.6).hover(

			function () {
				var direction = 'left';
				if ($(this).is('.media-forward')) {
					direction = 'right';
				};
				thumbs_scroll_interval = setInterval(

				function () {
					has_scrolled++;
					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
			};
		},
		//
		// 이미지 래퍼의 크기를 이미지 크기로 조정
		//
		_resizeWrapper: function (image_width, image_height) {
			this.image_wrapper.css('height', image_height + 'px');
		},
		/**
		 * 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="media-description-title">' + image.title + '</strong>';
				};
				var desc = '';
				if (image.desc.length) {
					//desc = '<span>' + image.desc + '</span>';
					desc = '<br/>'+image.desc;
				};

				//desc = $('<p class="media-image-description">'+ title + desc +'</p>');
				desc = $('<p>' + title + desc + '</p>');

				image_description = this.wrapper.find('.media-image-description');
				image_description.empty();
				image_description.append(desc);
				desc = image_description;
			};
			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;
				// 미디어 타입이 youtube가 아닐때
				if (!image.preloaded && image.media_type != "youtube") {
					this.loading(true);
					this.preloadImage(index, function () {
						context.loading(false);
						context._showWhenLoaded(index, callback);
					});
				} else {
					if(image.media_type == "youtube") {
						this.loading(false);
					}
					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('media-image');
				if (image.media_type == "youtube") {
					// 링크 종류
					// (1) 유투브 ID: oUjn2lREUC4
					// (2) 유투브 URL: http://www.youtube.com/watch?v=oUjn2lREUC4&feature=player_embedded
					var youtubeSrc = image.image;
					if (image.image.indexOf("?v=") > 0) {
						youtubeSrc = image.image.split("?v=")[1];
					}
					var youtubeWidth = context.settings.youtube_width,
						youtubeHeight = context.settings.youtube_height;
					var youtubeLocale = context.settings.youtube_language;
					img_container.append($('<object width="' + youtubeWidth + '" height="' + youtubeHeight + '"><param name="movie" value="http://www.youtube.com/v/' + youtubeSrc + '&rel=0&color1=0xb1b1b1&color2=0xd0d0d0&hl='+youtubeLocale+'&fs=1&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/' + youtubeSrc + '&rel=0&color1=0xb1b1b1&color2=0xd0d0d0&hl='+youtubeLocale+'&fs=1&hd=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="' + youtubeWidth + '" height="' + youtubeHeight + '"></embed></object>'));
					this.image_wrapper.prepend(img_container);
					this._resizeWrapper(youtubeWidth, youtubeHeight);
					var desc = this._getDescription(image, img_container);
				} else {
					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);
					this._resizeWrapper(size.width, size.height);
					var desc = this._getDescription(image, img_container);
				}
				
				// KMKIM
				context.thumbs_wrapper.find("a").each(function(idx) {
					var t=context.nav.find('.media-thumb'+idx);
					if(t.attr('href') == image.image) {
						context.highLightThumb(t);
					}
				});
				//this.highLightThumb(this.nav.find('.media-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('.media-active').removeClass('media-active');
			thumb.addClass('media-active');
			if (this.settings.thumb_opacity < 1) {
				// KMKIM
				//this.thumbs_wrapper.find('a:not(.media-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);
			};
		}
	};
})(jQuery);