Index: src/webapp/demos/uiOptions/html/uiOptions.html
===================================================================
--- src/webapp/demos/uiOptions/html/uiOptions.html	(revision 9779)
+++ src/webapp/demos/uiOptions/html/uiOptions.html	(working copy)
@@ -29,10 +29,8 @@
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.widget.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.mouse.js"></script>
-        <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.position.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.slider.js"></script>
-        <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.accordion.js"></script>
-        <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.dialog.js"></script>       
+        <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.accordion.js"></script>       
         <script type="text/javascript" src="../../../lib/json/js/json2.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/plugins/delegate/js/jquery.delegate.js"></script>
 
@@ -54,19 +52,15 @@
     </head>
 
     <body>
+        <button class="myButton">Edit Appearance</button>
+        <!-- div that will contain the UI Options component -->
+        <div id="myUIOptions"></div>
         <h1>Some Sample Title</h1>
         <p>Some content with <a id="myLink">a link</a> and<button id="myButton">a button</button>. </p>
-        
-        <!-- div that will contain the UI Options component -->
-        <div id="myUIOptions">
-            <div id="dialogContent">
-            </div>
-        </div>
-        <button class="myButton">Edit Appearance</button>
+
         <script type="text/javascript">
             demo.initUIOptions();
         </script>
-
     </body>
 
 </html>
Index: src/webapp/demos/uiOptions/js/uiOptions.js
===================================================================
--- src/webapp/demos/uiOptions/js/uiOptions.js	(revision 9779)
+++ src/webapp/demos/uiOptions/js/uiOptions.js	(working copy)
@@ -18,9 +18,11 @@
 var demo = demo || {};
 (function ($, fluid) {
 	
+    var uiOptionsNode;
+    var uiOptionsComponent;
+	
     //initialize the UI Enhancer
     var setupUIEnhancer = function () {
-    	
         var enhancerOpts = {
             defaultSiteSettings: {
                 theme: "mist",
@@ -38,27 +40,6 @@
         return fluid.uiEnhancer(document, enhancerOpts);
     };
     
-    var setupDialog = function() {
-    
-        // Create the dialog
-        uiOptionsNode.dialog({
-            bgiframe: true,
-            width: '60em',
-            modal: true,
-            dialogClass: 'fl-widget fl-grabbable',
-            closeOnEscape: false,
-            autoOpen: false,
-            draggable: true,
-            title: "User Interface Options"
-        });
-        
-        // Bind event handlers for it.
-        $(".myButton").click(function() {
-            uiOptionsNode.dialog("open");
-        });
-    };
-
-    
     //initialize UI Options component
     var setupUIOptions = function () {
         var options = {
@@ -72,15 +53,15 @@
                     $(".uiOptions .fl-col h2:eq(0)").focus();
                 },
                 onCancel: function() {
-                    uiOptionsNode.dialog("close");
+                    uiOptionsNode.slideUp();
                 },
                 onSave: function() {
-                    uiOptionsNode.dialog("close");
+                    uiOptionsNode.slideUp();
                 }
             }
         };
         
-        return fluid.uiOptions(".uiOptions", options);
+        uiOptionsComponent = fluid.uiOptions(".uiOptions", options);
     };
     
     //load the UI Options component
@@ -88,12 +69,21 @@
         var urlSelector = "../../../components/uiOptions/html/UIOptions.html .uiOptions";
         uiOptionsNode.load(urlSelector, setupUIOptions);
     };
-
+    
+    var setupPage = function () {
+        $(".myButton").toggle(function () {
+                uiOptionsNode.slideDown();
+            }, function () {
+                uiOptionsNode.slideUp();
+                uiOptionsComponent.cancel();
+            });
+        uiOptionsNode.hide();
+    };
     
     demo.initUIOptions = function () {
         uiOptionsNode = $("#myUIOptions");
         setupUIEnhancer();  
         loadUIOptions();
-        setupDialog();
+        setupPage();
     };
 })(jQuery, fluid);
Index: src/webapp/integration-demos/sakai/css/sakai.css
===================================================================
--- src/webapp/integration-demos/sakai/css/sakai.css	(revision 9779)
+++ src/webapp/integration-demos/sakai/css/sakai.css	(working copy)
@@ -24,7 +24,7 @@
 .fl-tabs-content .fl-col input {width:45%; margin:3px 0; padding:0;}
 
 
