added elements for selecting base url and api key

bin/compress.sh

@@ -3,7 +3,7 @@ CSSDIR="../src/main/html/style"
 
 YUI_COMPRESSOR="../build/yuicompressor-2.4.6.jar"
 
-echo "1. Combining Javascript"
+echo "5. Combining Javascript"
 # Combine all the javascript to a single temporary file
 cat $JSDIR/jquery-1.6.2.min.js \
 $JSDIR/jquery-ui-1.8.14.custom.min.js \
@@ -11,13 +11,15 @@ $JSDIR/jquery.ba-bbq.min.js \
 $JSDIR/jquery.slideto.min.js \
 $JSDIR/jquery.tmpl.js \
 $JSDIR/jquery.wiggle.min.js \
+$JSDIR/chosen.jquery.js \
 $JSDIR/doc.js \
 $JSDIR/spine.js > $JSDIR/app.ext.js
 
 cat $JSDIR/swagger-ui.js > $JSDIR/app.js
 
-echo "2. Combining Stylesheets"
-cat $CSSDIR/ie.css \
+echo "4. Combining Stylesheets"
+cat $CSSDIR/chosen.css \
+$CSSDIR/ie.css \
 $CSSDIR/ie6.css \
 $CSSDIR/screen.css > $CSSDIR/app.ext.css
 
@@ -27,12 +29,12 @@ echo "3. Compressing Javascripts"
 java -jar $YUI_COMPRESSOR --type js -o $JSDIR/app.ext.min.js $JSDIR/app.ext.js
 java -jar $YUI_COMPRESSOR --type js -o $JSDIR/app.min.js $JSDIR/app.js
 
-echo "4. Compressing Stylesheets"
+echo "2. Compressing Stylesheets"
 java -jar $YUI_COMPRESSOR --type css -o $CSSDIR/app.min.css $CSSDIR/app.css
 java -jar $YUI_COMPRESSOR --type css -o $CSSDIR/app.ext.min.css $CSSDIR/app.ext.css
 java -jar $YUI_COMPRESSOR --type css -o $CSSDIR/smoothness/jquery-ui-1.8.14.custom.min.css $CSSDIR/smoothness/jquery-ui-1.8.14.custom.css
 
-echo "5. Cleaning up"
+echo "1. Cleaning up"
 rm -f $JSDIR/app.js
 rm -f $JSDIR/app.ext.js
 rm -f $CSSDIR/app.css

src/main/html/index.html

@@ -27,6 +27,12 @@
         <h1 id='logo'>
             <a href="/"><span>api</span><span class="light">&nbsp;explorer</span></a>
         </h1>
+
+        <ul id='nav'>
+            <li class="first odd"><input class="header-input" type="text" style="width: 400px" placeholder="http://awesome-api.com/rest/list.json"></li>
+            <li class="even"><input class="header-input" type="text" style="width: 200px" placeholder="(api key)"></li>
+            <li class="last odd"><a href="/support" class="active">Explore</a></li>
+        </ul>
     </div>
 </div>
 <div id='content'>
@@ -157,7 +163,7 @@
 <script id="paramTemplateRequired" type="text/x-jquery-tmpl">
     <tr>
         <td class='code required'>${name}</td>
-        <td><input name="${name}" class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
+        <td><input id="${name}_${id}" name="${name}" class="required" minlength="1" placeholder="(required)" type="text" value=""/></td>
         <td width='500'><strong>${description}</strong>
         </td>
     </tr>
@@ -166,7 +172,7 @@
 <script id="paramTemplate" type="text/x-jquery-tmpl">
     <tr>
         <td class='code'>${name}</td>
-        <td><input name="${name}" class="" minlength="0" placeholder="" type="text" value=""/></td>
+        <td><input id="${name}_${id}" name="${name}" class="" minlength="0" placeholder="" type="text" value=""/></td>
         <td width='500'>${description}</td>
     </tr>
 </script>

src/main/html/javascript/app.min.js

