Merge lp:~sidnei/lazr-js/combo-service into lp:lazr-js

[Sidnei da Silva]

[Sidnei da Silva (sidnei)]

- Implements a demo combo-service which is able to serve the contents of the 'build' directory (see examples/combo.html)
- Fix all examples to use pure loader goodness.

[Māris Fogels (mars)]

Hi Sidnei,

This looks good. If you have to, I think you could land it as-is, but I do have some comments about the branch:

• Nice formoverlay example in combo.html. It is very straight forward
• Why did some of the lazr module dependencies get updated?
• Do we need to include the css* module dependencies, or can they be inlined on the page? I worry about the two approaches confusing developers.
• test_extract_skinnable() and test_extract_skinnable_with_lazr_conventions() look like copy-n-paste code. Can the common parts be put into a parameterized method?
• Use Y.one() instead of Y.get()

I think we can define a global LAZR() function in lazr-meta to replace YUI(), but that can be saved for another branch.

Maris

review: Approve

[Francis J. Lacoste (flacoste)]

On November 19, 2009, Māris Fogels wrote:
> I think we can define a global LAZR() function in lazr-meta to replace
> YUI(), but that can be saved for another branch.
>

I don't think that is particularly interesting since all applications will
need to merge in their own modules in the LAZR config. So why define a LAZR()
wrapper, when you'll need to define a LP(), U1(), LANDSCAPE() one?

--
Francis J. Lacoste
<email address hidden>

[lp:~sidnei/lazr-js/combo-service]

194. By Sidnei da Silva on 2009-11-19

- Move css modules inline

[Sidnei da Silva (sidnei)]

Thanks for the review.

- CSS modules: I've updated the examples to inline them.
- Module dependencies: Only overlay was changed, to make the dependencies more explicit, the other changes were about adding 'skinnable'.
- Tests: they look very similar, you have to look a bit closer to notice the difference yeah. :)
- Y.get(): I didn't introduce any new one. But it would be nice to do a once-over and clear them all.

[Sidnei da Silva (sidnei)]

FWIW, I don't think it's a good idea to define a global LAZR, since the plan to include lazr-meta.js other projects, each of which will have to define it's own YUI() instance.

[Māris Fogels (mars)]

On Thu, Nov 19, 2009 at 12:34 PM, Sidnei da Silva
<email address hidden> wrote:
> FWIW, I don't think it's a good idea to define a global LAZR, since the plan to include lazr-meta.js other projects, each of which will have to define it's own YUI() instance.

So, I was suggesting the global LAZR() YUI wrapper because there is
code in each example that constructs a LAZR_YUI_CONFIG, and then
passes that into a YUI() constructor. Instead of doing so, why not
combine the two steps into a project-specific LZR() convenience
function? The function would *not* be for use outside of lazr-js,
just for convenience inside. I can see every individual YUI project
going this route, wrapping the YUI constructor as their needs dictate.

Regarding including lazr-meta.js: we will have to see how it works in
practice. I assumed that lazr-meta was for the purpose of running the
lazr project for development and demonstration purposes. I did not
think other projects would ever import lazr-meta.

I am wary of the idea of combining meta-dependencies like this: at
most, you could pull in the YUI config object's "modules" section.
All of the other configuation settings should be left to the
individual project.

=== modified file 'Makefile'
--- Makefile	2009-11-13 20:43:37 +0000
+++ Makefile	2009-11-19 17:33:11 +0000
@@ -21,11 +21,12 @@
 
 # Update the build directory
 build: $(PY)
