diff --git a/README.markdown b/README.markdown index d3f4906..11424a3 100644 --- a/README.markdown +++ b/README.markdown @@ -8,8 +8,8 @@ can do more work independent of the server for a better user experience. See --------------------- -haml-js is a jQuery plugin. In order to use it you simply include the `js/jquery.haml-1.3.js` file -in your jquery-ui project and use it as a dom builder. +haml-js is a jQuery plugin. In order to use it you simply include the `jquery.haml-1.3.js` file +in your jquery project and use it as a dom builder. How to use ---------- @@ -48,7 +48,7 @@ One thing you'll notice right away is that this is encoded in pure JSON. This me stream it from a server via ajax calls and it can be executed in the browser to create dom structures on the fly. -The basic rules are very similair to the real haml for ruby. If the first item in a list is a +The basic rules are very similar to the real haml for ruby. If the first item in a list is a string, then that is the css selector for that node. It consists of `element#id.class`. If the element is left out, haml-js will assume div. You can have multiple css classes and even include spaces. The id and class are of course optional. After that, everything in the list is considered @@ -60,7 +60,7 @@ Here is another example with some html attributes specified: **haml-js** - ["strong", {class: "code", style: "color:red;"}, "Hello, World!"] + ["%strong", {class: "code", style: "color:red;"}, "Hello, World!"] **html** @@ -76,8 +76,8 @@ Sometimes css can be complex enough that some structure is desired. **haml-js** - ["#main", {_: {position: "absolute", left:0, right:0, top:0, bottom:0}}, - [".greeting", {_: {"margin-top": "200px", "text-align": "center"}}, "Hello, World!"] + ["#main", {css: {position: "absolute", left:0, right:0, top:0, bottom:0}}, + [".greeting", {css: {"margin-top": "200px", "text-align": "center"}}, "Hello, World!"] ] **html** @@ -86,7 +86,7 @@ Sometimes css can be complex enough that some structure is desired.
Hello, World!
-When underscore, `_`, is used as an attribute, the value is a json object with key/value pairs +When `css`, is used as an attribute, the value is a json object with key/value pairs representing the css styles. These will be applied using jQuery's css method. Note that other parameters can be used in this same overall hash. Also if prefered, a regular style attribute can be specified with manually formatted css. @@ -94,8 +94,8 @@ specified with manually formatted css. ### Javascript jQuery plugin Syntax This is where this template language/framework really shines. Until now, this had little power over -server side html generation or other dom builders like the one built into Prototype.js. Javascript -execution syntax allows you to declarativly schedule js methods to be called when the node gets +server side html generation or other dom builders like the ones built into other frameworks. Javascript +execution syntax allows you to declaratively schedule JavaScript methods to be called when the node gets attached to the page. **haml-js** @@ -135,146 +135,20 @@ scope of the jquery node. Usually you will be wanting to attach these element to some part of the page and so the this format is used more often. This is the `.haml` plugin that all jQuery object now have. - $("body").haml(["p", "Hello ", ["img",{src:"logo.jpg"]]); + $("body").haml(["%p", "Hello ", ["%img",{src:"logo.jpg"}]]); This will create the new element and append it to the end of the body tag. Once it's the recursive function gets to the last step and appends the element tree to the page, any event's queued up would then take place. -### Using regular haml - -haml-js also has a text parser that allows you to use external haml files without encoding them to -JSON first. - -**haml** - - #header - %h1 Haml for the Browser! - %img{src: "/images/logo.png", alt:"haml-js logo"} - #main - %p - Welcome to my simple site. - This is a multiline paragraph. - %p{$:{click:[function(){this.hide();}]}} - Hide Me! - #sidebar - %h2 Cool Links - %ul - %li - %li - %li - #footer - © 2009 Tim Caswell - -**js** - - // This made up ajax function simply loads a remote resource - // and passes the result to given callback. - ajax("http://server.com/views/sample.haml", function(text) { - var haml = $.haml_parse(text); - $('body').haml(haml); - }); +Here is a fun one. Add a paragraph saying "Hello World" onto every element in a page. -**html** - - -
-

Welcome to my simple site. This is a multiline paragraph.

-

Hide Me!

-
- - - -This is almost exactely like regular ruby based haml. A couple of things to note: - - * Since this is for dom building, there is no support for doctypes, xml headers, or anything other - than html tags with attributes and content. - * You can use jquery methods on the elements as they are created. - * You embed javascript in your attributes values instead of ruby - * There is no `-` operator yet. I'm not quite sure how this work though. - * The attributes use the json format since everything between the braces is native JavaScript - * Future versions will allow for loops and specifying the context in which the template is evaled. - -### Markdown integration - -One thing that haml is terrible at is content text. The mixture of a tags, em tags, ul, li, etc can -get out of hand very quickly. - -I've found that markdown is an excellent tool for this part. The haml like dom builder is great for -structure and logic while markdown is good for content generation. - -**haml-js** - - var data = { - name: "World", - website: "http://creationix.com/", - title: "My Website" - }; - var markdown = "# Hello {name}\n\nThis *is* **a** paragraph.\n\nClick [here]({website} \"{title}\") for fun."; - $('body').haml( - ["#content", {$:{ markdown:[data]}}, markdown] - ); - -**html** - -
-

Hello World

-

This is a paragraph.

-

Click here for fun.