@@ -0,0 +1 @@
+jQuery(function(h){var a=Spine.Controller.create({baseUrlList:new Array(),init:function(){if(this.supportsLocalStorage()){var i=localStorage.getItem("com.wordnik.swagger.ui.baseUrls");if(i&&jQuery.trim(i).length>0){this.baseUrlList=i.split(",")}}else{log("local storage not supported, user will need to specifiy the api url")}this.render()},supportsLocalStorage:function(){try{return"localStorage" in window&&window.localStorage!==null}catch(i){return false}},render:function(){h("#baseUrlSelector").chosen()}});var g=Spine.Controller.create({proxied:["addAll","addOne"],ApiResource:null,init:function(){if(this.baseUrl==null){throw new Error("A baseUrl must be passed to ResourceListController")}var j=this.baseUrl.substr(0,this.baseUrl.lastIndexOf("/"));var k=this.baseUrl.substr(this.baseUrl.lastIndexOf("/")+1,this.baseUrl.length);log("resourceListApi="+k);log("hostUrl="+j);h("#api_host_url").html(j);var i=new SwaggerService(j,"list");i.init();this.ApiResource=i.ApiResource();this.ApiResource.bind("refresh",this.addAll)},addAll:function(){this.ApiResource.each(this.addOne)},addOne:function(i){e.init({item:i,container:"#resources"})}});var e=Spine.Controller.create({proxied:["renderApi","renderOperation"],templateName:"#resourceTemplate",apiResource:null,apiList:null,modelList:null,init:function(){this.render();this.apiResource=this.item;this.apiList=this.apiResource.apiList;this.modelList=this.apiResource.modelList;this.apiList.each(this.renderApi)},render:function(){h(this.templateName).tmpl(this.item).appendTo(this.container)},renderApi:function(j){var i="#"+this.apiResource.name+"_endpoint_list";d.init({item:j,container:i})}});var d=Spine.Controller.create({proxied:["renderOperation"],api:null,templateName:"#apiTemplate",init:function(){this.render();this.api=this.item;this.api.operations.each(this.renderOperation)},render:function(){h(this.templateName).tmpl(this.item).appendTo(this.container)},renderOperation:function(i){var j="#"+this.api.name+"_endpoint_"+this.api.id+"_operations";c.init({item:i,container:j})}});var c=Spine.Controller.create({proxied:["submitOperation"],operation:null,templateName:"#operationTemplate",elementScope:"#operationTemplate",init:function(){this.render();this.operation=this.item;this.isGetOperation=(this.operation.httpMethodLowercase=="get");this.elementScope="#"+this.operation.apiName+"_"+this.operation.nickname+"_"+this.operation.id;this.renderParams()},render:function(){h(this.templateName).tmpl(this.item).appendTo(this.container)},renderParams:function(){if(this.operation.parameters&&this.operation.parameters.count()>0){var k=this.elementScope+"_params";log("operationParamsContainer = "+k);for(var l=0;l<this.operation.parameters.count();l++){var m=this.operation.parameters.all()[l];var i="#paramTemplate";if(m.required){i+="Required"}if(!this.isGetOperation){i+="ReadOnly"}h(i).tmpl(m).appendTo(k)}}var j=this.elementScope+"_content_sandbox_response_button";if(this.isGetOperation){h(j).click(this.submitOperation)}else{h(j).hide();var n=this.elementScope+"_value_header";h(n).html("Default Value")}},submitOperation:function(){var k=h(this.elementScope+"_form");var j=true;var i=null;k.find("input.required").each(function(){h(this).removeClass("error");if(h(this).val()==""){if(i==null){i=h(this)}h(this).addClass("error");h(this).wiggle();j=false}});log("error_free = "+j)}});var b=a.init();var f=g.init({baseUrl:"http://swagr.api.wordnik.com/v4/list.json"})});

src/main/html/javascript/chosen.jquery.js

