/*
 * Die Bilderslideshow als jQuery plugin.
 * 
 */

// Statische Funktionen für interne Verwendung
jQuery.slideshow = {
};

/**
 * Die Pluginmethode, die eine Slideshow erzeugt und anzeigt. Anwendbar auf
 * ul-Elemente die nach folgendem Schema aufgebaut sind:
 * 
 * <ul>
 *     <li>
 *         <p>Beschreibungstext (beliebiger Inhalt)</p>
 *         <a href="fullsize.jpg"><img src="thumbnail.jpg" /></a>
 *     </li>
 * </ul>
 * 
 * @returns Das jQuery-Objekt
 */
jQuery.fn.slideshow = function() {
	return this.each(function() {
		var slideshow = jQuery(this);
		slideshow
			.wrap('<div class="slideshow_wrapper" />')
			.before('<div class="slideshow_fullsize"><div class="slideshow_fullsize_content" /></div>')
			.wrap('<div class="slideshow_thumbnails"><div class="slideshow_slidetrack" /></div>');
		
		var wrapper = slideshow.closest('.slideshow_wrapper');
		var thumbnails = slideshow.parent().parent();
		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');
		
		// Vollbildansicht initial verstecken
		fullsize.hide();
		
		// Alles ausser den Thumbnails verstecken
		slideshow.children('li').children(':not(a)').hide();
		
		// Klickbare Thumbnails
		slideshow.children('li').children('a')
			.click(function () {
				var anchor = jQuery(this);
				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();
						fullsize.stop().animate({height: image.height()}, 'slow');
						image.parent().nextAll().fadeOut('slow');
					})
					.attr('src', anchor.attr('href'));
				
				anchor.parent().siblings(".active").removeClass("active");
				anchor.parent().addClass("active");
				
				var targetValue = anchor.parent().offset().left - anchor.parent().parent().offset().left;
				slideshow.parent()
					.animate(
						{scrollLeft: targetValue},
						'slow'
					);
				
				return false;
			});
		
		// Slidebuttons
		thumbnails.prepend('<div class="slideshow_prev" />');
		thumbnails.children('.slideshow_prev')
			.hover(function () {
				var targetValue = 0;
				slideshow.parent()
					.animate(
						{scrollLeft: targetValue},
						Math.abs(targetValue - slideshow.parent().scrollLeft()) * 3,
						"linear"
					);
			}, function () {
				slideshow.parent().stop(true);
			});
		
		thumbnails.append('<div class="slideshow_next" />');
		thumbnails.children('.slideshow_next')
			.hover(function () {
				var targetValue = slideshow.width() - slideshow.parent().width();
				slideshow.parent()
					.animate(
						{scrollLeft: targetValue},
						Math.abs(targetValue - slideshow.parent().scrollLeft()) * 3,
						"linear"
					);
			}, function () {
				slideshow.parent().stop(true);
			});
		
		// 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);
	});
};