-	$(PYTHON) -S bin/jsbuild
+	cp -r src-js/lazrjs/yui/* build
+	$(PYTHON) -S bin/jsbuild -b build/lazr -s src-js/lazrjs -n lazr -x lazr/yui
 	$(PYTHON) -S bin/yuimeta -n LAZR_MODULES \
-		-s build \
-		-p lazrjs -x "(-min|-debug|-all|-meta|build/lazr.js|lazr/yui|test)" \
-		-o build/lazrjs-meta.js
+		-s build/lazr \
+		-p lazr -x "(-min|-debug|-all|-meta|build/lazr/lazr.js|test)" \
+		-o build/lazr/lazr-meta.js
 
 lint:
 	$(PYTHON) -S bin/jslint
@@ -51,6 +52,8 @@
 $(PY): bin/buildout buildout.cfg setup.py
 	$(PYTHON) -S ./bin/buildout
 
+run: $(PY)
+	$(PY) `which twistd` -ny combo.tac
 
 clean:
 	rm -fr build/* bin

=== added file 'combo.tac'
--- combo.tac	1970-01-01 00:00:00 +0000
+++ combo.tac	2009-11-19 17:33:11 +0000
@@ -0,0 +1,30 @@
+import os
+
+from lazr.js.combo import combo_app
+
+from twisted.application import service, strports
+from twisted.internet import reactor
+from twisted.python import threadpool
+from twisted.web import server, wsgi
+from twisted.web.static import File
+from twisted.web.resource import Resource
+
+
+resource = Resource()
+for path in os.listdir("build"):
+    folder = os.path.join("build", path)
+    if os.path.isdir(folder):
+        resource.putChild(path, File(folder))
+
+threadpool = threadpool.ThreadPool(0, 10)
+threadpool.start()
+reactor.addSystemEventTrigger("during", "shutdown", threadpool.stop)
+
+resource.putChild("combo", wsgi.WSGIResource(reactor, threadpool,
+                                             combo_app("build")))
+
+application = service.Application("combo-service")
+site = server.Site(resource)
+
+s = strports.service("tcp:9876", site)
+s.setServiceParent(application)

=== modified file 'examples/activator/index.html'
--- examples/activator/index.html	2009-10-22 20:22:12 +0000
+++ examples/activator/index.html	2009-11-19 17:33:11 +0000
@@ -3,17 +3,24 @@
 <html>
 <head>
   <title>Lazr-js examples: Activator</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/anim/anim.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/activator/activator.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+  </script>
 
 <script id="example-script" type="text/javascript">
 
-YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-    }).use('node', 'lazr.activator', function(Y) {
+YUI(LAZR_YUI_CONFIG).use('node', 'lazr.activator', function(Y) {
 
     Y.log('hooking up widget');
     var content_box = Y.get('#example-activator');
@@ -92,19 +99,6 @@
 });
 </script>
 
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssreset/reset.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssfonts/fonts.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssbase/base.css" />
-
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/activator/assets/activator-core.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/activator/assets/skins/sam/activator-skin.css"></link>
-</head>
 <body class="yui-skin-sam" style="margin: 1em">
 
 <h1>Activator Widget</h1>

=== modified file 'examples/anim/index.html'
--- examples/anim/index.html	2009-11-10 22:57:58 +0000
+++ examples/anim/index.html	2009-11-19 17:33:11 +0000
@@ -1,21 +1,26 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
   <title>Lazr-js examples: anim</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/oop/oop-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/event/event-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/attribute/attribute-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/base/base-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/dom/dom-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/node/node-min.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/anim/anim-min.js"></script>
-
-  <script type="text/javascript" src="../../build/anim/anim.js"></script>
-  <script type="text/javascript">
-
-YUI().use('node', 'event', 'lazr.anim', function(Y) {
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+  </script>
+  <script type="text/javascript">
+
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.anim', function(Y) {
 
     Y.on('click', function(ev) {
         var id = ev.target ? ev.target.getAttribute('id') : null;
@@ -64,9 +69,8 @@
 });
 
   </script>
-  <style>
-  #flash
-  {
+  <style id="style-overrides" type="text/css">
+  #flash {
       width:200px;
       height: 200px;
       margin-bottom: 20px;
@@ -92,7 +96,12 @@
 pre-configured animation objects.</p>
 
 <pre>
-YUI().use('lazr.anim', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('lazr.anim', function(Y) {
 
     var yellow = Y.lazr.anim.flash_in(...);    // A yellow flash.
     var green  = Y.lazr.anim.green_flash(...); // A green flash.

=== modified file 'examples/autocomplete/index.html'
--- examples/autocomplete/index.html	2009-11-12 18:00:07 +0000
+++ examples/autocomplete/index.html	2009-11-19 17:33:11 +0000
@@ -4,284 +4,274 @@
 <head>
   <title>Lazr-js examples: autocomplete</title>
 
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"></link>
-
-
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-debug.js"></script>
-  <script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-ext-debug.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/autocomplete/autocomplete.js"></script>
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
   <script type="text/javascript">
-
-var LP = YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-});
-
-var countries = [
-    "European Union",
-    "United States",
-    "Japan",
-    "Germany",
-    "China (PRC)",
-    "United Kingdom",
-    "France",
-    "Italy",
-    "Spain",
-    "Canada",
-    "Brazil",
-    "Russia",
-    "India",
-    "South Korea",
-    "Australia",
-    "Mexico",
-    "Netherlands",
-    "Turkey",
-    "Sweden",
-    "Belgium",
-    "Indonesia",
-    "Switzerland",
-    "Poland",
-    "Norway",
-    "Republic of China",
-    "Saudi Arabia",
-    "Austria",
-    "Greece",
-    "Denmark",
-    "Iran",
-    "South Africa",
-    "Argentina",
-    "Ireland",
-    "Thailand",
-    "Finland",
-    "Venezuela",
-    "Portugal",
-    "Hong Kong",
-    "United Arab Emirates",
-    "Malaysia",
-    "Czech Republic",
-    "Colombia",
-    "Nigeria",
-    "Romania",
-    "Chile",
-    "Israel",
-    "Singapore",
-    "Philippines",
-    "Pakistan",
-    "Ukraine",
-    "Hungary",
-    "Algeria",
-    "New Zealand",
-    "Egypt",
-    "Kuwait",
-    "Peru",
-    "Kazakhstan",
-    "Slovakia",
-    "Morocco",
-    "Bangladesh",
-    "Vietnam",
-    "Qatar",
-    "Angola",
-    "Libya",
-    "Iraq",
-    "Croatia",
-    "Luxembourg",
-    "Sudan",
-    "Slovenia",
-    "Cuba",
-    "Belarus",
-    "Ecuador",
-    "Serbia",
-    "Oman",
-    "Bulgaria",
-    "Lithuania",
-    "Syria",
-    "Dominican Republic",
-    "Tunisia",
-    "Guatemala",
-    "Azerbaijan",
-    "Sri Lanka",
-    "Kenya",
-    "Latvia",
-    "Turkmenistan",
-    "Costa Rica",
-    "Lebanon",
-    "Uruguay",
-    "Uzbekistan",
-    "Yemen",
-    "Cyprus",
-    "Estonia",
-    "Trinidad and Tobago",
-    "Cameroon",
-    "El Salvador",
-    "Iceland",
-    "Panama",
-    "Bahrain",
-    "Ivory Coast",
-    "Ethiopia",
-    "Tanzania",
-    "Jordan",
-    "Ghana",
-    "Bosnia and Herzegovina",
-    "Macau",
-    "Burma",
-    "Bolivia",
-    "Brunei",
-    "Botswana",
-    "Honduras",
-    "Gabon",
-    "Uganda",
-    "Jamaica",
-    "Zambia",
-    "Senegal",
-    "Paraguay",
-    "Albania",
-    "Equatorial Guinea",
-    "Georgia",
-    "Democratic Republic of the Congo",
-    "Nepal",
-    "Afghanistan",
-    "Cambodia",
-    "Armenia",
-    "Republic of the Congo",
-    "Mozambique",
-    "Republic of Macedonia",
-    "Malta",
-    "Namibia",
-    "Madagascar",
-    "Chad",
-    "Burkina Faso",
-    "Mauritius",
-    "Mali",
-    "The Bahamas",
-    "Papua New Guinea",
-    "Nicaragua",
-    "Haiti",
-    "Benin",
-    "Palestinian flag West Bank and Gaza",
-    "Jersey",
-    "Fiji",
-    "Guinea",
-    "Moldova",
-    "Niger",
-    "Laos",
-    "Mongolia",
-    "French Polynesia",
-    "Kyrgyzstan",
-    "Barbados",
-    "Tajikistan",
-    "Malawi",
-    "Liechtenstein",
-    "New Caledonia",
-    "Kosovo",
-    "Rwanda",
-    "Montenegro",
-    "Swaziland",
-    "Guam",
-    "Mauritania",
-    "Guernsey",
-    "Isle of Man",
-    "Togo",
-    "Somalia",
-    "Suriname",
-    "Aruba",
-    "North Korea",
-    "Zimbabwe",
-    "Central African Republic",
-    "Faroe Islands",
-    "Greenland",
-    "Sierra Leone",
-    "Lesotho",
-    "Cape Verde",
-    "Eritrea",
-    "Bhutan",
-    "Belize",
-    "Antigua and Barbuda",
-    "Gibraltar",
-    "Maldives",
-    "San Marino",
-    "Guyana",
-    "Burundi",
-    "Saint Lucia",
-    "Djibouti",
-    "British Virgin Islands",
-    "Liberia",
-    "Seychelles",
-    "The Gambia",
-    "Northern Mariana Islands",
-    "Grenada",
-    "Saint Vincent and the Grenadines",
-    "Saint Kitts and Nevis",
-    "East Timor",
-    "Vanuatu",
-    "Comoros",
-    "Samoa",
-    "Solomon Islands",
-    "Guinea-Bissau",
-    "American Samoa",
-    "Dominica",
-    "Micronesia",
-    "Tonga",
-    "Cook Islands",
-    "Palau",
-    "Marshall Islands",
-    "S o Tom  and Pr ncipe",
-    "Anguilla",
-    "Kiribati",
-    "Tuvalu",
-    "Niue"
-];
-
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+
+    var LP = YUI(LAZR_YUI_CONFIG);
+
+    var countries = [
+        "European Union",
+        "United States",
+        "Japan",
+        "Germany",
+        "China (PRC)",
+        "United Kingdom",
+        "France",
+        "Italy",
+        "Spain",
+        "Canada",
+        "Brazil",
+        "Russia",
+        "India",
+        "South Korea",
+        "Australia",
+        "Mexico",
+        "Netherlands",
+        "Turkey",
+        "Sweden",
+        "Belgium",
+        "Indonesia",
+        "Switzerland",
+        "Poland",
+        "Norway",
+        "Republic of China",
+        "Saudi Arabia",
+        "Austria",
+        "Greece",
+        "Denmark",
+        "Iran",
+        "South Africa",
+        "Argentina",
+        "Ireland",
+        "Thailand",
+        "Finland",
+        "Venezuela",
+        "Portugal",
+        "Hong Kong",
+        "United Arab Emirates",
+        "Malaysia",
+        "Czech Republic",
+        "Colombia",
+        "Nigeria",
+        "Romania",
+        "Chile",
+        "Israel",
+        "Singapore",
+        "Philippines",
+        "Pakistan",
+        "Ukraine",
+        "Hungary",
+        "Algeria",
+        "New Zealand",
+        "Egypt",
+        "Kuwait",
+        "Peru",
+        "Kazakhstan",
+        "Slovakia",
+        "Morocco",
+        "Bangladesh",
+        "Vietnam",
+        "Qatar",
+        "Angola",
+        "Libya",
+        "Iraq",
+        "Croatia",
+        "Luxembourg",
+        "Sudan",
+        "Slovenia",
+        "Cuba",
+        "Belarus",
+        "Ecuador",
+        "Serbia",
+        "Oman",
+        "Bulgaria",
+        "Lithuania",
+        "Syria",
+        "Dominican Republic",
+        "Tunisia",
+        "Guatemala",
+        "Azerbaijan",
+        "Sri Lanka",
+        "Kenya",
+        "Latvia",
+        "Turkmenistan",
+        "Costa Rica",
+        "Lebanon",
+        "Uruguay",
+        "Uzbekistan",
+        "Yemen",
+        "Cyprus",
+        "Estonia",
+        "Trinidad and Tobago",
+        "Cameroon",
+        "El Salvador",
+        "Iceland",
+        "Panama",
+        "Bahrain",
+        "Ivory Coast",
+        "Ethiopia",
+        "Tanzania",
+        "Jordan",
+        "Ghana",
+        "Bosnia and Herzegovina",
+        "Macau",
+        "Burma",
+        "Bolivia",
+        "Brunei",
+        "Botswana",
+        "Honduras",
+        "Gabon",
+        "Uganda",
+        "Jamaica",
+        "Zambia",
+        "Senegal",
+        "Paraguay",
+        "Albania",
+        "Equatorial Guinea",
+        "Georgia",
+        "Democratic Republic of the Congo",
+        "Nepal",
+        "Afghanistan",
+        "Cambodia",
+        "Armenia",
+        "Republic of the Congo",
+        "Mozambique",
+        "Republic of Macedonia",
+        "Malta",
+        "Namibia",
+        "Madagascar",
+        "Chad",
+        "Burkina Faso",
+        "Mauritius",
+        "Mali",
+        "The Bahamas",
+        "Papua New Guinea",
+        "Nicaragua",
+        "Haiti",
+        "Benin",
+        "Palestinian flag West Bank and Gaza",
+        "Jersey",
+        "Fiji",
+        "Guinea",
+        "Moldova",
+        "Niger",
+        "Laos",
+        "Mongolia",
+        "French Polynesia",
+        "Kyrgyzstan",
+        "Barbados",
+        "Tajikistan",
+        "Malawi",
+        "Liechtenstein",
+        "New Caledonia",
+        "Kosovo",
+        "Rwanda",
+        "Montenegro",
+        "Swaziland",
+        "Guam",
+        "Mauritania",
+        "Guernsey",
+        "Isle of Man",
+        "Togo",
+        "Somalia",
+        "Suriname",
+        "Aruba",
+        "North Korea",
+        "Zimbabwe",
+        "Central African Republic",
+        "Faroe Islands",
+        "Greenland",
+        "Sierra Leone",
+        "Lesotho",
+        "Cape Verde",
+        "Eritrea",
+        "Bhutan",
+        "Belize",
+        "Antigua and Barbuda",
+        "Gibraltar",
+        "Maldives",
+        "San Marino",
+        "Guyana",
+        "Burundi",
+        "Saint Lucia",
+        "Djibouti",
+        "British Virgin Islands",
+        "Liberia",
+        "Seychelles",
+        "The Gambia",
+        "Northern Mariana Islands",
+        "Grenada",
+        "Saint Vincent and the Grenadines",
+        "Saint Kitts and Nevis",
+        "East Timor",
+        "Vanuatu",
+        "Comoros",
+        "Samoa",
+        "Solomon Islands",
+        "Guinea-Bissau",
+        "American Samoa",
+        "Dominica",
+        "Micronesia",
+        "Tonga",
+        "Cook Islands",
+        "Palau",
+        "Marshall Islands",
+        "S o Tom  and Pr ncipe",
+        "Anguilla",
+        "Kiribati",
+        "Tuvalu",
+        "Niue"
+    ];
   </script>
 
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/autocomplete/assets/skins/sam/autocomplete.css"></link>
-
-  <style type="text/css">
-  #example {
-      background-color: #ecf5fa;
-      border: 1px solid #8899dd;
-      padding: 2em;
-    }
-
-  #example label { display: block; line-height: 2em; font-weight: bold; }
-  #example input { margin-bottom: 1em; }
-  #example h4 { font-weight: normal; }
-  #example #keys li { line-height: 2em; }
-  #example #keys kbd {
-      background-color: #eee;
-      border: 1px solid #bbb;
-      padding-left: 3px;
-      padding-right: 3px;
-  }
+  <style id="style-overrides" type="text/css">
+    #example {
+    background-color: #ecf5fa;
+    border: 1px solid #8899dd;
+    padding: 2em;
+    }
+
+    #example label { display: block; line-height: 2em; font-weight: bold; }
+    #example input { margin-bottom: 1em; }
+    #example h4 { font-weight: normal; }
+    #example #keys li { line-height: 2em; }
+    #example #keys kbd {
+    background-color: #eee;
+    border: 1px solid #bbb;
+    padding-left: 3px;
+    padding-right: 3px;
+    }
   </style>
 </head>
 
 <body class="yui-skin-sam">
 
-<h1>A Simple auto-complete Widget</h1>
-
-<h2>Demonstration</h2>
-<div id="example">
-  <label for="ac-input">Enter a country name:</label>
-  <input id="ac-input" type="text" value="" />
-  <h4>Some useful keyboard shortcuts:</h4>
-  <ul id="keys">
-    <li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
-    <li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
-    <li><kbd>Esc</kbd> closes the completion list</li>
-  </ul>
-
-  <script type="text/javascript">
-LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
+  <h1>A Simple auto-complete Widget</h1>
+
+  <h2>Demonstration</h2>
+  <div id="example">
+    <label for="ac-input">Enter a country name:</label>
+    <input id="ac-input" type="text" value="" />
+    <h4>Some useful keyboard shortcuts:</h4>
+    <ul id="keys">
+      <li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
+      <li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
+      <li><kbd>Esc</kbd> closes the completion list</li>
+    </ul>
+
+    <script type="text/javascript">
+      LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
 
     function log(msg) {
         Y.log(msg, 'info');
@@ -319,8 +309,8 @@
   <h3>Javascript</h3>
   Add the following javascript and css tags into your page.
   <pre>
-    &lt;script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../../build/autocomplete/autocomplete.js"&gt;&lt;/script&gt;
+    &lt;script type="text/javascript" src="../../build/yui/yui-min.js"&gt;&lt;/script&gt;
+    &lt;script type="text/javascript" src="../../build/lazr/lazr-meta.js"&gt;&lt;/script&gt;
   </pre>
 
   <p>
@@ -338,11 +328,18 @@
   The AutoComplete widget requires two ATTRs on creation: a node id and an
   array containing data.
   <pre>
-    var autocomplete = new Y.lazr.AutoComplete({
-        input: '#input-box',
-        data: ['Mike', 'Fred', 'Barney']
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+    YUI(LAZR_YUI_CONFIG).use("lazr.autocomplete", function(Y) {
+        var autocomplete = new Y.lazr.AutoComplete({
+            input: '#input-box',
+            data: ['Mike', 'Fred', 'Barney']
+        });
+        autocomplete.render();
     });
-    autocomplete.render();
   </pre>
 </body>
 </html>

=== modified file 'examples/choiceedit/index.html'
--- examples/choiceedit/index.html	2009-10-22 20:22:12 +0000
+++ examples/choiceedit/index.html	2009-11-19 17:33:11 +0000
@@ -2,27 +2,20 @@
 <html>
 <head>
   <title>Lazr-js examples: Choice editing</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/anim/anim.js"></script>
-  <script type="text/javascript" src="../../build/overlay/overlay.js"></script>
-
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/inlineedit/assets/skins/sam/editor.css"></link>
-
-  <script type="text/javascript" src="../../build/choiceedit/choiceedit.js"></script>
-
-  <link type="text/css" rel="stylesheet" 
-  href="../../build/overlay/assets/pretty-overlay-core.css">
-  <link type="text/css" rel="stylesheet" 
-  href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css">
-  <link type="text/css" rel="stylesheet" 
-  href="../../build/choiceedit/assets/choiceedit-core.css">
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+  </script>
 </head>
 <body class="yui-skin-sam">
 
@@ -36,23 +29,21 @@
 
 <h2>Required include dependencies</h2>
 <pre>
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/current/build/yui/yui.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/choiceedit/choiceedit.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/anim/anim.js&quot;&gt;&lt;/script&gt;
-
-  &lt;!-- overlay required files --&gt;
-  &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../build/overlay/assets/pretty-overlay-core.css&quot;&gt;&lt;/link&gt;
-  &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../build/overlay/assets/skins/sam/pretty-overlay-skin.css&quot;&gt;&lt;/link&gt;
-  &lt;!-- choiceedit required files --&gt;
-  &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../build/choiceedit/assets/choiceedit-core.css&quot;&gt;&lt;/link&gt;
-
+  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/yui-min.js&quot;&gt;&lt;/script&gt;
+  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/lazr-meta.js&quot;&gt;&lt;/script&gt;
 </pre>
 
 <h2>Example instantiation</h2>
 
 <pre>
-    YUI().use('node', 'event', 'widget', 'plugin', 'overlay', 'lazr.choiceedit', function(Y) {
-    
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+    YUI(LAZR_YUI_CONFIG).use('node', 'event', 'widget', 'plugin', 'overlay',
+                             'lazr.choiceedit', function(Y) {
+
     var choice_edit = new Y.ChoiceSource({
         contentBox:  '#status',
         value:       'incomplete',
@@ -175,10 +166,8 @@
 </pre>
 
   <script>
-    YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-    }).use('node', 'event', 'widget', 'plugin', 'overlay', 'lazr.choiceedit', function(Y) {
+    YUI(LAZR_YUI_CONFIG).use('node', 'event', 'widget', 'plugin',
+                             'overlay', 'lazr.choiceedit', function(Y) {
 
     // Add a delay between the start and end of the inline editor widget's
     // "save" event.

=== added file 'examples/combo.html'
--- examples/combo.html	1970-01-01 00:00:00 +0000
+++ examples/combo.html	2009-11-19 17:33:11 +0000
@@ -0,0 +1,201 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>LAZR JS Examples: lazr.formoverlay</title>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+
+  <link rel="stylesheet" type="text/css" href="../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../build/yui/yui.js"></script>
+  <script type="text/javascript" src="../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+      var LAZR_YUI_CONFIG = {
+          filter: "min",
+          comboBase: "http://localhost:9876/combo?",
+          root: "",
+          combine: true,
+          modules: LAZR_MODULES,
+      };
+  </script>
+
+  <script type="text/javascript">
+
+YUI(LAZR_YUI_CONFIG).use('lazr.formoverlay', 'node', 'event',
+                         'dump', function(Y) {
+
+    var big_error = [
+        'Traceback (most recent call last):',
+        '  File "/foo/bar/baz.py", line 130, in publish',
+        '    obj = request.traverse(obj)',
+        '  File "/foo/bar/baz.py", line 1348, in traverse',
+        '    result = super(WebServiceRequestTraversal, self).traverse(ob)',
+        '  File "/foo/bar/baz.py", line 513, in traverse',
+        '    ob = super(BrowserRequest, self).traverse(obj)',
+        '  File "/foo/bar/baz.py", line 453, in traverse',
+        '    ob = super(HTTPRequest, self).traverse(obj)',
+        '  File "/foo/bar/baz.py", line 263, in traverse',
+        '    obj = publication.traverseName(self, obj, entry_name)',
+        '  File "/foo/bar/baz.py", line 1157, in traverseName',
+        '    return super(WebServicePublication, self).traverseName(',
+        '  File "/foo/bar/foo/bar/foo/bar/foo/bar/foo/bar/baz.py", ' +
+        'line 61, in traverseName',
+        '  File "/foo/bar/baz.py", line 659, in publishTraverse',
+        '    nextobj = self._publishTraverse(request, name)',
+        '  File "/foo/bar/baz.py", line 763, in _publishTraverse',
+        '    nextstep)',
+        '  File "/foo/bar/baz.py", line 689, in _handle_next_object',
+        '    raise NotFound(self.context, name)',
+        "NotFound: Object: , name: u'1asdfasdf'"
+        ].join("\n");
+
+    var formoverlay;
+    var submit_callback = function(data){
+        if (data['firstname'][0] == "Harry"){
+            formoverlay.showError([
+                '"Harry" is not allowed.',
+                big_error,
+            ]);
+        }
+
+        Y.get("#data-display").set("innerHTML", Y.dump(data));
+    };
+
+    formoverlay = new Y.lazr.FormOverlay({
+        headerContent: '<h2>Your details</h2>',
+        form_header: [
+            '<p>Enter the firstname "Harry" to see an example error.</p>',
+            '<p id="formoverview">Please fill in the following details:</p>'
+            ].join(""),
+        form_content: [
+            '<div id="myform">',
+            '<table>',
+            '<tr>',
+            '  <td><label for="firstname">First name: </label></td>',
+            '  <td><input type="text" name="firstname" id="firstname"/></td>',
+            '</tr>',
+            '<tr>',
+            '  <td><label for="lastname">Last name: </label></td>',
+            '  <td><input type="text" name="lastname" id="lastname"/></td>',
+            '</tr>',
+            '<tr>',
+            '  <td><label for="gender">Gender: </label></td>',
+            '  <td><select name="gender">',
+            '    <option value="female">Female</option>',
+            '    <option value="male">Male</option>',
+            '  </select></td>',
+            '</tr>',
+            '</table>',
+            '</div>'
+        ].join(""),
+        form_submit_callback: submit_callback,
+        centered: true,
+        visible: false
+    });
+    formoverlay.render();
+
+    Y.on("domready", function(){
+        formoverlay.show();
+    });
+
+    Y.on('click', function(e) {
+        Y.log("Showing overlay", "info");
+        formoverlay.show();
+    }, '#show-overlay');
+});
+  </script>
+</head>
+
+<body class="yui-skin-sam">
+  <h1>Using forms in a LAZR overlay</h1>
+
+  <p>The <code>FormOverlay</code> widget allows the display and data
+     extraction of any form.
+  </p>
+
+  <h2>Demonstration</h2>
+  <div id="example">
+    <button id="show-overlay">Re-display form</button>
+
+    <p>Data returned upon form submission: <span id="data-display"></span>
+    </p>
+  </div>
+
+  <h2>Page Setup</h2>
+  <p>The following Javascript and CSS files will need to be included on your page:</p>
+
+  <h3>Javascript</h3>
+  <pre>
+    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/current/build/yui/yui-min.js&quot;&gt;&lt;/script&gt;
+    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/lazr-meta.js&quot;&gt;&lt;/script&gt;
+  </pre>
+
+  <h2>Widget Setup</h2>
+  <p>The FormOverlay requires only form content during initialization.
+     The normal Overlay attributes (such as headerContent) can be used
+     as expected.</p>
+  <pre><code>
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+    YUI(LAZR_YUI_CONFIG).use("lazr.formoverlay", function(Y){
+      var form_content = 'Enter name: &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt;';
+      var formoverlay = new Y.lazr.FormOverlay({
+          headerContent: '&lt;h2&gt;Your Form Title&lt;/h2&gt;',
+          form_content: form_content});
+      formoverlay.render();
+    });
+  </code></pre>
+  <p><strong>Note:</strong> The form content can be passed as either a string
+     of HTML (as is useful if the form is obtained via an AJAX request) or
+     as an instance of a Y.Node (as is useful if the form is obtained from
+     the current page).
+  </p>
+  <h3>Providing the submit callback</h3>
+  <p>To do something useful with the FormOverlay, you will want to provide
+     your own submit callback, so that you can do something with the data.
+     Data is returned to your callback as a hash, where each value is
+     a list, due to the ability to select multiple values for a single key
+     with HTML check input elements.
+  </p>
+  <pre><code>
+      ...
+      var submit_callback = function(data){
+          // Do something useful with the data...
+          Y.get("#data-display").set("innerHTML", Y.dump(data));
+      };
+      var formoverlay = new Y.lazr.FormOverlay({
+          headerContent: '&lt;h2&gt;Your Form Title&lt;/h2&gt;',
+          form_content: form_content,
+          form_submit_callback: submit_callback});
+      formoverlay.render();
+  </code></pre>
+
+  <h3>Displaying error messages</h3>
+  <p> The FormOverlay includes showError() and clearError() methods that
+      can be used to display an error (or a list of errors) inside the
+      FormOverlay, as demonstrated in the example.
+  </p>
+
+  <h3>Providing a custom submit button</h3>
+  <p>By default, the FormOverlay will create a submit button and include
+     it in the form element.
+     If you would like your own submit button, with it's own text etc.,
+     you can also pass it in as an attribute:</p>
+  <pre><code>
+      ...
+      var submit_button = Y.Node.create('&lt;input type="submit" value="Hit me!"&gt;');
+      var formoverlay = new Y.lazr.FormOverlay({
+          headerContent: '&lt;h2&gt;Your Form Title&lt;/h2&gt;',
+          form_content: form_content,
+          form_submit_callback: submit_callback,
+          form_submit_button: submit_button});
+      formoverlay.render();
+  </code></pre>
+
+</body>
+</html>

=== modified file 'examples/effects/index.html'
--- examples/effects/index.html	2009-10-22 20:22:12 +0000
+++ examples/effects/index.html	2009-11-19 17:33:11 +0000
@@ -4,23 +4,22 @@
 <head>
   <title>Lazr-js examples: lazr.effects</title>
 
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"></link>
-
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr.js"></script>
-  <script type="text/javascript" src="../../build/effects/effects.js"></script>
-
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
-  <link type="text/css" rel="stylesheet" href="../../build/effects/assets/skins/sam/effects.css"></link>
-
-  <style type="text/css">
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+  </script>
+
+  <style id="style-overrides" type="text/css">
   .example {
       background-color: #ecf5fa;
       border: 1px solid #8899dd;
@@ -76,7 +75,12 @@
 
 <h3>Usage</h3>
 <pre>
-YUI().use('node', 'event', 'lazr.effects', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {
 
     var reset_height = null;
     var slide_node;
@@ -107,7 +111,12 @@
 
 <h3>Usage</h3>
 <pre>
-YUI().use('node', 'event', 'lazr.effects', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {
 
     var reset_height = null;
     var slide_node;
@@ -147,7 +156,12 @@
 </p>
 
 <pre>
-YUI().use('node', 'event', 'lazr.effects', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {
 
     var slide;
 
@@ -176,7 +190,12 @@
 
 <h3>Usage</h3>
 <pre>
-YUI().use('lazr.effects-async', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('lazr.effects-async', function(Y) {
 
 Y.lazr.effects.async_slideout(
     '#drawer',        // The node to slide opened and closed.
@@ -190,11 +209,12 @@
 </pre>
 
 <script type="text/javascript">
-
-YUI({
-        base: '../../build/yui/current/build/',
-        filter: 'raw'
-    }).use('node', 'event', 'lazr.effects', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {
 
     var reset_height = null;
     var slide_node;
@@ -227,6 +247,5 @@
 });
 
 </script>
-
 </body>
 </html>

=== modified file 'examples/error/index.html'
--- examples/error/index.html	2009-11-13 16:15:25 +0000
+++ examples/error/index.html	2009-11-19 17:33:11 +0000
@@ -3,21 +3,28 @@
 <html>
 <head>
   <title>Lazr-js examples: error</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/anim/anim.js"></script>
-  <script type="text/javascript" src="../../build/overlay/overlay.js"></script>
-  <script type="text/javascript" src="../../build/error/error.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+  </script>
+
   <script type="text/javascript">
 
 // We create a global variable here to reference our display_error
 // method only so that the call to setTimeout() below used for
 // demonstration has access to the function.
 var display_error;
-YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-    }).use(
+YUI(LAZR_YUI_CONFIG).use(
         'lazr.error', 'lazr.anim', 'node', 'event',
         'dump', function(Y) {
 
@@ -44,19 +51,6 @@
 });
   </script>
 
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"/>
-  <link rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"/>
-  <link rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"/>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"/>
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"/>
-  <link rel="stylesheet" href="../../build/overlay/assets/pretty-overlay-core.css"/>
-  <link rel="stylesheet" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css"/>
-
-  <link type="text/css" rel="stylesheet" href="../../build/error/assets/error-core.css"/>
 </head>
 
 <body class="yui-skin-sam">
@@ -80,21 +74,8 @@
 
 <h3>Javascript</h3>
 <pre>
-    &lt;script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../../build/lazr/lazr.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../../build/anim/anim.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../../build/overlay/overlay.js"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../../build/error/error.js"&gt;&lt;/script&gt;
-</pre>
-
-<h3>CSS</h3>
-<pre>
-  &lt;link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"/&gt;
-  &lt;link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"/&gt;
-  &lt;link rel="stylesheet" href="../../build/overlay/assets/pretty-overlay-core.css"/&gt;
-  &lt;link rel="stylesheet" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css"/&gt;
-
-  &lt;link type="text/css" rel="stylesheet" href="../../build/error/assets/error-core.css"/&gt;
+    &lt;script type="text/javascript" src="../../build/yui/yui-min.js"&gt;&lt;/script&gt;
+    &lt;script type="text/javascript" src="../../build/lazr/lazr-meta.js"&gt;&lt;/script&gt;
 </pre>
 
 <h2>Widget Setup</h2>

=== modified file 'examples/formoverlay/index.html'
--- examples/formoverlay/index.html	2009-10-22 20:22:12 +0000
+++ examples/formoverlay/index.html	2009-11-19 17:33:11 +0000
@@ -5,24 +5,21 @@
   <title>LAZR JS Examples: lazr.formoverlay</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/overlay/overlay.js"></script>
-  <script type="text/javascript" src="../../build/formoverlay/formoverlay.js"></script>
-
-  <link rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"/>
-  <link rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"/>
-  <link rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"/>
-  <link rel="stylesheet" href="../../build/overlay/assets/pretty-overlay-core.css"/>
-  <link rel="stylesheet" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css"/>
-  <link rel="stylesheet" href="../../build/formoverlay/assets/formoverlay.css"/>
-
-  <script type="text/javascript">
-
-YUI({
-    base: "../../build/yui/current/build/",
-    filter: 'raw',
-}).use('lazr.formoverlay', 'node', 'event', 'dump', function(Y) {
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+  </script>
+
+  <script type="text/javascript">
+
+YUI(LAZR_YUI_CONFIG).use('cssreset', 'cssfonts', 'cssbase',
+                         'lazr.formoverlay', 'node', 'event',
+                         'dump', function(Y) {
 
     var big_error = [
         'Traceback (most recent call last):',
@@ -126,16 +123,8 @@
 
   <h3>Javascript</h3>
   <pre>
-    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/current/build/yui/yui.js&quot;&gt;&lt;/script&gt;
-    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/overlay/overlay.js&quot;&gt;&lt;/script&gt;
-    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/formoverlay/formoverlay.js&quot;&gt;&lt;/script&gt;
-  </pre>
-
-  <h3>CSS</h3>
-  <pre>
-    &lt;link rel=&quot;stylesheet&quot; href=&quot;../../build/overlay/assets/pretty-overlay-core.css&quot; /&gt;
-    &lt;link rel=&quot;stylesheet&quot; href=&quot;../../build/overlay/assets/skins/sam/pretty-overlay-skin.css&quot; /&gt;
-    &lt;link rel=&quot;stylesheet&quot; href=&quot;../../build/formoverlay/assets/formoverlay.css&quot; /&gt;
+    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/current/build/yui/yui-min.js&quot;&gt;&lt;/script&gt;
+    &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/lazr-meta.js&quot;&gt;&lt;/script&gt;
   </pre>
 
   <h2>Widget Setup</h2>
@@ -143,11 +132,18 @@
      The normal Overlay attributes (such as headerContent) can be used
      as expected.</p>
   <pre><code>
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+    YUI(LAZR_YUI_CONFIG).use("lazr.formoverlay", function(Y){
       var form_content = 'Enter name: &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt;';
       var formoverlay = new Y.lazr.FormOverlay({
           headerContent: '&lt;h2&gt;Your Form Title&lt;/h2&gt;',
           form_content: form_content});
       formoverlay.render();
+    });
   </code></pre>
   <p><strong>Note:</strong> The form content can be passed as either a string
      of HTML (as is useful if the form is obtained via an AJAX request) or

=== modified file 'examples/inlineeditor/index.html'
--- examples/inlineeditor/index.html	2009-11-13 23:59:22 +0000
+++ examples/inlineeditor/index.html	2009-11-19 17:33:11 +0000
@@ -3,17 +3,23 @@
 <html>
 <head>
   <title>Lazr-js examples: In-line text editing</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/anim/anim.js"></script>
-  <script type="text/javascript" src="../../build/inlineedit/editor.js"></script>
-
-  <!--
-    We need to include individual css files because some of them have
-    relative paths to images.
-  -->
-  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
-  <style>
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+  </script>
+
+  <style id="style-overrides" type="text/css">
   #example {
       margin-left: 20px;
       padding: 50px 200px 50px 200px;
@@ -96,7 +102,12 @@
 </pre>
 
 <pre>
-YUI().use('lazr.editor', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('lazr.editor', function(Y) {
 
     var editor = new Y.EditableText(...);
 
@@ -352,10 +363,8 @@
 
   <script type="text/javascript">
 
-YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-    }).use('node', 'event', 'plugin', 'lazr.editor', function(Y) {
+YUI(LAZR_YUI_CONFIG).use('node', 'event', 'plugin',
+                         'lazr.editor', function(Y) {
 
     // Add a delay between the start and end of the inline editor widget's
     // "save" event.

=== modified file 'examples/lazr/index.html'
--- examples/lazr/index.html	2009-10-22 20:22:12 +0000
+++ examples/lazr/index.html	2009-11-19 17:33:11 +0000
@@ -5,15 +5,24 @@
   <title>LAZR JS Examples: lazr.base</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-
-  <script type="text/javascript">
-
-YUI({
-    base: "../../build/yui/current/build/",
-    filter: 'raw',
-}).use('node', 'lazr.base', function(Y) {
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+  </script>
+
+  <script type="text/javascript">
+
+YUI(LAZR_YUI_CONFIG).use('node', 'lazr.base', function(Y) {
 
     Y.log(Y.lazr.ui.OK_BUTTON, 'info');
     Y.log(Y.lazr.ui.CANCEL_BUTTON, 'info');
@@ -39,10 +48,7 @@
 
   </script>
 
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css" />
-
-  <style>
-
+  <style id="style-overrides" type="text/css">
   #example {
       margin-left: 5em;
       padding: 3em;
@@ -72,9 +78,8 @@
 <p>The common usage:</p>
 
 <pre>
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/current/build/yui/yui.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/lazr.js&quot;&gt;&lt;/script&gt;
-  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/assets/skins/sam/lazr-skin.css&quot;&gt;&lt;/script&gt;
+  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/yui/yui-min.js&quot;&gt;&lt;/script&gt;
+  &lt;script type=&quot;text/javascript&quot; src=&quot;../../build/lazr/lazr-meta.js&quot;&gt;&lt;/script&gt;
 </pre>
 
 <ul>
@@ -107,7 +112,12 @@
 <p>And here's the JavaScript to hook it up:</p>
 
 <pre>
-YUI().use('node', 'lazr.base', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('node', 'lazr.base', function(Y) {
 
     Y.get('#ok').appendChild(
         Y.Node.create(Y.lazr.ui.OK_BUTTON));

=== modified file 'examples/overlay/index.html'
--- examples/overlay/index.html	2009-10-22 20:22:12 +0000
+++ examples/overlay/index.html	2009-11-19 17:33:11 +0000
@@ -3,17 +3,22 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <title>LAZR JS Examples: lazr.overlay</title>
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/overlay/overlay.js"></script>
-
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssreset/reset.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssfonts/fonts.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssbase/base.css" />
-
-  <link rel="stylesheet" type="text/css" href="../../build/overlay/assets/pretty-overlay-core.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css" />
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+    };
+  </script>
 </head>
 
 <body class="yui-skin-sam">
@@ -53,7 +58,12 @@
 <h2>Usage</h2>
 <h3>Subclassing (probably what you want)</h3>
 <pre>
-YUI().use('lazr.overlay', function(Y) {
+var LAZR_YUI_CONFIG = {
+    filter: "min",
+    base: "../../build/",
+    modules: LAZR_MODULES,
+};
+YUI(LAZR_YUI_CONFIG).use('lazr.overlay', function(Y) {
 
     var MyThing = function() {
         MyThing.superclass.constructor.apply(this, arguments);
@@ -82,13 +92,11 @@
 
 <h3>Instantiating directly (probably not what you want)</h3>
 <pre>
-YUI().use('lazr.overlay', function(Y) {
+YUI(LAZR_YUI_CONFIG).use('lazr.overlay', function(Y) {
     var overlay = new Y.lazr.PrettyOverlay({
       bodyContent: 'hello',
       headerContent: 'heading',
-      align: {
-        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
-      },
+      centered: true,
       progressbar: true,
       progress: 12
     });
@@ -96,11 +104,6 @@
 });
 </pre>
 
-<h2>CSS</h2>
-<p>You need to include two CSS files, 
-<a href="../../lib/lazr/build/overlay/assets/pretty-overlay-core.css"><code>overlay/assets/pretty-overlay-core.css</code></a> and
-<a href="../../lib/lazr/build/overlay/assets/skins/sam/pretty-overlay-skin.css"><code>overlay/assets/skins/sam/pretty-overlay-skin.css</code></a>.</p>
-
 <h2>Limitations</h2>
 <p>You can only specify <code>progressbar: {true, false}</code> in the initial
 config object; it cannot be altered once <code>renderUI()</code> has been called.</p>
@@ -108,18 +111,12 @@
 
 
 <script type="text/javascript">
-YUI({
-    base: '../../build/yui/current/build/',
-    filter: "raw",
-    combine: false
-}).use('lazr.overlay', function(Y) {
+YUI(LAZR_YUI_CONFIG).use('lazr.overlay', function(Y) {
     var overlay = new Y.lazr.PrettyOverlay({
       bodyContent: 'hello',
       headerContent: '<h2>heading</h2>',
       steptitle: 'First step',
-      align: {
-        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
-      },
+      centered: true,
       progressbar: true,
       progress: 12
     });

=== modified file 'examples/picker/index.html'
--- examples/picker/index.html	2009-11-13 22:26:40 +0000
+++ examples/picker/index.html	2009-11-19 17:33:11 +0000
@@ -3,17 +3,25 @@
 <html>
 <head>
   <title>Lazr-js examples: Picker widget</title>
-  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
-  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
-  <script type="text/javascript" src="../../build/overlay/overlay.js"></script>
-  <script type="text/javascript" src="../../build/picker/picker.js"></script>
-
-  <script type="text/javascript">
-
-YUI({
-    base: '../../build/yui/current/build/',
-    filter: 'raw'
-    }).use('lazr.picker', 'dump', function(Y) {
+
+  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
+  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
+
+  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
+  <script type="text/javascript">
+    var LAZR_YUI_CONFIG = {
+        filter: "min",
+        base: "../../build/",
+        modules: LAZR_MODULES,
+        insertBefore: "style-overrides",
+    };
+  </script>
+
+  <script type="text/javascript">
+
+YUI(LAZR_YUI_CONFIG).use('lazr.picker', 'dump', function(Y) {
          // Parse the content of the textarea in the data structure
          // expected by the widget.
         function parse_items () {
@@ -156,15 +164,7 @@
 });
   </script>
 
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssreset/reset.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssfonts/fonts.css" />
-  <link rel="stylesheet" type="text/css" href="../../build/yui/current/build/cssbase/base.css" />
-
-  <link rel="stylesheet" type="text/css" href="../../build/overlay/assets/skins/sam/pretty-overlay.css" />
-  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css" />
-  <link type="text/css" rel="stylesheet" href="../../build/picker/assets/picker-core.css" />
-  <link type="text/css" rel="stylesheet" href="../../build/picker/assets/skins/sam/picker-skin.css" />
-  <style>
+  <style id="style-overrides" type="text/css">
       #example { width: 500px; }
       #items { width: 500px; }
       body {

=== modified file 'src-js/lazrjs/activator/activator.js'
--- src-js/lazrjs/activator/activator.js	2009-11-12 21:35:17 +0000
+++ src-js/lazrjs/activator/activator.js	2009-11-19 17:33:11 +0000
@@ -274,5 +274,6 @@
 // Nuke the tabindex attribute.
 Y.augment(Activator, Y.lazr.ui.NoTabIndex, true);
 
-}, "0.1", {"requires":
-    ["oop", "event", "node", "widget", "lazr.anim", "lazr.base"]});
+}, "0.1", {"skinnable": true,
+           "requires": ["oop", "event", "node", "widget",
+                        "lazr.anim", "lazr.base"]});

=== modified file 'src-js/lazrjs/autocomplete/autocomplete.js'
--- src-js/lazrjs/autocomplete/autocomplete.js	2009-11-12 21:35:17 +0000
+++ src-js/lazrjs/autocomplete/autocomplete.js	2009-11-19 17:33:11 +0000
@@ -789,4 +789,5 @@
 };
 
 
-}, "0.1", {"requires":["oop", "base", "event", "widget", "widget-stack", "node-menunav"]});
+}, "0.1", {"skinnable": true, "requires":["oop", "base", "event", "widget",
+                                          "widget-stack", "node-menunav"]});

=== modified file 'src-js/lazrjs/choiceedit/assets/choiceedit-core.css'
--- src-js/lazrjs/choiceedit/assets/choiceedit-core.css	2009-07-31 00:06:15 +0000
+++ src-js/lazrjs/choiceedit/assets/choiceedit-core.css	2009-11-19 17:33:11 +0000
@@ -30,7 +30,7 @@
 .yui-ichoicelist li a:hover {
   background-color: #eee;
 }
-.yui-ichoicelist #yui-pretty-overlay-modal h2 {/
+.yui-ichoicelist #yui-pretty-overlay-modal h2 {
   font-weight: bold;
   font-size: 1.2em;
   text-indent: 0;

=== added directory 'src-js/lazrjs/choiceedit/assets/skins'
=== added directory 'src-js/lazrjs/choiceedit/assets/skins/sam'
=== added file 'src-js/lazrjs/choiceedit/assets/skins/sam/choiceedit-skin.css'
--- src-js/lazrjs/choiceedit/assets/skins/sam/choiceedit-skin.css	1970-01-01 00:00:00 +0000
+++ src-js/lazrjs/choiceedit/assets/skins/sam/choiceedit-skin.css	2009-11-19 17:33:11 +0000
@@ -0,0 +1,3 @@
+/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
+
+/* Placeholder for skinning of the Choice Edit Widget */
\ No newline at end of file