@@ -0,0 +1,776 @@
+(function() {
+  /*
+  Chosen, a Select Box Enhancer for jQuery and Protoype
+  by Patrick Filler for Harvest, http://getharvest.com
+  
+  Available for use under the MIT License, http://en.wikipedia.org/wiki/MIT_License
+  
+  Copyright (c) 2011 by Harvest
+  */  var $, Chosen, SelectParser, get_side_border_padding, root;
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
+  $ = jQuery;
+  $.fn.extend({
+    chosen: function(data, options) {
+      return $(this).each(function(input_field) {
+        if (!($(this)).hasClass("chzn-done")) {
+          return new Chosen(this, data, options);
+        }
+      });
+    }
+  });
+  Chosen = (function() {
+    function Chosen(elmn) {
+      this.set_default_values();
+      this.form_field = elmn;
+      this.form_field_jq = $(this.form_field);
+      this.is_multiple = this.form_field.multiple;
+      this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option";
+      this.set_up_html();
+      this.register_observers();
+      this.form_field_jq.addClass("chzn-done");
+    }
+    Chosen.prototype.set_default_values = function() {
+      this.click_test_action = __bind(function(evt) {
+        return this.test_active_click(evt);
+      }, this);
+      this.active_field = false;
+      this.mouse_on_container = false;
+      this.results_showing = false;
+      this.result_highlighted = null;
+      this.result_single_selected = null;
+      return this.choices = 0;
+    };
+    Chosen.prototype.set_up_html = function() {
+      var container_div, dd_top, dd_width, sf_width;
+      this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id();
+      this.container_id += "_chzn";
+      this.f_width = this.form_field_jq.width();
+      this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;
+      container_div = $("<div />", {
+        id: this.container_id,
+        "class": 'chzn-container',
+        style: 'width: ' + this.f_width + 'px;'
+      });
+      if (this.is_multiple) {
+        container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
+      } else {
+        container_div.html('<a href="javascript:void(0)" class="chzn-single"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>');
+      }
+      this.form_field_jq.hide().after(container_div);
+      this.container = $('#' + this.container_id);
+      this.container.addClass("chzn-container-" + (this.is_multiple ? "multi" : "single"));
+      this.dropdown = this.container.find('div.chzn-drop').first();
+      dd_top = this.container.height();
+      dd_width = this.f_width - get_side_border_padding(this.dropdown);
+      this.dropdown.css({
+        "width": dd_width + "px",
+        "top": dd_top + "px"
+      });
+      this.search_field = this.container.find('input').first();
+      this.search_results = this.container.find('ul.chzn-results').first();
+      this.search_field_scale();
+      this.search_no_results = this.container.find('li.no-results').first();
+      if (this.is_multiple) {
+        this.search_choices = this.container.find('ul.chzn-choices').first();
+        this.search_container = this.container.find('li.search-field').first();
+      } else {
+        this.search_container = this.container.find('div.chzn-search').first();
+        this.selected_item = this.container.find('.chzn-single').first();
+        sf_width = dd_width - get_side_border_padding(this.search_container) - get_side_border_padding(this.search_field);
+        this.search_field.css({
+          "width": sf_width + "px"
+        });
+      }
+      this.results_build();
+      return this.set_tab_index();
+    };
+    Chosen.prototype.register_observers = function() {
+      this.container.click(__bind(function(evt) {
+        return this.container_click(evt);
+      }, this));
+      this.container.mouseenter(__bind(function(evt) {
+        return this.mouse_enter(evt);
+      }, this));
+      this.container.mouseleave(__bind(function(evt) {
+        return this.mouse_leave(evt);
+      }, this));
+      this.search_results.click(__bind(function(evt) {
+        return this.search_results_click(evt);
+      }, this));
+      this.search_results.mouseover(__bind(function(evt) {
+        return this.search_results_mouseover(evt);
+      }, this));
+      this.search_results.mouseout(__bind(function(evt) {
+        return this.search_results_mouseout(evt);
+      }, this));
+      this.form_field_jq.bind("liszt:updated", __bind(function(evt) {
+        return this.results_update_field(evt);
+      }, this));
+      this.search_field.blur(__bind(function(evt) {
+        return this.input_blur(evt);
+      }, this));
+      this.search_field.keyup(__bind(function(evt) {
+        return this.keyup_checker(evt);
+      }, this));
+      this.search_field.keydown(__bind(function(evt) {
+        return this.keydown_checker(evt);
+      }, this));
+      if (this.is_multiple) {
+        this.search_choices.click(__bind(function(evt) {
+          return this.choices_click(evt);
+        }, this));
+        return this.search_field.focus(__bind(function(evt) {
+          return this.input_focus(evt);
+        }, this));
+      } else {
+        return this.selected_item.focus(__bind(function(evt) {
+          return this.activate_field(evt);
+        }, this));
+      }
+    };
+    Chosen.prototype.container_click = function(evt) {
+      if (evt && evt.type === "click") {
+        evt.stopPropagation();
+      }
+      if (!this.pending_destroy_click) {
+        if (!this.active_field) {
+          if (this.is_multiple) {
+            this.search_field.val("");
+          }
+          $(document).click(this.click_test_action);
+          this.results_show();
+        } else if (!this.is_multiple && evt && ($(evt.target) === this.selected_item || $(evt.target).parents("a.chzn-single").length)) {
+          evt.preventDefault();
+          this.results_toggle();
+        }
+        return this.activate_field();
+      } else {
+        return this.pending_destroy_click = false;
+      }
+    };
+    Chosen.prototype.mouse_enter = function() {
+      return this.mouse_on_container = true;
+    };
+    Chosen.prototype.mouse_leave = function() {
+      return this.mouse_on_container = false;
+    };
+    Chosen.prototype.input_focus = function(evt) {
+      if (!this.active_field) {
+        return setTimeout((__bind(function() {
+          return this.container_click();
+        }, this)), 50);
+      }
+    };
+    Chosen.prototype.input_blur = function(evt) {
+      if (!this.mouse_on_container) {
+        this.active_field = false;
+        return setTimeout((__bind(function() {
+          return this.blur_test();
+        }, this)), 100);
+      }
+    };
+    Chosen.prototype.blur_test = function(evt) {
+      if (!this.active_field && this.container.hasClass("chzn-container-active")) {
+        return this.close_field();
+      }
+    };
+    Chosen.prototype.close_field = function() {
+      $(document).unbind("click", this.click_test_action);
+      if (!this.is_multiple) {
+        this.selected_item.attr("tabindex", this.search_field.attr("tabindex"));
+        this.search_field.attr("tabindex", -1);
+      }
+      this.active_field = false;
+      this.results_hide();
+      this.container.removeClass("chzn-container-active");
+      this.winnow_results_clear();
+      this.clear_backstroke();
+      this.show_search_field_default();
+      return this.search_field_scale();
+    };
+    Chosen.prototype.activate_field = function() {
+      if (!this.is_multiple && !this.active_field) {
+        this.search_field.attr("tabindex", this.selected_item.attr("tabindex"));
+        this.selected_item.attr("tabindex", -1);
+      }
+      this.container.addClass("chzn-container-active");
+      this.active_field = true;
+      this.search_field.val(this.search_field.val());
+      return this.search_field.focus();
+    };
+    Chosen.prototype.test_active_click = function(evt) {
+      if ($(evt.target).parents('#' + this.container_id).length) {
+        return this.active_field = true;
+      } else {
+        return this.close_field();
+      }
+    };
+    Chosen.prototype.results_build = function() {
+      var content, data, startTime, _i, _len, _ref;
+      startTime = new Date();
+      this.parsing = true;
+      this.results_data = SelectParser.select_to_array(this.form_field);
+      if (this.is_multiple && this.choices > 0) {
+        this.search_choices.find("li.search-choice").remove();
+        this.choices = 0;
+      } else if (!this.is_multiple) {
+        this.selected_item.find("span").text(this.default_text);
+      }
+      content = '';
+      _ref = this.results_data;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        data = _ref[_i];
+        if (data.group) {
+          content += this.result_add_group(data);
+        } else if (!data.empty) {
+          content += this.result_add_option(data);
+          if (data.selected && this.is_multiple) {
+            this.choice_build(data);
+          } else if (data.selected && !this.is_multiple) {
+            this.selected_item.find("span").text(data.text);
+          }
+        }
+      }
+      this.show_search_field_default();
+      this.search_field_scale();
+      this.search_results.html(content);
+      return this.parsing = false;
+    };
+    Chosen.prototype.result_add_group = function(group) {
+      if (!group.disabled) {
+        group.dom_id = this.container_id + "_g_" + group.array_index;
+        return '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>';
+      } else {
+        return "";
+      }
+    };
+    Chosen.prototype.result_add_option = function(option) {
+      var classes;
+      if (!option.disabled) {
+        option.dom_id = this.container_id + "_o_" + option.array_index;
+        classes = option.selected && this.is_multiple ? [] : ["active-result"];
+        if (option.selected) {
+          classes.push("result-selected");
+        }
+        if (option.group_array_index != null) {
+          classes.push("group-option");
+        }
+        return '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + $("<div />").text(option.text).html() + '</li>';
+      } else {
+        return "";
+      }
+    };
+    Chosen.prototype.results_update_field = function() {
+      this.result_clear_highlight();
+      this.result_single_selected = null;
+      return this.results_build();
+    };
+    Chosen.prototype.result_do_highlight = function(el) {
+      var high_bottom, high_top, maxHeight, visible_bottom, visible_top;
+      if (el.length) {
+        this.result_clear_highlight();
+        this.result_highlight = el;
+        this.result_highlight.addClass("highlighted");
+        maxHeight = parseInt(this.search_results.css("maxHeight"), 10);
+        visible_top = this.search_results.scrollTop();
+        visible_bottom = maxHeight + visible_top;
+        high_top = this.result_highlight.position().top + this.search_results.scrollTop();
+        high_bottom = high_top + this.result_highlight.outerHeight();
+        if (high_bottom >= visible_bottom) {
+          return this.search_results.scrollTop((high_bottom - maxHeight) > 0 ? high_bottom - maxHeight : 0);
+        } else if (high_top < visible_top) {
+          return this.search_results.scrollTop(high_top);
+        }
+      }
+    };
+    Chosen.prototype.result_clear_highlight = function() {
+      if (this.result_highlight) {
+        this.result_highlight.removeClass("highlighted");
+      }
+      return this.result_highlight = null;
+    };
+    Chosen.prototype.results_toggle = function() {
+      if (this.results_showing) {
+        return this.results_hide();
+      } else {
+        return this.results_show();
+      }
+    };
+    Chosen.prototype.results_show = function() {
+      var dd_top;
+      if (!this.is_multiple) {
+        this.selected_item.addClass("chzn-single-with-drop");
+        if (this.result_single_selected) {
+          this.result_do_highlight(this.result_single_selected);
+        }
+      }
+      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
+      this.dropdown.css({
+        "top": dd_top + "px",
+        "left": 0
+      });
+      this.results_showing = true;
+      this.search_field.focus();
+      this.search_field.val(this.search_field.val());
+      return this.winnow_results();
+    };
+    Chosen.prototype.results_hide = function() {
+      if (!this.is_multiple) {
+        this.selected_item.removeClass("chzn-single-with-drop");
+      }
+      this.result_clear_highlight();
+      this.dropdown.css({
+        "left": "-9000px"
+      });
+      return this.results_showing = false;
+    };
+    Chosen.prototype.set_tab_index = function(el) {
+      var ti;
+      if (this.form_field_jq.attr("tabindex")) {
+        ti = this.form_field_jq.attr("tabindex");
+        this.form_field_jq.attr("tabindex", -1);
+        if (this.is_multiple) {
+          return this.search_field.attr("tabindex", ti);
+        } else {
+          this.selected_item.attr("tabindex", ti);
+          return this.search_field.attr("tabindex", -1);
+        }
+      }
+    };
+    Chosen.prototype.show_search_field_default = function() {
+      if (this.is_multiple && this.choices < 1 && !this.active_field) {
+        this.search_field.val(this.default_text);
+        return this.search_field.addClass("default");
+      } else {
+        this.search_field.val("");
+        return this.search_field.removeClass("default");
+      }
+    };
+    Chosen.prototype.search_results_click = function(evt) {
+      var target;
+      target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first();
+      if (target.length) {
+        this.result_highlight = target;
+        return this.result_select();
+      }
+    };
+    Chosen.prototype.search_results_mouseover = function(evt) {
+      var target;
+      target = $(evt.target).hasClass("active-result") ? $(evt.target) : $(evt.target).parents(".active-result").first();
+      if (target) {
+        return this.result_do_highlight(target);
+      }
+    };
+    Chosen.prototype.search_results_mouseout = function(evt) {
+      if ($(evt.target).hasClass("active-result" || $(evt.target).parents('.active-result').first())) {
+        return this.result_clear_highlight();
+      }
+    };
+    Chosen.prototype.choices_click = function(evt) {
+      evt.preventDefault();
+      if (this.active_field && !($(evt.target).hasClass("search-choice" || $(evt.target).parents('.search-choice').first)) && !this.results_showing) {
+        return this.results_show();
+      }
+    };
+    Chosen.prototype.choice_build = function(item) {
+      var choice_id, link;
+      choice_id = this.container_id + "_c_" + item.array_index;
+      this.choices += 1;
+      this.search_container.before('<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>');
+      link = $('#' + choice_id).find("a").first();
+      return link.click(__bind(function(evt) {
+        return this.choice_destroy_link_click(evt);
+      }, this));
+    };
+    Chosen.prototype.choice_destroy_link_click = function(evt) {
+      evt.preventDefault();
+      this.pending_destroy_click = true;
+      return this.choice_destroy($(evt.target));
+    };
+    Chosen.prototype.choice_destroy = function(link) {
+      this.choices -= 1;
+      this.show_search_field_default();
+      if (this.is_multiple && this.choices > 0 && this.search_field.val().length < 1) {
+        this.results_hide();
+      }
+      this.result_deselect(link.attr("rel"));
+      return link.parents('li').first().remove();
+    };
+    Chosen.prototype.result_select = function() {
+      var high, high_id, item, position;
+      if (this.result_highlight) {
+        high = this.result_highlight;
+        high_id = high.attr("id");
+        this.result_clear_highlight();
+        high.addClass("result-selected");
+        if (this.is_multiple) {
+          this.result_deactivate(high);
+        } else {
+          this.result_single_selected = high;
+        }
+        position = high_id.substr(high_id.lastIndexOf("_") + 1);
+        item = this.results_data[position];
+        item.selected = true;
+        this.form_field.options[item.options_index].selected = true;
+        if (this.is_multiple) {
+          this.choice_build(item);
+        } else {
+          this.selected_item.find("span").first().text(item.text);
+        }
+        this.results_hide();
+        this.search_field.val("");
+        this.form_field_jq.trigger("change");
+        return this.search_field_scale();
+      }
+    };
+    Chosen.prototype.result_activate = function(el) {
+      return el.addClass("active-result").show();
+    };
+    Chosen.prototype.result_deactivate = function(el) {
+      return el.removeClass("active-result").hide();
+    };
+    Chosen.prototype.result_deselect = function(pos) {
+      var result, result_data;
+      result_data = this.results_data[pos];
+      result_data.selected = false;
+      this.form_field.options[result_data.options_index].selected = false;
+      result = $("#" + this.container_id + "_o_" + pos);
+      result.removeClass("result-selected").addClass("active-result").show();
+      this.result_clear_highlight();
+      this.winnow_results();
+      this.form_field_jq.trigger("change");
+      return this.search_field_scale();
+    };
+    Chosen.prototype.results_search = function(evt) {
+      if (this.results_showing) {
+        return this.winnow_results();
+      } else {
+        return this.results_show();
+      }
+    };
+    Chosen.prototype.winnow_results = function() {
+      var found, option, part, parts, regex, result_id, results, searchText, startTime, startpos, text, zregex, _i, _j, _len, _len2, _ref;
+      startTime = new Date();
+      this.no_results_clear();
+      results = 0;
+      searchText = this.search_field.val() === this.default_text ? "" : $.trim(this.search_field.val());
+      regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
+      zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
+      _ref = this.results_data;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        option = _ref[_i];
+        if (!option.disabled && !option.empty) {
+          if (option.group) {
+            $('#' + option.dom_id).hide();
+          } else if (!(this.is_multiple && option.selected)) {
+            found = false;
+            result_id = option.dom_id;
+            if (regex.test(option.text)) {
+              found = true;
+              results += 1;
+            } else if (option.text.indexOf(" ") >= 0 || option.text.indexOf("[") === 0) {
+              parts = option.text.replace(/\[|\]/g, "").split(" ");
+              if (parts.length) {
+                for (_j = 0, _len2 = parts.length; _j < _len2; _j++) {
+                  part = parts[_j];
+                  if (regex.test(part)) {
+                    found = true;
+                    results += 1;
+                  }
+                }
+              }
+            }
+            if (found) {
+              if (searchText.length) {
+                startpos = option.text.search(zregex);
+                text = option.text.substr(0, startpos + searchText.length) + '</em>' + option.text.substr(startpos + searchText.length);
+                text = text.substr(0, startpos) + '<em>' + text.substr(startpos);
+              } else {
+                text = option.text;
+              }
+              if ($("#" + result_id).html !== text) {
+                $("#" + result_id).html(text);
+              }
+              this.result_activate($("#" + result_id));
+              if (option.group_array_index != null) {
+                $("#" + this.results_data[option.group_array_index].dom_id).show();
+              }
+            } else {
+              if (this.result_highlight && result_id === this.result_highlight.attr('id')) {
+                this.result_clear_highlight();
+              }
+              this.result_deactivate($("#" + result_id));
+            }
+          }
+        }
+      }
+      if (results < 1 && searchText.length) {
+        return this.no_results(searchText);
+      } else {
+        return this.winnow_results_set_highlight();
+      }
+    };
+    Chosen.prototype.winnow_results_clear = function() {
+      var li, lis, _i, _len, _results;
+      this.search_field.val("");
+      lis = this.search_results.find("li");
+      _results = [];
+      for (_i = 0, _len = lis.length; _i < _len; _i++) {
+        li = lis[_i];
+        li = $(li);
+        _results.push(li.hasClass("group-result") ? li.show() : !this.is_multiple || !li.hasClass("result-selected") ? this.result_activate(li) : void 0);
+      }
+      return _results;
+    };
+    Chosen.prototype.winnow_results_set_highlight = function() {
+      var do_high;
+      if (!this.result_highlight) {
+        do_high = this.search_results.find(".active-result").first();
+        if (do_high) {
+          return this.result_do_highlight(do_high);
+        }
+      }
+    };
+    Chosen.prototype.no_results = function(terms) {
+      var no_results_html;
+      no_results_html = $('<li class="no-results">No results match "<span></span>"</li>');
+      no_results_html.find("span").first().text(terms);
+      return this.search_results.append(no_results_html);
+    };
+    Chosen.prototype.no_results_clear = function() {
+      return this.search_results.find(".no-results").remove();
+    };
+    Chosen.prototype.keydown_arrow = function() {
+      var first_active, next_sib;
+      if (!this.result_highlight) {
+        first_active = this.search_results.find("li.active-result").first();
+        if (first_active) {
+          this.result_do_highlight($(first_active));
+        }
+      } else if (this.results_showing) {
+        next_sib = this.result_highlight.nextAll("li.active-result").first();
+        if (next_sib) {
+          this.result_do_highlight(next_sib);
+        }
+      }
+      if (!this.results_showing) {
+        return this.results_show();
+      }
+    };
+    Chosen.prototype.keyup_arrow = function() {
+      var prev_sibs;
+      if (!this.results_showing && !this.is_multiple) {
+        return this.results_show();
+      } else if (this.result_highlight) {
+        prev_sibs = this.result_highlight.prevAll("li.active-result");
+        if (prev_sibs.length) {
+          return this.result_do_highlight(prev_sibs.first());
+        } else {
+          if (this.choices > 0) {
+            this.results_hide();
+          }
+          return this.result_clear_highlight();
+        }
+      }
+    };
+    Chosen.prototype.keydown_backstroke = function() {
+      if (this.pending_backstroke) {
+        this.choice_destroy(this.pending_backstroke.find("a").first());
+        return this.clear_backstroke();
+      } else {
+        this.pending_backstroke = this.search_container.siblings("li.search-choice").last();
+        return this.pending_backstroke.addClass("search-choice-focus");
+      }
+    };
+    Chosen.prototype.clear_backstroke = function() {
+      if (this.pending_backstroke) {
+        this.pending_backstroke.removeClass("search-choice-focus");
+      }
+      return this.pending_backstroke = null;
+    };
+    Chosen.prototype.keyup_checker = function(evt) {
+      var stroke, _ref;
+      stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
+      this.search_field_scale();
+      switch (stroke) {
+        case 8:
+          if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) {
+            return this.keydown_backstroke();
+          } else if (!this.pending_backstroke) {
+            this.result_clear_highlight();
+            return this.results_search();
+          }
+          break;
+        case 13:
+          evt.preventDefault();
+          if (this.results_showing) {
+            return this.result_select();
+          }
+          break;
+        case 27:
+          if (this.results_showing) {
+            return this.results_hide();
+          }
+          break;
+        case 9:
+        case 38:
+        case 40:
+        case 16:
+          break;
+        default:
+          return this.results_search();
+      }
+    };
+    Chosen.prototype.keydown_checker = function(evt) {
+      var stroke, _ref;
+      stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
+      this.search_field_scale();
+      if (stroke !== 8 && this.pending_backstroke) {
+        this.clear_backstroke();
+      }
+      switch (stroke) {
+        case 8:
+          this.backstroke_length = this.search_field.val().length;
+          break;
+        case 9:
+          this.mouse_on_container = false;
+          break;
+        case 13:
+          evt.preventDefault();
+          break;
+        case 38:
+          evt.preventDefault();
+          this.keyup_arrow();
+          break;
+        case 40:
+          this.keydown_arrow();
+          break;
+      }
+    };
+    Chosen.prototype.search_field_scale = function() {
+      var dd_top, div, h, style, style_block, styles, w, _i, _len;
+      if (this.is_multiple) {
+        h = 0;
+        w = 0;
+        style_block = "position:absolute; left: -1000px; top: -1000px; display:none;";
+        styles = ['font-size', 'font-style', 'font-weight', 'font-family', 'line-height', 'text-transform', 'letter-spacing'];
+        for (_i = 0, _len = styles.length; _i < _len; _i++) {
+          style = styles[_i];
+          style_block += style + ":" + this.search_field.css(style) + ";";
+        }
+        div = $('<div />', {
+          'style': style_block
+        });
+        div.text(this.search_field.val());
+        $('body').append(div);
+        w = div.width() + 25;
+        div.remove();
+        if (w > this.f_width - 10) {
+          w = this.f_width - 10;
+        }
+        this.search_field.css({
+          'width': w + 'px'
+        });
+        dd_top = this.container.height();
+        return this.dropdown.css({
+          "top": dd_top + "px"
+        });
+      }
+    };
+    Chosen.prototype.generate_field_id = function() {
+      var new_id;
+      new_id = this.generate_random_id();
+      this.form_field.id = new_id;
+      return new_id;
+    };
+    Chosen.prototype.generate_random_id = function() {
+      var string;
+      string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char();
+      while ($("#" + string).length > 0) {
+        string += this.generate_random_char();
+      }
+      return string;
+    };
+    Chosen.prototype.generate_random_char = function() {
+      var chars, newchar, rand;
+      chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+      rand = Math.floor(Math.random() * chars.length);
+      return newchar = chars.substring(rand, rand + 1);
+    };
+    return Chosen;
+  })();
+  get_side_border_padding = function(elmt) {
+    var side_border_padding;
+    return side_border_padding = elmt.outerWidth() - elmt.width();
+  };
+  root.get_side_border_padding = get_side_border_padding;
+  SelectParser = (function() {
+    function SelectParser() {
+      this.options_index = 0;
+      this.parsed = [];
+    }
+    SelectParser.prototype.add_node = function(child) {
+      if (child.nodeName === "OPTGROUP") {
+        return this.add_group(child);
+      } else {
+        return this.add_option(child);
+      }
+    };
+    SelectParser.prototype.add_group = function(group) {
+      var group_position, option, _i, _len, _ref, _results;
+      group_position = this.parsed.length;
+      this.parsed.push({
+        array_index: group_position,
+        group: true,
+        label: group.label,
+        children: 0,
+        disabled: group.disabled
+      });
+      _ref = group.childNodes;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        option = _ref[_i];
+        _results.push(this.add_option(option, group_position, group.disabled));
+      }
+      return _results;
+    };
+    SelectParser.prototype.add_option = function(option, group_position, group_disabled) {
+      if (option.nodeName === "OPTION") {
+        if (option.text !== "") {
+          if (group_position != null) {
+            this.parsed[group_position].children += 1;
+          }
+          this.parsed.push({
+            array_index: this.parsed.length,
+            options_index: this.options_index,
+            value: option.value,
+            text: option.text,
+            selected: option.selected,
+            disabled: group_disabled === true ? group_disabled : option.disabled,
+            group_array_index: group_position
+          });
+        } else {
+          this.parsed.push({
+            array_index: this.parsed.length,
+            options_index: this.options_index,
+            empty: true
+          });
+        }
+        return this.options_index += 1;
+      }
+    };
+    return SelectParser;
+  })();
+  SelectParser.select_to_array = function(select) {
+    var child, parser, _i, _len, _ref;
+    parser = new SelectParser();
+    _ref = select.childNodes;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      child = _ref[_i];
+      parser.add_node(child);
+    }
+    return parser.parsed;
+  };
+  root.SelectParser = SelectParser;
+}).call(this);

