Opening a jquery modal dialog does not work (fixed)

Found the following issue:
http://www.drupalgardens.com/content/trouble-using-jquery-dialog

Obviously it turns out that jQuery dialog is only loaded for the administrative interface and you have to call in an external script to get it working for anonymous users.
(The Drupal way? ;-) )

If this would be the case I would have to load jquery code twice - not a good solution.

nod_, could you please instruct more detailed and post tested and working code.
I put the drupal_add_js directly on the page and not in a template file (like page.tpl) and as I understood it that is a way that should work in drupal.
Thank you.

@mdupont: Thanks for the link.
I added the following entry to the template.php and cleared the cache:
drupal_add_library('system', 'ui.dialog');
Result: Did not work either.
I would be very thankful for a working dialog-example without loading external jquery code (as it is all included in Drupal7)

Regarding to #1:
Is there a way telling us what jQuery and jQuery UI is available for all users?
Keeping in mind that jQuery UI is integrated in Drupal I think a user can expect all effects to work.
Drupal is a nice CMS, however, like in this case, there are some restrictions or special Drupal ways that really can drive users mad.
Steps without Drupal (pretty easy): bind in jquery and jquery ui in the header and you are ready using it without limits. Setup-Time: 1minute.
Steps using Drupal: Get to know where and how to bind in jquery script/library, wonder why the effect does not work in Drupal, do a google search as proper documentation is not yet available, find out the limitations of jQuery in Drupal and finally load the external jQuery scripts (loading jQuery code twice) to fix limitations. Setup-Time including frustration: Hours...

KEEP IT SIMPLE, KEEP IT SHORT -> LESS DRUPAL WAYS - REDUCED NEED OF DOCUMENTATION

As all of the suggested solutions didn't work, I changed category from support request to bug report until I was proved wrong.

@nod_: Didn't I provide all relevant information?
The code in my post was FIRST put directly in the body-field of my page. (To be more precise, the body field included an include_once command to a php-file (localhost) that contained the code)
Result: Didn't work.

Additionally binding in the downloaded jquery and the jquery_ui javascript code (put in the js-folder of the zen-theme) in the theme's info file brought the solution.

Adding the jquery code for the accordion effect directly in the page in another test worked like a charm. So I doubt that it might be already too late to bind in the script in the page:

<?php
//Load jQuery Accordion Effect
drupal_add_library('system', 'ui.accordion');
drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion({collapsible: true, autoHeight: false, icons: {"header": "ui-icon-plus", "headerSelected": "ui-icon-minus"} });});', 'inline');

<div id="accordion">

	<h3><a href="#">
		Text1 - Header
	</a></h3>
	<p>
                Text1
	</p>
	
	<h3><a href="#">
		Text2 - Header
	</a></h3>
	<p>
		Text2
	</p>
</div>
?>	

Regarding to #2: SECOND: Binding in the drupal_add_js code in the template file:
I put the following code in the theme's template.php:

function xxxxx_add_js_modal() {
  drupal_add_library('system', 'ui.dialog');
}

Result: Didn't work

Using instead the same code (without function) in the template.php

drupal_add_library('system', 'ui.dialog');

Result: Didn't work

If you think that I did something wrong (which actually could be the case as I'm not a drupal expert) I encourage you to take 5 minutes of your time and to test it by yourself. If you are successful, it would be nice if you could post the working code.

@nod_: I changed the category again from support request to bug report until I was proved wrong.
I think I provided all relevant information. If you think this is not a bug but a support request, please support by posting a working solution. Thank you.
Please also have a look at the link provided in #1.

Ok, finally found a solution. And to all other experts ;-) - it is not too late to bind in the following php-code directly in the node/page. No need to put it in the template.php:

Try it yourself:

<!-- Test Modal Dialog -->
<?php
//Load the javascript and the css:
drupal_add_library('system', 'ui.dialog');

//Add the code that triggers the effect:
//Replace XXXXXXXXXX with a unique name
drupal_add_js('  
(function ($) {
		Drupal.behaviors.XXXXXXXXXX = { 
		  attach: function(context, settings) {
		   
			//Enter the jQuery-Code here
			//********************************************
			
				$( "#dialog-message" ).dialog({
					modal: true,
					buttons: {
						Ok: function() {
							$( this ).dialog( "close" );
						}
					}
				});

			//********************************************

			}
		};
})(jQuery);
', 'inline');
?>

<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
</div>