/**
 * Shows (or hides) a modalBox.
 * @author			Sascha Quasthoff
 * @copyright		wer-kennt-wen.de GmbH
 * @params			params (Object)		Overwrites the default options
 */

(function($) {

	$.fn.wkwModalBox = function (params){

		// default options, can be overwritten by the parameters
		var options = $.extend({
				'className'		: 'modalBox',	// the className of the modalBox element
				'insertInto'	: 'body',		// the modalBox element will be inserted into the element found by this selector
				'topOffset'		: 0,			// the top offset for the modalBox
				'leftOffset'	: 4,			// the left offset for the modalBox
				'animate'		: true,			// whether to animate or not
				'duration'		: 250			// the duration of the fadeIn animation
			}, params);

		return this.each(function(){
			$(this).bind('click', function(evt){
				evt.stopPropagation();
				var $self = $(this),
					id = $(this).attr('rel');

				if (!id || id == '') {
					return;
				}

				// if a visible modalBox already exists, remove it from the wrapper and move it back to the original position in the DOM
				var $modalBox = $(options['insertInto']+' > .'+options['className']);
				if ( $modalBox.length > 0 ) {
					if (options['animate']) {
						$modalBox.fadeOut(options['duration']/2, function(){
							$self.after($modalBox.remove().hide());
						});
					} else {
						$self.after($modalBox.remove().hide());
					}

					// if the visible modalBox was clicked once again, just hide it; otherwise hide it and show the newly clicked modalBox
					if ($modalBox.attr('id') == id) {
						return;
					}
				}

				// otherwise remove the $modalBox from its original position in the DOM and insert it into the wrapper
				$modalBox = $('#'+id).remove();
				
				// find an existing or insert a new $closeButton
				$closeButton = $modalBox.find('img.close');
				if ($closeButton.length == 0) {
					if ($modalBox.hasClass('errorBox')) {
						$closeButton = jQuery('<img class="close" src="'+basisurl+'/images/close_error.gif" alt="Schliessen" />');
					} else {
						$closeButton = jQuery('<img class="close" src="'+basisurl+'/images/close.gif" alt="Schliessen" />');
					}
					$modalBox.append($closeButton);
				}

				// move the $modalBox to the position of the event element and fade it in
				$modalBox.css({
					'display': 'none',
					'left': (parseInt($(evt.currentTarget).offset().left) + parseInt($(evt.currentTarget).outerWidth()) + options['leftOffset']) + 'px',
					'top': (parseInt($(evt.currentTarget).offset().top) + options['topOffset']) + 'px'
				}).appendTo(options['insertInto']);

				if (options['animate']) {
					$modalBox.fadeIn(options['duration']);
				} else {
					$modalBox.show();
				}


				// when the $closeButton is clicked, remove the $modalBox from the wrapper and move it back to the original position in the DOM
				$closeButton.bind('click', function(evt){
					evt.stopPropagation();
					if (options['animate']) {
						$modalBox.fadeOut(options['duration']/2, function(){
							$self.after($modalBox.remove().hide());
						});
					} else {
						$self.after($modalBox.remove().hide());
					}
				});
				return;
			});
		});

	};

})(jQuery);