=== modified file 'src-js/lazrjs/choiceedit/choiceedit.js'
--- src-js/lazrjs/choiceedit/choiceedit.js	2009-11-13 20:50:08 +0000
+++ src-js/lazrjs/choiceedit/choiceedit.js	2009-11-19 17:33:11 +0000
@@ -661,7 +661,8 @@
 
 Y.NullChoiceSource = NullChoiceSource;
 
-},"0.2", {"requires": ["oop", "event", "event-delegate", "node",
-                     "widget", "widget-stdmod", "overlay",
-                     "lazr.overlay", "lazr.anim", "lazr.base"]});
+},"0.2", {"skinnable": true,
+          "requires": ["oop", "event", "event-delegate", "node",
+                       "widget", "widget-stdmod", "overlay",
+                       "lazr.overlay", "lazr.anim", "lazr.base"]});
 

=== modified file 'src-js/lazrjs/effects/effects.js'
--- src-js/lazrjs/effects/effects.js	2009-11-12 21:35:17 +0000
+++ src-js/lazrjs/effects/effects.js	2009-11-19 17:33:11 +0000
@@ -183,4 +183,5 @@
 }
 
 
-}, null, { "requires":["anim", "node"] });
+}, null, {"skinnable": true,
+          "requires":["anim", "node"]});