-
- -This has variable replacement within the markdown and then markdown parsing to html. - -### Advanced examples - -Since the haml-js templates are pure json, they are also native Javascript. This means if you don't -plan on piping the templates through an ajax call, you can include then inline in the page or in -external js files and put logic within them. - -For example you can call the jQuery `bind` method on a node and pass in the callback as a native -function (inline or referenced). You can write your own array map function like the `collect` in the -example library and have loops inline in your json template. Also you can build the haml -procedurally in javascript and then append it to the page. With clever use of closures you can -create entire databound systems with minimal effort. See the databind example for more details. - -One common pattern is to write functions that convert domain data into haml data. These are the -equivalents of view templates in MVC arcitectures. This way, the server only needs to send the raw -data and the client can transform it into interactive html all on it's own. - -With a little practice and a good understanding of javascript internals, you can easily create -entire applications with the entire interface written in haml-js. There is no longer a need for -servers to feed html to your site. The page can manage it just fine on it's own. - -Want to see it in action? -------------------------- - -The rest of this package is a reference implementation using the library. Simply point a browser -to the test.html file. - -Also you ran use rack to serve the folder on a local web server. Simple type `rackup` in -the main folder and point your browser to http://localhost:9292/test.html - -**js/common_widgets** is an example of a common library used by several haml-js views. It contains -a form builder with data binding and some useful sub templates. - -**pages/index.js** is a very small page that generates all the possible urls for the sample data. +$('*').haml(["%p", "Hello World"]) -**pages/ui-demo.js** is a small collection of the examples in the jQuery-ui documentation converted -to haml-js as an exercise. +Run that in the Javascript console of any page that has jquery-haml loaded and watch the messages fly. -**pages/databind.js** is an advanced demo showing how the library could be used for a rich userface -to load data from a sever, modify it client side, and sync with the server via async ajax calls. -Note save method in the example is a stub and doesn't actually make an ajax call, but it easily could. +## TopCloud -These examples make heavy use of closures, so read up on the topic if your're unsure what that means. +Since jquery-haml can get out of hand for large application, I wrote an abstraction layer on top of it. Check out [TopCloud][]. +[TopCloud]: http://github.com/creationix/topcloud \ No newline at end of file diff --git a/examples/jquery-haml/index.html b/examples/index.html similarity index 51% rename from examples/jquery-haml/index.html rename to examples/index.html index d4628c8..b98131b 100644 --- a/examples/jquery-haml/index.html +++ b/examples/index.html @@ -1,23 +1,13 @@ - jQuery HAML + UI Example Page - + jQuery HAML + UI Example Page + - - - - + + + diff --git a/examples/jquery-haml/README.markdown b/examples/jquery-haml/README.markdown deleted file mode 100644 index 60cad71..0000000 --- a/examples/jquery-haml/README.markdown +++ /dev/null @@ -1,3 +0,0 @@ -# haml-js jQuery integration demo - -This section is currently broken. I'll soon update the example to work right once the api becomes stable. diff --git a/examples/jquery-haml/embedded.html b/examples/jquery-haml/embedded.html deleted file mode 100644 index 3d8b640..0000000 --- a/examples/jquery-haml/embedded.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - jQuery HAML + UI Example Page - - - - - - - - - -
- - - - - -
- - - diff --git a/examples/jquery-haml/js/common_widgets.js b/examples/jquery-haml/js/common_widgets.js deleted file mode 100644 index 59edf78..0000000 --- a/examples/jquery-haml/js/common_widgets.js +++ /dev/null @@ -1,219 +0,0 @@ -// requires jquery-ui - -if (typeof Object.create !== 'function') { - Object.create = function (o) { - function F() {} - F.prototype = o; - return new F(); - }; -} - - -// Test an object for it's constructor type. Sort of a reverse, discriminatory instanceof -function isTypeOf(t, c){ if (t === undefined) {return c == 'Undefined';} return t.constructor.toString().match(new RegExp(c, 'i')) !== null; } - -function trace(message, obj) -{ - console.log(message, obj); - return obj; -} - -function collect(obj, fn) -{ - var accum = []; - jQuery.each(obj, function(i,v){ - accum.push(fn(i,v)); - }); - return accum; -} - -function filter(obj, fn) -{ - var accum = []; - jQuery.each(obj, function(i,v){ - if (fn(i,v)) { - accum.push(v); - } - }); - return accum; -} - -// Kinda like a var_export for json data -function inspect(data, limit) { - if (limit === undefined) { - limit = 5; - } - if (limit <= 0) {return "...";} - var accum; - if (isTypeOf(data, "Array")) { - accum = ["ul"]; - jQuery.each(data, function(k,v){ accum.push(["li", inspect(v, limit-1)]); }); - return accum; - } - else if (isTypeOf(data, "String")) { - return '"'+data.replace(/\"/g,'\\"').replace(/\t/g,'\\t').replace(/\n/g,'\\n')+'"'; - } - else if (isTypeOf(data, "Object")) { - accum = ["dl"]; - jQuery.each(data, function(k,v){ - accum.push(["dt", k+":"]); - accum.push(["dd", inspect(v, limit-1)]); - }); - return accum; - } - else { - return data+""; - } -} - - -function small_header(options, content) -{ - return [".ui-state-default ui-corner-all", { - style: "padding:4px;margin: 0 0 10px 0" - }, - ["span.ui-icon.ui-icon-" + options.icon, {style: "float:left; margin:-2px 5px 0 0;" }], - content - ]; -} - -function button(options, content) -{ - return ["button.ui-state-default ui-button ui-corner-all", { - style:"float: left; margin: 0 5px; line-height:13px;", - $:{bind:["click", options.callback]} - }, - ["span.ui-icon.ui-icon-" + options.icon, {style: "float:left; margin:-2px 3px -2px -2px;" }], - content - ]; -} - -// Options: -// -// title - the title of the dialoc -// callback - a function called with true or false -// -function confirmation_dialog(options, content) -{ - return ["div", { - title: options.title, - $:{dialog: [{ - bgiframe: true, - resizable: false, - modal: true, - buttons: { - Ok: function() { - jQuery(this).dialog('close'); - options.callback(true); - }, - Cancel: function() { - jQuery(this).dialog('close'); - options.callback(false); - } - }, - close: function() { - $(this).remove(); - } - }]} - }, ["p", - ["span.ui-icon ui-icon-alert", {style:"float:left; margin:0 7px 20px 0;"}], - content - ] - ]; -} - - -// Options: -// -// title - dialog title -// w - dialog width -// h - dialog content height -function inline_dialog(options, content) -{ - return ["div", { - title: options.title, - $:{dialog: [{ - bgiframe: true, - height: 29+options.h, - width: options.w, - modal: true, - resizable: true, - close: function(e){ - $(this).remove(); - if (options.close) { - options.close(e); - } - } - }]} - }, - content - ]; -} - -// Meta example: -// { -// name: {type:"text"}, -// description: {type:"textarea",title:"Long Description"} -// } -// Data is reference to actual data store. -function form_builder(meta, data, notify) -{ - var disabled; - if (notify === undefined) - { - disabled = true; - notify = function(){}; - } - return collect(meta, function(name, options) { - if (!options.label) { - options.label = name.charAt(0).toUpperCase() + name.substr(1).toLowerCase(); - } - var content; - switch (options.type) { - case "textarea": - content = ["textarea.ui-widget-content ui-corner-all", { - style:"width:250px;padding:5px;margin:2px 15px;height:100px", - name:name, - $:{ - bind:["keyup", function(e){data[name]=this.value;notify(name);}], - $: function() { if (disabled){this.attr("disabled", "disabled").addClass('ui-state-disabled');} } - } - }, data[name]]; - break; - case "slider": - content = ["div", {style: "width:260px; margin:15px;", $:{ - slider: [{ - value: data[name], - change: function(event, ui) { data[name] = ui.value;notify(name); } - }], - $: function() { if (disabled){this.slider('disable');} } - }}]; - break; - case "eq": - content = [".clearfix", collect(data[name], function(i,v){ - return ["div", {_: {height: "120px", "float": "left", margin: "15px"}, $:{ - slider: [{ - value: v, - range:"min", - orientation:"vertical", - change: function(event, ui) { data[name][i] = ui.value;notify(name); } - }], - $: function() { if (disabled){this.slider('disable');} } - }} - ]; - })]; - break; - default: - content = ["input.ui-widget-content ui-corner-all", { - style:"padding:5px;width:250px;margin:2px 15px", - name:name, - value:data[name], - $:{ - bind:["keyup", function(e){data[name] = this.value;notify(name);}], - $: function() { if (disabled){this.attr("disabled", "disabled").addClass('ui-state-disabled');} } - }}]; - break; - } - return [["p", {style:"font-weight:bold;"}, options.label], content]; - }); -} diff --git a/examples/jquery-haml/js/jquery.json-1.3.min.js b/examples/jquery-haml/js/jquery.json-1.3.min.js deleted file mode 100644 index 3e1d463..0000000 --- a/examples/jquery-haml/js/jquery.json-1.3.min.js +++ /dev/null @@ -1,37 +0,0 @@ - -(function($){function toIntegersAtLease(n) -{return n<10?'0'+n:n;} -Date.prototype.toJSON=function(date) -{return this.getUTCFullYear()+'-'+ -toIntegersAtLease(this.getUTCMonth())+'-'+ -toIntegersAtLease(this.getUTCDate());};var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g;var meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.quoteString=function(string) -{if(escapeable.test(string)) -{return'"'+string.replace(escapeable,function(a) -{var c=meta[a];if(typeof c==='string'){return c;} -c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';} -return'"'+string+'"';};$.toJSON=function(o,compact) -{var type=typeof(o);if(type=="undefined") -return"undefined";else if(type=="number"||type=="boolean") -return o+"";else if(o===null) -return"null";if(type=="string") -{return $.quoteString(o);} -if(type=="object"&&typeof o.toJSON=="function") -return o.toJSON(compact);if(type!="function"&&typeof(o.length)=="number") -{var ret=[];for(var i=0;i - T K B -*/ - -var Showdown={}; -Showdown.converter=function(){ -var _1; -var _2; -var _3; -var _4=0; -this.makeHtml=function(_5){ -_1=new Array(); -_2=new Array(); -_3=new Array(); -_5=_5.replace(/~/g,"~T"); -_5=_5.replace(/\$/g,"~D"); -_5=_5.replace(/\r\n/g,"\n"); -_5=_5.replace(/\r/g,"\n"); -_5="\n\n"+_5+"\n\n"; -_5=_6(_5); -_5=_5.replace(/^[ \t]+$/mg,""); -_5=_7(_5); -_5=_8(_5); -_5=_9(_5); -_5=_a(_5); -_5=_5.replace(/~D/g,"$$"); -_5=_5.replace(/~T/g,"~"); -return _5; -}; -var _8=function(_b){ -var _b=_b.replace(/^[ ]{0,3}\[(.+)\]:[ \t]*\n?[ \t]*?[ \t]*\n?[ \t]*(?:(\n*)["(](.+?)[")][ \t]*)?(?:\n+|\Z)/gm,function(_c,m1,m2,m3,m4){ -m1=m1.toLowerCase(); -_1[m1]=_11(m2); -if(m3){ -return m3+m4; -}else{ -if(m4){ -_2[m1]=m4.replace(/"/g,"""); -} -} -return ""; -}); -return _b; -}; -var _7=function(_12){ -_12=_12.replace(/\n/g,"\n\n"); -var _13="p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del"; -var _14="p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math"; -_12=_12.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math|ins|del)\b[^\r]*?\n<\/\2>[ \t]*(?=\n+))/gm,_15); -_12=_12.replace(/^(<(p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|script|noscript|form|fieldset|iframe|math)\b[^\r]*?.*<\/\2>[ \t]*(?=\n+)\n)/gm,_15); -_12=_12.replace(/(\n[ ]{0,3}(<(hr)\b([^<>])*?\/?>)[ \t]*(?=\n{2,}))/g,_15); -_12=_12.replace(/(\n\n[ ]{0,3}[ \t]*(?=\n{2,}))/g,_15); -_12=_12.replace(/(?:\n\n)([ ]{0,3}(?:<([?%])[^\r]*?\2>)[ \t]*(?=\n{2,}))/g,_15); -_12=_12.replace(/\n\n/g,"\n"); -return _12; -}; -var _15=function(_16,m1){ -var _18=m1; -_18=_18.replace(/\n\n/g,"\n"); -_18=_18.replace(/^\n/,""); -_18=_18.replace(/\n+$/g,""); -_18="\n\n~K"+(_3.push(_18)-1)+"K\n\n"; -return _18; -}; -var _9=function(_19){ -_19=_1a(_19); -var key=_1c("
"); -_19=_19.replace(/^[ ]{0,2}([ ]?\*[ ]?){3,}[ \t]*$/gm,key); -_19=_19.replace(/^[ ]{0,2}([ ]?\-[ ]?){3,}[ \t]*$/gm,key); -_19=_19.replace(/^[ ]{0,2}([ ]?\_[ ]?){3,}[ \t]*$/gm,key); -_19=_1d(_19); -_19=_1e(_19); -_19=_1f(_19); -_19=_7(_19); -_19=_20(_19); -return _19; -}; -var _21=function(_22){ -_22=_23(_22); -_22=_24(_22); -_22=_25(_22); -_22=_26(_22); -_22=_27(_22); -_22=_28(_22); -_22=_11(_22); -_22=_29(_22); -_22=_22.replace(/ +\n/g,"
\n"); -return _22; -}; -var _24=function(_2a){ -var _2b=/(<[a-z\/!$]("[^"]*"|'[^']*'|[^'">])*>|)/gi; -_2a=_2a.replace(_2b,function(_2c){ -var tag=_2c.replace(/(.)<\/?code>(?=.)/g,"$1`"); -tag=_2e(tag,"\\`*_"); -return tag; -}); -return _2a; -}; -var _27=function(_2f){ -_2f=_2f.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,_30); -_2f=_2f.replace(/(\[((?:\[[^\]]*\]|[^\[\]])*)\]\([ \t]*()?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,_30); -_2f=_2f.replace(/(\[([^\[\]]+)\])()()()()()/g,_30); -return _2f; -}; -var _30=function(_31,m1,m2,m3,m4,m5,m6,m7){ -if(m7==undefined){ -m7=""; -} -var _39=m1; -var _3a=m2; -var _3b=m3.toLowerCase(); -var url=m4; -var _3d=m7; -if(url==""){ -if(_3b==""){ -_3b=_3a.toLowerCase().replace(/ ?\n/g," "); -} -url="#"+_3b; -if(_1[_3b]!=undefined){ -url=_1[_3b]; -if(_2[_3b]!=undefined){ -_3d=_2[_3b]; -} -}else{ -if(_39.search(/\(\s*\)$/m)>-1){ -url=""; -}else{ -return _39; -} -} -} -url=_2e(url,"*_"); -var _3e=""; -return _3e; -}; -var _26=function(_3f){ -_3f=_3f.replace(/(!\[(.*?)\][ ]?(?:\n[ ]*)?\[(.*?)\])()()()()/g,_40); -_3f=_3f.replace(/(!\[(.*?)\]\s?\([ \t]*()?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,_40); -return _3f; -}; -var _40=function(_41,m1,m2,m3,m4,m5,m6,m7){ -var _49=m1; -var _4a=m2; -var _4b=m3.toLowerCase(); -var url=m4; -var _4d=m7; -if(!_4d){ -_4d=""; -} -if(url==""){ -if(_4b==""){ -_4b=_4a.toLowerCase().replace(/ ?\n/g," "); -} -url="#"+_4b; -if(_1[_4b]!=undefined){ -url=_1[_4b]; -if(_2[_4b]!=undefined){ -_4d=_2[_4b]; -} -}else{ -return _49; -} -} -_4a=_4a.replace(/"/g,"""); -url=_2e(url,"*_"); -var _4e="\""+_4a+"\"";"+_21(m1)+""); -}); -_4f=_4f.replace(/^(.+)[ \t]*\n-+[ \t]*\n+/gm,function(_52,m1){ -return _1c("

