/*
 * A picture slideshow for jQuery.
 * 
 */

jQuery.fn.scrollWidth = function() {
	if (this.length < 1) {
		return undefined;
	}
	
	return this.get(0).scrollWidth;
};

jQuery.slideshow = {
};

/**
 * The plugin method which creates a slideshow and makes it visible. Applicable
 * to ul-elements structured like this:
 * 
 * <ul>
 *     <li>
 *         <p>
 *             Description (optional; can be arbitrary content, even
 *             <a href="#">links</a> and <em>other</em> tags!)
 *         </p>
 *         <a href="fullsize.jpg"><img src="thumbnail.jpg" /></a>
 *     </li>
 * </ul>
 * 
 * @returns The jQuery object
 */
jQuery.fn.slideshow = function(options) {
	settings = jQuery.extend({
			width: -1,
			height: -1,
			open: false,
			thumbsOnTop: false,
		}, options);
	
	return this.each(function() {
		var slideshow = jQuery(this);
		
		slideshow.wrap('<div class="slideshow_wrapper" />');
		if (settings.thumbsOnTop) {
			slideshow.after('<div class="slideshow_fullsize"><div class="slideshow_fullsize_content" /></div>');
		} else {
			slideshow.before('<div class="slideshow_fullsize"><div class="slideshow_fullsize_content" /></div>');
		}
		slideshow.wrap('<div class="slideshow_thumbnails" />');
		
		var wrapper = slideshow.parent().parent();
		var thumbnails = slideshow.parent();
		if (settings.thumbsOnTop) {
			var fullsize = thumbnails.next();
		} else {
			var fullsize = thumbnails.prev();
		}		
		
		
		// Style und Class auf den Wrapper verschieben
		wrapper.attr('style', slideshow.attr('style'));
		slideshow.removeAttr('style');
		wrapper.attr('class', 'slideshow_wrapper ' + slideshow.attr('class'));
		slideshow.removeAttr('class').attr('class', 'slideshow');
		
		if (settings.width > 0) {
			wrapper.width(settings.width);
		}
		
		if (settings.height > 0) {
			fullsize.height(settings.height);
		}
		
		// Alles ausser den Thumbnails verstecken
		fullsize.hide();
		slideshow.children('li').children(':not(a)').hide();
		
		// Klickbare Thumbnails
		slideshow.children('li').children('a')
			.click(function () {
				var anchor = jQuery(this);
				anchor.parent().siblings(".active").removeClass("active");
				anchor.parent().addClass("active");
				
				var fullsizeContent = fullsize.children('.slideshow_fullsize_content');
				
				fullsizeContent.find('.slideshow_item').not(':first-child').remove();
				fullsizeContent.prepend('<div class="slideshow_item"><img /><div class="slideshow_text" /></div>');
				fullsizeContent.find('.slideshow_item:first-child img')
					.load(function() {
						var image = jQuery(this);
						image.next().append(anchor.siblings().clone().show()).fadeTo(0, 0.8);
						fullsize.show();
						if (settings.height <= 0) {
							fullsize.stop().animate({height: image.height()}, 'slow');
						}
						image.parent().nextAll().fadeOut('slow');
					})
					.attr('src', anchor.attr('href'));
				
				var targetValue = anchor.parent().offset().left - slideshow.offset().left + slideshow.scrollLeft()
				                - (slideshow.width() / 2 - anchor.width() / 2);
				
				slideshow.stop(true).animate(
						{scrollLeft: targetValue},
						'slow'
					);
				
				anchor.blur();
				
				return false;
			});
		
		// Slidebuttons
		thumbnails.prepend('<div class="slideshow_prev" />');
		thumbnails.children('.slideshow_prev')
			.hover(function () {
				jQuery(this).stop().fadeTo("normal", 0.8);
				
				var targetValue = 0;
				slideshow.animate(
						{scrollLeft: targetValue},
						Math.abs(targetValue - slideshow.scrollLeft()) * 3,
						"linear"
					);
			}, function () {
				slideshow.stop(true);
				jQuery(this).stop().fadeTo("normal", 0.2);
			})
			.fadeTo(0, 0.2);
		
		thumbnails.append('<div class="slideshow_next" />');
		thumbnails.children('.slideshow_next')
			.hover(function () {
				jQuery(this).stop().fadeTo("normal", 0.8);
				
				var targetValue = slideshow.scrollWidth() - slideshow.width();
				slideshow.animate(
						{scrollLeft: targetValue},
						Math.abs(targetValue - slideshow.scrollLeft()) * 3,
						"linear"
					);
			}, function () {
				slideshow.stop(true);
				jQuery(this).stop().fadeTo("normal", 0.2);
			})
			.fadeTo(0, 0.2);
			
		
		// Vor-/Zurückbuttons
		fullsize.prepend('<div class="slideshow_prev" />');
		fullsize.children('.slideshow_prev')
			.hover(function () {
				jQuery(this).stop().fadeTo("normal", 0.8);
			}, function () {
				jQuery(this).stop().fadeTo("normal", 0.2);
			})
			.click(function () {
				slideshow.children('li.active').prev().children('a').click();
			})
			.fadeTo(0, 0.2);
		
		fullsize.append('<div class="slideshow_next" />');
		fullsize.children('.slideshow_next')
			.hover(function () {
				jQuery(this).stop().fadeTo("normal", 0.8);
			}, function () {
				jQuery(this).stop().fadeTo("normal", 0.2);
			})
			.click(function () {
				slideshow.children('li.active').next().children('a').click();
			})
			.fadeTo(0, 0.2);
		
		if (settings.open) {
			slideshow.children('li:first').children('a').click();
		}
	});
};