=== added directory 'src-js/lazrjs/error/assets/skins'
=== added directory 'src-js/lazrjs/error/assets/skins/sam'
=== added file 'src-js/lazrjs/error/assets/skins/sam/error-skin.css'
--- src-js/lazrjs/error/assets/skins/sam/error-skin.css	1970-01-01 00:00:00 +0000
+++ src-js/lazrjs/error/assets/skins/sam/error-skin.css	2009-11-19 17:33:11 +0000
@@ -0,0 +1,3 @@
+/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
+
+/* Placeholder for skinning of the Error Widget */
\ No newline at end of file

=== modified file 'src-js/lazrjs/error/error.js'
--- src-js/lazrjs/error/error.js	2009-11-16 14:39:47 +0000
+++ src-js/lazrjs/error/error.js	2009-11-19 17:33:11 +0000
@@ -165,4 +165,4 @@
 Y.lazr.error.widget = error_widget;
 Y.lazr.error.BasicErrorWidget = BasicErrorWidget;
 
-}, "0.1", {"requires":["lazr.overlay"]});
+}, "0.1", {"skinnable": true, "requires":["lazr.overlay"]});

=== renamed file 'src-js/lazrjs/formoverlay/assets/formoverlay.css' => 'src-js/lazrjs/formoverlay/assets/formoverlay-core.css'
=== added directory 'src-js/lazrjs/formoverlay/assets/skins'
=== added directory 'src-js/lazrjs/formoverlay/assets/skins/sam'
=== added file 'src-js/lazrjs/formoverlay/assets/skins/sam/formoverlay-skin.css'
--- src-js/lazrjs/formoverlay/assets/skins/sam/formoverlay-skin.css	1970-01-01 00:00:00 +0000
+++ src-js/lazrjs/formoverlay/assets/skins/sam/formoverlay-skin.css	2009-11-19 17:33:11 +0000
@@ -0,0 +1,3 @@
+/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
+
+/* Placeholder for skinning of the Form Overlay Widget */
\ No newline at end of file