-.lookNfeel {padding:15px 10px 0; overflow:auto;}
+.lookNfeel {padding:5px 5px 5px; overflow:auto;}
 
 /************************************/
 .footer { background:url("../images/sakai.png") no-repeat left center; border-top:1px solid #efefef; color:#ccc; font-size:0.8em; margin:10px 0 0;}
Index: src/webapp/integration-demos/sakai/html/ui-options-fss-sakai.html
===================================================================
--- src/webapp/integration-demos/sakai/html/ui-options-fss-sakai.html	(revision 9779)
+++ src/webapp/integration-demos/sakai/html/ui-options-fss-sakai.html	(working copy)
@@ -32,7 +32,6 @@
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.mouse.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.position.js"></script> 
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.draggable.js"></script>
-        <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.dialog.js"></script> 
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.slider.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.accordion.js"></script>
         <script type="text/javascript" src="../../../lib/jquery/plugins/delegate/js/jquery.delegate.js"></script>
@@ -57,12 +56,13 @@
     </head>
 
     <body class="fl-theme-mist">
-        
-        <div id="dialog_container">
-            <div id="dialog_content">Loading....</div>
-        </div>
-
 
+        <!-- LAYOUT AND APPEARANCE -->
+        <div class="lookNfeel fl-container">
+            <a href="#_bottom" class="skin_ fl-button-left fl-linearEnabled"> <strong class="fl-button-inner"> Edit Appearance </strong> </a>
+        </div>
+        
+        <div class="ui_options"></div>
 
         <div class="header fl-knockout">
             <h1>My Dashboard</h1>
@@ -229,12 +229,6 @@
             
         </div>
 
-        <!-- LAYOUT AND APPEARANCE -->
-        <div class="lookNfeel fl-container">
-            <a href="#_bottom" class="addWidget_ fl-button-left fl-linearEnabled"> <strong class="fl-button-inner"> Add Widgets </strong> </a>
-            <a href="#_bottom" class="skin_ fl-button-left fl-linearEnabled"> <strong class="fl-button-inner"> Edit Appearance </strong> </a>
-        </div>
-
         <!-- FOOTER -->
         <div class="footer fl-container-flex fl-knockout">
             <p>© 2004-2008 The Sakai Foundation <br />
Index: src/webapp/integration-demos/sakai/js/sakai.js
===================================================================
--- src/webapp/integration-demos/sakai/js/sakai.js	(revision 9779)
+++ src/webapp/integration-demos/sakai/js/sakai.js	(working copy)
@@ -13,30 +13,27 @@
 /*global $, fluid*/
 
 $(function () {
+    
     var uiOptions;
-    var enhancerOpts = {
-        defaultSiteSettings: {
-            theme: "mist"
-        },
-        tableOfContents: {
-            options: {
-                templateUrl: "../../../components/tableOfContents/html/TableOfContents.html"
+    var uiOptionsNode;
+    
+     //initialize the UI Enhancer
+    var setupUIEnhancer = function () {
+        var enhancerOpts = {
+            defaultSiteSettings: {
+                theme: "mist"
+            },
+            tableOfContents: {
+                options: {
+                    templateUrl: "../../../components/tableOfContents/html/TableOfContents.html"
+                }
+    
             }
-
-        }
+        };
+        return fluid.uiEnhancer(document, enhancerOpts);
     };
     
-    var uiEnhancer = fluid.uiEnhancer(document, enhancerOpts);
-    var dialog_container = $("#dialog_container");
-
-    
-    var initDialog = function () {
-        // center dialog
-        $('#dialog_container').css({
-            left: ($(window).width() / 2) - ($('#dialog_container').width() / 2),
-            top: ($(window).height() / 2) - ($('#dialog_container').height() / 2)
-        }); 
-        
+    var setupUIOptions = function () {        
         var options = {
             listeners: {
                 afterRender: function () {
@@ -44,40 +41,31 @@
                     $('.fl-uiOptions .fl-col h2:eq(0)').focus();
                 },
                 onCancel: function () {
-                    dialog_container.dialog("close");
+                    uiOptionsNode.slideUp();
                 }, 
                 onSave: function () {
-                    dialog_container.dialog("close");
+                    uiOptionsNode.slideUp();
                 }
             }
         };
         
         // instantiate component
-        uiOptions = fluid.uiOptions("#dialog_container", options);
-        
-        // 1 time, reposition dialog 
-        dialog_container.dialog('option', 'position', 'center');
-        
+        uiOptions = fluid.uiOptions(".ui_options", options);        
     };
-
-    dialog_container.dialog({
-        bgiframe: true,
-        title: 'User Interface Options',
-        width: '69em',
-        modal: true,
-        autoOpen: false,
-        draggable: true
-    });
     
-    $("#dialog_container .fl-icon-close").click(function () {
-        dialog_container.dialog("close");        
-    });
+    var setup = function () {
+        $(".lookNfeel a").toggle(function () {
+                uiOptionsNode.slideDown();
+            }, function () {
+                uiOptionsNode.slideUp();
+                uiOptions.cancel();
+            });
+        uiOptionsNode.hide();
+    };
     
-    $('.lookNfeel a').click(function () {
-        dialog_container.dialog("open");
-        if (!uiOptions) {
-            $('#dialog_content').load('../../../components/uiOptions/html/UIOptions.html .uiOptions', initDialog);            
-        }
-    });  
+    uiOptionsNode = $(".ui_options");
+    setupUIEnhancer();  
+    uiOptionsNode.load('../../../components/uiOptions/html/UIOptions.html .uiOptions', setupUIOptions);
+    setup();
    
 });
\ No newline at end of file