"+_21(m1)+"

"); -}); -_4f=_4f.replace(/^(\#{1,6})[ \t]*(.+?)[ \t]*\#*\n+/gm,function(_54,m1,m2){ -var _57=m1.length; -return _1c(""+_21(m2)+""); -}); -return _4f; -}; -var _58; -var _1d=function(_59){ -_59+="~0"; -var _5a=/^(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/gm; -if(_4){ -_59=_59.replace(_5a,function(_5b,m1,m2){ -var _5e=m1; -var _5f=(m2.search(/[*+-]/g)>-1)?"ul":"ol"; -_5e=_5e.replace(/\n{2,}/g,"\n\n\n"); -var _60=_58(_5e); -_60=_60.replace(/\s+$/,""); -_60="<"+_5f+">"+_60+"\n"; -return _60; -}); -}else{ -_5a=/(\n\n|^\n?)(([ ]{0,3}([*+-]|\d+[.])[ \t]+)[^\r]+?(~0|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.])[ \t]+)))/g; -_59=_59.replace(_5a,function(_61,m1,m2,m3){ -var _65=m1; -var _66=m2; -var _67=(m3.search(/[*+-]/g)>-1)?"ul":"ol"; -var _66=_66.replace(/\n{2,}/g,"\n\n\n"); -var _68=_58(_66); -_68=_65+"<"+_67+">\n"+_68+"\n"; -return _68; -}); -} -_59=_59.replace(/~0/,""); -return _59; -}; -_58=function(_69){ -_4++; -_69=_69.replace(/\n{2,}$/,"\n"); -_69+="~0"; -_69=_69.replace(/(\n)?(^[ \t]*)([*+-]|\d+[.])[ \t]+([^\r]+?(\n{1,2}))(?=\n*(~0|\2([*+-]|\d+[.])[ \t]+))/gm,function(_6a,m1,m2,m3,m4){ -var _6f=m4; -var _70=m1; -var _71=m2; -if(_70||(_6f.search(/\n{2,}/)>-1)){ -_6f=_9(_72(_6f)); -}else{ -_6f=_1d(_72(_6f)); -_6f=_6f.replace(/\n$/,""); -_6f=_21(_6f); -} -return "
  • "+_6f+"
    • \n"; -}); -_69=_69.replace(/~0/g,""); -_4--; -return _69; -}; -var _1e=function(_73){ -_73+="~0"; -_73=_73.replace(/(?:\n\n|^)((?:(?:[ ]{4}|\t).*\n+)+)(\n*[ ]{0,3}[^ \t\n]|(?=~0))/g,function(_74,m1,m2){ -var _77=m1; -var _78=m2; -_77=_79(_72(_77)); -_77=_6(_77); -_77=_77.replace(/^\n+/g,""); -_77=_77.replace(/\n+$/g,""); -_77="
    "+_77+"\n
    "; -return _1c(_77)+_78; -}); -_73=_73.replace(/~0/,""); -return _73; -}; -var _1c=function(_7a){ -_7a=_7a.replace(/(^\n+|\n+$)/g,""); -return "\n\n~K"+(_3.push(_7a)-1)+"K\n\n"; -}; -var _23=function(_7b){ -_7b=_7b.replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,function(_7c,m1,m2,m3,m4){ -var c=m3; -c=c.replace(/^([ \t]*)/g,""); -c=c.replace(/[ \t]*$/g,""); -c=_79(c); -return m1+""+c+""; -}); -return _7b; -}; -var _79=function(_82){ -_82=_82.replace(/&/g,"&"); -_82=_82.replace(//g,">"); -_82=_2e(_82,"*_{}[]\\",false); -return _82; -}; -var _29=function(_83){ -_83=_83.replace(/(\*\*|__)(?=\S)([^\r]*?\S[*_]*)\1/g,"$2"); -_83=_83.replace(/(\*|_)(?=\S)([^\r]*?\S)\1/g,"$2"); -return _83; -}; -var _1f=function(_84){ -_84=_84.replace(/((^[ \t]*>[ \t]?.+\n(.+\n)*\n*)+)/gm,function(_85,m1){ -var bq=m1; -bq=bq.replace(/^[ \t]*>[ \t]?/gm,"~0"); -bq=bq.replace(/~0/g,""); -bq=bq.replace(/^[ \t]+$/gm,""); -bq=_9(bq); -bq=bq.replace(/(^|\n)/g,"$1 "); -bq=bq.replace(/(\s*
    [^\r]+?<\/pre>)/gm,function(_88,m1){
-var pre=m1;
-pre=pre.replace(/^  /mg,"~0");
-pre=pre.replace(/~0/g,"");
-return pre;
-});
-return _1c("
    \n"+bq+"\n
    ");
-});
-return _84;
-};
-var _20=function(_8b){
-_8b=_8b.replace(/^\n+/g,"");
-_8b=_8b.replace(/\n+$/g,"");
-var _8c=_8b.split(/\n{2,}/g);
-var _8d=new Array();
-var end=_8c.length;
-for(var i=0;i=0){
-_8d.push(str);
-}else{
-if(str.search(/\S/)>=0){
-str=_21(str);
-str=str.replace(/^([ \t]*)/g,"
    ");
-str+="
    ";
-_8d.push(str);
-}
-}
-}
-end=_8d.length;
-for(var i=0;i=0){
-var _91=_3[RegExp.$1];
-_91=_91.replace(/\$/g,"$$$$");
-_8d[i]=_8d[i].replace(/~K\d+K/,_91);
-}
-}
-return _8d.join("\n\n");
-};
-var _11=function(_92){
-_92=_92.replace(/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w+);)/g,"&");
-_92=_92.replace(/<(?![a-z\/?\$!])/gi,"<");
-return _92;
-};
-var _25=function(_93){
-_93=_93.replace(/\\(\\)/g,_94);
-_93=_93.replace(/\\([`*_{}\[\]()>#+-.!])/g,_94);
-return _93;
-};
-var _28=function(_95){
-_95=_95.replace(/<((https?|ftp|dict):[^'">\s]+)>/gi,"    $1");
-_95=_95.replace(/<(?:mailto:)?([-.\w]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.[a-z]+)>/gi,function(_96,m1){
-return _98(_a(m1));
-});
-return _95;
-};
-var _98=function(_99){
-function char2hex(ch){
-var _9b="0123456789ABCDEF";
-var dec=ch.charCodeAt(0);
-return (_9b.charAt(dec>>4)+_9b.charAt(dec&15));
-}
-var _9d=[function(ch){
-return "&#"+ch.charCodeAt(0)+";";
-},function(ch){
-return "&#x"+char2hex(ch)+";";
-},function(ch){
-return ch;
-}];
-_99="mailto:"+_99;
-_99=_99.replace(/./g,function(ch){
-if(ch=="@"){
-ch=_9d[Math.floor(Math.random()*2)](ch);
-}else{
-if(ch!=":"){
-var r=Math.random();
-ch=(r>0.9?_9d[2](ch):r>0.45?_9d[1](ch):_9d[0](ch));
-}
-}
-return ch;
-});
-_99=""+_99+"";
-_99=_99.replace(/">.+:/g,"\">");
-return _99;
-};
-var _a=function(_a3){
-_a3=_a3.replace(/~E(\d+)E/g,function(_a4,m1){
-var _a6=parseInt(m1);
-return String.fromCharCode(_a6);
-});
-return _a3;
-};
-var _72=function(_a7){
-_a7=_a7.replace(/^(\t|[ ]{1,4})/gm,"~0");
-_a7=_a7.replace(/~0/g,"");
-return _a7;
-};
-var _6=function(_a8){
-_a8=_a8.replace(/\t(?=\t)/g,"    ");
-_a8=_a8.replace(/\t/g,"~A~B");
-_a8=_a8.replace(/~B(.+?)~A/g,function(_a9,m1,m2){
-var _ac=m1;
-var _ad=4-_ac.length%4;
-for(var i=0;i<_ad;i++){
-_ac+=" ";
-}
-return _ac;
-});
-_a8=_a8.replace(/~A/g,"    ");
-_a8=_a8.replace(/~B/g,"");
-return _a8;
-};
-var _2e=function(_af,_b0,_b1){
-var _b2="(["+_b0.replace(/([\[\]\\])/g,"\\$1")+"])";
-if(_b1){
-_b2="\\\\"+_b2;
-}
-var _b3=new RegExp(_b2,"g");
-_af=_af.replace(_b3,_94);
-return _af;
-};
-var _94=function(_b4,m1){
-var _b6=m1.charCodeAt(0);
-return "~E"+_b6+"E";
-};
-};
-
diff --git a/examples/jquery-haml/pages/databind.js b/examples/jquery-haml/pages/databind.js
deleted file mode 100644
index e64e90e..0000000
--- a/examples/jquery-haml/pages/databind.js
+++ /dev/null
@@ -1,83 +0,0 @@
-$(function(){
-
-
-var song = {
-  title: "Name of the Song",
-  description: "This is a \"description\".\n\nIt can be several lines long.",
-  master_volume: 60,
-  eq: [88, 77, 55, 33, 40, 45, 70]
-};
-
-function save()
-{
-  // Simulate an ajax request.
-  $("#saving").show();
-  setTimeout(function() {
-    $("#target").empty().haml(form(song));
-    setTimeout(function() {
-      $("#saving").hide();
-    }, 200);
-  }, 200);
-}
-var timer;
-
-function form(song, live)
-{
-  var notify;
-  if (live) {
-    notify = function(field) {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      $("#inspect").empty().haml(inspect(song));
-      timer = setTimeout(save, 5000);
-    };
-  }
-  
-  return ["form", {onsubmit:"return false"},
-    form_builder({
-      title:{type:"text"},
-      description:{type:"textarea"},
-      master_volume:{type:"slider",label:"Master Volume"},
-      eq:{type:"eq"}
-    },song,notify)
-  ];
-}
-
-// Render the page
-$("body").haml(
-  [".ui-widget-overlay"],
-  ["p",{_:{position:"absolute"}},
-    ["strong", "databinding haml-js demos"],
-    " Go back ",
-    ["a", {href:"?page=index&skin="+getparam("skin", "ui-lightness")}, "home"],
-    "."
-  ],
-  ["table",{_:{position:"absolute","margin-top":"2em"}},
-    ["tr",
-      ["td", {style:"vertical-align:top;padding: 0 10px"},
-        small_header({icon:"volume-on"}, "Data Bind Form"),
-        form(song, true)
-      ],
-      ["td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
-        small_header({icon:"calendar"}, "Data in memory(Inspect)"),
-        ["#inspect.ui-widget-content ui-corner-all", {style:"padding:0 10px"},
-          inspect(song)
-        ],
-        ["p",
-          button({icon:'refresh',callback:function(){
-            clearTimeout(timer);
-            save();
-          }}, "Save")
-        ]
-      ],
-      ["td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
-        small_header({icon:"calculator"}, "Data on Server(Graphical)"),
-        ["#saving.ui-widget ui-widget-content ui-corner-all ui-state-highlight", {style:"position:absolute;padding:5px 10px;display:none"},"Saving"],
-        ["#target", form(song)]
-      ]
-    ]
-  ]
-);
-
-});
diff --git a/examples/jquery-haml/pages/index.js b/examples/jquery-haml/pages/index.js
deleted file mode 100644
index 141cc1a..0000000
--- a/examples/jquery-haml/pages/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-function getparam(key, d) {
-  var value = window.location.href.match(new RegExp("[?&]"+key+"=([^&#]*)"));
-  return value ? value[1] : d;
-}
-
-var pages = {
-  "index": "Index Page",
-  "ui-demo": "jQuery UI samples",
-  "databind": "DataBinding example",
-  "markdown": "Markdown and variable replacement example"
-};
-
-var page_keys = ["index", "databind", "ui-demo", 'markdown'];
-
-var styles = ["dark-hive","sunny","ui-darkness","ui-lightness"];
-
-// Render the page
-$("body").haml(
-  ["h1", "Welcome to haml-js"],
-  ["p", "Feel free to look around.  Here is an index of all pages:"],
-  ["table.ui-widget.ui-widget-content.ui-corner-all",
-    ["thead.ui-widget-header",
-      ["tr",
-        ["th"],
-        $.map(styles, function(style){
-          return [["th", style]];
-        })
-      ]
-    ],
-    ["tbody.ui-widget-content",
-      $.map(page_keys, function(key){
-        var a = [["tr",
-          ["th", pages[key]],
-          $.map(styles, function(style){
-            return [["td",["a",{href:"?page="+key+"&skin=" + style}, "Go Here!"]]];
-          })
-        ]];
-        return a;
-      })
-    ]
-  ]
-);
-
diff --git a/examples/jquery-haml/pages/markdown.js b/examples/jquery-haml/pages/markdown.js
deleted file mode 100644
index 53de232..0000000
--- a/examples/jquery-haml/pages/markdown.js
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-$(function(){
-
-var data = {
-  vars: {
-	  name: "Interested Visitor",
-	  os: navigator.vendor + " " + navigator.vendorSub + " " + navigator.platform,
-	  browser: navigator.userAgent
-  },
-	line: "# Welcome back {name},\n\nI see you're using *{browser}* on **{os}**."
-};
-
-function update_preview() {
-  $('#line_preview').text(data.line).markdown(data.vars);
-}
-
-$('body').haml([
-	["h1", data.vars.name],
-  ["dl",
-    ["dt", data.vars.os],
-    ['dd', data.vars.browser]
-  ],
-	["table.ui-widget.ui-widget-content", {_:{"border-collapse":"collapse"}},
-	  ["tr.ui-widget-header.ui-corner-top", {_:{"font-size":"20px","line-height":"1.5em"}},
-	    ["th", "Markdown"],
-	    ["th", "Variables"],
-	    ["th", "Preview"]
-    ],
-    ["tr.ui-widget-content",
-	    ["td", {_:{width:"50%","vertical-align":"top"}},
-	      ["textarea.ui-widget-content ui-corner-all",
-	        {_:{width:"100%",height:"400px",border:0},$:{bind:["keyup", function() {
-	          data.line = this.value;
-	          update_preview();
-	        }]}}, 
-	        data.line
-        ]
-	    ],
-	    ["td", {_:{"vertical-align":"top",padding:"0 10px"}},
-	      ["form", form_builder({
-	        name: {type:"text"},
-	        os: {type:"text"},
-	        browser: {type:"text"}
-	      }, data.vars, update_preview)]
-	    ],
-	    ["td#line_preview", {
-	      _:{width:"50%","vertical-align":"top",padding:"0 10px"},
-	      $:{markdown:[data.vars]}
-      }, data.line]
-    ]
-  ],
-  ["#ajax_description", {$:{
-      load: ['README.markdown', null, function (responseText, textStatus, xhr) {
-        $(this).html($.markdown(responseText));
-      }]
-    }}
-  ]   
-]);
-
-});
diff --git a/examples/jquery-haml/pages/ui-demo.js b/examples/jquery-haml/pages/ui-demo.js
deleted file mode 100644
index 4820563..0000000
--- a/examples/jquery-haml/pages/ui-demo.js
+++ /dev/null
@@ -1,125 +0,0 @@
-function getparam(key, d) {
-  var value = window.location.href.match(new RegExp("[?&]"+key+"=([^&#]*)"));
-  return value ? value[1] : d;
-}
-
-$(function(){
-// Render the page
-$("body").haml(
-  [".ui-widget-overlay"],
-  ["p",{_:{position:"absolute"}},
-    ["strong", "jQuery-UI haml-js demos"],
-    " Go back ",
-    ["a", {href:"?page=index&skin="+getparam("skin", "ui-lightness")}, "home"],
-    "."
-  ],
-  ["table",{_:{position:"absolute","margin-top":"2em"}},
-    ["tr",
-      ["td", {style:"vertical-align:top;padding: 0 10px"},
-        ["p.ui-state-default.ui-corner-all.ui-helper-clearfix", {style: "padding:4px;" },
-          ["span.ui-icon.ui-icon-volume-on", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Master volume"
-        ],
-        ["div", {style: "width:260px; margin:15px;", $:{
-          slider: [{
-			        value: 60
-		      }]
-	      }}],
-        ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" }, 
-          ["span.ui-icon.ui-icon-signal", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Graphic EQ"
-        ],
-        ["div", $.map([88, 77, 55, 33, 40, 45, 70], function (v) {
-          return [["span", {
-            _: {height: "120px", "float": "left", margin: "15px"},
-            $: {slider:[{value:v,range:"min",animate:true,orientation:"vertical"}]}
-          }]];
-        })],
-        ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;clear:both;" }, 
-          ["span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Date Picker"
-        ],
-        "Date:",
-        ["div", {$:{datepicker:[]}}]
-      ],
-      ["td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
-        ["p.ui-state-default.ui-corner-all", {style:"padding:4px;" }, 
-          ["span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Accordion"
-        ],
-        ["div", {$:{accordion:[]}},
-          ["h3", ["a",{href:"#"}, "Section 1"]],
-          ["div",
-            ["p", "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."]
-          ],
-          ["h3", ["a",{href:"#"}, "Section 2"]],
-          ["div",
-            ["p", "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna."]
-          ],
-          ["h3", ["a",{href:"#"}, "Section 3"]],
-          ["div",
-            ["p", "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui."],
-            ["ul",
-              ["li", "List item one"],
-              ["li", "List item two"],
-              ["li", "List item three"]
-            ]
-          ],
-          ["h3", ["a",{href:"#"}, "Section 4"]],
-          ["div",
-            ["p", "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est."],
-            ["p", "Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."]
-          ]
-        ]
-      ],
-      ["td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
-        ["p.ui-state-default.ui-corner-all", {style:"padding:4px;" }, 
-          ["span.ui-icon.ui-icon-calculator", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Tabs"
-        ],
-        ["div", {$:{tabs:[]}},
-          ["ul",
-            ["li", ["a",{href:"#tabs-1"}, "Nunc tincidunt"]],
-            ["li", ["a",{href:"#tabs-2"}, "Proin dolor"]],
-            ["li", ["a",{href:"#tabs-3"}, "Aenean lacinia"]]
-          ],
-          ["#tabs-1",
-            ["p", "Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus."]
-          ],
-          ["#tabs-2",
-            ["p", "Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus."]
-          ],
-          ["#tabs-3",
-            ["p", "Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus."],
-            ["p", "Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit."]
-          ]
-        ],
-        ["p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" }, 
-          ["span.ui-icon.ui-icon-lightbulb", {style: "float:left; margin:-2px 5px 0 0;" }],
-          "Highlight / Error"
-        ],
-        [".ui-widget",
-          [".ui-state-highlight.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
-            ["p",
-              ["span.ui-icon.ui-icon-info", {style: "float: left; margin-right: 0.3em;"} ],
-              ["strong", "Hey!"],
-              "Sample ui-state-highlight style."
-            ]
-          ]
-        ],
-        ["br"],
-        [".ui-widget",
-          [".ui-state-error.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
-            ["p",
-              ["span.ui-icon.ui-icon-alert", {style: "float: left; margin-right: 0.3em;"} ],
-              ["strong", "Alert:"],
-              "Sample ui-state-error style."
-            ]
-          ]
-        ]
-      ]
-    ]
-  ]
-);
-
-});
diff --git a/examples/jquery-haml/js/jquery-1.3.2.min.js b/examples/js/jquery-1.3.2.min.js
similarity index 100%
rename from examples/jquery-haml/js/jquery-1.3.2.min.js
rename to examples/js/jquery-1.3.2.min.js
diff --git a/examples/jquery-haml/js/jquery-ui-1.7.2.custom.min.js b/examples/js/jquery-ui-1.7.2.custom.min.js
similarity index 100%
rename from examples/jquery-haml/js/jquery-ui-1.7.2.custom.min.js
rename to examples/js/jquery-ui-1.7.2.custom.min.js
diff --git a/examples/js/ui-demo.js b/examples/js/ui-demo.js
new file mode 100644
index 0000000..3858cc4
--- /dev/null
+++ b/examples/js/ui-demo.js
@@ -0,0 +1,113 @@
+$(function(){
+// Render the page
+$("body").haml(
+  [".ui-widget-overlay"],
+  ["%table",{css:{position:"absolute","margin-top":"2em"}},
+    ["%tr",
+      ["%td", {style:"vertical-align:top;padding: 0 10px"},
+        ["%p.ui-state-default.ui-corner-all.ui-helper-clearfix", {style: "padding:4px;" },
+          ["%span.ui-icon.ui-icon-volume-on", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Master volume"
+        ],
+        ["%div", {style: "width:260px; margin:15px;", $:{
+          slider: [{
+			        value: 60
+		      }]
+	      }}],
+        ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" }, 
+          ["%span.ui-icon.ui-icon-signal", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Graphic EQ"
+        ],
+        ["%div", $.map([88, 77, 55, 33, 40, 45, 70], function (v) {
+          return [["%span", {
+            css: {height: "120px", "float": "left", margin: "15px"},
+            $: {slider:[{value:v,range:"min",animate:true,orientation:"vertical"}]}
+          }]];
+        })],
+        ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;clear:both;" }, 
+          ["%span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Date Picker"
+        ],
+        ["%div", {$:{datepicker:[]}}]
+      ],
+      ["%td", {style:"vertical-align:top;padding: 0 10px;width:400px"},
+        ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;" }, 
+          ["%span.ui-icon.ui-icon-calendar", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Accordion"
+        ],
+        ["%div", {$:{accordion:[]}},
+          ["%h3", ["%a",{href:"#"}, "Section 1"]],
+          ["%div",
+            ["%p", "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."]
+          ],
+          ["%h3", ["%a",{href:"#"}, "Section 2"]],
+          ["%div",
+            ["%p", "Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna."]
+          ],
+          ["%h3", ["%a",{href:"#"}, "Section 3"]],
+          ["%div",
+            ["%p", "Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui."],
+            ["%ul",
+              ["%li", "List item one"],
+              ["%li", "List item two"],
+              ["%li", "List item three"]
+            ]
+          ],
+          ["%h3", ["%a",{href:"#"}, "Section 4"]],
+          ["%div",
+            ["%p", "Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est."],
+            ["%p", "Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."]
+          ]
+        ]
+      ],
+      ["%td", {style:"vertical-align:top;width:430px;padding: 0 10px;"},
+        ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;" }, 
+          ["%span.ui-icon.ui-icon-calculator", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Tabs"
+        ],
+        ["%div", {$:{tabs:[]}},
+          ["%ul",
+            ["%li", ["%a",{href:"#tabs-1"}, "Nunc tincidunt"]],
+            ["%li", ["%a",{href:"#tabs-2"}, "Proin dolor"]],
+            ["%li", ["%a",{href:"#tabs-3"}, "Aenean lacinia"]]
+          ],
+          ["#tabs-1",
+            ["%p", "Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus."]
+          ],
+          ["#tabs-2",
+            ["%p", "Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus."]
+          ],
+          ["#tabs-3",
+            ["%p", "Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus."],
+            ["%p", "Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit."]
+          ]
+        ],
+        ["%p.ui-state-default.ui-corner-all", {style:"padding:4px;margin-top:4em;" }, 
+          ["%span.ui-icon.ui-icon-lightbulb", {style: "float:left; margin:-2px 5px 0 0;" }],
+          "Highlight / Error"
+        ],
+        [".ui-widget",
+          [".ui-state-highlight.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
+            ["%p",
+              ["%span.ui-icon.ui-icon-info", {style: "float: left; margin-right: 0.3em;"} ],
+              ["%strong", "Hey!"],
+              "Sample ui-state-highlight style."
+            ]
+          ]
+        ],
+        ["%br"],
+        [".ui-widget",
+          [".ui-state-error.ui-corner-all", {style: "padding: 0pt 0.7em; margin-top: 20px;"},
+            ["%p",
+              ["%span.ui-icon.ui-icon-alert", {style: "float: left; margin-right: 0.3em;"} ],
+              ["%strong", "Alert:"],
+              "Sample ui-state-error style."
+            ]
+          ]
+        ]
+      ]
+    ]
+  ]
+);
+
+});
diff --git a/examples/node-haml/README.markdown b/examples/node-haml/README.markdown
deleted file mode 100644
index e69de29..0000000
diff --git a/examples/node-haml/convert.js b/examples/node-haml/convert.js
deleted file mode 100644
index 16c0c13..0000000
--- a/examples/node-haml/convert.js
+++ /dev/null
@@ -1,23 +0,0 @@
-var Haml = require("../../lib/haml.js");
-
-function haml_to_html(haml) {
-
-}
-
-function onLoad() {
-
-  p(Haml.parse(":foobar{param: false} stuff\n  that\n  needs\n   to\n    go"));
-  p(Haml.parse("#head{id:'one'} Content\n  more\n  content"));
-  p(Haml.parse(".button Content"));
-  p(Haml.parse(".button#id{other: true} Content"));
-  p(Haml.parse(".button.more.stuff Content"));
-  p(Haml.parse("%div Content"));
-  p(Haml.parse("%div{id: 'foo', rel: 'sample'} More Content"));
-
-  node.fs.cat("haml/ui.haml").addCallback(function (text) {
-    var haml = Haml.parse(text);
-    p(haml_to_html(haml));
-//    print(haml_to_html(haml));
-  });
-}
-
diff --git a/examples/node-haml/haml/sample.haml b/examples/node-haml/haml/sample.haml
deleted file mode 100644
index 8b3a0ca..0000000
--- a/examples/node-haml/haml/sample.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-#header
-  %h1 Haml for the Browser!
-  %img{src: "/images/logo.png", alt:"haml-js logo"}
-  %script{type: "text/javascript"}
-    alert("Cool Stuff");
-#main
-  %p
-    Welcome to my simple site. 
-    This is a multiline paragraph.
-  %p{$:{click:[function(){this.hide();}]}}
-    Hide Me!
-#sidebar
-  %h2 Cool Links
-  %ul
-    %li 
-    %li 
-    %li 
-#footer
-  © 2009 Tim Caswell
-
diff --git a/examples/node-haml/haml/ui.haml b/examples/node-haml/haml/ui.haml
deleted file mode 100644
index 6103db6..0000000
--- a/examples/node-haml/haml/ui.haml
+++ /dev/null
@@ -1,563 +0,0 @@
-#components.clearfix
-  #getBookmarklet
-    %p
-      %span.icon
-      %strong{$:{click:[function(){alert("Hello {\"}");}]}}
-        New!
-      Bring ThemeRoller into any page:
-      %a{ href: "/themeroller/developertool/" }
-        Get the ThemeRoller Firefox Bookmarklet!
-  #compGroupA.clearfix
-    %h2.demoHeaders
-      Accordion
-    #accordion.ui-accordion.ui-widget.ui-helper-reset{ role: "tablist" }
-      %h3.ui-accordion-header.ui-helper-reset.ui-state-active.ui-corner-top{ tabindex: "0", "aria-expanded": "true", role:  "tab" }
-        %span.ui-icon.ui-icon-triangle-1-s
-        %a{ tabindex: "-1", href: "#" }
-          Section 1
-      .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom.ui-accordion-content-active{ role:  "tabpanel", style: "height: 148px;" }
-        %p
-          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-      %h3.ui-accordion-header.ui-helper-reset.ui-state-default.ui-corner-all{ tabindex: "-1", "aria-expanded": "false", role:  "tab" }
-        %span.ui-icon.ui-icon-triangle-1-e
-        %a{ tabindex: "-1", href: "#" }
-          Section 2
-      .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom{ role:  "tabpanel", style: "height: 148px; display: none;" }
-        %p
-          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
-      %h3.ui-accordion-header.ui-helper-reset.ui-state-default.ui-corner-all{ tabindex: "-1", "aria-expanded": "false", role:  "tab" }
-        %span.ui-icon.ui-icon-triangle-1-e
-        %a{ tabindex: "-1", href: "#" }
-          Section 3
-      .ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom{ role:  "tabpanel", style: "height: 148px; display: none;" }
-        %p
-          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-        %ul
-          %li
-            List item one
-          %li
-            List item two
-          %li
-            List item three
-    %h2.demoHeaders
-      Tabs
-    #tabs.ui-tabs.ui-widget.ui-widget-content.ui-corner-all
-      %ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all
-        %li.ui-state-default.ui-corner-top.ui-tabs-selected.ui-state-active
-          %a{ href: "#tabs-1" }
-            First
-        %li.ui-state-default.ui-corner-top
-          %a{ href: "#tabs-2" }
-            Second
-        %li.ui-state-default.ui-corner-top
-          %a{ href: "#tabs-3" }
-            Third
-      #tabs-1.ui-tabs-panel.ui-widget-content.ui-corner-bottom
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      #tabs-2.ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide
-        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
-      #tabs-3.ui-tabs-panel.ui-widget-content.ui-corner-bottom.ui-tabs-hide
-        Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
-    %h2.demoHeaders
-      Dialog
-    %p
-      %a#dialog_link.ui-state-default.ui-corner-all{ href: "#" }
-        %span.ui-icon.ui-icon-newwin
-        Open Dialog
-    %h2.demoHeaders
-      Overlay and Shadow Classes
-    .fakewindowcontain{ style: "padding: 1% 4%; overflow: hidden; position: relative; width: 96%; height: 200px;" }
-      %p
-        Lorem ipsum dolor sit amet,  Nulla nec tortor. Donec id elit quis purus consectetur consequat.
-      %p
-        Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
-      %p
-        Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
-      %p
-        Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.
-      %p
-        Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
-      %p
-        Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
-      .ui-overlay
-        .ui-widget-overlay
-        .ui-widget-shadow.ui-corner-all{ style: "width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;" }
-      .ui-widget.ui-widget-content.ui-corner-all{ style: "padding: 10px; position: absolute; width: 280px; height: 130px; left: 50px; top: 30px;" }
-        %p
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    %h2.demoHeaders
-      Framework Icons (content color preview)
-    %ul#icons.ui-widget.ui-helper-clearfix
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-n" }
-        %span.ui-icon.ui-icon-carat-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-ne" }
-        %span.ui-icon.ui-icon-carat-1-ne
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-e" }
-        %span.ui-icon.ui-icon-carat-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-se" }
-        %span.ui-icon.ui-icon-carat-1-se
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-s" }
-        %span.ui-icon.ui-icon-carat-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-sw" }
-        %span.ui-icon.ui-icon-carat-1-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-w" }
-        %span.ui-icon.ui-icon-carat-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-1-nw" }
-        %span.ui-icon.ui-icon-carat-1-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-2-n-s" }
-        %span.ui-icon.ui-icon-carat-2-n-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-carat-2-e-w" }
-        %span.ui-icon.ui-icon-carat-2-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-n" }
-        %span.ui-icon.ui-icon-triangle-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-ne" }
-        %span.ui-icon.ui-icon-triangle-1-ne
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-e" }
-        %span.ui-icon.ui-icon-triangle-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-se" }
-        %span.ui-icon.ui-icon-triangle-1-se
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-s" }
-        %span.ui-icon.ui-icon-triangle-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-sw" }
-        %span.ui-icon.ui-icon-triangle-1-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-w" }
-        %span.ui-icon.ui-icon-triangle-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-1-nw" }
-        %span.ui-icon.ui-icon-triangle-1-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-2-n-s" }
-        %span.ui-icon.ui-icon-triangle-2-n-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-triangle-2-e-w" }
-        %span.ui-icon.ui-icon-triangle-2-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-n" }
-        %span.ui-icon.ui-icon-arrow-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-ne" }
-        %span.ui-icon.ui-icon-arrow-1-ne
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-e" }
-        %span.ui-icon.ui-icon-arrow-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-se" }
-        %span.ui-icon.ui-icon-arrow-1-se
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-s" }
-        %span.ui-icon.ui-icon-arrow-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-sw" }
-        %span.ui-icon.ui-icon-arrow-1-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-w" }
-        %span.ui-icon.ui-icon-arrow-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-1-nw" }
-        %span.ui-icon.ui-icon-arrow-1-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-n-s" }
-        %span.ui-icon.ui-icon-arrow-2-n-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-ne-sw" }
-        %span.ui-icon.ui-icon-arrow-2-ne-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-e-w" }
-        %span.ui-icon.ui-icon-arrow-2-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-2-se-nw" }
-        %span.ui-icon.ui-icon-arrow-2-se-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-n" }
-        %span.ui-icon.ui-icon-arrowstop-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-e" }
-        %span.ui-icon.ui-icon-arrowstop-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-s" }
-        %span.ui-icon.ui-icon-arrowstop-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowstop-1-w" }
-        %span.ui-icon.ui-icon-arrowstop-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-n" }
-        %span.ui-icon.ui-icon-arrowthick-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-ne" }
-        %span.ui-icon.ui-icon-arrowthick-1-ne
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-e" }
-        %span.ui-icon.ui-icon-arrowthick-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-se" }
-        %span.ui-icon.ui-icon-arrowthick-1-se
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-s" }
-        %span.ui-icon.ui-icon-arrowthick-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-sw" }
-        %span.ui-icon.ui-icon-arrowthick-1-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-w" }
-        %span.ui-icon.ui-icon-arrowthick-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-1-nw" }
-        %span.ui-icon.ui-icon-arrowthick-1-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-n-s" }
-        %span.ui-icon.ui-icon-arrowthick-2-n-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-ne-sw" }
-        %span.ui-icon.ui-icon-arrowthick-2-ne-sw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-e-w" }
-        %span.ui-icon.ui-icon-arrowthick-2-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthick-2-se-nw" }
-        %span.ui-icon.ui-icon-arrowthick-2-se-nw
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-n" }
-        %span.ui-icon.ui-icon-arrowthickstop-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-e" }
-        %span.ui-icon.ui-icon-arrowthickstop-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-s" }
-        %span.ui-icon.ui-icon-arrowthickstop-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowthickstop-1-w" }
-        %span.ui-icon.ui-icon-arrowthickstop-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-w" }
-        %span.ui-icon.ui-icon-arrowreturnthick-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-n" }
-        %span.ui-icon.ui-icon-arrowreturnthick-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-e" }
-        %span.ui-icon.ui-icon-arrowreturnthick-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturnthick-1-s" }
-        %span.ui-icon.ui-icon-arrowreturnthick-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-w" }
-        %span.ui-icon.ui-icon-arrowreturn-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-n" }
-        %span.ui-icon.ui-icon-arrowreturn-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-e" }
-        %span.ui-icon.ui-icon-arrowreturn-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowreturn-1-s" }
-        %span.ui-icon.ui-icon-arrowreturn-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-w" }
-        %span.ui-icon.ui-icon-arrowrefresh-1-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-n" }
-        %span.ui-icon.ui-icon-arrowrefresh-1-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-e" }
-        %span.ui-icon.ui-icon-arrowrefresh-1-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrowrefresh-1-s" }
-        %span.ui-icon.ui-icon-arrowrefresh-1-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-4" }
-        %span.ui-icon.ui-icon-arrow-4
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-arrow-4-diag" }
-        %span.ui-icon.ui-icon-arrow-4-diag
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-extlink" }
-        %span.ui-icon.ui-icon-extlink
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-newwin" }
-        %span.ui-icon.ui-icon-newwin
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-refresh" }
-        %span.ui-icon.ui-icon-refresh
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-shuffle" }
-        %span.ui-icon.ui-icon-shuffle
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-transfer-e-w" }
-        %span.ui-icon.ui-icon-transfer-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-transferthick-e-w" }
-        %span.ui-icon.ui-icon-transferthick-e-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-folder-collapsed" }
-        %span.ui-icon.ui-icon-folder-collapsed
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-folder-open" }
-        %span.ui-icon.ui-icon-folder-open
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-document" }
-        %span.ui-icon.ui-icon-document
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-document-b" }
-        %span.ui-icon.ui-icon-document-b
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-note" }
-        %span.ui-icon.ui-icon-note
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-mail-closed" }
-        %span.ui-icon.ui-icon-mail-closed
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-mail-open" }
-        %span.ui-icon.ui-icon-mail-open
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-suitcase" }
-        %span.ui-icon.ui-icon-suitcase
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-comment" }
-        %span.ui-icon.ui-icon-comment
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-person" }
-        %span.ui-icon.ui-icon-person
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-print" }
-        %span.ui-icon.ui-icon-print
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-trash" }
-        %span.ui-icon.ui-icon-trash
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-locked" }
-        %span.ui-icon.ui-icon-locked
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-unlocked" }
-        %span.ui-icon.ui-icon-unlocked
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-bookmark" }
-        %span.ui-icon.ui-icon-bookmark
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-tag" }
-        %span.ui-icon.ui-icon-tag
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-home" }
-        %span.ui-icon.ui-icon-home
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-flag" }
-        %span.ui-icon.ui-icon-flag
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-calculator" }
-        %span.ui-icon.ui-icon-calculator
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-cart" }
-        %span.ui-icon.ui-icon-cart
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pencil" }
-        %span.ui-icon.ui-icon-pencil
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-clock" }
-        %span.ui-icon.ui-icon-clock
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-disk" }
-        %span.ui-icon.ui-icon-disk
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-calendar" }
-        %span.ui-icon.ui-icon-calendar
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-zoomin" }
-        %span.ui-icon.ui-icon-zoomin
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-zoomout" }
-        %span.ui-icon.ui-icon-zoomout
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-search" }
-        %span.ui-icon.ui-icon-search
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-wrench" }
-        %span.ui-icon.ui-icon-wrench
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-gear" }
-        %span.ui-icon.ui-icon-gear
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-heart" }
-        %span.ui-icon.ui-icon-heart
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-star" }
-        %span.ui-icon.ui-icon-star
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-link" }
-        %span.ui-icon.ui-icon-link
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-cancel" }
-        %span.ui-icon.ui-icon-cancel
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-plus" }
-        %span.ui-icon.ui-icon-plus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-plusthick" }
-        %span.ui-icon.ui-icon-plusthick
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-minus" }
-        %span.ui-icon.ui-icon-minus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-minusthick" }
-        %span.ui-icon.ui-icon-minusthick
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-close" }
-        %span.ui-icon.ui-icon-close
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-closethick" }
-        %span.ui-icon.ui-icon-closethick
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-key" }
-        %span.ui-icon.ui-icon-key
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-lightbulb" }
-        %span.ui-icon.ui-icon-lightbulb
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-scissors" }
-        %span.ui-icon.ui-icon-scissors
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-clipboard" }
-        %span.ui-icon.ui-icon-clipboard
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-copy" }
-        %span.ui-icon.ui-icon-copy
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-contact" }
-        %span.ui-icon.ui-icon-contact
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-image" }
-        %span.ui-icon.ui-icon-image
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-video" }
-        %span.ui-icon.ui-icon-video
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-script" }
-        %span.ui-icon.ui-icon-script
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-alert" }
-        %span.ui-icon.ui-icon-alert
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-info" }
-        %span.ui-icon.ui-icon-info
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-notice" }
-        %span.ui-icon.ui-icon-notice
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-help" }
-        %span.ui-icon.ui-icon-help
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-check" }
-        %span.ui-icon.ui-icon-check
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-bullet" }
-        %span.ui-icon.ui-icon-bullet
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-radio-off" }
-        %span.ui-icon.ui-icon-radio-off
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-radio-on" }
-        %span.ui-icon.ui-icon-radio-on
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pin-w" }
-        %span.ui-icon.ui-icon-pin-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pin-s" }
-        %span.ui-icon.ui-icon-pin-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-play" }
-        %span.ui-icon.ui-icon-play
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-pause" }
-        %span.ui-icon.ui-icon-pause
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-next" }
-        %span.ui-icon.ui-icon-seek-next
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-prev" }
-        %span.ui-icon.ui-icon-seek-prev
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-end" }
-        %span.ui-icon.ui-icon-seek-end
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-seek-first" }
-        %span.ui-icon.ui-icon-seek-first
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-stop" }
-        %span.ui-icon.ui-icon-stop
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-eject" }
-        %span.ui-icon.ui-icon-eject
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-volume-off" }
-        %span.ui-icon.ui-icon-volume-off
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-volume-on" }
-        %span.ui-icon.ui-icon-volume-on
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-power" }
-        %span.ui-icon.ui-icon-power
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-signal-diag" }
-        %span.ui-icon.ui-icon-signal-diag
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-signal" }
-        %span.ui-icon.ui-icon-signal
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-0" }
-        %span.ui-icon.ui-icon-battery-0
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-1" }
-        %span.ui-icon.ui-icon-battery-1
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-2" }
-        %span.ui-icon.ui-icon-battery-2
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-battery-3" }
-        %span.ui-icon.ui-icon-battery-3
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-plus" }
-        %span.ui-icon.ui-icon-circle-plus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-minus" }
-        %span.ui-icon.ui-icon-circle-minus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-close" }
-        %span.ui-icon.ui-icon-circle-close
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-e" }
-        %span.ui-icon.ui-icon-circle-triangle-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-s" }
-        %span.ui-icon.ui-icon-circle-triangle-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-w" }
-        %span.ui-icon.ui-icon-circle-triangle-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-triangle-n" }
-        %span.ui-icon.ui-icon-circle-triangle-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-e" }
-        %span.ui-icon.ui-icon-circle-arrow-e
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-s" }
-        %span.ui-icon.ui-icon-circle-arrow-s
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-w" }
-        %span.ui-icon.ui-icon-circle-arrow-w
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-arrow-n" }
-        %span.ui-icon.ui-icon-circle-arrow-n
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-zoomin" }
-        %span.ui-icon.ui-icon-circle-zoomin
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-zoomout" }
-        %span.ui-icon.ui-icon-circle-zoomout
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circle-check" }
-        %span.ui-icon.ui-icon-circle-check
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-plus" }
-        %span.ui-icon.ui-icon-circlesmall-plus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-minus" }
-        %span.ui-icon.ui-icon-circlesmall-minus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-circlesmall-close" }
-        %span.ui-icon.ui-icon-circlesmall-close
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-plus" }
-        %span.ui-icon.ui-icon-squaresmall-plus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-minus" }
-        %span.ui-icon.ui-icon-squaresmall-minus
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-squaresmall-close" }
-        %span.ui-icon.ui-icon-squaresmall-close
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-dotted-vertical" }
-        %span.ui-icon.ui-icon-grip-dotted-vertical
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-dotted-horizontal" }
-        %span.ui-icon.ui-icon-grip-dotted-horizontal
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-solid-vertical" }
-        %span.ui-icon.ui-icon-grip-solid-vertical
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-solid-horizontal" }
-        %span.ui-icon.ui-icon-grip-solid-horizontal
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-gripsmall-diagonal-se" }
-        %span.ui-icon.ui-icon-gripsmall-diagonal-se
-      %li.ui-state-default.ui-corner-all{ title: ".ui-icon-grip-diagonal-se" }
-        %span.ui-icon.ui-icon-grip-diagonal-se
-  #compGroupB.clearfix
-    %h2.demoHeaders
-      Slider
-    #slider.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all
-      .ui-slider-range.ui-widget-header{ style: "left: 17%; width: 50%;" }
-      %a.ui-slider-handle.ui-state-default.ui-corner-all{ style: "left: 17%;", href: "#" }
-      %a.ui-slider-handle.ui-state-default.ui-corner-all{ style: "left: 67%;", href: "#" }
-    %h2.demoHeaders
-      Datepicker
-    #datepicker.hasDatepicker
-      .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all
-        .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
-          %a.ui-datepicker-prev.ui-corner-all{ onclick: "DP_jQuery.datepicker._adjustDate('#datepicker', -1, 'M');", title: "Prev" }
-            %span.ui-icon.ui-icon-circle-triangle-w
-              Prev
-          %a.ui-datepicker-next.ui-corner-all{ onclick: "DP_jQuery.datepicker._adjustDate('#datepicker', +1, 'M');", title: "Next" }
-            %span.ui-icon.ui-icon-circle-triangle-e
-              Next
-          .ui-datepicker-title
-            %span.ui-datepicker-month
-              July
-            %span.ui-datepicker-year
-              2009
-        %table.ui-datepicker-calendar
-          %thead
-            %tr
-              %th.ui-datepicker-week-end
-                %span{ title: "Sunday" }
-                  Su
-              %th
-                %span{ title: "Monday" }
-                  Mo
-              %th
-                %span{ title: "Tuesday" }
-                  Tu
-              %th
-                %span{ title: "Wednesday" }
-                  We
-              %th
-                %span{ title: "Thursday" }
-                  Th
-              %th
-                %span{ title: "Friday" }
-                  Fr
-              %th.ui-datepicker-week-end
-                %span{ title: "Saturday" }
-                  Sa
-          %tbody
-            %tr
-              %td.ui-datepicker-week-end.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled
-                \ 
-              %td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled
-                \ 
-              %td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled
-                \ 
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  1
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  2
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  3
-              %td.ui-datepicker-week-end{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  4
-            %tr
-              %td.ui-datepicker-week-end{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  5
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  6
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  7
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  8
-              %td.ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default.ui-state-highlight.ui-state-active.ui-state-hover{ href: "#" }
-                  9
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  10
-              %td.ui-datepicker-week-end{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  11
-            %tr
-              %td.ui-datepicker-week-end{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  12
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  13
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  14
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  15
-              %td{ onclick: "DP_jQuery.datepicker._selectDay('#datepicker',6,2009, this);return false;" }
-                %a.ui-state-default{ href: "#" }
-                  16
-              \n";
-        case '':
-          return '\n';
-        case '1.1':
-          return '\n';
-        case 'Strict':
-          return '\n';
-      }
-    }
-    return json;
-  }
-  if (typeof json === 'object' && json.length !== undefined) {
-    if (typeof json[0] === 'object')
-    {
-      if (json[0].tag !== undefined) {
-        return (function () {
-          var tag, element, html, attributes;
-          element = json.shift();
-          tag = element.tag;
-          html = tag;
-          for (var key in element) {
-            if (element.hasOwnProperty(key) && key !== 'tag') {
-              html += " " + key + "=\"" + element[key].
-                replace("&", "&").
-                replace("<", "<").
-                replace(">", ">").
-                replace("\"", """) + "\"";
-            }
-          }
-          if (json.length === 0 && (tag === "link" || tag === 'br' || tag === 'input')) {
-            return "\n<" + html + " />\n";
-          }
-          return "\n<" + html + ">" + Haml.to_html(json) + "\n";
-        }());
-      }
-      if (json[0].plugin !== undefined) {
-          switch (json.shift().plugin) {
-            case "javascript":
-              return '\n\n";
-            case "css":
-              return '\n\n";
-          }
-      }
-    }
-    return json.map(Haml.to_html).join('');
-  }
-  return JSON.stringify(json);
-}
-
-Haml.parse = function (text) {
-  
-  var empty_regex = new RegExp("^[ \t]*$"),
-      indent_regex = new RegExp("^ *"),
-      element_regex = new RegExp("^(?::[a-z]+|(?:[%][a-z][a-z0-9]*)?(?:[#.][a-z0-9_-]+)*)", "i"),
-      scope = this,
-      haml, element, stack, indent, buffer, old_indent, mode, last_insert;
-      
-  // The closest thing to instance_eval you can get in javascript
-  function instance_eval(input) {
-    var block;
-    if (typeof input === 'string') {
-      block = function () { return eval("(" + input + ")"); };
-    } else {
-      block = input;
-    }
-    return block.call(scope);
-  }
-
-  function process_embedded_code(string) {
-    if (typeof string !== 'string') {
-      return string;
-    }
-    var matches = string.match(/#{([^}]*)}/g);
-    if (matches) {
-      matches.forEach(function (match) {
-        var pair = match.match(/#{([^}]*)}/);
-        string = string.replace(pair[0], instance_eval(pair[1]));
-      })
-    }
-    return string;
-  }
-
-  function flush_buffer() {
-    if (buffer.length > 0) {
-      mode = "NORMAL";
-      element.push(process_embedded_code(buffer.join("\n")));
-      buffer = [];
-    }
-  }
-
-  function parse_push() {
-    stack.push({element: element, mode: mode});
-    var new_element = [];
-    mode = "NORMAL";
-    element.push(new_element);
-    element = new_element;
-  }
-  
-  function parse_pop() {
-    var last = stack.pop();
-
-    if (element.length === 1) {
-      if (typeof element[0] === "string") {
-        if (element[0].match(element_regex)[0].length === 0) {
-          // Collapse arrays with single string literal
-          last.element[last.element.length - 1] = element[0];
-        }
-      }
-    }
-    element = last.element;
-    mode = last.mode;
-  }
-  
-  function get_indent(line) {
-    if (line === undefined) {
-      return 0;
-    }
-    var i = line.match(indent_regex);
-    return i[0].length / 2;
-  }
-  
-  function parse_attribs(line) {
-    // Parse the attribute block using a state machine
-    if (!(line.length > 0 && line.charAt(0) === '{')) {
-      return line;
-    }
-    var l = line.length;
-    var count = 1;
-    var quote = false;
-    var skip = false;
-    for (var i = 1; count > 0; i += 1) {
-
-      // If we reach the end of the line, then there is a problem
-      if (i > l) {
-        throw "Malformed attribute block";
-      }
-
-      var c = line.charAt(i);
-      if (skip) {
-        skip = false;
-      } else {
-        if (quote) {
-          if (c === '\\') {
-            skip = true;
-          }
-          if (c === quote) {
-            quote = false;
-          }
-        } else {
-          if (c === '"' || c === "'") {
-            quote = c;
-          }
-          if (c === '{') {
-            count += 1;
-          }
-          if (c === '}') {
-            count -= 1;
-          }
-        }
-      }
-    }
-    var block = line.substr(0, i);
-    (function () {
-      element.push(instance_eval(block))
-    }.call(this));
-    return line.substr(i);
-  }
-  
-  function parse_content(line) {
-    // Strip off leading whitespace
-    line = line.replace(indent_regex, '');
-    
-    // Ignore blank lines
-    if (line.length === 0) {
-      return;
-    }
-    
-    if (mode === 'ELEMENT') {
-      parse_pop();
-    }
-
-    switch (line.charAt(0)) {
-    case '/':
-      break;
-    case '=':
-      (function () {
-        buffer.push(instance_eval(line.substr(1)));
-      }.call(this));
-      break;
-    case "\\":
-      buffer.push(line.substr(1));
-      break;
-    default:
-      buffer.push(line);
-      break;
-    }
-  }
-
-  function parse_element(line, selector) {
-
-    flush_buffer();
-    if (element.length > 0) {
-      if (mode === 'ELEMENT') {
-        parse_pop();
-      }
-      parse_push();
-    }
-    mode = 'ELEMENT';
-
-    classes = selector.match(/\.[^\.#]+/g),
-    ids = selector.match(/#[^\.#]+/g),
-    tag = selector.match(/^%([^\.#]+)/g);
-    plugin = selector.match(/^:([^\.#]+)/g);
-    tag = tag ? tag[0].substr(1) : (plugin ? null : 'div');
-    plugin = plugin ? plugin[0].substr(1) : null;
-    
-    line = parse_attribs.call(this, line.substr(selector.length));
-    
-    var attrs;
-    if (typeof element[element.length - 1] === "object") {
-      attrs = element[element.length - 1];
-    } else {
-      attrs = {};
-      element.push(attrs);
-    }
-    if (tag) {
-      attrs.tag = tag;
-    }
-    if (plugin) {
-      attrs.plugin = plugin;
-    }
-    if (ids) {
-      for (var i = 0, l = ids.length; i < l; i += 1) {
-        ids[i] = ids[i].substr(1);
-      }
-      if (attrs.id) {
-        ids.push(attrs.id);
-      }
-      attrs.id = ids.join(" ");
-    }
-    if (classes) {
-      for (var i = 0, l = classes.length; i < l; i += 1) {
-        classes[i] = classes[i].substr(1);
-      }
-      if (attrs['class']) {
-        classes.push(attrs['class']);
-      }
-      attrs['class'] = classes.join(" ");
-    }
-
-    if (selector.charAt(0) === ':') {
-      mode = 'RAW';
-    } else {
-      if (!line.match(empty_regex)) {
-        parse_push();
-        parse_content.call(this, line, true);
-        flush_buffer();
-        parse_pop();
-      }
-    }
-  }
-  
-  function process_plugins() {
-    var contents, i;
-    switch (element[0]) {
-    case ':if':
-      var condition = element[1].condition;
-      contents = element[2];
-      for (i in element) {
-        if (element.hasOwnProperty(i)) {
-          delete element[i];
-        }
-      }
-      if (condition) {
-        var new_element = Haml.parse.call(this, contents);
-        for (i in new_element) {
-          if (new_element.hasOwnProperty(i)) {
-            element[i] = new_element[i];
-          }
-        }
-        element.length = new_element.length;
-      }
-      break;
-    case ':foreach':
-      var array, key, value, key_name, value_name;
-      array = element[1].array;
-      key_name = element[1].key;
-      value_name = element[1].value;
-      contents = element[2];
-      for (i in element) {
-        if (element.hasOwnProperty(i)) {
-          delete element[i];
-        }
-      }
-      element.length = 0;
-      for (key in array) {
-        if (array.hasOwnProperty(key)) {
-          value = array[key];
-          this[key_name] = key;
-          this[value_name] = value;
-          element.push(Haml.parse.call(this, contents));
-        }
-      }
-      break;
-    }
-  }
-    
-  haml = [];
-  element = haml;
-  stack = [];
-  buffer = [];
-  mode = 'NORMAL';
-  parse_push(); // Prime the pump so we can have multiple root elements
-  indent = 0;
-  old_indent = indent;
-  
-  var lines = text.split("\n"),
-      line, line_index, line_count;
-      
-  line_count = lines.length;
-  for (line_index = 0; line_index <= line_count; line_index += 1) {
-    line = lines[line_index];
-    
-    switch (mode) {
-    case 'ELEMENT':
-    case 'NORMAL':
-
-      // Do indentation
-      indent = get_indent(line);
-      if (indent === old_indent + 1) {
-        parse_push();
-        old_indent = indent;
-      }
-      while (indent < old_indent) {
-        flush_buffer();
-        parse_pop();
-        old_indent -= 1;
-      }
-      
-      if (line === undefined) {
-        continue;
-      }
-      
-      line = line.substr(indent * 2);
-      
-      // Pass doctype commands through as is
-      if (line.substr(0, 3) === '!!!') {
-        element.push(line);
-        continue;
-      }
-
-      // Check for special element characters
-      var match = line.match(element_regex);
-      if (match && match[0].length > 0) {
-        parse_element.call(this, line, match[0]);
-      } else {
-        parse_content.call(this, line);
-      }
-      break;
-    case 'RAW':
-      if (get_indent(line) <= indent) {
-        flush_buffer();
-        process_plugins.call(this);
-        mode = "ELEMENT";
-        line_index -= 1;
-        continue;
-      }
-      line = line.substr((indent + 1) * 2);
-      buffer.push(line);
-      break;
-    }
-  }
-  
-  if (haml.length === 1 && typeof haml[0] !== 'string') {
-    haml = haml[0];
-  }
-  return haml;
-};
-
-// Exports for node
-if (exports) {
-  exports.parse = Haml.parse;
-  exports.to_html = Haml.to_html;
-  exports.render = function (scope, filename, callback) {
-    node.fs.cat(filename).addCallback(function (text) {
-      var json = Haml.parse.call(scope, text);
-      callback(Haml.to_html(json).replace("\n\n", "\n"));
-    });
-  }
-}
-