=== modified file 'src-js/lazrjs/formoverlay/formoverlay.js'
--- src-js/lazrjs/formoverlay/formoverlay.js	2009-11-12 21:35:17 +0000
+++ src-js/lazrjs/formoverlay/formoverlay.js	2009-11-19 17:33:11 +0000
@@ -499,4 +499,4 @@
 
 Y.lazr.FormOverlay = FormOverlay;
 
-}, "0.1", { "requires": ["lazr.overlay"] });
+}, "0.1", {"skinnable": true, "requires": ["lazr.overlay"]});

=== modified file 'src-js/lazrjs/inlineedit/editor.js'
--- src-js/lazrjs/inlineedit/editor.js	2009-11-13 20:50:08 +0000
+++ src-js/lazrjs/inlineedit/editor.js	2009-11-19 17:33:11 +0000
@@ -1499,5 +1499,6 @@
 
 //~ Y.log("Module loaded", 'info', 'lazr.editor');
 
-}, "0.2", {"requires": ["oop", "anim", "event", "node", "widget",
+}, "0.2", {"skinnable": true,
+           "requires": ["oop", "anim", "event", "node", "widget",
                         "lazr.anim", "lazr.base"]});

=== modified file 'src-js/lazrjs/lazr/lazr.js'
--- src-js/lazrjs/lazr/lazr.js	2009-11-12 21:35:17 +0000
+++ src-js/lazrjs/lazr/lazr.js	2009-11-19 17:33:11 +0000
@@ -145,4 +145,4 @@
 };
 
 
