(function($){
	$.fn.dialog = function(data) {
		if(typeof(data.when) === 'undefined') data.when = "click";
		return $(this).qtip({
			content: {
				title: {
					text: data.title,
					button: "Close"
				},
				text: data.text
			},
			position: {
				target: $("body"), // Position it via the document body...
				corner: "center" // ...at the center of the viewport
			},
			show: {
				when: data.when, // Show it on click
				solo: true // And hide all other tooltips
			},
			hide: false,
			style: {
				width: {
					min: "300px",
					max: "500px"
				},
				padding: '14px',
				border: {
					width: 1,
					radius: 5,
					color: "#114D87"
				},
				title: {
					color: "#FFFFFF",
					backgroundColor: "#114D87"
				},
				lineHeight: "20px",
				name: "light"
			},
			api: {
				beforeShow: function()
				{
					// Fade in the modal "blanket" using the defined show speed
					$("#qtip-blanket").fadeIn(this.options.show.effect.length);
				},
				beforeHide: function()
				{
					// Fade out the modal "blanket" using the defined hide speed
					$("#qtip-blanket").fadeOut(this.options.hide.effect.length);
				}
			}
		});
	}

	// Create the modal backdrop on document load so all modal tooltips can use it
	$(document).ready(function() {
		$('<div id="qtip-blanket">')
			.css({
				position: 'absolute',
				top: 0, // $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
				left: 0,
				height: $(document).height(), // Span the full document height...
				width: '100%', // ...and full width

				opacity: 0.7, // Make it slightly transparent
				backgroundColor: 'black',
				zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
			})
			.appendTo(document.body) // Append to the document body
			.hide(); // Hide it initially
	});
})(jQuery);