// -----------------------------------------------------------------------------
// Konfiguration
// -----------------------------------------------------------------------------

var Config = {
	// Bildwechsel
	imageChanger : {
		indicator        : '/fileadmin/img/ajax-loader.gif',
		indicatorSize    : [24, 24],
		transitionTime   : 2000,
		transitionTimeout: 5000,
		xmlURL           : '/index.php?eID=tx_rbslideshow',
		classes : {
			canvas : 'ImageChanger_canvas',
			visible: 'ImageChanger_visible',
			image  : 'ImageChanger_image',
			url    : 'ImageChanger_url'
		}
	},
	// Hover-Box
	hoverBox : {
		transitionTime   : 300,
		transitionTimeout: 500,
		classes          : {
			container: 'HoverBox_container',
			title    : 'HoverBox_title',
			links    : 'HoverBox_links',
			cover    : 'HoverBox_cover',
			active   : 'HoverBox_active'
		}
	}
}

// -----------------------------------------------------------------------------
// Code/Onload
// -----------------------------------------------------------------------------

function scaleImage($img, targetWidth, targetHeight) {
	var isHidden = $img.is(':visible') ? false : true;
	var calcWidth, calcHeight = 0;
	
	if(isHidden) $img.show();
	var width  = $img.width();
	var height = $img.height();
	if(isHidden) $img.hide();

	if(width > targetWidth || height > targetHeight) {
		// Umwandlung bei selbem Seitenverhaeltnis
		if(width >= height) {
			calcWidth = targetWidth;
			calcHeight = targetWidth * (height / width);
		} else {
			calcWidth = targetHeight * (width / height);
			calcHeight = targetHeight;
		}

		// Check ob das Seitenverhaeltnis stimmt
		if(calcWidth > targetWidth) {
			calcWidth = targetHeight * (width / height);
			calcHeight = targetHeight;
		} else if(calcHeight > targetHeight) {
			calcWidth = targetWidth;
			calcHeight = targetWidth * (height / width);
		}

		$img.width(calcWidth);
		$img.height(calcHeight);

		if(calcHeight < targetHeight) {
			$img.css('margin-top', (targetHeight-calcHeight) / 2);
		} else if(calcWidth < targetWidth) {
			$img.css('margin-left', (targetWidth-calcWidth) / 2);
		}
	} else if(width < targetWidth || height < targetHeight) {
		if(height < targetHeight) {
			$img.css('margin-top', (targetHeight-height) / 2);
		} else if(calcWidth < width) {
			$img.css('margin-left', (width-calcWidth) / 2);
		}
	}
}