-}, "0.1", {"requires": ["classnamemanager"]});
+}, "0.1", {"skinnable": true, "requires": ["classnamemanager"]});

=== modified file 'src-js/lazrjs/overlay/assets/pretty-overlay-core.css'
--- src-js/lazrjs/overlay/assets/pretty-overlay-core.css	2009-10-21 21:43:07 +0000
+++ src-js/lazrjs/overlay/assets/pretty-overlay-core.css	2009-11-19 17:33:11 +0000
@@ -3,11 +3,16 @@
 /* blocking-div appears above everything else. */
 .blocking-div {
     z-index: 999;
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
+    opacity:0;
+    filter:alpha(opacity=0);
+    position:absolute;
+    border:none;
+    top:0px;
+    left:0px;
+    padding:0;
+    margin:0;
+    width:100%;
+    height:100%;
 }
 
 /* overlay appears above blocking-div. */

=== modified file 'src-js/lazrjs/overlay/overlay.js'
--- src-js/lazrjs/overlay/overlay.js	2009-11-13 15:20:06 +0000
+++ src-js/lazrjs/overlay/overlay.js	2009-11-19 17:33:11 +0000
@@ -210,7 +210,7 @@
             if (visible) {
                 Y.get('body').appendChild(this._blocking_div);
                 // Handle Escape (code 27) on keydown.
-                this._doc_kp_handler = Y.on('key', function() { 
+                this._doc_kp_handler = Y.on('key', function() {
                         self.fire(CANCEL);
                     }, document, 'down:27');
             } else {
@@ -364,4 +364,4 @@
 
     Y.lazr.PrettyOverlay = PrettyOverlay;
 
-}, "0.1", {"requires": ["oop", "overlay", "event", "widget-position"]});
+}, "0.1", {"skinnable": true, "requires": ["oop", "overlay", "event", "widget", "widget-stack", "widget-position", "widget-position-ext"]});

