updated version

Add image contents type resopnse handler

.gitignore

@@ -19,3 +19,4 @@ reports/*
 swagger-ui.sublime-workspace
 .idea
 .project
+node_modules/*

Cakefile

@@ -1,6 +1,7 @@
 fs          = require 'fs'
 path        = require 'path'
 {exec}      = require 'child_process'
+less        = require 'less'
 
 sourceFiles  = [
   'SwaggerUi'
@@ -12,6 +13,8 @@ sourceFiles  = [
   'view/ParameterView'
   'view/SignatureView'
   'view/ContentTypeView'
+  'view/ResponseContentTypeView'
+  'view/ParameterContentTypeView'
 ]
 
 
@@ -69,13 +72,25 @@ task 'dist', 'Build a distribution', ->
           console.log '   : Minifying all...'
           exec 'java -jar "./bin/yuicompressor-2.4.7.jar" --type js -o ' + 'dist/swagger-ui.min.js ' + 'dist/swagger-ui.js', (err, stdout, stderr) ->
             throw err if err
-            pack()
+            lessc()
+
+  lessc = ->
+    # Someone who knows CoffeeScript should make this more Coffee-licious
+    console.log '   : Compiling LESS...'
+
+    less.render fs.readFileSync("src/main/less/screen.less", 'utf8'), (err, css) ->
+      console.log err
+      fs.writeFileSync("src/main/html/css/screen.css", css)
+    pack()
 
   pack = ->
     console.log '   : Packaging...'
     exec 'cp -r lib dist'
+    console.log '   : Copied swagger-ui libs'
     exec 'cp -r node_modules/swagger-client/lib/swagger.js dist/lib'
+    console.log '   : Copied swagger dependencies'
     exec 'cp -r src/main/html/* dist'
+    console.log '   : Copied html dependencies'
     console.log '   !'
 
 task 'spec', "Run the test suite", ->
@@ -105,6 +120,7 @@ task 'watch', 'Watch source files for changes and autocompile', ->
   watchFiles("src/main/template")
   watchFiles("src/main/javascript")
   watchFiles("src/main/html")
+  watchFiles("src/main/less")
   watchFiles("src/test")
 
 notify = (message) ->
@@ -113,4 +129,4 @@ notify = (message) ->
 #  options =
 #    title: 'CoffeeScript'
 #    image: 'bin/CoffeeScript.png'
-#  try require('growl') message, options
+#  try require('growl') message, options

README.md

@@ -1,29 +1,28 @@
 Swagger UI
 ==========
 
-Swagger UI is part of [Swagger](http://swagger.wordnik.com/) project.  The Swagger project allows you to produce, visualize and consume your OWN RESTful
-services.  No proxy or 3rd party services required.  Do it your own way.
+Swagger UI is part of [Swagger](http://swagger.wordnik.com/) project.  The Swagger project allows you to produce, visualize and consume your OWN RESTful services.  No proxy or 3rd party services required.  Do it your own way.
 
 Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically
-generate beautiful documentation and sandbox from a [Swagger-compliant](https://github.com/wordnik/swagger-core/wiki) API. Because Swagger UI has no
-dependencies, you can host it in any server environment, or on your local machine.
+generate beautiful documentation and sandbox from a [Swagger-compliant](https://github.com/wordnik/swagger-core/wiki) API. Because Swagger UI has no dependencies, you can host it in any server environment, or on your local machine.
 
 How to Use It
 -------------
 
 ### Download
-You can use the swagger-ui code AS-IS!  No need to build or recompile--just [download](https://github.com/wordnik/swagger-ui/downloads) the distribution and start using it.  If you like swagger-ui as-is, stop here.
+You can use the swagger-ui code AS-IS!  No need to build or recompile--just clone this repo and use the pre-built files in the `dist` folder.  If you like swagger-ui as-is, stop here.
 
 ### Build
 You can rebuild swagger-ui on your own to tweak it or just so you can say you did.  To do so, follow these steps:
 
-1. npm install
-2. npm run-script build
-3. You should see the distribution under the dist folder. Open ./dist/index.html to launch Swagger UI in a browser
+1. install [handlebars](http://handlebarsjs.com/)
+2. install java
+3. npm install
+4. npm run-script build
+5. You should see the distribution under the dist folder. Open ./dist/index.html to launch Swagger UI in a browser
 
 ### Use
-Once you open the Swagger UI, it will load the [Swagger Petstore](http://petstore.swagger.wordnik.com/api/resources.json) service and show its APIs.
-You can enter your own server url and click explore to view the API.
+Once you open the Swagger UI, it will load the [Swagger Petstore](http://petstore.swagger.wordnik.com/api/api-docs) service and show its APIs.  You can enter your own server url and click explore to view the API.
 
 ### Customize
 You may choose to customize Swagger UI for your organization. Here is an overview of whats in its various directories:
@@ -36,23 +35,20 @@ You may choose to customize Swagger UI for your organization. Here is an overvie
     -    src/main/coffeescript: main code in CoffeeScript
     -    src/main/templates: [handlebars](http://handlebarsjs.com/) templates used to render swagger-ui
     -    src/main/html: the html files, some images and css
-    -    src/main/javascript: some legacy javascript referenced by CofffeeScript code
+    -    src/main/javascript: some legacy javascript referenced by CoffeeScript code
 
 ### SwaggerUi
 To use swagger-ui you should take a look at the [source of swagger-ui html page](https://github.com/wordnik/swagger-ui/tree/master/src/main/html) and customize it. This basically requires you to instantiate a SwaggerUi object and call load() on it as below:
+
 ```javascript
     window.swaggerUi = new SwaggerUi({
-        discoveryUrl:"http://petstore.swagger.wordnik.com/api/resources.json",
-        dom_id:"swagger-ui-container",
-        apiKey:"special-key",
-        supportHeaderParams: false,
-        headers: { "Authorization": "XXXX", "someOtherHeader": "YYYY" },
-        supportedSubmitMethods: ['get', 'post', 'put']
+        url:"http://petstore.swagger.wordnik.com/api/api-docs",
+        dom_id:"swagger-ui-container"
     });
 
     window.swaggerUi.load();
 ```
-* *discoveryUrl* parameter should point to a resource listing url as per [Swagger Spec](https://github.com/wordnik/swagger-core/wiki)
+* *url* parameter should point to a resource listing url as per [Swagger Spec](https://github.com/wordnik/swagger-core/wiki)
 * *dom_id parameter* is the the id of a dom element inside which SwaggerUi will put the user interface for swagger
 * *booleanValues* SwaggerUI renders boolean data types as a dropdown. By default it provides a 'true' and 'false' string as the possible choices. You can use this parameter to change the values in dropdown to be something else, for example 0 and 1 by setting booleanValues to new Array(0, 1)
 * *docExpansion* controls how the API listing is displayed. It can be set to 'none' (default), 'list' (shows operations for each resource), or 'full' (fully expanded: shows operations and their details)
@@ -62,28 +58,32 @@ To use swagger-ui you should take a look at the [source of swagger-ui html page]
 
 
 ### HTTP Methods and API Invocation
-swagger-ui supports invocation of all HTTP methods APIs but only GET methods APIs are enabled by default. You can choose to enable other HTTP methods like POST, PUT and DELETE. This can be enabled by [setting the supportedSubmitMethods parameter when creating SwaggerUI instance](https://github.com/wordnik/swagger-ui/blob/f2e63c65a759421aad590b7275371cd0c06c74ea/src/main/html/index.html#L49).
+swagger-ui supports invocation of all HTTP methods APIs including GET, PUT, POST, DELETE, PATCH, OPTIONS.  These are handled in the [swagger-js](https://github.com/wordnik/swagger-js) project, please see there for specifics on their usage.
 
-For example if you wanted to enable GET, POST and PUT but not for DELETE, you'd set this as:
-
-    supportedSubmitMethods: ['get', 'post', 'put']
-
-_Note that for POST/PUT body, you'd need to paste in the request data in an appropriate format which your service can unmarshall_
 
 ### Header Parameters
-header parameters are supported. However because of [Cross-Origin Resource Sharing](http://www.w3.org/TR/cors/) restrictions, swagger-ui, by default, does not send header parameters. This can be enabled by [setting the supportHeaderParams to true when creating SwaggerUI instance](https://github.com/wordnik/swagger-ui/blob/f2e63c65a759421aad590b7275371cd0c06c74ea/src/main/html/index.html#L48) as below:
+Header params are supported through a pluggable mechanism in [swagger-js](https://github.com/wordnik/swagger-js).  You can see the [index.html](https://github.com/wordnik/swagger-ui/blob/master/dist/index.html) for a sample of how to dynamically set headers:
 
-    supportHeaderParams: true
+```js
+// add a new ApiKeyAuthorization when the api-key changes in the ui.
+$('#input_apiKey').change(function() {
+  var key = $('#input_apiKey')[0].value;
+  if(key && key.trim() != "") {
+    window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "header"));
+  }
+})
+```
+
+This will add header `api_key` with value `key` on every call to the server.  You can substitute `query` to send the values as a query param.
 
 ### Custom Header Parameters - (For Basic auth etc)
 If you have some header parameters which you need to send with every request, use the headers as below:
 
-     headers: { "Authorization": "XXXX", "someOtherHeader": "YYYY" }
+```js
+window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX", "header"));
+```
 
-### Api Key Parameter
-If you enter an api key in swagger-ui, it sends a parameter named 'api\_key' as a query (or as a header param if you've enabled it as described above). You may not want to use the name 'api\_key' as the name of this parameter. You can change its name by setting the _apiKeyName_ parameter when you instantiate a SwaggerUI instance. For example to call it 'sessionId'
-
-    apiKeyName: "sessionId"
+Note!  You can pass multiple header params on a single request, just use unique names for them (`key` is used in the above example).
 
 How to Improve It
 -----------------

dist/index.html

@@ -1,74 +1,77 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Swagger UI</title>
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
-    <link href='css/hightlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
-    <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
-    <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
-    <script src='lib/handlebars-1.0.rc.1.js' type='text/javascript'></script>
-    <script src='lib/underscore-min.js' type='text/javascript'></script>
-    <script src='lib/backbone-min.js' type='text/javascript'></script>
-    <script src='lib/swagger.js' type='text/javascript'></script>
-    <script src='swagger-ui.js' type='text/javascript'></script>
-    <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
-
-    <script type="text/javascript">
-	$(function () {
-	    window.swaggerUi = new SwaggerUi({
-                discoveryUrl:"http://petstore.swagger.wordnik.com/api/api-docs.json",
-                apiKey:"special-key",
-                dom_id:"swagger-ui-container",
-                supportHeaderParams: false,
-                supportedSubmitMethods: ['get', 'post', 'put'],
-                onComplete: function(swaggerApi, swaggerUi){
-                	if(console) {
-                        console.log("Loaded SwaggerUI")
-                        console.log(swaggerApi);
-                        console.log(swaggerUi);
-                    }
-                  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
-                },
-                onFailure: function(data) {
-                	if(console) {
-                        console.log("Unable to Load SwaggerUI");
-                        console.log(data);
-                    }
-                },
-                docExpansion: "none"
-            });
+  <title>Swagger UI</title>
+  <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
+  <link href='css/highlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
+  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
+  <script type="text/javascript" src="lib/shred.bundle.js" /></script>  
+  <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
+  <script src='lib/handlebars-1.0.0.js' type='text/javascript'></script>
+  <script src='lib/underscore-min.js' type='text/javascript'></script>
+  <script src='lib/backbone-min.js' type='text/javascript'></script>
+  <script src='lib/swagger.js' type='text/javascript'></script>
+  <script src='swagger-ui.js' type='text/javascript'></script>
+  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
+  <script type="text/javascript">
+    $(function () {
+      window.swaggerUi = new SwaggerUi({
+      url: "http://petstore.swagger.wordnik.com/api/api-docs",
+      dom_id: "swagger-ui-container",
+      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
+      onComplete: function(swaggerApi, swaggerUi){
+        if(console) {
+          console.log("Loaded SwaggerUI")
+        }
+        $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+      },
+      onFailure: function(data) {
+        if(console) {
+          console.log("Unable to Load SwaggerUI");
+          console.log(data);
+        }
+      },
+      docExpansion: "none"
+    });
 
-            window.swaggerUi.load();
-        });
+    $('#input_apiKey').change(function() {
+      var key = $('#input_apiKey')[0].value;
+      console.log("key: " + key);
+      if(key && key.trim() != "") {
+        console.log("added key " + key);
+        window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "query"));
+      }
+    })
+    window.swaggerUi.load();
+  });
 
-    </script>
+  </script>
 </head>
 
 <body>
 <div id='header'>
-    <div class="swagger-ui-wrap">
-        <a id="logo" href="http://swagger.wordnik.com">swagger</a>
+  <div class="swagger-ui-wrap">
+    <a id="logo" href="http://swagger.wordnik.com">swagger</a>
 
-        <form id='api_selector'>
-            <div class='input icon-btn'>
-                <img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
-            </div>
-            <div class='input icon-btn'>
-                <img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
-            </div>
-            <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl"
-                                      type="text"/></div>
-            <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
-            <div class='input'><a id="explore" href="#">Explore</a></div>
-        </form>
-    </div>
+    <form id='api_selector'>
+      <div class='input icon-btn'>
+        <img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
+      </div>
+      <div class='input icon-btn'>
+        <img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
+      </div>
+      <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
+      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div class='input'><a id="explore" href="#">Explore</a></div>
+    </form>
+  </div>
 </div>
 
 <div id="message-bar" class="swagger-ui-wrap">
-    &nbsp;
+  &nbsp;
 </div>
 
 <div id="swagger-ui-container" class="swagger-ui-wrap">

dist/lib/shred/content.js

@@ -0,0 +1,193 @@
+
+// The purpose of the `Content` object is to abstract away the data conversions
+// to and from raw content entities as strings. For example, you want to be able
+// to pass in a Javascript object and have it be automatically converted into a
+// JSON string if the `content-type` is set to a JSON-based media type.
+// Conversely, you want to be able to transparently get back a Javascript object
+// in the response if the `content-type` is a JSON-based media-type.
+
+// One limitation of the current implementation is that it [assumes the `charset` is UTF-8](https://github.com/spire-io/shred/issues/5).
+
+// The `Content` constructor takes an options object, which *must* have either a
+// `body` or `data` property and *may* have a `type` property indicating the
+// media type. If there is no `type` attribute, a default will be inferred.
+var Content = function(options) {
+  this.body = options.body;
+  this.data = options.data;
+  this.type = options.type;
+};
+
+Content.prototype = {
+  // Treat `toString()` as asking for the `content.body`. That is, the raw content entity.
+  //
+  //     toString: function() { return this.body; }
+  //
+  // Commented out, but I've forgotten why. :/
+};
+
+
+// `Content` objects have the following attributes:
+Object.defineProperties(Content.prototype,{
+  
+// - **type**. Typically accessed as `content.type`, reflects the `content-type`
+//   header associated with the request or response. If not passed as an options
+//   to the constructor or set explicitly, it will infer the type the `data`
+//   attribute, if possible, and, failing that, will default to `text/plain`.
+  type: {
+    get: function() {
+      if (this._type) {
+        return this._type;
+      } else {
+        if (this._data) {
+          switch(typeof this._data) {
+            case "string": return "text/plain";
+            case "object": return "application/json";
+          }
+        }
+      }
+      return "text/plain";
+    },
+    set: function(value) {
+      this._type = value;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **data**. Typically accessed as `content.data`, reflects the content entity
+//   converted into Javascript data. This can be a string, if the `type` is, say,
+//   `text/plain`, but can also be a Javascript object. The conversion applied is
+//   based on the `processor` attribute. The `data` attribute can also be set
+//   directly, in which case the conversion will be done the other way, to infer
+//   the `body` attribute.
+  data: {
+    get: function() {
+      if (this._body) {
+        return this.processor.parser(this._body);
+      } else {
+        return this._data;
+      }
+    },
+    set: function(data) {
+      if (this._body&&data) Errors.setDataWithBody(this);
+      this._data = data;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **body**. Typically accessed as `content.body`, reflects the content entity
+//   as a UTF-8 string. It is the mirror of the `data` attribute. If you set the
+//   `data` attribute, the `body` attribute will be inferred and vice-versa. If
+//   you attempt to set both, an exception is raised.
+  body: {
+    get: function() {
+      if (this._data) {
+        return this.processor.stringify(this._data);
+      } else {
+        return this._body.toString();
+      }
+    },
+    set: function(body) {
+      if (this._data&&body) Errors.setBodyWithData(this);
+      this._body = body;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **processor**. The functions that will be used to convert to/from `data` and
+//   `body` attributes. You can add processors. The two that are built-in are for
+//   `text/plain`, which is basically an identity transformation and
+//   `application/json` and other JSON-based media types (including custom media
+//   types with `+json`). You can add your own processors. See below.
+  processor: {
+    get: function() {
+      var processor = Content.processors[this.type];
+      if (processor) {
+        return processor;
+      } else {
+        // Return the first processor that matches any part of the
+        // content type. ex: application/vnd.foobar.baz+json will match json.
+        var main = this.type.split(";")[0];
+        var parts = main.split(/\+|\//);
+        for (var i=0, l=parts.length; i < l; i++) {
+          processor = Content.processors[parts[i]]
+        }
+        return processor || {parser:identity,stringify:toString};
+      }
+    },
+    enumerable: true
+  },
+
+// - **length**. Typically accessed as `content.length`, returns the length in
+//   bytes of the raw content entity.
+  length: {
+    get: function() {
+      if (typeof Buffer !== 'undefined') {
+        return Buffer.byteLength(this.body);
+      }
+      return this.body.length;
+    }
+  }
+});
+
+Content.processors = {};
+
+// The `registerProcessor` function allows you to add your own processors to
+// convert content entities. Each processor consists of a Javascript object with
+// two properties:
+// - **parser**. The function used to parse a raw content entity and convert it
+//   into a Javascript data type.
+// - **stringify**. The function used to convert a Javascript data type into a
+//   raw content entity.
+Content.registerProcessor = function(types,processor) {
+  
+// You can pass an array of types that will trigger this processor, or just one.
+// We determine the array via duck-typing here.
+  if (types.forEach) {
+    types.forEach(function(type) {
+      Content.processors[type] = processor;
+    });
+  } else {
+    // If you didn't pass an array, we just use what you pass in.
+    Content.processors[types] = processor;
+  }
+};
+
+// Register the identity processor, which is used for text-based media types.
+var identity = function(x) { return x; }
+  , toString = function(x) { return x.toString(); }
+Content.registerProcessor(
+  ["text/html","text/plain","text"],
+  { parser: identity, stringify: toString });
+
+// Register the JSON processor, which is used for JSON-based media types.
+Content.registerProcessor(
+  ["application/json; charset=utf-8","application/json","json"],
+  {
+    parser: function(string) {
+      return JSON.parse(string);
+    },
+    stringify: function(data) {
+      return JSON.stringify(data); }});
+
+var qs = require('querystring');
+// Register the post processor, which is used for JSON-based media types.
+Content.registerProcessor(
+  ["application/x-www-form-urlencoded"],
+  { parser : qs.parse, stringify : qs.stringify });
+
+// Error functions are defined separately here in an attempt to make the code
+// easier to read.
+var Errors = {
+  setDataWithBody: function(object) {
+    throw new Error("Attempt to set data attribute of a content object " +
+        "when the body attributes was already set.");
+  },
+  setBodyWithData: function(object) {
+    throw new Error("Attempt to set body attribute of a content object " +
+        "when the data attributes was already set.");
+  }
+}
+module.exports = Content;

lib/shred/content.js

@@ -0,0 +1,193 @@
+
+// The purpose of the `Content` object is to abstract away the data conversions
+// to and from raw content entities as strings. For example, you want to be able
+// to pass in a Javascript object and have it be automatically converted into a
+// JSON string if the `content-type` is set to a JSON-based media type.
+// Conversely, you want to be able to transparently get back a Javascript object
+// in the response if the `content-type` is a JSON-based media-type.
+
+// One limitation of the current implementation is that it [assumes the `charset` is UTF-8](https://github.com/spire-io/shred/issues/5).
+
+// The `Content` constructor takes an options object, which *must* have either a
+// `body` or `data` property and *may* have a `type` property indicating the
+// media type. If there is no `type` attribute, a default will be inferred.
+var Content = function(options) {
+  this.body = options.body;
+  this.data = options.data;
+  this.type = options.type;
+};
+
+Content.prototype = {
+  // Treat `toString()` as asking for the `content.body`. That is, the raw content entity.
+  //
+  //     toString: function() { return this.body; }
+  //
+  // Commented out, but I've forgotten why. :/
+};
+
+
+// `Content` objects have the following attributes:
+Object.defineProperties(Content.prototype,{
+  
+// - **type**. Typically accessed as `content.type`, reflects the `content-type`
+//   header associated with the request or response. If not passed as an options
+//   to the constructor or set explicitly, it will infer the type the `data`
+//   attribute, if possible, and, failing that, will default to `text/plain`.
+  type: {
+    get: function() {
+      if (this._type) {
+        return this._type;
+      } else {
+        if (this._data) {
+          switch(typeof this._data) {
+            case "string": return "text/plain";
+            case "object": return "application/json";
+          }
+        }
+      }
+      return "text/plain";
+    },
+    set: function(value) {
+      this._type = value;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **data**. Typically accessed as `content.data`, reflects the content entity
+//   converted into Javascript data. This can be a string, if the `type` is, say,
+//   `text/plain`, but can also be a Javascript object. The conversion applied is
+//   based on the `processor` attribute. The `data` attribute can also be set
+//   directly, in which case the conversion will be done the other way, to infer
+//   the `body` attribute.
+  data: {
+    get: function() {
+      if (this._body) {
+        return this.processor.parser(this._body);
+      } else {
+        return this._data;
+      }
+    },
+    set: function(data) {
+      if (this._body&&data) Errors.setDataWithBody(this);
+      this._data = data;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **body**. Typically accessed as `content.body`, reflects the content entity
+//   as a UTF-8 string. It is the mirror of the `data` attribute. If you set the
+//   `data` attribute, the `body` attribute will be inferred and vice-versa. If
+//   you attempt to set both, an exception is raised.
+  body: {
+    get: function() {
+      if (this._data) {
+        return this.processor.stringify(this._data);
+      } else {
+        return this._body.toString();
+      }
+    },
+    set: function(body) {
+      if (this._data&&body) Errors.setBodyWithData(this);
+      this._body = body;
+      return this;
+    },
+    enumerable: true
+  },
+
+// - **processor**. The functions that will be used to convert to/from `data` and
+//   `body` attributes. You can add processors. The two that are built-in are for
+//   `text/plain`, which is basically an identity transformation and
+//   `application/json` and other JSON-based media types (including custom media
+//   types with `+json`). You can add your own processors. See below.
+  processor: {
+    get: function() {
+      var processor = Content.processors[this.type];
+      if (processor) {
+        return processor;
+      } else {
+        // Return the first processor that matches any part of the
+        // content type. ex: application/vnd.foobar.baz+json will match json.
+        var main = this.type.split(";")[0];
+        var parts = main.split(/\+|\//);
+        for (var i=0, l=parts.length; i < l; i++) {
+          processor = Content.processors[parts[i]]
+        }
+        return processor || {parser:identity,stringify:toString};
+      }
+    },
+    enumerable: true
+  },
+
+// - **length**. Typically accessed as `content.length`, returns the length in
+//   bytes of the raw content entity.
+  length: {
+    get: function() {
+      if (typeof Buffer !== 'undefined') {
+        return Buffer.byteLength(this.body);
+      }
+      return this.body.length;
+    }
+  }
+});
+
+Content.processors = {};
+
+// The `registerProcessor` function allows you to add your own processors to
+// convert content entities. Each processor consists of a Javascript object with
+// two properties:
+// - **parser**. The function used to parse a raw content entity and convert it
+//   into a Javascript data type.
+// - **stringify**. The function used to convert a Javascript data type into a
+//   raw content entity.
+Content.registerProcessor = function(types,processor) {
+  
+// You can pass an array of types that will trigger this processor, or just one.
+// We determine the array via duck-typing here.
+  if (types.forEach) {
+    types.forEach(function(type) {
+      Content.processors[type] = processor;
+    });
+  } else {
+    // If you didn't pass an array, we just use what you pass in.
+    Content.processors[types] = processor;
+  }
+};
+
+// Register the identity processor, which is used for text-based media types.
+var identity = function(x) { return x; }
+  , toString = function(x) { return x.toString(); }
+Content.registerProcessor(
+  ["text/html","text/plain","text"],
+  { parser: identity, stringify: toString });
+
+// Register the JSON processor, which is used for JSON-based media types.
+Content.registerProcessor(
+  ["application/json; charset=utf-8","application/json","json"],
+  {
+    parser: function(string) {
+      return JSON.parse(string);
+    },
+    stringify: function(data) {
+      return JSON.stringify(data); }});
+
+var qs = require('querystring');
+// Register the post processor, which is used for JSON-based media types.
+Content.registerProcessor(
+  ["application/x-www-form-urlencoded"],
+  { parser : qs.parse, stringify : qs.stringify });
+
+// Error functions are defined separately here in an attempt to make the code
+// easier to read.
+var Errors = {
+  setDataWithBody: function(object) {
+    throw new Error("Attempt to set data attribute of a content object " +
+        "when the body attributes was already set.");
+  },
+  setBodyWithData: function(object) {
+    throw new Error("Attempt to set body attribute of a content object " +
+        "when the data attributes was already set.");
+  }
+}
+module.exports = Content;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "0.1.13",
+  "version": "2.0.3",
   "description": "Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API",
   "scripts": {
     "build": "PATH=$PATH:./node_modules/.bin cake dist",
@@ -19,7 +19,8 @@
   "readmeFilename": "README.md",
   "dependencies": {
     "coffee-script": "~1.5.0",
-    "swagger-client": "1.0.2",
-    "handlebars": "~1.0.10"
+    "swagger-client": "~2.0",
+    "handlebars": "~1.0.10",
+    "less": "~1.4.2"
   }
 }

src/main/coffeescript/SwaggerUi.coffee

@@ -34,16 +34,22 @@ class SwaggerUi extends Backbone.Router
 
   # Event handler for when url/key is received from user
   updateSwaggerUi: (data) ->
-    @options.discoveryUrl = data.discoveryUrl
-    @options.apiKey = data.apiKey
+    @options.url = data.url
     @load()
 
   # Create an api and render
   load: ->
     # Initialize the API object
     @mainView?.clear()
-    @headerView.update(@options.discoveryUrl, @options.apiKey)
+    url = @options.url
+    if url.indexOf("http") isnt 0
+      url = @buildUrl(window.location.href.toString(), url)
+
+    @options.url = url
+    @headerView.update(url)
     @api = new SwaggerApi(@options)
+    @api.build()
+    @api
 
   # This is bound to success handler for SwaggerApi
   #  so it gets called when SwaggerApi completes loading
@@ -52,8 +58,8 @@ class SwaggerUi extends Backbone.Router
     @mainView = new MainView({model: @api, el: $('#' + @dom_id)}).render()
     @showMessage()
     switch @options.docExpansion
-     when "full" then Docs.expandOperationsForResource('')
-     when "list" then Docs.collapseOperationsForResource('')
+      when "full" then Docs.expandOperationsForResource('')
+      when "list" then Docs.collapseOperationsForResource('')
     @options.onComplete(@api, @) if @options.onComplete
     setTimeout(
       =>
@@ -61,6 +67,16 @@ class SwaggerUi extends Backbone.Router
       400
     )
 
+  buildUrl: (base, url) ->
+    console.log "base is " + base
+    parts = base.split("/")
+    base = parts[0] + "//" + parts[2]
+    if url.indexOf("/") is 0
+      base + url
+    else
+      base + "/" + url
+
+
   # Shows message on topbar of the ui
   showMessage: (data = '') ->
     $('#message-bar').removeClass 'message-fail'

src/main/coffeescript/view/ContentTypeView.coffee

@@ -5,12 +5,7 @@ class ContentTypeView extends Backbone.View
     template = @template()
     $(@el).html(template(@model))
 
-    @isParam = @model.isParam
-
-    if @isParam
-      $('label[for=contentType]', $(@el)).text('Parameter content type:')
-    else
-      $('label[for=contentType]', $(@el)).text('Response Content Type')
+    $('label[for=contentType]', $(@el)).text('Response Content Type')
 
     @
 

src/main/coffeescript/view/HeaderView.coffee

@@ -9,17 +9,16 @@ class HeaderView extends Backbone.View
 
   initialize: ->
 
-
   showPetStore: (e) ->
     @trigger(
       'update-swagger-ui'
-      {discoveryUrl:"http://petstore.swagger.wordnik.com/api/api-docs.json", apiKey:"special-key"}
+      {url:"http://petstore.swagger.wordnik.com/api/api-docs"}
     )
 
   showWordnikDev: (e) ->
     @trigger(
       'update-swagger-ui'
-      {discoveryUrl:"http://api.wordnik.com/v4/resources.json", apiKey:""}
+      {url:"http://api.wordnik.com/v4/resources.json"}
     )
 
   showCustomOnKeyup: (e) ->
@@ -29,10 +28,10 @@ class HeaderView extends Backbone.View
     e?.preventDefault()
     @trigger(
       'update-swagger-ui'
-      {discoveryUrl: $('#input_baseUrl').val(), apiKey: $('#input_apiKey').val()}
+      {url: $('#input_baseUrl').val(), apiKey: $('#input_apiKey').val()}
     )
 
   update: (url, apiKey, trigger = false) ->
     $('#input_baseUrl').val url
-    $('#input_apiKey').val apiKey
-    @trigger 'update-swagger-ui', {discoveryUrl:url, apiKey:apiKey} if trigger
+    #$('#input_apiKey').val apiKey
+    @trigger 'update-swagger-ui', {url:url} if trigger

src/main/coffeescript/view/OperationView.coffee

@@ -1,4 +1,6 @@
 class OperationView extends Backbone.View
+  invocationUrl: null
+
   events: {
   'submit .sandbox'         : 'submitOperation'
   'click .submit'           : 'submitOperation'
@@ -9,7 +11,7 @@ class OperationView extends Backbone.View
   initialize: ->
 
   render: ->
-    isMethodSubmissionSupported = jQuery.inArray(@model.httpMethod, @model.supportedSubmitMethods()) >= 0
+    isMethodSubmissionSupported = true #jQuery.inArray(@model.method, @model.supportedSubmitMethods) >= 0
     @model.isReadOnly = true unless isMethodSubmissionSupported
 
     $(@el).html(Handlebars.templates.operation(@model))
@@ -23,31 +25,35 @@ class OperationView extends Backbone.View
       responseSignatureView = new SignatureView({model: signatureModel, tagName: 'div'})
       $('.model-signature', $(@el)).append responseSignatureView.render().el
     else
-      $('.model-signature', $(@el)).html(@model.responseClass)
+      $('.model-signature', $(@el)).html(@model.type)
 
     contentTypeModel =
       isParam: false
 
-    # support old syntax
-    if @model.supportedContentTypes
-      contentTypeModel.produces = @model.supportedContentTypes
+    contentTypeModel.consumes = @model.consumes
+    contentTypeModel.produces = @model.produces
 
-    if @model.produces
-      contentTypeModel.produces = @model.produces
+    for param in @model.parameters
+      type = param.type || param.dataType
+      if type.toLowerCase() == 'file'
+        if !contentTypeModel.consumes
+          console.log "set content type "
+          contentTypeModel.consumes = 'multipart/form-data'
 
-    contentTypeView = new ContentTypeView({model: contentTypeModel})
-    $('.content-type', $(@el)).append contentTypeView.render().el
+    responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel})
+    $('.response-content-type', $(@el)).append responseContentTypeView.render().el
 
     # Render each parameter
-    @addParameter param for param in @model.parameters
+    @addParameter param, contentTypeModel.consumes for param in @model.parameters
 
     # Render each response code
-    @addStatusCode statusCode for statusCode in @model.errorResponses
+    @addStatusCode statusCode for statusCode in @model.responseMessages
 
     @
 
-  addParameter: (param) ->
+  addParameter: (param, consumes) ->
     # Render a parameter
+    param.consumes = consumes
     paramView = new ParameterView({model: param, tagName: 'tr', readOnly: @model.isReadOnly})
     $('.operation-params', $(@el)).append paramView.render().el
 
@@ -72,95 +78,118 @@ class OperationView extends Backbone.View
     # if error free submit it
     if error_free
       map = {}
-      for o in form.serializeArray()
+      opts = {parent: @}
+
+      isFileUpload = false
+
+      for o in form.find("input")
         if(o.value? && jQuery.trim(o.value).length > 0)
           map[o.name] = o.value
+        if o.type is "file"
+          isFileUpload = true
 
-      isFileUpload = form.children().find('input[type~="file"]').size() != 0
+      for o in form.find("textarea")
+        if(o.value? && jQuery.trim(o.value).length > 0)
+          map["body"] = o.value
 
-      isFormPost = false
-      consumes = "application/json"
-      if @model.consumes and @model.consumes.length > 0
-        # honor the consumes setting above everything else
-        consumes = @model.consumes[0]
-      else 
-        for o in @model.parameters
-          if o.paramType == 'form'
-            isFormPost = true
-            consumes = false
+      for o in form.find("select") 
+        val = this.getSelectedValue o
+        if(val? && jQuery.trim(val).length > 0)
+          map[o.name] = val
 
-        if isFileUpload
-          consumes = false
-        else if @model.httpMethod.toLowerCase() == "post" and isFormPost is false
-          consumes = "application/json"
+      opts.responseContentType = $("div select[name=responseContentType]", $(@el)).val()
+      opts.requestContentType = $("div select[name=parameterContentType]", $(@el)).val()
 
-      if isFileUpload
-        # requires HTML5 compatible browser
-        bodyParam = new FormData()
-
-        # add params except file
-        for param in @model.parameters
-          if param.paramType is 'body' and param.name isnt 'file'
-            bodyParam.append(param.name, map[param.name])
-
-        # add files
-        $.each form.children().find('input[type~="file"]'), (i, el) ->
-          bodyParam.append($(el).attr('name'), el.files[0])
-
-        console.log(bodyParam)
-      else if isFormPost
-        bodyParam = new FormData()
-        for param in @model.parameters
-          bodyParam.append(param.name, map[param.name])
-      else
-        bodyParam = null
-        for param in @model.parameters
-          if param.paramType is 'body'
-            bodyParam = map[param.name]
-
-      log "bodyParam = " + bodyParam 
-
-      headerParams = null
-      invocationUrl = 
-        if @model.supportHeaderParams()
-          headerParams = @model.getHeaderParams(map)
-          @model.urlify(map, false)
-        else
-          @model.urlify(map, true)
-
-      log 'submitting ' + invocationUrl
-
-
-      $(".request_url", $(@el)).html "<pre>" + invocationUrl + "</pre>"
       $(".response_throbber", $(@el)).show()
+      if isFileUpload
+        @handleFileUpload map, form
+      else
+        @model.do(map, opts, @showCompleteStatus, @showErrorStatus, @)
 
-      obj = 
-        type: @model.httpMethod
-        url: invocationUrl
-        headers: headerParams
-        data: bodyParam
-        contentType: consumes
-        dataType: 'json'
-        processData: false
-        error: (xhr, textStatus, error) =>
-          @showErrorStatus(xhr, textStatus, error)
-        success: (data) =>
-          @showResponse(data)
-        complete: (data) =>
-          @showCompleteStatus(data)
+  success: (response, parent) ->
+    parent.showCompleteStatus response
 
-      paramContentTypeField = $("td select[name=contentType]", $(@el)).val()
-      if paramContentTypeField
-        obj.contentType = paramContentTypeField
+  handleFileUpload: (map, form) ->
+    console.log "it's a file upload"
+    for o in form.serializeArray()
+      if(o.value? && jQuery.trim(o.value).length > 0)
+        map[o.name] = o.value
 
-      responseContentTypeField = $('.content > .content-type > div > select[name=contentType]', $(@el)).val()
-      if responseContentTypeField
-        obj.headers = if obj.headers? then obj.headers else {}
-        obj.headers.accept = responseContentTypeField
-      
-      jQuery.ajax(obj)
-      false
-      # $.getJSON(invocationUrl, (r) => @showResponse(r)).complete((r) => @showCompleteStatus(r)).error (r) => @showErrorStatus(r)
+    # requires HTML5 compatible browser
+    bodyParam = new FormData()
+
+    # add params
+    for param in @model.parameters
+      if param.paramType is 'form'
+        bodyParam.append(param.name, map[param.name])
+
+    # headers in operation
+    headerParams = {}
+    for param in @model.parameters
+      if param.paramType is 'header'
+        headerParams[param.name] = map[param.name]
+
+    console.log headerParams
+
+    # add files
+    $.each $('input[type~="file"]'), (i, el) ->
+      bodyParam.append($(el).attr('name'), el.files[0])
+
+    console.log(bodyParam)
+
+    @invocationUrl = 
+      if @model.supportHeaderParams()
+        headerParams = @model.getHeaderParams(map)
+        @model.urlify(map, false)
+      else
+        @model.urlify(map, true)
+
+    $(".request_url", $(@el)).html "<pre>" + @invocationUrl + "</pre>"
+
+    obj = 
+      type: @model.method
+      url: @invocationUrl
+      headers: headerParams
+      data: bodyParam
+      dataType: 'json'
+      contentType: false
+      processData: false
+      error: (data, textStatus, error) =>
+        @showErrorStatus(@wrap(data), @)
+      success: (data) =>
+        @showResponse(data, @)
+      complete: (data) =>
+        @showCompleteStatus(@wrap(data), @)
+
+    # apply authorizations
+    if window.authorizations
+      window.authorizations.apply obj
+
+    jQuery.ajax(obj)
+    false
+    # end of file-upload nastiness
+
+  # wraps a jquery response as a shred response  
+  wrap: (data) ->
+    o = {}
+    o.content = {}
+    o.content.data = data.responseText
+    o.getHeaders = () => {"Content-Type": data.getResponseHeader("Content-Type")}
+    o.request = {}
+    o.request.url = @invocationUrl
+    o.status = data.status
+    o
+
+  getSelectedValue: (select) ->
+    if !select.multiple 
+      select.value
+    else
+      options = []
+      options.push opt.value for opt in select.options when opt.selected
+      if options.length > 0 
+        options.join ","
+      else
+        null
 
   # handler for hide response link
   hideResponse: (e) ->
@@ -174,14 +203,13 @@ class OperationView extends Backbone.View
     prettyJson = JSON.stringify(response, null, "\t").replace(/\n/g, "<br>")
     $(".response_body", $(@el)).html escape(prettyJson)
 
-
   # Show error from server
-  showErrorStatus: (data) ->
-    @showStatus data
+  showErrorStatus: (data, parent) ->
+    parent.showStatus data
 
   # show the status codes
-  showCompleteStatus: (data) ->
-    @showStatus data
+  showCompleteStatus: (data, parent) ->
+    parent.showStatus data
 
   # Adapted from http://stackoverflow.com/a/2893259/454004
   formatXml: (xml) ->
@@ -244,21 +272,41 @@ class OperationView extends Backbone.View
 
   # puts the response data in UI
   showStatus: (data) ->
-    try
-      code = $('<code />').text(JSON.stringify(JSON.parse(data.responseText), null, 2))
+    content = data.content.data
+    headers = data.getHeaders()
+
+    # if server is nice, and sends content-type back, we can use it
+    contentType = headers["Content-Type"]
+
+    if content == undefined
+      code = $('<code />').text("no content")
       pre = $('<pre class="json" />').append(code)
-    catch error
-      code = $('<code />').text(@formatXml(data.responseText))
+    else if contentType.indexOf("application/json") == 0 || contentType.indexOf("application/hal+json") == 0
+      code = $('<code />').text(JSON.stringify(JSON.parse(content), null, 2))
+      pre = $('<pre class="json" />').append(code)
+    else if contentType.indexOf("application/xml") == 0
+      code = $('<code />').text(@formatXml(content))
       pre = $('<pre class="xml" />').append(code)
+    else if contentType.indexOf("text/html") == 0
+      code = $('<code />').html(content)
+      pre = $('<pre class="xml" />').append(code)
+    else if contentType.indexOf("image/") == 0
+      pre = $('<img>').attr('src',data.request.url)
+    else
+      # don't know what to render!
+      code = $('<code />').text(content)
+      pre = $('<pre class="json" />').append(code)
+
     response_body = pre
+    $(".request_url", $(@el)).html "<pre>" + data.request.url + "</pre>"
     $(".response_code", $(@el)).html "<pre>" + data.status + "</pre>"
     $(".response_body", $(@el)).html response_body
-    $(".response_headers", $(@el)).html "<pre>" + data.getAllResponseHeaders() + "</pre>"
+    $(".response_headers", $(@el)).html "<pre>" + JSON.stringify(data.getHeaders(), null, "  ").replace(/\n/g, "<br>") + "</pre>"
     $(".response", $(@el)).slideDown()
     $(".response_hider", $(@el)).show()
     $(".response_throbber", $(@el)).hide()
     hljs.highlightBlock($('.response_body', $(@el))[0])
 
   toggleOperationContent: ->
-    elem = $('#' + Docs.escapeResourceName(@model.resourceName) + "_" + @model.nickname + "_" + @model.httpMethod + "_" + @model.number + "_content")
+    elem = $('#' + Docs.escapeResourceName(@model.resourceName) + "_" + @model.nickname + "_" + @model.method + "_" + @model.number + "_content")
     if elem.is(':visible') then Docs.collapseOperation(elem) else Docs.expandOperation(elem)

src/main/coffeescript/view/ParameterContentTypeView.coffee

@@ -0,0 +1,14 @@
+class ParameterContentTypeView extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+    $(@el).html(template(@model))
+
+    $('label[for=parameterContentType]', $(@el)).text('Parameter content type:')
+
+    @
+
+  template: ->
+    Handlebars.templates.parameter_content_type
+

src/main/coffeescript/view/ParameterView.coffee

@@ -2,8 +2,9 @@ class ParameterView extends Backbone.View
   initialize: ->
 
   render: ->
+    type = @model.type || @model.dataType
     @model.isBody = true if @model.paramType == 'body'
-    @model.isFile = true if @model.dataType == 'file'
+    @model.isFile = true if type.toLowerCase() == 'file'
 
     template = @template()
     $(@el).html(template(@model))
@@ -19,18 +20,23 @@ class ParameterView extends Backbone.View
     else
       $('.model-signature', $(@el)).html(@model.signature)
 
+    isParam = false
+
+    if @model.isBody
+      isParam = true
+
     contentTypeModel =
-      isParam: false
+      isParam: isParam
 
-    # support old syntax
-    if @model.supportedContentTypes
-      contentTypeModel.produces = @model.supportedContentTypes
+    contentTypeModel.consumes = @model.consumes
 
-    if @model.produces
-      contentTypeModel.produces = @model.produces
+    if isParam
+      parameterContentTypeView = new ParameterContentTypeView({model: contentTypeModel})
+      $('.parameter-content-type', $(@el)).append parameterContentTypeView.render().el
 
-    contentTypeView = new ContentTypeView({model: contentTypeModel})
-    $('.content-type', $(@el)).append contentTypeView.render().el
+    else
+      responseContentTypeView = new ResponseContentTypeView({model: contentTypeModel})
+      $('.response-content-type', $(@el)).append responseContentTypeView.render().el
 
     @
 

src/main/coffeescript/view/ResourceView.coffee

@@ -2,6 +2,7 @@ class ResourceView extends Backbone.View
   initialize: ->
 
   render: ->
+    console.log @model.description
     $(@el).html(Handlebars.templates.resource(@model))
 
     @number = 0

src/main/coffeescript/view/ResponseContentTypeView.coffee

@@ -0,0 +1,14 @@
+class ResponseContentTypeView extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+
+    $(@el).html(template(@model))
+    
+    $('label[for=responseContentType]', $(@el)).text('Response Content Type')
+
+    @
+
+  template: ->
+    Handlebars.templates.response_content_type

src/main/html/index.html

@@ -1,74 +1,77 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Swagger UI</title>
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
-    <link href='css/hightlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
-    <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
-    <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
-    <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
-    <script src='lib/handlebars-1.0.rc.1.js' type='text/javascript'></script>
-    <script src='lib/underscore-min.js' type='text/javascript'></script>
-    <script src='lib/backbone-min.js' type='text/javascript'></script>
-    <script src='lib/swagger.js' type='text/javascript'></script>
-    <script src='swagger-ui.js' type='text/javascript'></script>
-    <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
-
-    <script type="text/javascript">
-	$(function () {
-	    window.swaggerUi = new SwaggerUi({
-                discoveryUrl:"http://petstore.swagger.wordnik.com/api/api-docs.json",
-                apiKey:"special-key",
-                dom_id:"swagger-ui-container",
-                supportHeaderParams: false,
-                supportedSubmitMethods: ['get', 'post', 'put'],
-                onComplete: function(swaggerApi, swaggerUi){
-                	if(console) {
-                        console.log("Loaded SwaggerUI")
-                        console.log(swaggerApi);
-                        console.log(swaggerUi);
-                    }
-                  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
-                },
-                onFailure: function(data) {
-                	if(console) {
-                        console.log("Unable to Load SwaggerUI");
-                        console.log(data);
-                    }
-                },
-                docExpansion: "none"
-            });
+  <title>Swagger UI</title>
+  <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
+  <link href='css/highlight.default.css' media='screen' rel='stylesheet' type='text/css'/>
+  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
+  <script type="text/javascript" src="lib/shred.bundle.js" /></script>  
+  <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
+  <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
+  <script src='lib/handlebars-1.0.0.js' type='text/javascript'></script>
+  <script src='lib/underscore-min.js' type='text/javascript'></script>
+  <script src='lib/backbone-min.js' type='text/javascript'></script>
+  <script src='lib/swagger.js' type='text/javascript'></script>
+  <script src='swagger-ui.js' type='text/javascript'></script>
+  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
+  <script type="text/javascript">
+    $(function () {
+      window.swaggerUi = new SwaggerUi({
+      url: "http://petstore.swagger.wordnik.com/api/api-docs",
+      dom_id: "swagger-ui-container",
+      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
+      onComplete: function(swaggerApi, swaggerUi){
+        if(console) {
+          console.log("Loaded SwaggerUI")
+        }
+        $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+      },
+      onFailure: function(data) {
+        if(console) {
+          console.log("Unable to Load SwaggerUI");
+          console.log(data);
+        }
+      },
+      docExpansion: "none"
+    });
 
-            window.swaggerUi.load();
-        });
+    $('#input_apiKey').change(function() {
+      var key = $('#input_apiKey')[0].value;
+      console.log("key: " + key);
+      if(key && key.trim() != "") {
+        console.log("added key " + key);
+        window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "query"));
+      }
+    })
+    window.swaggerUi.load();
+  });
 
-    </script>
+  </script>
 </head>
 
 <body>
 <div id='header'>
-    <div class="swagger-ui-wrap">
-        <a id="logo" href="http://swagger.wordnik.com">swagger</a>
+  <div class="swagger-ui-wrap">
+    <a id="logo" href="http://swagger.wordnik.com">swagger</a>
 
-        <form id='api_selector'>
-            <div class='input icon-btn'>
-                <img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
-            </div>
-            <div class='input icon-btn'>
-                <img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
-            </div>
-            <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl"
-                                      type="text"/></div>
-            <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
-            <div class='input'><a id="explore" href="#">Explore</a></div>
-        </form>
-    </div>
+    <form id='api_selector'>
+      <div class='input icon-btn'>
+        <img id="show-pet-store-icon" src="images/pet_store_api.png" title="Show Swagger Petstore Example Apis">
+      </div>
+      <div class='input icon-btn'>
+        <img id="show-wordnik-dev-icon" src="images/wordnik_api.png" title="Show Wordnik Developer Apis">
+      </div>
+      <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
+      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div class='input'><a id="explore" href="#">Explore</a></div>
+    </form>
+  </div>
 </div>
 
 <div id="message-bar" class="swagger-ui-wrap">
-    &nbsp;
+  &nbsp;
 </div>
 
 <div id="swagger-ui-container" class="swagger-ui-wrap">

src/main/less/reset.less

@@ -0,0 +1,50 @@
+/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

src/main/less/screen.less

@@ -0,0 +1,67 @@
+@import 'src/main/less/reset.less';
+@import 'src/main/less/specs.less';
+
+#header {
+    background-color: #89bf04;
+    padding: 14px;
+    a#logo {
+        font-size: 1.5em;
+        font-weight: bold;
+        text-decoration: none;
+        background: transparent url(../images/logo_small.png) no-repeat left center;
+        padding: 20px 0 20px 40px;
+        color: white;
+    }
+    form#api_selector {
+        display: block;
+        clear: none;
+        float: right;
+        .input {
+            display: block;
+            clear: none;
+            float: left;
+            margin: 0 10px 0 0;
+            input#input_apiKey {
+                width: 200px;
+            }
+            input#input_baseUrl {
+                width: 400px;
+            }
+            a#explore {
+                display: block;
+                text-decoration: none;
+                font-weight: bold;
+                padding: 6px 8px;
+                font-size: 0.9em;
+                color: white;
+                background-color: #547f00;
+                -moz-border-radius: 4px;
+                -webkit-border-radius: 4px;
+                -o-border-radius: 4px;
+                -ms-border-radius: 4px;
+                -khtml-border-radius: 4px;
+                border-radius: 4px;
+            }
+            a#explore:hover {
+                background-color: #547f00;
+            }
+            input {
+                font-size: 0.9em;
+                padding: 3px;
+                margin: 0;
+            }
+        }
+    }
+}
+
+#content_message {
+    margin: 10px 15px;
+    font-style: italic;
+    color: #999999;
+}
+
+#message-bar {
+    min-height: 30px;
+    text-align: center;
+    padding-top: 10px;
+}

src/main/template/content_type.handlebars

@@ -1,10 +1,10 @@
 <label for="contentType"></label>
 <select name="contentType">
 {{#if produces}}
-    {{#each produces}}
+  {{#each produces}}
 	<option value="{{{this}}}">{{{this}}}</option>
 	{{/each}}
 {{else}}
-    <option value="application/json">application/json</option>
+  <option value="application/json">application/json</option>
 {{/if}}
 </select>

src/main/template/main.handlebars

@@ -1,4 +1,12 @@
-
+<div class='info' id='api_info'>
+  {{#if info}}
+    <div class="info_title">{{info.title}}</div>
+    <div class="info_description">{{{info.description}}}</div>
+    {{#if info.termsOfServiceUrl}}<div class="info_tos"><a href="{{info.termsOfServiceUrl}}">Terms of service</a></div>{{/if}}
+    {{#if info.contact}}<div class='info_contact'><a href="mailto:{{info.contact}}">Contact the developer</a></div>{{/if}}
+    {{#if info.license}}<div class='info_license'><a href='{{info.licenseUrl}}'>{{info.license}}</a></div>{{/if}}
+  {{/if}}
+</div>
 <div class='container' id='resources_container'>
     <ul id='resources'>
     </ul>

src/main/template/operation.handlebars

@@ -1,84 +1,85 @@
 
-    <ul class='operations' >
-      <li class='{{httpMethod}} operation' id='{{resourceName}}_{{nickname}}_{{httpMethod}}_{{number}}'>
-            <div class='heading'>
-                <h3>
-                  <span class='http_method'>
-                    <a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{httpMethod}}</a>
-                  </span>
-                  <span class='path'>
-                    <a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{path}}</a>
-                  </span>
-                </h3>
-                <ul class='options'>
-                    <li>
-                    <a href='#!/{{resourceName}}/{{nickname}}_{{httpMethod}}_{{number}}' class="toggleOperation">{{{summary}}}</a>
-                    </li>
-                </ul>
-            </div>
-            <div class='content' id='{{resourceName}}_{{nickname}}_{{httpMethod}}_{{number}}_content' style='display:none'>
-                {{#if notes}}
-                <h4>Implementation Notes</h4>
-                <p>{{{notes}}}</p>
-                {{/if}}
-                {{#if responseClass}}
-                    <h4>Response Class</h4>
-                    <p><span class="model-signature" /></p>
-                    <br/>
-                    <div class="content-type" />
-                {{/if}}
-                <form accept-charset='UTF-8' class='sandbox'>
-                    <div style='margin:0;padding:0;display:inline'></div>
-                    {{#if parameters}}
-                    <h4>Parameters</h4>
-                    <table class='fullwidth'>
-                        <thead>
-                        <tr>
-                            <th style="width: 100px; max-width: 100px" >Parameter</th>
-                            <th style="width: 310px; max-width: 310px">Value</th>
-                            <th style="width: 200px; max-width: 200px">Description</th>
-                            <th style="width: 320px; max-width: 330px">Data Type</th>
-                        </tr>
-                        </thead>
-                        <tbody class="operation-params">
+  <ul class='operations' >
+    <li class='{{method}} operation' id='{{resourceName}}_{{nickname}}_{{method}}_{{number}}'>
+      <div class='heading'>
+        <h3>
+          <span class='http_method'>
+          <a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{method}}</a>
+          </span>
+          <span class='path'>
+          <a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{path}}</a>
+          </span>
+        </h3>
+        <ul class='options'>
+          <li>
+          <a href='#!/{{resourceName}}/{{nickname}}_{{method}}_{{number}}' class="toggleOperation">{{{summary}}}</a>
+          </li>
+        </ul>
+      </div>
+      <div class='content' id='{{resourceName}}_{{nickname}}_{{method}}_{{number}}_content' style='display:none'>
+        {{#if notes}}
+        <h4>Implementation Notes</h4>
+        <p>{{{notes}}}</p>
+        {{/if}}
+        {{#if type}}
+          <h4>Response Class</h4>
+          <p><span class="model-signature" /></p>
+          <br/>
+          <div class="response-content-type" />
+        {{/if}}
+        <form accept-charset='UTF-8' class='sandbox'>
+          <div style='margin:0;padding:0;display:inline'></div>
+          {{#if parameters}}
+          <h4>Parameters</h4>
+          <table class='fullwidth'>
+          <thead>
+            <tr>
+            <th style="width: 100px; max-width: 100px">Parameter</th>
+            <th style="width: 310px; max-width: 310px">Value</th>
+            <th style="width: 200px; max-width: 200px">Description</th>
+            <th style="width: 100px; max-width: 100px">Parameter Type</th>
+            <th style="width: 220px; max-width: 230px">Data Type</th>
+            </tr>
+          </thead>
+          <tbody class="operation-params">
 
-                        </tbody>
-                    </table>
-                    {{/if}}
-                    {{#if errorResponses}}
-                    <div style='margin:0;padding:0;display:inline'></div>
-                    <h4>Error Status Codes</h4>
-                    <table class='fullwidth'>
-                        <thead>
-                        <tr>
-                            <th>HTTP Status Code</th>
-                            <th>Reason</th>
-                        </tr>
-                        </thead>
-                        <tbody class="operation-status">
-                        
-                        </tbody>
-                    </table>
-                    {{/if}}
-                    {{#if isReadOnly}}
-                    {{else}}
-                    <div class='sandbox_header'>
-                        <input class='submit' name='commit' type='button' value='Try it out!' />
-                        <a href='#' class='response_hider' style='display:none'>Hide Response</a>
-                        <img alt='Throbber' class='response_throbber' src='images/throbber.gif' style='display:none' />
-                    </div>
-                    {{/if}}
-                </form>
-                <div class='response' style='display:none'>
-                    <h4>Request URL</h4>
-                    <div class='block request_url'></div>
-                    <h4>Response Body</h4>
-                    <div class='block response_body'></div>
-                    <h4>Response Code</h4>
-                    <div class='block response_code'></div>
-                    <h4>Response Headers</h4>
-                    <div class='block response_headers'></div>
-                </div>
-            </div>
-        </li>
-    </ul>
+          </tbody>
+          </table>
+          {{/if}}
+          {{#if responseMessages}}
+          <div style='margin:0;padding:0;display:inline'></div>
+          <h4>Error Status Codes</h4>
+          <table class='fullwidth'>
+            <thead>
+            <tr>
+              <th>HTTP Status Code</th>
+              <th>Reason</th>
+            </tr>
+            </thead>
+            <tbody class="operation-status">
+            
+            </tbody>
+          </table>
+          {{/if}}
+          {{#if isReadOnly}}
+          {{else}}
+          <div class='sandbox_header'>
+            <input class='submit' name='commit' type='button' value='Try it out!' />
+            <a href='#' class='response_hider' style='display:none'>Hide Response</a>
+            <img alt='Throbber' class='response_throbber' src='images/throbber.gif' style='display:none' />
+          </div>
+          {{/if}}
+        </form>
+        <div class='response' style='display:none'>
+          <h4>Request URL</h4>
+          <div class='block request_url'></div>
+          <h4>Response Body</h4>
+          <div class='block response_body'></div>
+          <h4>Response Code</h4>
+          <div class='block response_code'></div>
+          <h4>Response Headers</h4>
+          <div class='block response_headers'></div>
+        </div>
+      </div>
+    </li>
+  </ul>

src/main/template/param.handlebars

@@ -4,13 +4,14 @@
 	{{#if isBody}}
 		{{#if isFile}}
 			<input type="file" name='{{name}}'/>
+			<div class="parameter-content-type" />
 		{{else}}
 			{{#if defaultValue}}
 				<textarea class='body-textarea' name='{{name}}'>{{defaultValue}}</textarea>
 			{{else}}
 				<textarea class='body-textarea' name='{{name}}'></textarea>
 				<br />
-				<div class="content-type" />
+				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
@@ -23,7 +24,7 @@
 
 </td>
 <td>{{{description}}}</td>
+<td>{{{paramType}}}</td>
 <td>
 	<span class="model-signature"></span>
 </td>
-

src/main/template/param_list.handlebars

@@ -1,21 +1,25 @@
 <td class='code'>{{name}}</td>
 <td>
-    <select class='parameter' name='{{name}}'>
-        {{#if required}}
-        {{else}}
-            {{#if defaultValue}}
-            {{else}}
-                <option selected="" value=''></option>
-            {{/if}}
-        {{/if}}
-        {{#each allowableValues.descriptiveValues}}
-            {{#if isDefault}}
-                <option value='{{value}}'>{{value}} (default)</option>
-            {{else}}
-                <option value='{{value}}'>{{value}}</option>
-            {{/if}}
-        {{/each}}
-    </select>
+  <select {{#if allowMultiple}} multiple='multiple'{{/if}} class='parameter' name='{{name}}'>
+    {{#if required}}
+    {{else}}
+      {{#if defaultValue}}
+      {{else}}
+        {{#if allowMultiple}}
+         {{else}}
+          <option selected="" value=''></option>
+         {{/if}}
+      {{/if}}
+    {{/if}}
+    {{#each allowableValues.descriptiveValues}}
+      {{#if isDefault}}
+        <option selected="" value='{{value}}'>{{value}} (default)</option>
+      {{else}}
+        <option value='{{value}}'>{{value}}</option>
+      {{/if}}
+    {{/each}}
+  </select>
 </td>
 <td>{{{description}}}</td>
-<td><span class="model-signature"></span></td>
+<td>{{{paramType}}}</td>
+<td><span class="model-signature"></span></td>

src/main/template/param_readonly.handlebars

@@ -11,4 +11,5 @@
     {{/if}}
 </td>
 <td>{{{description}}}</td>
+<td>{{{paramType}}}</td>
 <td><span class="model-signature"></span></td>

src/main/template/param_readonly_required.handlebars

@@ -11,4 +11,5 @@
     {{/if}}
 </td>
 <td>{{{description}}}</td>
+<td>{{{paramType}}}</td>
 <td><span class="model-signature"></span></td>

src/main/template/param_required.handlebars

@@ -9,7 +9,7 @@
 			{{else}}
 				<textarea class='body-textarea' placeholder='(required)' name='{{name}}'></textarea>
 				<br />
-				<div class="content-type" />
+				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
@@ -27,4 +27,5 @@
 <td>
 	<strong>{{{description}}}</strong>
 </td>
+<td>{{{paramType}}}</td>
 <td><span class="model-signature"></span></td>

src/main/template/parameter_content_type.handlebars

@@ -0,0 +1,10 @@
+<label for="parameterContentType"></label>
+<select name="parameterContentType">
+{{#if consumes}}
+  {{#each consumes}}
+  <option value="{{{this}}}">{{{this}}}</option>
+  {{/each}}
+{{else}}
+  <option value="application/json">application/json</option>
+{{/if}}
+</select>

src/main/template/resource.handlebars

@@ -1,26 +1,26 @@
 <div class='heading'>
-    <h2>
-        <a href='#!/{{name}}' onclick="Docs.toggleEndpointListForResource('{{name}}');">/{{name}}</a>
-    </h2>
-    <ul class='options'>
-        <li>
-            <a href='#!/{{name}}' id='endpointListTogger_{{name}}'
-               onclick="Docs.toggleEndpointListForResource('{{name}}');">Show/Hide</a>
-        </li>
-        <li>
-            <a href='#' onclick="Docs.collapseOperationsForResource('{{name}}'); return false;">
-                List Operations
-            </a>
-        </li>
-        <li>
-            <a href='#' onclick="Docs.expandOperationsForResource('{{name}}'); return false;">
-                Expand Operations
-            </a>
-        </li>
-        <li>
-            <a href='{{url}}'>Raw</a>
-        </li>
-    </ul>
+  <h2>
+    <a href='#!/{{name}}' onclick="Docs.toggleEndpointListForResource('{{name}}');">{{name}}</a> {{#description}} : {{/description}}{{{description}}}
+  </h2>
+  <ul class='options'>
+    <li>
+      <a href='#!/{{name}}' id='endpointListTogger_{{name}}'
+         onclick="Docs.toggleEndpointListForResource('{{name}}');">Show/Hide</a>
+    </li>
+    <li>
+      <a href='#' onclick="Docs.collapseOperationsForResource('{{name}}'); return false;">
+        List Operations
+      </a>
+    </li>
+    <li>
+      <a href='#' onclick="Docs.expandOperationsForResource('{{name}}'); return false;">
+        Expand Operations
+      </a>
+    </li>
+    <li>
+      <a href='{{url}}'>Raw</a>
+    </li>
+  </ul>
 </div>
 <ul class='endpoints' id='{{name}}_endpoint_list' style='display:none'>
 

src/main/template/response_content_type.handlebars

@@ -0,0 +1,10 @@
+<label for="responseContentType"></label>
+<select name="responseContentType">
+{{#if produces}}
+  {{#each produces}}
+  <option value="{{{this}}}">{{{this}}}</option>
+  {{/each}}
+{{else}}
+  <option value="application/json">application/json</option>
+{{/if}}
+</select>

src/main/template/status_code.handlebars

@@ -1,3 +1,2 @@
 <td width='15%' class='code'>{{code}}</td>
-<td>{{{reason}}}</td>
-
+<td>{{{message}}}</td>

src/test/swagger-ui-spec.coffee

@@ -1,5 +1,4 @@
-window.api_key = 'a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5'
-window.discoveryUrl = "http://api.wordnik.com/v4/resources.json"
+window.url = "http://api.wordnik.com/v4/resources.json"
 
 describe 'SwaggerUi', ->
   
@@ -8,7 +7,7 @@ describe 'SwaggerUi', ->
     beforeEach ->
       window.ui = new SwaggerUi
         api_key: window.api_key
-        discoveryUrl: window.discoveryUrl
+        url: window.url
       waitsFor ->
         ui.ready