/**
 * coded by philo
 * full xhtml content supported
 *
 */
(function($) {
	$.fn.slideGallery = function(options) {
		var defaults = {
			startIndex: 0,
			slideShow: true,
			slideShowTime: 5000,
			slideShowAnimationTime: 500,
			showControl: true,
			nextImgPath: '/.file/gallery/pfeil_rechts.png',
			prevImgPath: '/.file/gallery/pfeil_links.png',
			stopSlideshowOnClick: true,
			thumbSliderWidth: 10000
		}
		options = $.extend(false, defaults, options);
		$(this).each(function(i, el) {
			if (el.tagName.toLowerCase() != 'ul') {
				// only ul elements
				return;
			}
			new SlideGallery(el, options);
		});
	};

	function SlideGallery(element, options) {
		this.init(element, options);
	}
	SlideGallery.prototype = {
		init: function(element, options) {
			this.options = options;
			this.element = element;
			this.currentIndex = this.options.startIndex;
			this.content = $('li', this.element);
			if (this.content.length < 1) {
				return;
			}
			this.content.hide();
			if (this.options.showControl == true) {
				this.buildControl();
			}
			this.showImage(0);
			if (this.options.slideShow == true) {
				this.slide = true;
				this.setTimeout(this.options.slideShowTime);
			}
			if (this.options.stopSlideshowOnClick) {
				$(this.element).bind('click', {self: this}, function(e) {
					e.data.self.clearTimeout();
				});
			}
		},
		showNext: function() {
			if (this.slide) {
				var nextIndex = (this.content.length > (this.currentIndex + 1))
					? this.currentIndex + 1
					: 0;
				this.showImage(nextIndex);
			}
			this.setTimeout(this.options.slideShowTime);
		},
		showImage: function(index) {
			this.clearTimeout();
			var currentImage = $(this.content[this.currentIndex]);
			var nextImage = $(this.content[index]);
			var self = this;
			currentImage.fadeOut(
				this.options.slideShowAnimationTime,
				function() {
					nextImage.fadeIn(self.options.slideShowAnimationTime);
				}
			);
			this.scrollToThumb(index);
			this.currentIndex = index;
			this.setActiveThumb();
		},
		setTimeout: function(delay) {
			var self = this;
			this.timeout = window.setTimeout(function() {self.showNext()}, delay);
		},
		clearTimeout: function() {
			if (this.timeout) {
				window.clearTimeout(this.timeout);
			}
		},
		buildControl: function() {
			var self = this;
			var controlId = (this.element.id) + '-control';
			this.control = $('<div id="' + controlId + '"><div class="slide"><ul class="select"></ul></div></div>');
			this.control.insertAfter(this.element);
			this.thumbList = $('ul.select', this.control);
			this.slide = $('div.slide');
			this.thumbList.width(this.options.thumbSliderWidth);
			this.content.each(function(i, el) {
				el = $(el);
				var li;
				if (el.attr('thumb')) {
					li = $('<li><img src="' + el.attr('thumb') + '" alt="" /></li>');
					li.appendTo(self.thumbList);
				} else {
					li = $('<li><span>' + (i + 1) + '</span></li>');
					li.appendTo(self.thumbList);
				}
				li.attr('goto', i);
				li.click(function() {
					self.showImage($(this).attr('goto'));
					return false;
				});
				li.mouseover(function() {
					$(this).addClass('hover');
				});
				li.mouseout(function() {
					$(this).removeClass('hover');
				});
			});
			var liEl = $('li:first', this.thumbList);
			// seems like outerWidth() does not work in ie
			// this.thumbWidth = liEl.outerWidth(true);
			this.thumbWidth = parseInt(liEl.css('width'))
				+ parseInt(liEl.css('border-left-width'))
				+ parseInt(liEl.css('border-right-width'))
				+ parseInt(liEl.css('margin-left'))
				+ parseInt(liEl.css('margin-right'))
				+ parseInt(liEl.css('padding-left'))
				+ parseInt(liEl.css('padding-right'))
			// this.listWidth = this.slide.innerWidth();
			this.listWidth = parseInt(this.slide.css('width'));
			this.placeForThumbs = Math.floor(this.listWidth / this.thumbWidth);
			this.stopThumb = this.content.length - this.placesForThumbs;

			if (this.placeForThumbs < this.content.length) {
				$('<a class="prev png" href="#"><img src="' + this.options.prevImgPath + '" alt="" class="png" /></a>').appendTo(this.control);
				$('<a class="next png" href="#"><img src="' + this.options.nextImgPath + '" alt="" class="png" /></a>').appendTo(this.control);
				$('a', this.control).click(function() {
					var index = (self.currentThumb < self.placeForThumbs)
						? self.placeForThumbs - 1
						: self.currentThumb;
					if (
						$(this).hasClass('prev') &&
						!$(this.parentNode).hasClass('first')
					) {
						index = (index > 0)
							? index - 1
							: self.content.length - 1;
					} else if (
						$(this).hasClass('next') &&
						!$(this.parentNode).hasClass('last')
					) {
						index = (index < self.content.length - 1)
							? index + 1
							: 0;
					} else {
						return false;
					}
					self.scrollToThumb(index);
					return false;
				}).mouseover(function() {
					self.slide = false;
				}).mouseout(function() {
					self.slide = true;
				});
			}
			if (this.options.stopSlideshowOnClick) {
				$(this.control).bind('click', {self: this}, function(e) {
					e.data.self.clearTimeout();
					return false;
				});
			}
		},
		scrollToThumb: function(index) {
			if (!this.control) {
				return;
			}
			index = parseInt(index);

			$('li.focus', this.thumbList).removeClass('focus');
			var xPos = (index >= this.placeForThumbs)
				 ? (((index + 1) - this.placeForThumbs) * this.thumbWidth) * (-1)
				 : 0;
			this.thumbList.animate(
				{marginLeft: xPos + 'px'},
				400
			);
			if (index < this.placeForThumbs) {
				this.control.addClass('first');
			} else {
				this.control.removeClass('first');
			}
			if (index + 1 == this.content.length) {
				this.control.addClass('last');
			} else {
				this.control.removeClass('last');
			}
			this.currentThumb = index;
			$('li:nth-child(' + (this.currentThumb + 1) + ')', this.thumbList).addClass('focus');
		},
		setActiveThumb: function() {
			if (!this.control) {
				return;
			}
			$('li.active', this.thumbList).removeClass('active');
			$('li[goto=' + this.currentIndex + ']', this.thumbList).addClass('active');
		}
	};
})(jQuery);