=== modified file 'src-js/lazrjs/picker/picker.js'
--- src-js/lazrjs/picker/picker.js	2009-11-13 20:50:08 +0000
+++ src-js/lazrjs/picker/picker.js	2009-11-19 17:33:11 +0000
@@ -825,7 +825,8 @@
 
 Y.Picker = Picker;
 
-}, "0.1", {"requires": ["oop", "event", "event-focus", "node",
+}, "0.1", {"skinnable": true,
+           "requires": ["oop", "event", "event-focus", "node",
                         "substitute", "widget", "widget-stdmod",
                         "lazr.overlay", "lazr.anim", "lazr.base"]
 });

=== renamed directory 'src-js/lazrjs/yui/current/build/anim' => 'src-js/lazrjs/yui/anim'
=== renamed directory 'src-js/lazrjs/yui/current/build/assets' => 'src-js/lazrjs/yui/assets'
=== renamed directory 'src-js/lazrjs/yui/current/build/async-queue' => 'src-js/lazrjs/yui/async-queue'
=== renamed directory 'src-js/lazrjs/yui/current/build/attribute' => 'src-js/lazrjs/yui/attribute'
=== renamed directory 'src-js/lazrjs/yui/current/build/base' => 'src-js/lazrjs/yui/base'
=== renamed directory 'src-js/lazrjs/yui/current/build/cache' => 'src-js/lazrjs/yui/cache'
=== renamed directory 'src-js/lazrjs/yui/current/build/classnamemanager' => 'src-js/lazrjs/yui/classnamemanager'
=== renamed directory 'src-js/lazrjs/yui/current/build/collection' => 'src-js/lazrjs/yui/collection'
=== renamed directory 'src-js/lazrjs/yui/current/build/compat' => 'src-js/lazrjs/yui/compat'
=== renamed directory 'src-js/lazrjs/yui/current/build/console' => 'src-js/lazrjs/yui/console'
=== renamed directory 'src-js/lazrjs/yui/current/build/cookie' => 'src-js/lazrjs/yui/cookie'
=== renamed directory 'src-js/lazrjs/yui/current/build/cssbase' => 'src-js/lazrjs/yui/cssbase'
=== renamed directory 'src-js/lazrjs/yui/current/build/cssfonts' => 'src-js/lazrjs/yui/cssfonts'
=== renamed directory 'src-js/lazrjs/yui/current/build/cssgrids' => 'src-js/lazrjs/yui/cssgrids'
=== renamed directory 'src-js/lazrjs/yui/current/build/cssreset' => 'src-js/lazrjs/yui/cssreset'
=== removed directory 'src-js/lazrjs/yui/current'
=== removed directory 'src-js/lazrjs/yui/current/build'
=== renamed directory 'src-js/lazrjs/yui/current/build/dataschema' => 'src-js/lazrjs/yui/dataschema'
=== renamed directory 'src-js/lazrjs/yui/current/build/datasource' => 'src-js/lazrjs/yui/datasource'
=== renamed directory 'src-js/lazrjs/yui/current/build/datatype' => 'src-js/lazrjs/yui/datatype'
=== renamed directory 'src-js/lazrjs/yui/current/build/dd' => 'src-js/lazrjs/yui/dd'
=== renamed directory 'src-js/lazrjs/yui/current/build/dom' => 'src-js/lazrjs/yui/dom'
=== renamed directory 'src-js/lazrjs/yui/current/build/dump' => 'src-js/lazrjs/yui/dump'
=== renamed directory 'src-js/lazrjs/yui/current/build/event' => 'src-js/lazrjs/yui/event'
=== renamed directory 'src-js/lazrjs/yui/current/build/event-custom' => 'src-js/lazrjs/yui/event-custom'
=== renamed directory 'src-js/lazrjs/yui/current/build/event-simulate' => 'src-js/lazrjs/yui/event-simulate'
=== renamed directory 'src-js/lazrjs/yui/current/build/get' => 'src-js/lazrjs/yui/get'
=== renamed directory 'src-js/lazrjs/yui/current/build/history' => 'src-js/lazrjs/yui/history'
=== renamed directory 'src-js/lazrjs/yui/current/build/imageloader' => 'src-js/lazrjs/yui/imageloader'
=== renamed directory 'src-js/lazrjs/yui/current/build/io' => 'src-js/lazrjs/yui/io'
=== renamed directory 'src-js/lazrjs/yui/current/build/json' => 'src-js/lazrjs/yui/json'
=== renamed directory 'src-js/lazrjs/yui/current/build/loader' => 'src-js/lazrjs/yui/loader'
=== renamed directory 'src-js/lazrjs/yui/current/build/node' => 'src-js/lazrjs/yui/node'
=== renamed directory 'src-js/lazrjs/yui/current/build/node-focusmanager' => 'src-js/lazrjs/yui/node-focusmanager'
=== renamed directory 'src-js/lazrjs/yui/current/build/node-menunav' => 'src-js/lazrjs/yui/node-menunav'
=== renamed directory 'src-js/lazrjs/yui/current/build/oop' => 'src-js/lazrjs/yui/oop'
=== renamed directory 'src-js/lazrjs/yui/current/build/overlay' => 'src-js/lazrjs/yui/overlay'
=== renamed directory 'src-js/lazrjs/yui/current/build/plugin' => 'src-js/lazrjs/yui/plugin'
=== renamed directory 'src-js/lazrjs/yui/current/build/pluginhost' => 'src-js/lazrjs/yui/pluginhost'
=== renamed directory 'src-js/lazrjs/yui/current/build/profiler' => 'src-js/lazrjs/yui/profiler'
=== renamed directory 'src-js/lazrjs/yui/current/build/queue-promote' => 'src-js/lazrjs/yui/queue-promote'
=== renamed directory 'src-js/lazrjs/yui/current/build/slider' => 'src-js/lazrjs/yui/slider'
=== renamed directory 'src-js/lazrjs/yui/current/build/stylesheet' => 'src-js/lazrjs/yui/stylesheet'
=== renamed directory 'src-js/lazrjs/yui/current/build/substitute' => 'src-js/lazrjs/yui/substitute'
=== renamed directory 'src-js/lazrjs/yui/current/build/test' => 'src-js/lazrjs/yui/test'
=== renamed directory 'src-js/lazrjs/yui/current/build/widget' => 'src-js/lazrjs/yui/widget'
=== renamed directory 'src-js/lazrjs/yui/current/build/yui' => 'src-js/lazrjs/yui/yui'
=== renamed directory 'src-js/lazrjs/yui/current/build/yui-base' => 'src-js/lazrjs/yui/yui-base'
=== modified file 'src-py/lazr/js/build.py'
--- src-py/lazr/js/build.py	2009-11-13 16:47:45 +0000
+++ src-py/lazr/js/build.py	2009-11-19 17:33:11 +0000
@@ -211,9 +211,6 @@
             self.extra_files = []
         else:
             self.extra_files = extra_files
-        # If we build the lazr-js widgets, make sure that YUI source is
-        # included as well, since we depend on it being available.
-        self.include_yui = (src_dir == SRC_DIR)
 
         self.exclusion_regex = exclude_regex
         self.file_type = file_type
@@ -420,14 +417,6 @@
 
         self.update_combined_js_file()
         self.update_combined_css_skins()
-        if self.include_yui:
-            self.link_yui_directory()
-
-    def link_yui_directory(self):
-        """Link to the built yui source directory."""
-        yui_directory = os.path.join(os.path.dirname(lazrjs.__file__), 'yui')
-        link_location = os.path.join(self.build_dir, 'yui')
-        self.ensure_link(yui_directory, link_location)
 
 
 def get_options():

=== modified file 'src-py/lazr/js/meta.py'
--- src-py/lazr/js/meta.py	2009-11-13 15:37:35 +0000
+++ src-py/lazr/js/meta.py	2009-11-19 17:33:11 +0000
@@ -77,12 +77,16 @@
             meta = extract_metadata(data)
             prefix = ""
             if self.prefix and not prefix.endswith("/"):
-                prefix = prefix + "/"
+                prefix = self.prefix + "/"
             for entry in meta:
                 entry["path"] = (
-                    prefix + fname.replace(root + os.path.sep, ""))
+                    prefix + fname.replace(root + os.path.sep, "")
+                    ).replace(os.path.sep, "/")
+
                 entry["type"] = "js"
                 entry["ext"] = self.ext
+                if entry.get("skinnable"):
+                    self.generate_skin_modules(entry, metadata, root)
             metadata.extend(meta)
 
         modules = {}
@@ -93,6 +97,94 @@
         open(out, "w").write("var %s = %s;" %
                              (var_name, simplejson.dumps(modules)))
 
