$.widget(
	"krumedia.infopopup",
	(function()
	{
		var supportsTransparency = !$.browser.msie /*|| $.browser.version >= 7*/;
		
		return {
			_init: function()
			{
				var o = this.options;
				var $target;
				// Prüfen, ob in den Optionen das Zielelement angegeben wurde
				if (o.target == null
					|| ($target = $(o.target)).length == 0)
				{
					alert('Fehler beim Erzeugen des infopopup-Widgets. Bitte ein Zielelement angeben.');
					return;
				}
				
				// Versuchen, aus den Styles ein Hintergrundbildpfad zu extrahieren
				var backgroundImage = this.element.css('backgroundImage');
				var match = backgroundImage.match(/^url\((["']?)([^"']*)\1\)$/);
				if (!match)
				{
					alert('Fehler beim Erzeugen des infopopup-Widgets. Bitte per CSS ein Hintergrundbild angeben.');
					return;
				}
				var backgroundImageUrl = match[2];
				
				var width = this.element.innerWidth(); // parseInt(this.element.css('width'));
				var height = this.element.innerHeight(); // parseInt(this.element.css('height'));
				if (isNaN(width) || isNaN(height))
				{
					alert('Fehler beim Erzeugen des infopopup-Widgets. Bitte per CSS die Breite und Höhe angeben.');
					return;
				}
				
				// Container zur Positionierung
				var $positionedContainer =
					$(document.createElement('div'))
						.css({
							position: 'absolute',
							left: (($target.width() - width) >> 1)  + o.hoverlap,
							top: $target.position().top + $target.height() - o.overlap, // etwas überlappend unter dem Zielelement positionieren
							width: width,
							height: 0
						});
				
				
				// Container für Hintergrundbild (für IE: darf nicht position: relative/absolute enthalten)
				var $styledContainer =
					$(document.createElement('div'))
						.css({
							width: width,
							height: 0
						})
						.appendTo($positionedContainer);
				
				if (supportsTransparency)
				{
					$styledContainer.css({
						backgroundImage: 'url("' + backgroundImageUrl + '")'
					});
				}
				else
				{
					$styledContainer.css({
						filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="' + backgroundImageUrl + '")'
					});
				}
				
				// Container für HTML (für IE: muss position: relative/absolute enthalten)
				var $container =
					$(document.createElement('div'))
						.addClass(o.cssClass)
						.css({
							position: 'relative',
							display: 'block',
							backgroundImage: 'none'
						})
						.appendTo($styledContainer)
						.append(this.element.contents());
				
				this.$positionedContainer = $positionedContainer;
				this.$styledContainer = $styledContainer;
				this.$container = $container;
				
				$target.offsetParent()
					.append($positionedContainer);
					
				$positionedContainer
					.animate(
						{
							height: height
						},
						{
							easing: 'swing',
							step: function(now, fx)
							{
								var elem = this;
								if (fx.prop == 'height')
								{
									$styledContainer.css('height', now);
								}
							},
							duration: o.speed
						}
					);
				

				// <edit> by Chris: Einen onclick->destroy Event zum body-Element hinzugefuegt.				
				this.clickHandler = function(event) {
					event.data.positionedContainer.animate(
						{ 
							height: 0
						},
						{
							easing: 'swing',
							step: function(now, fx) {
								var elem = this;
								if (fx.prop == 'height')
								{
									event.data.styledContainer.css('height', now);
								}
							},
							duration: o.speed,
							complete: function () {
								event.data.element.infopopup('destroy');
							}
						}
					);
				};
				
				
				

				$(document).bind('click', {
						element: this.element,
						positionedContainer: $positionedContainer,
						styledContainer: $styledContainer
					}, 
					this.clickHandler
				);
				// </edit>
			},
			
			destroy: function()
			{
				if (this.$container != null)
				{
					this.element.append(this.$container.contents());
					this.$positionedContainer.remove();
					this.$positionedContainer = null;
					this.$styledContainer = null;
					this.$container = null;
					// <edit> by Chris
					$(document).unbind('click', this.clickHandler);
					this.clickHandler = null;
					// </edit>
				}
				
				// Destruktor der Oberklasse aufrufen
				$.widget.prototype.destroy.call(this);
			}
			
		};
	})()
);

$.krumedia.infopopup.getter = [];
$.krumedia.infopopup.defaults = {
	target: null, /* Element, über dem die InfoPopup erscheinen soll */
	overlap: 10,
	hoverlap: 0,
	speed: 500,
	cssClass: 'tooltip'
};