src/main/html/javascript/swagger-ui.js

@@ -1,5 +1,36 @@
 jQuery(function($) {
 
+    var ApiSelectionController = Spine.Controller.create({
+        baseUrlList: new Array(),
+
+        init: function() {
+            if(this.supportsLocalStorage()) {
+                var baseUrls = localStorage.getItem("com.wordnik.swagger.ui.baseUrls");
+                if(baseUrls && jQuery.trim(baseUrls).length > 0) {
+                    this.baseUrlList = baseUrls.split(",");
+                }
+
+            } else {
+                log("local storage not supported, user will need to specifiy the api url")
+            }
+
+            this.render();
+
+        },
+
+        supportsLocalStorage: function() {
+            try {
+                return 'localStorage' in window && window['localStorage'] !== null;
+            } catch (e) {
+                return false;
+            }
+        },
+
+        render: function() {
+//            $("#baseUrlSelector").chosen();
+        }
+    });
+
     // The following heirarchy is followed by these view controllers
     // ResourceListController
     //     >>> ResourceController
@@ -12,12 +43,18 @@ jQuery(function($) {
         ApiResource: null,
 
         init: function() {
+            if(this.baseUrl == null) {
+                throw new Error("A baseUrl must be passed to ResourceListController");
+            }
+
+            var hostUrl = this.baseUrl.substr(0, this.baseUrl.lastIndexOf("/"));
+            var resourceListApi = this.baseUrl.substr(this.baseUrl.lastIndexOf("/") + 1, this.baseUrl.length);
+            log("resourceListApi=" + resourceListApi);
+            log("hostUrl=" + hostUrl);
 
             // create and initialize SwaggerService
-            var hostUrl = "http://swagr.api.wordnik.com/v4";
-
             $("#api_host_url").html(hostUrl);
-            var swaggerService = new SwaggerService(hostUrl);
+            var swaggerService = new SwaggerService(hostUrl, "list");
             swaggerService.init();
 
             // Create convenience references to Spine models
@@ -149,13 +186,37 @@ jQuery(function($) {
 
         submitOperation: function() {
             var form = $(this.elementScope + "_form");
-            log(this.elementScope + "_form:: " + form);
-            log("submitOperation : '" + form.serialize() + "'");
+
+            var error_free = true;
+            var missing_input = null;
+
+            // Cycle through the forms required inputs
+            form.find("input.required").each(function() {
+
+                // Remove any existing error styles from the input
+                $(this).removeClass('error');
+
+                // Tack the error style on if the input is empty..
+                if ($(this).val() == '') {
+                    if(missing_input == null)
+                        missing_input = $(this);
+                    $(this).addClass('error');
+                    $(this).wiggle();
+                    error_free = false;
                 }
 
             });
 
-    var resourceListController = ResourceListController.init();
+            log("error_free = " + error_free);
+
+
+        }
+
+    });
+
+    var apiSelectionController = ApiSelectionController.init();
+
+    var resourceListController = ResourceListController.init({baseUrl: "http://swagr.api.wordnik.com/v4/list.json"});
 
 });
 

src/main/html/style/chosen.css

@@ -0,0 +1,338 @@
+div.chzn-container {
+  font-size: 13px;
+  position: relative;
+}
+
+div.chzn-container input {
+  background: #fff;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  border: 1px solid #aaa;
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0px;
+  padding: 4px 5px;
+  outline: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
+}
+div.chzn-container textarea:focus {
+  border-color: #058cf5;
+  -moz-box-shadow: 0px 0px 3px #aaa;
+  -webkit-box-shadow: 0px 0px 3px #aaa;
+  box-shadow: 0px 0px 3px #aaa;
+}
+
+
+div.chzn-container div.chzn-drop {
+  background: #FFF;
+  border: 1px solid #aaa;
+  border-width: 0 1px 1px;
+  left: 0;
+  position: absolute;
+  top: 29px;
+  -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  z-index: 20;
+}
+div.chzn-container-single div.chzn-drop {
+  -moz-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0 0 4px 4px;
+  -o-border-radius: 0 0 4px 4px;
+  -ms-border-radius: 0 0 4px 4px;
+  -khtml-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+
+
+/* SINGLE */
+div.chzn-container a.chzn-single {
+  background: #ffffff;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+  background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
+  background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
+  background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
+  border: 1px solid #aaa;
+  display: block;
+  overflow: hidden;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  height: 25px;
+  color: #444;
+  line-height: 26px;
+  padding: 0px 0px 0px 8px;
+  position: relative;
+  text-decoration: none;
+  z-index: 19;
+  white-space: nowrap;
+}
+div.chzn-container a.chzn-single span {
+  display: block;
+  margin-right: 26px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+div.chzn-container a.chzn-single div {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  -o-border-top-right-radius: 4px;
+  -ms-border-top-right-radius: 4px;
+  -khtml-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -o-border-bottom-right-radius: 4px;
+  -ms-border-bottom-right-radius: 4px;
+  -khtml-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background: #ccc;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+  background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
+  background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
+  border-left: 1px solid #aaa;
+  display: block;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+}
+div.chzn-container a.chzn-single div b {
+  background: url('chosen-sprite.png') no-repeat 0 1px;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+div.chzn-container div.chzn-search {
+  padding: 3px 4px;
+  margin: 0px;
+  white-space: nowrap;
+}
+div.chzn-container div.chzn-search input {
+  background: url('chosen-sprite.png') no-repeat 97% -35px, #ffffff;
+  background: url('chosen-sprite.png') no-repeat 97% -35px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background: url('chosen-sprite.png') no-repeat 97% -35px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background: url('chosen-sprite.png') no-repeat 97% -35px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  background: linear-gradient(top, #ffffff 85%,#eeeeee 99%)
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  -o-border-radius: 0px;
+  -ms-border-radius: 0px;
+  -khtml-border-radius: 0px;
+  border-radius: 0px;
+  margin: 1px 0;
+  outline: 0;
+}
+
+
+/* Multi */
+div.chzn-container ul.chzn-choices {
+  background: #fff;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  margin: 0;
+  cursor: text;
+  border: 1px solid #aaa;
+  overflow: hidden;
+  height: auto !important;
+  height: 1%;
+  padding: 0;
+  position: relative;
+}
+div.chzn-container ul.chzn-choices:focus {
+  border-color: #058cf5;
+  -moz-box-shadow: 0px 0px 5px #999;
+  -webkit-box-shadow: 0px 0px 5px #999;
+  box-shadow: 0px 0px 5px #999;
+}
+div.chzn-container ul.chzn-choices li {
+  float: left;
+  list-style-type: none;
+  margin: 0px;
+}
+div.chzn-container ul.chzn-choices li.search-field {
+  margin: 0px;
+  white-space: nowrap;
+  padding: 0px;
+}
+div.chzn-container ul.chzn-choices li.search-field input {
+  color: #666;
+  background: transparent !important;
+  border: 0px !important;
+  padding: 5px;
+  margin: 1px 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+div.chzn-container ul.chzn-choices li.search-field input.default {
+  color: #999;
+}
+div.chzn-container ul.chzn-choices li.search-choice {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #e4e4e4;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
+  background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
+  background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
+  background: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
+  background: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
+  color: #333;
+  border: 1px solid #b4b4b4;
+  line-height: 13px;
+  padding: 3px 19px 3px 6px;
+  position: relative;
+  margin: 3px 0px 3px 5px;
+}
+div.chzn-container ul.chzn-choices li.search-choice span {
+  cursor: default;
+}
+div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus {
+  background: #d4d4d4;
+}
+div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
+  position: absolute;
+  right: 5px;
+  top: 6px;
+  display: block;
+  width: 8px;
+  height: 9px;
+  font-size: 1px;
+  background: url(chosen-sprite.png) right top no-repeat;
+}
+div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover {
+  background-position: right -9px;
+}
+div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus a.search-choice-close {
+  background-position: right -9px;
+}
+
+
+/* Results */
+div.chzn-container ul.chzn-results {
+  margin: 0 4px 4px 0;
+  max-height: 190px;
+  padding: 0 0 0 4px;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 20;
+}
+div.chzn-container-multi ul.chzn-results {
+  margin: -1px 0 0;
+  padding: 0;
+}
+div.chzn-container-multi ul.chzn-results li {
+  border-left: 0px !important;
+  border-right: 0px !important;
+}
+div.chzn-container ul.chzn-results li {
+  line-height: 80%;
+  padding: 7px 7px 8px;
+  z-index: 22;
+  margin: 0;
+  list-style-type: none;
+}
+div.chzn-container ul.chzn-results li.active-result {
+  cursor: pointer;
+}
+div.chzn-container ul.chzn-results li em {
+  font-style: normal;
+  background: #FEFFDC;
+}
+div.chzn-container ul.chzn-results li.highlighted {
+  background: #3875d7;
+  color: #fff;
+}
+div.chzn-container ul.chzn-results li.highlighted em {
+  background: transparent;
+}
+div.chzn-container ul.chzn-results li.no-results {
+  background: #F4F4F4;
+}
+div.chzn-container ul.chzn-results li.group-result {
+  cursor: default;
+  color: #999;
+  font-weight: bold;
+}
+div.chzn-container ul.chzn-results li.group-option {
+  padding-left: 20px;
+}
+
+div.chzn-container-multi div.chzn-drop li.result-selected {
+  display: none;
+}
+
+
+
+/* Active */
+div.chzn-container-active a.chzn-single {
+  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  border: 1px solid #5897fb;
+}
+div.chzn-container-active a.chzn-single-with-drop {
+  border: 1px solid #aaa;
+  border-width: 1px 1px 1px;
+  -moz-box-shadow:  0px 1px 0px #FFF inset;
+  -webkit-box-shadow:  0px 1px 0px #FFF inset;
+  box-shadow: 0px 1px 0px #FFF inset;
+  background: #EEE;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
+  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+  -webkit-border-bottom-left-radius: 0px;
+  -webkit-border-bottom-right-radius: 0px;
+  -moz-border-radius-bottomleft: 0px;
+  -moz-border-radius-bottomright: 0px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+div.chzn-container-active a.chzn-single-with-drop div {
+  background: transparent;
+  border-left: none;
+}
+div.chzn-container-active a.chzn-single-with-drop div b {
+  background-position: -18px 1px;
+}
+div.chzn-container-active ul.chzn-choices {
+  z-index: 21;
+  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  border: 1px solid #5897fb;
+}
+div.chzn-container-active ul.chzn-choices input {
+  color: #111 !important;
+}

src/main/html/style/main.css

@@ -0,0 +1,20 @@
+.header-input:focus {
+    outline: 1px none;
+    border: #ccc solid 1px;
+}
+
+.header-input {
+    border: #969696 solid 1px;
+
+    margin-top: 4px;
+    padding-left: 2px;
+
+    height: 20px;
+    resize: none;
+
+    color: #eee;
+
+    font-size: 14px;
+    background: #666;
+
+}