$(window).load(function() {
	// Bildwechsel initialisieren
	$('.' + Config.imageChanger.classes.canvas).each(function() {
		var $canvas = $(this);

		// notwendiges CSS setzen
		$canvas.css('position', 'relative').show();

		// Initiale Groesse des Canvas ermitteln
		var initialSize = [ $canvas.width(), $canvas.height() ];

		// Den Lade-Indikator erzeugen und anzeigen
		var $indicator = $('<img src="' + Config.imageChanger.indicator + '">')
			.appendTo($canvas)
			.css({
				'opacity'  : 0,
				'width'    : Config.imageChanger.indicatorSize[0],
				'height'   : Config.imageChanger.indicatorSize[1],
				'position' : 'absolute',
				'left'     : (initialSize[0] - Config.imageChanger.indicatorSize[0]) / 2,
				'top'      : (initialSize[1] - Config.imageChanger.indicatorSize[1]) / 2
			}).fadeTo(250, 1.0);

		// Funktion zum Wechsel des Bildes, die sich selbst zeitversetzt aufruft
		var nextImage = function() {
			var $current = $canvas.find('img.' + Config.imageChanger.classes.visible);
			var $next    = $current.next();

			if($next.size() === 0) {
				$next = $canvas.find('img.' + Config.imageChanger.classes.image + ':first');
			}

			$current.removeClass(Config.imageChanger.classes.visible).fadeTo(Config.imageChanger.transitionTime, 0.0);
			$next.addClass(Config.imageChanger.classes.visible).fadeTo(Config.imageChanger.transitionTime, 1.0);

			window.setTimeout(nextImage, Config.imageChanger.transitionTimeout);
		}

		// Die URL ist entweder in der Konfiguration oder kann direkt im Canvas
		// mittels eines Elements mit der passenden Klasse ueberschrieben werden
		var xmlURL = Config.imageChanger.xmlURL;
		var $urlContainer = $canvas.find('.' + Config.imageChanger.classes.url);

		if($urlContainer.size() > 0) {
			xmlURL = $urlContainer.val() || $urlContainer.html();
		}

		// XML-Datei holen
		$.get(xmlURL, {}, function(data, textStatus, jqXHR) {
			var $data        = $(data).find('image');
			var imageCount   = $data.size();
			var loadedImages = 0;
			var firstImage   = null;

			// alle Bilder in der XML durchgehen
			for(var i = 0; i < imageCount; i++) {
				var imageURL = $data.eq(i).text();

				// die URL des ersten Bildes wird fuer spaeter aufbewahrt
				if(firstImage === null) {
					firstImage = imageURL;
				}

				// Bild anlegen und onload
				var $image = $('<img class="' + Config.imageChanger.classes.image + '" src="' + imageURL + '" />')
					.bind('load', function() {
						scaleImage($(this), initialSize[0], initialSize[1]);

						if(loadedImages == imageCount-1) {
							$indicator.fadeTo(250, 0.0);
							$canvas.find(
								'img.' + Config.imageChanger.classes.image + '[src*="' + firstImage + '"]'
							).fadeTo(Config.imageChanger.transitionTime, 1.0)
							.addClass(Config.imageChanger.classes.visible);

							// Bildwechsel starten, aber nur wenn es mehr als
							// ein Bild gibt!
							if(imageCount > 1) {
								window.setTimeout(nextImage, Config.imageChanger.transitionTimeout);
							}
						}

						loadedImages++;
					})
					.appendTo($canvas)
					.css({
						'position': 'absolute',
						'top'     : 0,
						'left'    : 0
					});
					$image.fadeTo(0,0.0);
			}
		}, 'xml');
	});

	// BoxHoverMenu initialisieren
	var $hoverBoxes = $('.' + Config.hoverBox.classes.container);

	$hoverBoxes.each(function() {
		// notwendiges CSS am container setzen
		var $hoverBox = $(this).css('position', 'relative');
		// Titel der HoverBox auslesen
		var boxTitle = $hoverBox.find('.' + Config.hoverBox.classes.title).html();
		// Mit dem Titel das Deckblatt anlegen und anzeigen
		var $cover = $('<div class="' + Config.hoverBox.classes.cover + '"></div>')
			.appendTo($hoverBox)
			.css({
				'position' : 'absolute',
				'top'      : 0,
				'left'     : 0,
				'width'    : $hoverBox.width(),
				'height'   : $hoverBox.height()
			})
			.html(boxTitle.replace(/\s/, '<br>'))
			.show();

		// Mouseenter beim Deckblatt abfangen
		$cover.bind('mouseenter', function() {
			var $parent = $(this).parent();
			var $this = $(this);

			// Nur agieren wenn das nicht die aktive Box ist
			if(!$parent.hasClass('.' + Config.hoverBox.classes.active)) {
				// Letzte aktive Box finden und nach einem Timeout das Deckblatt einblenden
				var $lastActive = $hoverBoxes.filter('.' + Config.hoverBox.classes.active);

				if($lastActive.size() > 0) {
					$lastActive.removeClass(Config.hoverBox.classes.active);

					window.setTimeout(function() {
						$lastActive.find('.' + Config.hoverBox.classes.cover)
						.stop(true).show().fadeTo(Config.hoverBox.transitionTime, 1.0);
					}, Config.hoverBox.transitionTimeout);
				}

				// Diese Box aktivieren und das Deckblatt ausblenden
				$parent.addClass(Config.hoverBox.classes.active);

				$this.stop(true).fadeTo(Config.hoverBox.transitionTime, 0.0, function() {
					$this.hide();
				});
			}
		});
	});
});