+    def generate_skin_modules(self, entry, metadata, root):
+        # Generate a skin module definition, since YUI assumes that
+        # the path starts with the module name, and that breaks with
+        # our structure.
+        #
+        # Follow lazr-js conventions and look for any file in the skin
+        # assets directory.
+        module_names = []
+        by_name = {}
+
+        prefix = ""
+        if self.prefix and not prefix.endswith("/"):
+            prefix = self.prefix + "/"
+
+        # Default 'after' modules from YUI Loader. Might have to
+        # be changed in the future, if YUI itself changes.
+        after = ["cssreset", "cssfonts",
+                 "cssgrids", "cssreset-context",
+                 "cssfonts-context",
+                 "cssgrids-context"]
+
+        if entry.get("requires"):
+            # If the base module requires other modules, extend
+            # the after entry with the (expected) skins for those
+            # modules to force our skin to be loaded after those.
+            after.extend(["skin-sam-%s" % s
+                          for s in entry["requires"]])
+
+        assets = os.path.join(
+            os.path.dirname(entry["path"][len(prefix):]), "assets")
+        sam = os.path.join(assets, "skins", "sam")
+        css_assets = glob.glob(os.path.join(root, sam, "*-skin.css"))
+
+        for fname in css_assets:
+            if not os.path.exists(fname):
+                # If the file doesn't exist, don't create a module to
+                # load it.
+                continue
+
+            # Compute a module name for this asset.
+            module_name = os.path.basename(fname)[:-len("-skin.css")]
+            skin_module_name = "skin-sam-%s" % entry["name"]
+            # If the computed module_name does not match the
+            # Javascript module name without the namespace, then use
+            # it as a postfix to disambiguate possibly multiple
+            # modules.
+            package = entry["name"].split(".")[-1]
+            if module_name != package and len(css_assets) > 1:
+                skin_module_name = "%s+%s" % (skin_module_name, module_name)
+
+            css = (fname.replace(root + os.path.sep, "")
+                   ).replace(os.path.sep, "/")
+            module = {"name": skin_module_name,
+                      "after": after[:],
+                      "type": "css",
+                      "ext": self.ext,
+                      "path": prefix + css}
+            by_name[skin_module_name] = module
+            module_names.append(skin_module_name)
+            metadata.append(module)
+
+        # All assets under the skin have been looked at. Now look for
+        # a "-core.css" asset, following lazr-js conventions and add
+        # it as a requirement for the previously-found assets.
+        for module_name in module_names:
+            name = os.path.basename(
+                by_name[module_name]["path"])[:-len("-skin.css")]
+            fname = os.path.join(root, assets, "%s-core.css" % name)
+            if not os.path.exists(fname):
+                # No core CSS asset exists for this skin, skip
+                # generating a module for it.
+                continue
+
+            skin_module_name = "%s+core" % module_name
+            css = (fname.replace(root + os.path.sep, "")
+                   ).replace(os.path.sep, "/")
+            module = {"name": skin_module_name,
+                      "after": after[:],
+                      "type": "css",
+                      "ext": self.ext,
+                      "path": prefix + css}
+
+            requires = by_name[module_name].setdefault("requires", [])
+            requires.append(skin_module_name)
+            after = by_name[module_name].setdefault("after", [])
+            after.append(skin_module_name)
+            metadata.append(module)
+
     def do_build(self):
         included_files = []
 

=== modified file 'src-py/lazr/js/tests/test_meta.py'
--- src-py/lazr/js/tests/test_meta.py	2009-11-13 20:24:46 +0000
+++ src-py/lazr/js/tests/test_meta.py	2009-11-19 17:33:11 +0000
@@ -185,7 +185,7 @@
                Y.log('goodbye world');
            }, Y);
         }, '0.1', {"use": ["dom"], "omit": ["nono"],
-                   "skinnable": true, "optional": ["meh"],
+                   "optional": ["meh"],
                    "supersedes": ["old-anim"],
                    "after": ["lazr.base"]});
         """)
@@ -194,12 +194,10 @@
         self.assertEquals(metadata[0]["name"], "lazr.anim")
         self.assertEquals(metadata[0]["use"], ["dom"])
         self.assertEquals(metadata[0]["omit"], ["nono"])
-        self.assertEquals(metadata[0]["skinnable"], True)
         self.assertEquals(metadata[0]["optional"], ["meh"])
         self.assertEquals(metadata[0]["supersedes"], ["old-anim"])
         self.assertEquals(metadata[0]["after"], ["lazr.base"])
 
-
 class GenerateMetadataTest(mocker.MockerTestCase):
 
     def test_generate_metadata_simple(self):
@@ -231,6 +229,123 @@
             open(output, "r").read(),
             "var LAZR_CONFIG = %s;" % simplejson.dumps(config))
 
+    def test_extract_skinnable(self):
+        """
+        If a module is skinnable, we'll generate the module
+        registration for it's skin ourselves, to prevent YUI from
+        auto-generating one, since it assumes the skin path starts
+        with the module name.
+        """
+        root = self.makeDir()
+        anim = self.makeDir(path=os.path.join(root, "anim"))
+        sample = self.makeFile("""\
+        YUI.add('lazr.anim', function(Y){
+           Y.log('Hello World');
+        }, "0.1", {"use": ["dom"], "requires": ["widget"], "skinnable": true});
+        """, basename="anim.js", dirname=anim)
+
+        skin = self.makeDir(path=os.path.join(anim, "assets", "skins", "sam"))
+        css = self.makeFile("""\
+        /* anim-skin.css */
+        """, basename="anim-skin.css", dirname=skin)
+
+        output = self.makeFile("")
+        builder = TestBuilder(name="LAZR_CONFIG", src_dir=root,
+                              output=output, exclude_regex="",
+                              prefix="lazr")
+        builder.do_build()
+
+        config = {
+            "skin-sam-lazr.anim":
+            {"path": "lazr/anim/assets/skins/sam/anim-skin.css",
+             "type": "css",
+             "ext": True,
+             "after": ["cssreset", "cssfonts", "cssgrids",
+                       "cssreset-context", "cssfonts-context",
+                       "cssgrids-context", "skin-sam-widget"],
+             },
+            "lazr.anim":
+            {"path": "lazr/anim/anim.js",
+             "use": ["dom"],
+             "requires": ["widget"],
+             "type": "js",
+             "ext": True,
+             "skinnable": True,
+             }
+            }
+
+        got = open(output, "r").read()
+        prefix = got[:18]
+        self.assertEquals(prefix, "var LAZR_CONFIG = ")
+        self.assertEquals(simplejson.loads(got[18:-1]), config)
+
+    def test_extract_skinnable_with_lazr_conventions(self):
+        """
+        LazrJS conventionally uses a "-core.css" file to load core CSS rules,
+        and a "-skin.css" file to store skinnable rules.
+
+        If we find this filesystem structure, let's generate different
+        CSS modules and hook them up accordingly. The filename doesn't
+        need to match the module name.
+        """
+        root = self.makeDir()
+        anim = self.makeDir(path=os.path.join(root, "anim"))
+        sample = self.makeFile("""\
+        YUI.add('lazr.anim', function(Y){
+           Y.log('Hello World');
+        }, "0.1", {"use": ["dom"], "requires": ["widget"], "skinnable": true});
+        """, basename="anim.js", dirname=anim)
+
+        assets = self.makeDir(path=os.path.join(anim, "assets"))
+        css_core = self.makeFile("""\
+        /* purty-anim-core.css */
+        """, basename="purty-anim-core.css", dirname=assets)
+
+        skin = self.makeDir(path=os.path.join(assets, "skins", "sam"))
+        css_skin = self.makeFile("""\
+        /* purty-anim-skin.css */
+        """, basename="purty-anim-skin.css", dirname=skin)
+
+        output = self.makeFile("")
+        builder = TestBuilder(name="LAZR_CONFIG", src_dir=root,
+                              output=output, exclude_regex="",
+                              prefix="lazr")
+        builder.do_build()
+
+        config = {
+            "skin-sam-lazr.anim+core":
+            {"path": "lazr/anim/assets/purty-anim-core.css",
+             "type": "css",
+             "ext": True,
+             "after": ["cssreset", "cssfonts", "cssgrids",
+                       "cssreset-context", "cssfonts-context",
+                       "cssgrids-context", "skin-sam-widget"],
+             },
+            "skin-sam-lazr.anim":
+            {"path": "lazr/anim/assets/skins/sam/purty-anim-skin.css",
+             "type": "css",
+             "ext": True,
+             "after": ["cssreset", "cssfonts", "cssgrids",
+                       "cssreset-context", "cssfonts-context",
+                       "cssgrids-context", "skin-sam-widget",
+                       "skin-sam-lazr.anim+core"],
+             "requires": ["skin-sam-lazr.anim+core"],
+             },
+            "lazr.anim":
+            {"path": "lazr/anim/anim.js",
+             "use": ["dom"],
+             "requires": ["widget"],
+             "type": "js",
+             "ext": True,
+             "skinnable": True,
+             }
+            }
+
+        got = open(output, "r").read()
+        prefix = got[:18]
+        self.assertEquals(prefix, "var LAZR_CONFIG = ")
+        self.assertEquals(simplejson.loads(got[18:-1]), config)
+
 
 def test_suite():
     return defaultTestLoader.loadTestsFromName(__name__)