/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

(function($){
	var defaults = {
		canvasColor        : "black",
		canvasOpacity      : 0.5,
		canvasZIndex       : 100,
		lightboxColor      : "white",
		lightboxPadding    : 1,
		lightboxZIndex     : 200,
		fadeInTime         : 0,
		fadeOutTime        : 0,
		closeOnCanvasClick : true,
		closeOnEscape      : true,
		allowScrollbars    : "vertical",
		offsetTop          : 22,
		offsetLeft         : 22,
		onShowCallback     : null,
		onCloseCallback    : null,
		maxWidth           : null,
		minWidth           : null,
		indicator          : Config.images.ajaxLoaderDialog
	};

	$.fn.modaldialog = function(_action_options, _options) {
		// Anzahl der gematchten Elemente auf 1 reduzieren... wir koennen
		// nur EINEN modalen Dialog zur selben Zeit erzeugen!
		var obj = this.get(0);
		var action = "show";

		if(obj == document) obj = null;

		if(_action_options) {
			if(typeof _action_options == "string") {
				action = _action_options;
			} else if(typeof _action_options == "object") {
				_options = _action_options;
			}
		}

		var options = $.extend(true, $.extend(true, {}, defaults), _options);

		if(action != "update" && obj != null) {
			// Objekt ggf in die Lightbox einfuegen
			appendToLightbox(obj, options);
		
			// Lightbox und Canvas an das aktuelle Objekt und die Optionen anpassen
			updateCanvas(options);
			updateLightbox(options);
		}

		if(action == "show") {
			show(options);
		} else if(action == "update") {
			updateCanvas(options);
			updateLightbox(options);
		} else if(action == "close") {
			close(options);
		} else {
			load(action, options);
		}

		return this;
	}

	function updateCanvas(options) {
		var $body = $('body');
		var $window = $(window);
		var docHeight = $(document).height();

		$.fn.modaldialog.canvas.css({
			backgroundColor : options.canvasColor,
			width           : $window.width(),
			height          : docHeight,
			zIndex          : options.canvasZIndex
		});

		var $indicator = $.fn.modaldialog.canvas.find('#ajax-indicator');

		$indicator
			.attr('src', options.indicator)
			.css({
				top  : ($body.height() - $indicator.height()) / 2 + $window.scrollTop(),
				left : ($window.width() - $indicator.width()) / 2 + $window.scrollLeft()
			});
	}

	function load(url, options) {
		updateCanvas(options);
		showCanvas(options);

		var $indicator = $.fn.modaldialog.canvas.find('#ajax-indicator');
		var $content = $.fn.modaldialog.lightbox.find('#content_lightbox');

		// Indikator einbinden
		$indicator.show();

		var imageExt = url.match(/[^\.]+\.(jpg|gif|png)([^a-z0-9\.]+.*)?$/);

		if(imageExt) {
			var img = new Image();

			$(img).attr("src", url + ($.browser.msie ? "?_=" + (new Date()).getTime() : "")).load(function() {
				$content.children().remove().append(
					'<div style="position:relative">' +
						'<img src="' + img.src + '" border="0" width="' + img.width + '" height="' + img.height + '"/>' +
					'</div>'
				).data("originalParent", null);
				
				updateLightbox(options);
				showLightbox(options);

				$indicator.hide();
			});
		} else {
			$.get(url, null, function(data) {
				$content.children().remove().andSelf().append($(data)).data("originalParent", null);

				updateLightbox(options);
				showLightbox(options);

				$indicator.hide();
			}, "html");
		}
	}

	function appendToLightbox(obj) {
		var $content = $.fn.modaldialog.lightbox.find('#content_lightbox');

		if($content.data("originalParent") != obj.parentNode) {
			$content.data("originalParent", obj.parentNode);
		}

		$content.append(obj);
		$(obj).show();
	}

	function updateLightbox(options) {
		var $content = $.fn.modaldialog.lightbox.find('#content_lightbox');
		var $firstChild = $content.children().eq(0);

		$firstChild.addClass("box_lightbox_inner_single");

		if(options.maxWidth != null && $firstChild.outerWidth() > options.maxWidth) {
			$firstChild.css("width", options.maxWidth);
		}

		if(options.maxHeight != null && $firstChild.outerHeight() > options.maxHeight) {
			$firstChild.css("height", options.maxHeight);
		}

		var $window = $(window);

		var top = ($window.height() - $.fn.modaldialog.lightbox.outerHeight()) / 2;
		var left = ($window.width() - $.fn.modaldialog.lightbox.outerWidth()) / 2;

		var scrollTop = $window.scrollTop();
		var scrollLeft = $window.scrollLeft();

		$.fn.modaldialog.lightbox.css({
			top : top  > options.offsetTop  ? top + scrollTop   : options.offsetTop + scrollTop,
			left: left > options.offsetLeft ? left + scrollLeft : options.offsetLeft + scrollLeft
		});

		$.fn.modaldialog.lightbox.css("z-index", options.lightboxZIndex);

		$content.css({
			backgroundColor: options.lightboxColor,
			margin         : 0,
			padding        : options.lightboxPadding
		});
	}

	function showCanvas(options, callback) {
		$.fn.modaldialog.canvas.css("opacity", 0).stop(true).show().fadeTo(
			options.fadeInTime, options.canvasOpacity, 
			typeof callback == "function" ? callback : null
		);
	}

	function showLightbox(options) {
		$.fn.modaldialog.lightbox.data('modaldialog_options', options).show();
		$.fn.modaldialog.canvas.css("height", $(document).height());

		if(typeof options.onShowCallback == "function") {
			options.onShowCallback.call();
		}
	}
	
	function show(options) {
		showCanvas(options, function() {
			showLightbox(options);
		});
	}

	function close(origin) {
		var $content   = $.fn.modaldialog.lightbox.find('#content_lightbox');
		var contentObj = $content.children().get(0);
		var options    = $.fn.modaldialog.lightbox.data('modaldialog_options');

		if(origin == 'canvas' && !options.closeOnCanvasClick) {
			return;
		}

		if(origin == 'escape') {
			if(!options.closeOnEscape || !$.fn.modaldialog.lightbox.is(':visible')) {
				return;
			}
		}

		$.fn.modaldialog.lightbox.hide();

		var originalParent = $content.data("originalParent");

		if(originalParent) {
			$(contentObj).hide().appendTo(originalParent);
		} else {
			$content.children().remove();
		}
		

		if(typeof options.onCloseCallback == "function") {
			options.onCloseCallback.apply(null, null);
		}

		$.fn.modaldialog.canvas.stop(true).fadeTo(options.fadeOutTime, 0, function() {
			$.fn.modaldialog.canvas.hide();
		});
	}

	$.fn.modaldialog.indicator = new Image();
	$.fn.modaldialog.canvas    = null;
	$.fn.modaldialog.lightbox  = null;

	$(document).ready(function() {
		$.fn.modaldialog.canvas = $(
			'<div id="canvas">' +
				'<img border="0" id="ajax-indicator" style="display:none; position:absolute"/>' +
			'</div>'
		).appendTo('body').css({
			position: "absolute",
			top     : 0,
			left    : 0,
			opacity : 0
		}).click(function() {
			close('canvas');
		}).hide();

		$.fn.modaldialog.lightbox = $(
			'<div class="box_lightbox lightbox_compare" id="box_lightbox">' +
				'<div class="lightbox_close">' +
					'<img src="' + Config.images.lightboxCloseButton + '" alt="Close" title="Close" id="closebutton_lightbox"/>' +
				'</div>' +
				'<div class="rounded_lt"></div>' +
				'<div class="rounded_lb"></div>' +
				'<div class="rounded_rt"></div>' +
				'<div class="rounded_rb"></div>' +
				'<div class="box_lightbox_shadow_tl"></div>' +
				'<div class="box_lightbox_shadow_tr"></div>' +
				'<div class="box_lightbox_shadow_t"></div>' +
				'<div class="box_lightbox_shadow_l">' +
					'<div class="box_lightbox_shadow_r">' +
						'<div id="content_lightbox"></div>' +
					'</div>' +
				'</div>' +
				'<div class="box_lightbox_shadow_bl"></div>' +
				'<div class="box_lightbox_shadow_br"></div>' +
				'<div class="box_lightbox_shadow_b"></div>' +
				'<div class="box_lightbox_shadow_ie"></div>' +
			'</div>'
		).appendTo('body').css("position" , "absolute").hide();
		
		$("#closebutton_lightbox").click(function() {
			close('button');
		});
		
		$("#closebutton_content_lightbox").click(function() {
			close('button');
		});

		$(window).keydown(function(e) {
			// Firefox, IE etc.?
			if(e.keyCode == 27) {
				close("escape");
			}
		});
	});
})(jQuery)