html/js page skelton

13 年前 · f971b0629a
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,17 @@
 wordnik*.zip
 *.ipr
 *.iml
 *.iws
 dist/
 lib/*.jar
 META-INF/
 web/
 index
 lib/*.zip
 dk/
 index_dict
 logs
 src/main/java/com/wordnik/env/Version.scala
 lib/*.pom
 version.properties
 reports/*
--- a/bin/compress.sh
+++ b/bin/compress.sh
@@ -0,0 +1,39 @@
 JSDIR="../src/main/html/javascript"
 CSSDIR="../src/main/html/style"

 YUI_COMPRESSOR="../build/yuicompressor-2.4.6.jar"

 echo "1. 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 \
 $JSDIR/jquery.ba-bbq.min.js \
 $JSDIR/jquery.slideto.min.js \
 $JSDIR/jquery.tmpl.js \
 $JSDIR/jquery.wiggle.min.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 \
 $CSSDIR/ie6.css \
 $CSSDIR/screen.css > $CSSDIR/app.ext.css

 cat $CSSDIR/main.css > $CSSDIR/app.css

 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"
 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"
 rm -f $JSDIR/app.js
 rm -f $JSDIR/app.ext.js
 rm -f $CSSDIR/app.css
 rm -f $CSSDIR/app.ext.css
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/二进制
+++ b/二进制
--- a/src/main/html/index.html
+++ b/src/main/html/index.html
@@ -1,26 +1,104 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <title>Wordnik Developer</title>
    <title>Swagger Api Explorer</title>
    <meta charset="utf-8">

    <link rel="stylesheet" media="screen" href="style/main.css">
    <link rel="stylesheet" type="text/css" media="screen"
          href="style/smoothness/jquery-ui-1.8.14.custom.css">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png">
    <script src="javascript/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/spine.js" type="text/javascript" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" media="screen"
          href="style/smoothness/jquery-ui-1.8.14.custom.min.css">

    <link href="style/app.ext.min.css" media="screen, projection" rel="stylesheet" type="text/css"/>
    <!--<link href="style/app.min.css" media="screen, projection" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" media="screen" href="style/main.css">

    <script src="javascript/app.ext.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="javascript/swagger-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/swagger-service-sample.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/swagger-ui.js" type="text/javascript" charset="utf-8"></script>

 </head>
 <body>
 <div id='header'>
    <div class='container'>
        <h1 id='logo'>
            <a href="/"><span>api</span><span class="light">&nbsp;explorer</span></a>
        </h1>
    </div>
 </div>
 <div id='content'>
    <div class='container'>
        <div class='fullwidth_column'>
            <div class='heading_with_menu'>
                <h1>
                    You know my methods. Apply them.
                </h1>

 <script id="userTemplate" type="text/x-jquery-tmpl">
            </div>

            <ul id="resources" class='resources'>

            </ul>
            <p>
                The latest API base URL is
 <span class='code'> 
 http://api.wordnik.com/v4
 </span>
            </p>
        </div>

    </div>
 </div>
 <div id='footer'>
    <div class='container'>
        <ul>
            <li><a href="http://www.wordnik.com" class="strong">wordnik.com</a></li>
            <li><a href="http://twitter.com/wordnik">@wordnik</a></li>
            <li><a href="http://twitter.com/wordnikapi">@wordnikapi</a></li>
            <li><a href="http://github.com/wordnik">github.com/wordnik</a></li>
            <li><a href="irc://irc.freenode.net/wordnik">#wordnik on IRC</a></li>
            <li><a href="http://www.wordnik.com/about">about</a></li>
            <li><a href="http://smartwords.wordnik.com/">smartwords</a></li>
            <li><a href="http://blog.wordnik.com">blog</a></li>
            <li><a href="/terms">terms</a></li>
        </ul>
    </div>
 </div>

 <script id="resourceTemplate" type="text/x-jquery-tmpl">
    <li class='resource' id='resource_${name}'>
        <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="${baseUrl}${path_json}.json">Raw</a>
                </li>
            </ul>
        </div>
        <ul class='endpoints' id='${name}_endpoint_list' style='display:none'>
        </ul>
    </li>
 </script>

 <script id="endpointTemplate" type="text/x-jquery-tmpl">
    <li class='endpoint'>
        <ul class='operations'>
        </ul>
    </li>
 </script>

 <body>
 </body>

 </html>

--- a/src/main/html/javascript/app.ext.min.js
+++ b/src/main/html/javascript/app.ext.min.js
--- a/+ 0
+++ b/+ 0
--- a/src/main/html/javascript/doc.js
+++ b/src/main/html/javascript/doc.js
@@ -0,0 +1,158 @@
 $(function() {

 	// Helper function for vertically aligning DOM elements
 	// http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
 	$.fn.vAlign = function() {
 		return this.each(function(i){
 		var ah = $(this).height();
 		var ph = $(this).parent().height();
 		var mh = (ph - ah) / 2;
 		$(this).css('margin-top', mh);
 		});
 	};

 	$.fn.stretchFormtasticInputWidthToParent = function() {
 		return this.each(function(i){
 		var p_width = $(this).closest("form").innerWidth();
 		var p_padding = parseInt($(this).closest("form").css('padding-left') ,10) + parseInt($(this).closest("form").css('padding-right'), 10);
 		var this_padding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10);
 		$(this).css('width', p_width - p_padding - this_padding);
 		});
 	};

 	$('form.formtastic li.string input, form.formtastic textarea').stretchFormtasticInputWidthToParent();

 	// Vertically center these paragraphs
 	// Parent may need a min-height for this to work..
 	$('ul.downplayed li div.content p').vAlign();

 	// When a sandbox form is submitted..
 	$("form.sandbox").submit(function(){

 		var error_free = true;

 		// Cycle through the forms required inputs
 		$(this).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() == '') {
 				$(this).addClass('error');
 				$(this).wiggle();
 				error_free = false;
 			}

 		});

 		return error_free;
 	});

 	// Handle URL fragments
 	Docs.shebang();

 });

 function clippyCopiedCallback(a) {
  $('#api_key_copied').fadeIn().delay(1000).fadeOut();

  // var b = $("#clippy_tooltip_" + a);
  // b.length != 0 && (b.attr("title", "copied!").trigger("tipsy.reload"), setTimeout(function() {
  //   b.attr("title", "copy to clipboard")
  // },
  // 500))
 }

 // Logging function that accounts for browsers that don't have window.console
 function log(m) {
 	if (window.console) console.log(m);
 }

 var Docs = {

 	shebang: function() {

 		// If shebang has an operation nickname in it..
 		// e.g. /docs/#!/words/get_search
 		var fragments = $.param.fragment().split('/');
 		fragments.shift(); // get rid of the bang

 		switch (fragments.length) {
 			case 1:
 				// Expand all operations for the resource and scroll to it
 				log('shebang resource:' + fragments[0]);
 				var dom_id = 'resource_' + fragments[0];

 				Docs.expandEndpointListForResource(fragments[0]);
 				$("#"+dom_id).slideto({highlight: false});
 				break;
 			case 2:
 				// Refer to the endpoint DOM element, e.g. #words_get_search
 				log('shebang endpoint: ' + fragments.join('_'));

 				var li_dom_id = fragments.join('_');
 				var li_content_dom_id = li_dom_id + "_content";

 				Docs.expandOperation($('#'+li_content_dom_id));
 				$('#'+li_dom_id).slideto({highlight: false});
 				break;
 		}

 	},

 	toggleEndpointListForResource: function(resource) {
 		var elem = $('li#resource_' + resource + ' ul.endpoints');
 		if (elem.is(':visible')) {
 			Docs.collapseEndpointListForResource(resource);
 		} else {
 			Docs.expandEndpointListForResource(resource);
 		}
 	},

 	// Expand resource
 	expandEndpointListForResource: function(resource) {
 		$('#resource_' + resource).addClass('active');

 		var elem = $('li#resource_' + resource + ' ul.endpoints');
 		elem.slideDown();
 	},

 	// Collapse resource and mark as explicitly closed
 	collapseEndpointListForResource: function(resource) {
 		$('#resource_' + resource).removeClass('active');

 		var elem = $('li#resource_' + resource + ' ul.endpoints');
 		elem.slideUp();
 	},

 	expandOperationsForResource: function(resource) {
 		// Make sure the resource container is open..
 		Docs.expandEndpointListForResource(resource);
 		$('li#resource_' + resource + ' li.operation div.content').each(function() {
 			Docs.expandOperation($(this));
 		});
 	},

 	collapseOperationsForResource: function(resource) {
 		// Make sure the resource container is open..
 		Docs.expandEndpointListForResource(resource);
 		$('li#resource_' + resource + ' li.operation div.content').each(function() {
 			Docs.collapseOperation($(this));
 		});
 	},

 	expandOperation: function(elem) {
 		elem.slideDown();
 	},

 	collapseOperation: function(elem) {
 		elem.slideUp();
 	},

 	toggleOperationContent: function(dom_id) {
 		var elem = $('#' + dom_id);
 		(elem.is(':visible')) ? Docs.collapseOperation(elem) : Docs.expandOperation(elem);
 	}

 };
--- a/src/main/html/javascript/jquery.ba-bbq.min.js
+++ b/src/main/html/javascript/jquery.ba-bbq.min.js
@@ -0,0 +1,18 @@
 /*
 * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
 * http://benalman.com/projects/jquery-bbq-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
 (function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M<N?O[P]||(R[M+1]&&isNaN(R[M+1])?{}:[]):J}}else{if($.isArray(H[P])){H[P].push(J)}else{if(H[P]!==i){H[P]=[H[P],J]}else{H[P]=J}}}}else{if(P){H[P]=F?i:""}}});return H};function z(H,F,G){if(F===i||typeof F==="boolean"){G=F;F=a[H?D:A]()}else{F=E(F)?F.replace(H?w:x,""):F}return l(F,G)}l[A]=B(z,0);l[D]=v=B(z,1);$[y]||($[y]=function(F){return $.extend(C,F)})({a:k,base:k,iframe:t,img:t,input:t,form:"action",link:k,script:t});j=$[y];function s(I,G,H,F){if(!E(H)&&typeof H!=="object"){F=H;H=G;G=i}return this.each(function(){var L=$(this),J=G||j()[(this.nodeName||"").toLowerCase()]||"",K=J&&L.attr(J)||"";L.attr(J,a[I](K,H,F))})}$.fn[A]=B(s,A);$.fn[D]=B(s,D);b.pushState=q=function(I,F){if(E(I)&&/^#/.test(I)&&F===i){F=2}var H=I!==i,G=c(p[g][k],H?I:{},H?F:2);p[g][k]=G+(/#/.test(G)?"":"#")};b.getState=u=function(F,G){return F===i||typeof F==="boolean"?v(F):v(G)[F]};b.removeState=function(F){var G={};if(F!==i){G=u();$.each($.isArray(F)?F:arguments,function(I,H){delete G[H]})}q(G,2)};e[d]=$.extend(e[d],{add:function(F){var H;function G(J){var I=J[D]=c();J.getState=function(K,L){return K===i||typeof K==="boolean"?l(I,K):l(I,L)[K]};H.apply(this,arguments)}if($.isFunction(F)){H=F;return G}else{H=F.handler;F.handler=G}}})})(jQuery,this);
 /*
 * jQuery hashchange event - v1.2 - 2/11/2010
 * http://benalman.com/projects/jquery-hashchange-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
 (function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);
--- a/src/main/html/javascript/jquery.slideto.min.js
+++ b/src/main/html/javascript/jquery.slideto.min.js
@@ -0,0 +1 @@
 (function(b){b.fn.slideto=function(a){a=b.extend({slide_duration:"slow",highlight_duration:3E3,highlight:true,highlight_color:"#FFFF99"},a);return this.each(function(){obj=b(this);b("body").animate({scrollTop:obj.offset().top},a.slide_duration,function(){a.highlight&&b.ui.version&&obj.effect("highlight",{color:a.highlight_color},a.highlight_duration)})})}})(jQuery);
--- a/src/main/html/javascript/jquery.wiggle.min.js
+++ b/src/main/html/javascript/jquery.wiggle.min.js
@@ -0,0 +1,8 @@
 /*
 jQuery Wiggle
 Author: WonderGroup, Jordan Thomas
 URL: http://labs.wondergroup.com/demos/mini-ui/index.html
 License: MIT (http://en.wikipedia.org/wiki/MIT_License)
 */
 jQuery.fn.wiggle=function(o){var d={speed:50,wiggles:3,travel:5,callback:null};var o=jQuery.extend(d,o);return this.each(function(){var cache=this;var wrap=jQuery(this).wrap('<div class="wiggle-wrap"></div>').css("position","relative");var calls=0;for(i=1;i<=o.wiggles;i++){jQuery(this).animate({left:"-="+o.travel},o.speed).animate({left:"+="+o.travel*2},o.speed*2).animate({left:"-="+o.travel},o.speed,function(){calls++;if(jQuery(cache).parent().hasClass('wiggle-wrap')){jQuery(cache).parent().replaceWith(cache);}
 if(calls==o.wiggles&&jQuery.isFunction(o.callback)){o.callback();}});}});};
