!!!
%html{:lang => "us"}
  %head
    %meta{:charset => "utf-8"}
      %title jQuery UI Example Page
    = Rack::JQuery.cdn()
    = Rack::JQueryUI.cdn()
    = Rack::JQueryUI::Themes.cdn()
    :javascript
      $(function() {
        $( "#accordion" ).accordion();

        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        $( "#autocomplete" ).autocomplete({
          source: availableTags
        });

        $( "#button" ).button();
        $( "#radioset" ).buttonset();

        $( "#tabs" ).tabs();

        $( "#dialog" ).dialog({
          autoOpen: false,
          width: 400,
          buttons: [
            {
              text: "Ok",
              click: function() {
                $( this ).dialog( "close" );
              }
            },
            {
              text: "Cancel",
              click: function() {
                $( this ).dialog( "close" );
              }
            }
          ]
        });

        // Link to open the dialog
        $( "#dialog-link" ).click(function( event ) {
          $( "#dialog" ).dialog( "open" );
          event.preventDefault();
        });

        $( "#datepicker" ).datepicker({
          inline: true
        });

        $( "#slider" ).slider({
          range: true,
          values: [ 17, 67 ]
        });

        $( "#progressbar" ).progressbar({
          value: 20
        });

        // Hover states on the static widgets
        $( "#dialog-link, #icons li" ).hover(
          function() {
            $( this ).addClass( "ui-state-hover" );
          },
          function() {
            $( this ).removeClass( "ui-state-hover" );
          }
        );
      });

    :css
      body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
      }
      .demoHeaders {
        margin-top: 2em;
      }
      #dialog-link {
        padding: .4em 1em .4em 20px;
        text-decoration: none;
        position: relative;
      }
      #dialog-link span.ui-icon {
        margin: 0 5px 0 0;
        position: absolute;
        left: .2em;
        top: 50%;
        margin-top: -8px;
      }
      #icons {
        margin: 0;
        padding: 0;
      }
      #icons li {
        margin: 2px;
        position: relative;
        padding: 4px 0;
        cursor: pointer;
        float: left;
        list-style: none;
      }
      #icons span.ui-icon {
        float: left;
        margin: 0 4px;
      }
      .fakewindowcontain .ui-widget-overlay {
        position: absolute;
      }
  %body
    = yield