--- a/src/main/html/javascript/swagger-service-sample.js
+++ b/src/main/html/javascript/swagger-service-sample.js
@@ -0,0 +1,24 @@
 jQuery(function($) {
 	// create and initialize SwaggerService
 	var swaggerService = new SwaggerService();
 	swaggerService.init();
 	
 	// Create convenience references to Spine models
 	var ApiResource = swaggerService.ApiResource();

 	// Register a callback for when apis are loaded
 	ApiResource.bind("refresh", apisLoaded);
 	
 	function apisLoaded() {
        for(var i = 0; i < ApiResource.all().length; i++) {
            var apiResource = ApiResource.all()[i];
            log("---------------------------------------------");
            log("------------- apiResource : " + apiResource.name);
            apiResource.apiList.logAll();
            apiResource.modelList.logAll();
        }

 		if (window.console) console.log("apis loaded");
 	}
 	
 });
--- a/src/main/html/javascript/swagger-service.js
+++ b/src/main/html/javascript/swagger-service.js
@@ -0,0 +1,305 @@

 function SwaggerService(hostUrl) {
 	// constants
 	var apiHost = hostUrl || "http://swagr.api.wordnik.com/v4";

 	// utility functions
 	function log(m) {
 	    if (window.console) console.log(m);
 	}

 	function error(m) {
 	    if (window.console) console.log("ERROR: " + m);
 	}
 	
    // make some models public
 	this.ApiResource = function() {return ApiResource;};

 	// Model: ApiResource
 	var ApiResource = Spine.Model.setup("ApiResource", ["name", "baseUrl", "path", "path_json", "path_xml", "description", "apiLists", "modelList"]);
    ApiResource.include({
 		path_json: null,
 		path_xml: null,
 		
 		init: function(atts) {
 	        if (atts) this.load(atts);
 			this.path_json = this.path + ".json";
 			this.path_xml = this.path + ".xml";
            this.baseUrl = apiHost;
            this.name = this.path.substr(0, this.path.length);
            this.apiList = Api.sub();
            this.modelList = ApiModel.sub();
 		},

        addApis: function(apiObjects) {
            this.apiList.createAll(apiObjects);
        },

        addModel: function(modelObject) {
            this.modelList.create(modelObject);
        },
 		
 		toString: function() {
 			return this.path_json +  ": " + this.description;
 		}
    });

 	// Model: Api
 	var Api = Spine.Model.setup("Api", ["baseUrl", "path", "path_json", "path_xml", "name", "description", "operations", "path_json", "path_xml"]);
    Api.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);

            this.baseUrl = apiHost;

            var secondPathSeperatorIndex = this.path.indexOf("/", 1);
            if(secondPathSeperatorIndex > 0) {
 				var prefix = this.path.substr(0, secondPathSeperatorIndex);
 				var suffix = this.path.substr(secondPathSeperatorIndex, this.path.length);
 				// log(this.path + ":: " + prefix + "..." + suffix);

 				this.path_json = prefix + ".json" + suffix;
 				this.path_xml = prefix + ".xml" + suffix;;

                if(this.path.indexOf("/") == 0) {
                    this.name = this.path.substr(1, secondPathSeperatorIndex);
                } else {
                    this.name = this.path.substr(0, secondPathSeperatorIndex);
                }
 			} else {
 				this.path_json = this.path + ".json";
 				this.path_xml = this.path + ".xml";

                if(this.path.indexOf("/") == 0) {
                    this.name = this.path.substr(1, this.path.length);
                } else {
                    this.name = this.path.substr(0, this.path.length);
                }
 			}

 	        var value  = this.operations;
 	        this.operations = ApiOperation.sub();
 	        if (value) this.operations.refresh(value);

            for(var i = 0; i < this.operations.all().length; i++) {
                var operation = this.operations.all()[i];
                operation.apiName = this.name;
                operation.path = this.path;
                operation.path_json = this.path_json;
                operation.path_xml = this.path_xml;
            }
 		},
 		
 		toString: function() {
 			var opsString = "";
 			for(var i = 0; i < this.operations.all().length; i++) {
 				var e = this.operations.all()[i];
 				
 				if(opsString.length > 0)
 					opsString += ", ";

 				opsString += e.toString();
 			}
 			return this.path_json +  "- " + this.operations.all().length + " operations: " + opsString;
 		}
 		
    });

 	// Model: ApiOperation
 	var ApiOperation = Spine.Model.setup("ApiOperation", ["baseUrl", "path", "path_json", "path_xml", "summary", "deprecated", "open", "httpMethod", "nickname", "responseClass", "parameters", "apiName"]);
    ApiOperation.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);

            this.baseUrl = apiHost;

 	        var value  = this.parameters;
 	        this.parameters = ApiParameter.sub();
 	        if (value) this.parameters.refresh(value);
 		},

 		toString: function() {
 			var paramsString = "(";
 			for(var i = 0; i < this.parameters.all().length; i++) {
 				var e = this.parameters.all()[i];
 				
 				if(paramsString.length > 1)
 					paramsString += ", ";

 				paramsString += e.toString();
 			}
 			paramsString += ")";

 			return "{" + this.nickname  + paramsString + ": " + this.summary + "}";
 		}
 		
    });

 	// Model: ApiParameter
 	var ApiParameter = Spine.Model.setup("ApiParameter", ["name", "description", "required", "dataType", "allowableValues", "paramType", "allowMultiple"]);
 	ApiParameter.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);
 		},

 		toString: function() {
 			if(this.allowableValues && this.allowableValues.length > 0)
 				return this.name +  ": " + this.dataType + " [" + this.allowableValues + "]";
 			else
 				return this.name +  ": " + this.dataType;
 		}
 		
    });

 	// Model: ApiModel
 	var ApiModel = Spine.Model.setup("ApiModel", ["id", "fields"]);;
 	ApiModel.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);
 			
 			if(!this.fields) {
 		        var propertiesListObject  = this.properties;
 		        this.fields = ApiModelProperty.sub();

 				for(var propName in propertiesListObject) {
 					if(propName != "parent") {
 						var p = propertiesListObject[propName];
 						p.name = propName;
 						p.id = Spine.guid();
 						// log(p);

 						this.fields.create(p);
 					}
 				}
 				//log("got " + this.fields.count() + " fields for " + this.id);
 			}
 		},

 		toString: function() {
 			var propsString = "";
 			
 			propsString += "(";
 			for(var i = 0; i < this.fields.all().length; i++) {
 				var e = this.fields.all()[i];
 				
 				if(propsString.length > 1)
 					propsString += ", ";
 			
 				propsString += e.toString();
 			}
 			propsString += ")";

 			if(this.required)
 				return this.id + " (required): " + propsString;
 			else
 				return this.id +  ": " + propsString;
 		}
 		
    });


 	// Model: ApiModelProperty
 	var ApiModelProperty = Spine.Model.setup("ApiModelProperty", ["name", "required", "dataType"]);
 	ApiModelProperty.include({
 		init: function(atts) {
 	        if (atts) this.load(atts);

 			if(!this.dataType) {
 				if(atts.type == "any")
 					this.dataType = "object";
 				else if(atts.type == "array") {
 					if(atts.items) {
 						if(atts.items.$ref) {
 							this.dataType = "array[" + atts.items.$ref + "]";
 						} else {
 							this.dataType = "array[" + atts.items.type + "]"
 						}
 					} else {
 						this.dataType = "array";
 					}
 				} else
 					this.dataType = atts.type;
 			}
 		},

 		toString: function() {
 			if(this.required)
 				return this.name +  ": " + this.dataType + " (required)";
 			else
 				return this.name +  ": " + this.dataType;
 		}
 		
    });

 	// Controller
    var ModelController = Spine.Controller.create({
 		countLoaded: 0,
 	    proxied: ["fetchResources", "loadResources", "apisLoaded", "modelsLoaded"],
 	
        init: function() {
 			log("ModelController.init");

 			this.fetchEndpoints();
        },

 		fetchEndpoints: function() {
            var controller = this;

            $.getJSON(apiHost + "/list.json", function(response) {
 				//log(response);
 				ApiResource.createAll(response.apis);
                controller.fetchResources();
 			});
 		},
 		
 		fetchResources: function() {
 			//log("fetchResources");
 			//ApiResource.logAll();

 			for(var i = 0; i < ApiResource.all().length; i++) {
 				var apiResource = ApiResource.all()[i];
                this.fetchResource(apiResource);
 			}
 		},

        fetchResource: function(apiResource) {
            var controller = this;
            $.getJSON(apiHost + apiResource.path_json, function(response) {
                controller.loadResources(response, apiResource);
            });
        },

 		loadResources: function(response, apiResource) {
 			try {
 				this.countLoaded++;
 //				log(response);

 				apiResource.addApis(response.apis);

 				//log(response.models);
 				if(response.models) {
 					// log("response.models.length = " + response.models.length);

 					for(var modeName in response.models) {
 						var m = response.models[modeName];
 						// log("creating " + m.id);

                        apiResource.addModel(m);
 //						apiResource.modelList.create(m);
 					}
 				}
 			} finally {
 				if(this.countLoaded == ApiResource.count()) {
 					log("all models/api loaded");
 					ApiResource.trigger("refresh");
 				}
 			}
 		}

    });

   	this.init = function() {
 		this.modelController = ModelController.init();
 	}
 };

--- a/+ 0
+++ b/+ 0
--- a/src/main/html/style/app.ext.min.css
+++ b/src/main/html/style/app.ext.min.css
--- a/+ 0
+++ b/+ 0
--- a/src/main/html/style/ie.css
+++ b/src/main/html/style/ie.css
@@ -0,0 +1,5 @@
 /* Welcome to Compass. Use this file to write IE specific override styles.
 * Import this file using the following HTML or equivalent:
 * <!--[if IE]>
 *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
 * <![endif]--> */
--- a/src/main/html/style/ie6.css
+++ b/src/main/html/style/ie6.css
@@ -0,0 +1,8 @@
 /* line 1, ../../../app/stylesheets/ie6.scss */
 a.button, form button {
  background-image: none !important;
 }
 /* line 3, ../../../app/stylesheets/ie6.scss */
 a.button:hover, a.button:active, a.button:focus, form button:hover, form button:active, form button:focus {
  background-image: none !important;
 }
--- a/src/main/html/style/screen.css
+++ b/src/main/html/style/screen.css
--- a/src/main/html/style/smoothness/jquery-ui-1.8.14.custom.min.css
+++ b/src/main/html/style/smoothness/jquery-ui-1.8.14.custom.min.css