dat.gui/build/gui.html

<!-- <script src="../platform/platform.js"></script> -->

<!-- src -->
<script>(function( scope ) {

    var Gui = function( params ) {

        if ( !ready ) {
            Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
        }

        params = params || {};

        var panel = document.createElement( 'gui-panel' );

        panel.autoPlace = params.autoPlace !== false;
        
        if ( panel.autoPlace ) {
            document.body.appendChild( panel );
        }

        return panel;

    };


    // Register custom controllers
    // ------------------------------- 

    var controllers = {};

    Gui.register = function( elementName, test ) {

        controllers[ elementName ] = test;

    };


    // Returns a controller based on a value
    // ------------------------------- 

    Gui.getController = function( value ) {

        for ( var type in controllers ) {

            var test = controllers[ type ];

            if ( test( value ) ) {
        
                return document.createElement( type );

            }

        }
        
    };


    // Gui ready handler ... * shakes fist at polymer *
    // ------------------------------- 
    
    var ready = false;
    var readyHandlers = [];
    
    document.addEventListener( 'polymer-ready', function() {

        ready = true;
        readyHandlers.forEach( function( fnc ) {

            fnc();

        } );

    } );

    Gui.ready = function( fnc ) {

        ready ? fnc() : readyHandlers.push( fnc );

    };


    // Error
    // ------------------------------- 

    Gui.error = function() {
        var args = Array.prototype.slice.apply( arguments );
        args.unshift( 'dat-gui ::' );
        console.error.apply( console, args );
    }

    Gui.warn = function() {
        var args = Array.prototype.slice.apply( arguments );
        args.unshift( 'dat-gui ::' );
        console.warn.apply( console, args );
    }
    

    // Old namespaces
    // ------------------------------- 

    var dat = {};
 
    dat.gui = {};
    dat.gui.GUI = Gui;
    dat.GUI = dat.gui.GUI;

    dat.color = {};
    dat.color.Color = function() {};

    dat.dom = {};
    dat.dom.dom = function() {};

    dat.controllers = {};
    dat.controllers.Controller              = constructor( 'controller-base' );
    dat.controllers.NumberController        = constructor( 'controller-number' );
    dat.controllers.FunctionController      = constructor( 'controller-function' );
    dat.controllers.ColorController         = constructor( 'controller-color' );
    dat.controllers.BooleanController       = constructor( 'controller-boolean' );
    dat.controllers.OptionController        = constructor( 'controller-option' );

    dat.controllers.NumberControllerBox     = dat.controllers.NumberController;
    dat.controllers.NumberControllerSlider  = dat.controllers.NumberController;
    
    function constructor( elementName ) {
        
        return function( object, path ) {
            var el = document.createElement( elementName );
            el.watch( object, path );
            return el;
        };

    }


    // Export
    // ------------------------------- 

    scope.dat = dat;
    scope.Gui = Gui;


})( this );

</script>

<!-- base elements -->
<div hidden><!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<style shim-shadowdom="">
/*******************************
          Flex Layout
*******************************/

html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

html /deep/ [layout][horizontal] {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

html /deep/ [layout][horizontal][reverse] {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

html /deep/ [layout][vertical] {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

html /deep/ [layout][vertical][reverse] {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

html /deep/ [layout][wrap] {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

html /deep/ [layout][wrap-reverse] {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

html /deep/ [flex] {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

html /deep/ [flex][auto] {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

html /deep/ [flex][none] {
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
}

html /deep/ [flex][one] {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

html /deep/ [flex][two] {
  -ms-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

html /deep/ [flex][three] {
  -ms-flex: 3;
  -webkit-flex: 3;
  flex: 3;
}

html /deep/ [flex][four] {
  -ms-flex: 4;
  -webkit-flex: 4;
  flex: 4;
}

html /deep/ [flex][five] {
  -ms-flex: 5;
  -webkit-flex: 5;
  flex: 5;
}

html /deep/ [flex][six] {
  -ms-flex: 6;
  -webkit-flex: 6;
  flex: 6;
}

html /deep/ [flex][seven] {
  -ms-flex: 7;
  -webkit-flex: 7;
  flex: 7;
}

html /deep/ [flex][eight] {
  -ms-flex: 8;
  -webkit-flex: 8;
  flex: 8;
}

html /deep/ [flex][nine] {
  -ms-flex: 9;
  -webkit-flex: 9;
  flex: 9;
}

html /deep/ [flex][ten] {
  -ms-flex: 10;
  -webkit-flex: 10;
  flex: 10;
}

html /deep/ [flex][eleven] {
  -ms-flex: 11;
  -webkit-flex: 11;
  flex: 11;
}

html /deep/ [flex][twelve] {
  -ms-flex: 12;
  -webkit-flex: 12;
  flex: 12;
}

/* alignment in cross axis */

html /deep/ [layout][start] {
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

html /deep/ [layout][center], html /deep/ [layout][center-center] {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

html /deep/ [layout][end] {
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

/* alignment in main axis */

html /deep/ [layout][start-justified] {
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

html /deep/ [layout][end-justified] {
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

html /deep/ [layout][around-justified] {
  -ms-flex-pack: around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

html /deep/ [layout][justified] {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* self alignment */

html /deep/ [self-start] {
  -ms-align-self: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

html /deep/ [self-center] {
  -ms-align-self: center;
  -webkit-align-self: center;
  align-self: center;
}

html /deep/ [self-end] {
  -ms-align-self: flex-end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
}

html /deep/ [self-stretch] {
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
}

/*******************************
          Other Layout
*******************************/

html /deep/ [block] {
  display: block;
}

/* ie support for hidden */
html /deep/ [hidden] {
  display: none !important;
}

html /deep/ [relative] {
  position: relative;
}

html /deep/ [fit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body[fullbleed] {
  margin: 0;
  height: 100vh;
}

/*******************************
            Other
*******************************/

html /deep/ [segment], html /deep/ segment {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1em 0.5em;
  padding: 1em;
  background-color: white;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 5px 5px;
}

</style>

<script>/**
 * @license
 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
// @version: 0.3.5
window.PolymerGestures={},function(a){var b=!1,c=document.createElement("meta");if(c.createShadowRoot){var d=c.createShadowRoot(),e=document.createElement("span");d.appendChild(e),c.addEventListener("testpath",function(a){a.path&&(b=a.path[0]===e),a.stopPropagation()});var f=new CustomEvent("testpath",{bubbles:!0});document.head.appendChild(c),e.dispatchEvent(f),c.parentNode.removeChild(c),d=e=null}c=null;var g={shadow:function(a){return a?a.shadowRoot||a.webkitShadowRoot:void 0},canTarget:function(a){return a&&Boolean(a.elementFromPoint)},targetingShadow:function(a){var b=this.shadow(a);return this.canTarget(b)?b:void 0},olderShadow:function(a){var b=a.olderShadowRoot;if(!b){var c=a.querySelector("shadow");c&&(b=c.olderShadowRoot)}return b},allShadows:function(a){for(var b=[],c=this.shadow(a);c;)b.push(c),c=this.olderShadow(c);return b},searchRoot:function(a,b,c){var d,e;return a?(d=a.elementFromPoint(b,c),d?e=this.targetingShadow(d):a!==document&&(e=this.olderShadow(a)),this.searchRoot(e,b,c)||d):void 0},owner:function(a){if(!a)return document;for(var b=a;b.parentNode;)b=b.parentNode;return b.nodeType!=Node.DOCUMENT_NODE&&b.nodeType!=Node.DOCUMENT_FRAGMENT_NODE&&(b=document),b},findTarget:function(a){if(b&&a.path)return a.path[0];var c=a.clientX,d=a.clientY,e=this.owner(a.target);return e.elementFromPoint(c,d)||(e=document),this.searchRoot(e,c,d)},findTouchAction:function(a){var c;if(b&&a.path){for(var d=a.path,e=0;e<d.length;e++)if(c=d[e],c.nodeType===Node.ELEMENT_NODE&&c.hasAttribute("touch-action"))return c.getAttribute("touch-action")}else for(c=a.target;c;){if(c.hasAttribute("touch-action"))return c.getAttribute("touch-action");c=c.parentNode||c.host}return"auto"},LCA:function(a,b){if(a===b)return a;if(a&&!b)return a;if(b&&!a)return b;if(!b&&!a)return document;if(a.contains&&a.contains(b))return a;if(b.contains&&b.contains(a))return b;var c=this.depth(a),d=this.depth(b),e=c-d;for(e>=0?a=this.walk(a,e):b=this.walk(b,-e);a&&b&&a!==b;)a=a.parentNode||a.host,b=b.parentNode||b.host;return a},walk:function(a,b){for(var c=0;a&&b>c;c++)a=a.parentNode||a.host;return a},depth:function(a){for(var b=0;a;)b++,a=a.parentNode||a.host;return b},deepContains:function(a,b){var c=this.LCA(a,b);return c===a},insideNode:function(a,b,c){var d=a.getBoundingClientRect();return d.left<=b&&b<=d.right&&d.top<=c&&c<=d.bottom}};a.targetFinding=g,a.findTarget=g.findTarget.bind(g),a.deepContains=g.deepContains.bind(g),a.insideNode=g.insideNode}(window.PolymerGestures),function(){function a(a){return"html /deep/ "+b(a)}function b(a){return'[touch-action="'+a+'"]'}function c(a){return"{ -ms-touch-action: "+a+"; touch-action: "+a+";}"}var d=["none","auto","pan-x","pan-y",{rule:"pan-x pan-y",selectors:["pan-x pan-y","pan-y pan-x"]},"manipulation"],e="",f="string"==typeof document.head.style.touchAction,g=!window.ShadowDOMPolyfill&&document.head.createShadowRoot;if(f){d.forEach(function(d){String(d)===d?(e+=b(d)+c(d)+"\n",g&&(e+=a(d)+c(d)+"\n")):(e+=d.selectors.map(b)+c(d.rule)+"\n",g&&(e+=d.selectors.map(a)+c(d.rule)+"\n"))});var h=document.createElement("style");h.textContent=e,document.head.appendChild(h)}}(),function(a){var b=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","pageX","pageY"],c=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0],d=function(){return function(){}},e={preventTap:d,makeBaseEvent:function(a,b){var c=document.createEvent("Event");return c.initEvent(a,b.bubbles||!1,b.cancelable||!1),c.preventTap=e.preventTap(c),c},makeGestureEvent:function(a,b){b=b||Object.create(null);for(var c,d=this.makeBaseEvent(a,b),e=0,f=Object.keys(b);e<f.length;e++)c=f[e],d[c]=b[c];return d},makePointerEvent:function(a,d){d=d||Object.create(null);for(var e,f=this.makeBaseEvent(a,d),g=0;g<b.length;g++)e=b[g],f[e]=d[e]||c[g];f.buttons=d.buttons||0;var h=0;return h=d.pressure?d.pressure:f.buttons?.5:0,f.x=f.clientX,f.y=f.clientY,f.pointerId=d.pointerId||0,f.width=d.width||0,f.height=d.height||0,f.pressure=h,f.tiltX=d.tiltX||0,f.tiltY=d.tiltY||0,f.pointerTyp
if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find function or filter: "+this.name);if(d?f=f.toModel:"function"==typeof f.toDOM&&(f=f.toDOM),"function"!=typeof f)return void console.error("Cannot find function or filter: "+this.name);for(var h=e||[],j=0;j<this.args.length;j++)h.push(i(this.args[j])(a,b,c));return f.apply(g,h)}};var r={"+":function(a){return+a},"-":function(a){return-a},"!":function(a){return!a}},s={"+":function(a,b){return a+b},"-":function(a,b){return a-b},"*":function(a,b){return a*b},"/":function(a,b){return a/b},"%":function(a,b){return a%b},"<":function(a,b){return b>a},">":function(a,b){return a>b},"<=":function(a,b){return b>=a},">=":function(a,b){return a>=b},"==":function(a,b){return a==b},"!=":function(a,b){return a!=b},"===":function(a,b){return a===b},"!==":function(a,b){return a!==b},"&&":function(a,b){return a&&b},"||":function(a,b){return a||b}};j.prototype={createUnaryExpression:function(a,b){if(!r[a])throw Error("Disallowed operator: "+a);return b=i(b),function(c,d,e){return r[a](b(c,d,e))}},createBinaryExpression:function(a,b,c){if(!s[a])throw Error("Disallowed operator: "+a);switch(b=i(b),c=i(c),a){case"||":return this.dynamicDeps=!0,function(a,d,e){return b(a,d,e)||c(a,d,e)};case"&&":return this.dynamicDeps=!0,function(a,d,e){return b(a,d,e)&&c(a,d,e)}}return function(d,e,f){return s[a](b(d,e,f),c(d,e,f))}},createConditionalExpression:function(a,b,c){return a=i(a),b=i(b),c=i(c),this.dynamicDeps=!0,function(d,e,f){return a(d,e,f)?b(d,e,f):c(d,e,f)}},createIdentifier:function(a){var b=new e(a);return b.type="Identifier",b},createMemberExpression:function(a,b,c){var d=new f(b,c,a);return d.dynamicDeps&&(this.dynamicDeps=!0),d},createCallExpression:function(a,b){if(!(a instanceof e))throw Error("Only identifier function invocations are allowed");var c=new g(a.name,b);return function(a,b,d){return c.transform(a,b,d,!1)}},createLiteral:function(a){return new d(a.value)},createArrayExpression:function(a){for(var b=0;b<a.length;b++)a[b]=i(a[b]);return function(b,c,d){for(var e=[],f=0;f<a.length;f++)e.push(a[f](b,c,d));return e}},createProperty:function(a,b,c){return{key:b instanceof e?b.name:b.value,value:c}},createObjectExpression:function(a){for(var b=0;b<a.length;b++)a[b].value=i(a[b].value);return function(b,c,d){for(var e={},f=0;f<a.length;f++)e[a[f].key]=a[f].value(b,c,d);return e}},createFilter:function(a,b){this.filters.push(new g(a,b))},createAsExpression:function(a,b){this.expression=a,this.scopeIdent=b},createInExpression:function(a,b,c){this.expression=c,this.scopeIdent=a,this.indexIdent=b},createTopLevel:function(a){this.expression=a},createThisExpression:h},k.prototype={open:function(){return this.value_},discardChanges:function(){return this.value_},deliver:function(){},close:function(){}},l.prototype={getBinding:function(a,b,c){function d(){if(h)return h=!1,g;i.dynamicDeps&&f.startReset();var c=i.getValue(a,i.dynamicDeps?f:void 0,b);return i.dynamicDeps&&f.finishReset(),c}function e(c){return i.setValue(a,c,b),c}if(c)return this.getValue(a,void 0,b);var f=new CompoundObserver,g=this.getValue(a,f,b),h=!0,i=this;return new ObserverTransform(f,d,e,!0)},getValue:function(a,b,c){for(var d=i(this.expression)(a,b,c),e=0;e<this.filters.length;e++)d=this.filters[e].transform(a,b,c,!1,[d]);return d},setValue:function(a,b,c){for(var d=this.filters?this.filters.length:0;d-->0;)b=this.filters[d].transform(a,void 0,c,!0,[b]);return this.expression.setValue?this.expression.setValue(a,b):void 0}};var t="@"+Math.random().toString(36).slice(2);p.prototype={styleObject:function(a){var b=[];for(var c in a)b.push(m(c)+": "+a[c]);return b.join("; ")},tokenList:function(a){var b=[];for(var c in a)a[c]&&b.push(c);return b.join(" ")},prepareInstancePositionChanged:function(a){var b=a.polymerExpressionIndexIdent_;if(b)return function(a,c){a.model[b]=c}},prepareBinding:function(a,c,d){var e=Path.get(a);{if(o(a)||!e.valid)return b(a,c,d,this);if(1==e.length)return function(a,b,c){if(c)return e.getValueFrom(a);var d=n(a,e[0]);return new PathObserver(d,e)}}},prepareInstanceMode
},registerWhenReady:function(){this.registered||this.waitingForPrototype(this.name)||this.waitingForQueue()||this.waitingForResources()||f.go(this)},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();
//# sourceMappingURL=polymer.js.map</script>
<!--<link rel="import" href="../polymer-dev/polymer.html">--> 


<polymer-element name="gui-row" attributes="name comment" assetpath="../elements/gui-row/">

<template>

<div>

    <style>:host {
  font: 10px 'Lucida Grande', sans-serif;
  color: #eee;
  -webkit-font-smoothing: antialiased;
}
#row {
  height: 30px;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  -ms-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#controller {
  height: 100%;
}
#name {
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 40%;
  cursor: default;
}
.comment-true #name {
  cursor: pointer;
}
#nameInner {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#comment {
  line-height: 16px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  background: #e0cf99;
  color: #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -moz-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -o-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -ms-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  position: absolute;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(0, 20px, 0);
  -moz-transform: translate3d(0, 20px, 0);
  -o-transform: translate3d(0, 20px, 0);
  -ms-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
}
#comment.open-true {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  transition-delay: 200ms;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#commentInner {
  padding: 8px;
}
.comment-true #nameInner {
  display: inline-block;
  border-bottom: 1px dotted rgba(255,255,255,0.25);
}
</style>

    <div id="row" class="comment-{{ comment != null }}" layout="" horizontal="">
        
        <div id="name" on-mouseover="{{ openComment }}" on-mouseout="{{ closeComment }}" layout="" horizontal="" center="">

            <div id="nameInner">{{ name }}</div>

        </div>

        <div id="controller" flex="">
            <content></content>
        </div>

    </div>

    <div id="comment" class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
        
        <div id="commentInner">{{ comment }}</div>

    </div>

</div>

</template>

<script>/*

[ ] comment hover behavior

*/

Polymer('gui-row', {

    comment: null,

    commentOpen: false,

    ready: function() {



    },

    openComment: function() {
        this.commentOpen = true;
    },

    closeComment: function() {
        this.commentOpen = false;
    }

});</script>

</polymer-element>

<polymer-element name="gui-panel" attributes="docked autoplace open" assetpath="../elements/gui-panel/">

<template>

<style>#controllers {
  overflow: auto;
}
#container {
  background: #1a1a1a;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
  transition: transform 0.4s cubic-bezier(0, 0.8, 0, 1);
}
#container.autoplace-true {
  width: 245px;
  position: fixed;
  top: 0;
}
#container.autoplace-true.docked-false {
  right: 20px;
}
#container.autoplace-true.docked-true {
  right: 0;
  bottom: 0;
}
#container.autoplace-true.docked-true.open-false {
  -webkit-transform: translate3d(245px, 0, 0);
  -moz-transform: translate3d(245px, 0, 0);
  -o-transform: translate3d(245px, 0, 0);
  -ms-transform: translate3d(245px, 0, 0);
  transform: translate3d(245px, 0, 0);
}
#closeButton {
  font: 10px 'Lucida Grande', sans-serif;
  color: #eee;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  text-align: center;
  padding: 6px 8px;
  background: #000;
}
#closeButton:hover {
  background: #1a1a1a;
}
#closeButtonDocked {
  position: absolute;
  right: 245px;
  cursor: pointer;
  top: 0;
  color: #000;
  width: 50px;
  height: 50px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#closeButtonDockedInner {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  width: 100%;
  height: 100%;
}
</style>

<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }}">
    
    <div id="controllers">
        <content></content>
    </div>

    <div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? &apos;Close&apos; : &apos;Open&apos; }} Controls</div>

    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}">
        <div id="closeButtonDockedInner"></div>
    </div>
    
</div>

</template>

<script>/*

[ ] kill horizontal scroll when docked

*/

Polymer('gui-panel', {

    docked: false,
    open: true,

    ready: function() {

        this.anon.values = {};

        // window.addEventListener( 'resize', this.checkHeight.bind( this ) );

    },

    anon: function() {

        if ( arguments.length == 1 ) {
            var name = arguments[ 0 ];
            return this.anon.values[ name ];
        }

        var initialValue = arguments[ 0 ];
        var name = arguments[ 1 ];

        var args = [ this.anon.values, name ];
        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );

        this.anon.values[ name ] = initialValue;

        return this.add.apply( this, args );

    },

    add: function( object, path ) {

        // Make controller

        var value = Path.get( path ).getValueFrom( object );

        if ( value == null || value == undefined ) {
            return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
        }

        var args = Array.prototype.slice.call( arguments, 2 );

        var controller = Gui.getController( value, args );
        
        if ( !controller ) {
            return Gui.error( 'Unrecognized type:', value );
        }

        controller.watch( object, path )
        controller.init.apply( controller, args );

        // Make row

        var row = document.createElement( 'gui-row' );
        row.name = path;

        controller.row = row;

        controller.name = function( name ) {
            row.name = name;
        };

        controller.comment = function( comment ) {
            row.comment = comment;
        };

        row.appendChild( controller );
        this.appendChild( row );

        return controller;

    },


    // Observers
    // ------------------------------- 

    openChanged: function() {

        if ( this.open || this.docked ) {
            
            // let the style sheet take care of things

            this.$.container.style.transform = '';

        } else { 

            // todo: need the rest of the vendor prefixes ...
            // wish i could pipe javascript variables into styl.

            var y = -this.$.controllers.offsetHeight + 'px';
            this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';

        }


    },

    dockedChanged: function() {

        this.openChanged();

    },
    

    // Events
    // ------------------------------- 
    
    tapClose: function() {
        this.open = !this.open;
    },
    
    // checkHeight: function() {
          
    //     if ( window.innerHeight < this.$.controllers.offsetHeight ) {
    //         this.docked = true;
    //     } else { 
    //         this.docked = false;
    //     }

    // },


    // Legacy
    // -------------------------------     

    listenAll: function() {

        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );

    },

    // todo: domElement

});</script>

</polymer-element></div>
<div hidden>undefined</div>

<!-- controllers -->
<div hidden>


<script>/*

[ ] onChange( )
[ ] onFinishChange( )

*/

Polymer('controller-base', {

    ready: function() {

        this.update();

    },

    update: function() {},

    init: function() {},


    // Observers
    // ------------------------------- 

    watch: function( object, path ) {

        this.object = object;
        this.path = path;


        this.bind('value', new PathObserver(this.object, this.path));

        // if ( this._observer ) {
        //     this._observer.close();            
        //     delete this._observer;
        // }

        // var _this = this;

        // this._observer = new PathObserver( this.object, this.path );
        // this._observer.open( function( newValue ) {

        //     _this.value = newValue;

        // } );

        // this.value = this.object[ this.path ];

    },

    valueChanged: function() {

        // if ( this._observer ) {
            
        //     Path.get( this.path ).setValueFrom( this.object, this.value );

        // }
        
        this.update();

    },


    // Helpers
    // ------------------------------- 

    map: function( x, a, b, c, d ) {
        return ( x - a ) / ( b - a ) * ( d - c ) + c;
    },


    // Legacy
    // ------------------------------- 

    listen: function() {

        Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
        return this;

    },

    getValue: function() {

        return this.value;

    },

    setValue: function( v ) {

        this.value = v;

    }
        

});</script>

<polymer-element name="controller-base" attributes="object path value" assetpath="../elements/controller-base/"></polymer-element>

<script>/*

[ ] arrow keys
[ ] min( ) max( ) step( ) commands of yore

[x] only validate input box on blur, not on keydown
[x] enter key blurs
[x] decimals
[x] step
[x] dy to drag friction
[x] negative slider
[x] hover behavior

*/

Gui.register( 'controller-number', function( value ) {
  
    return typeof value == 'number';

} );

Polymer( 'controller-number', {

    value: 0,
    decimals: 3,
    computed: {

        slider: 'min !== undefined && max !== undefined'

    },

    ready: function() {
        
        var _this = this;

        window.addEventListener( 'keydown', function( e ) {
            if ( e.keyCode == 18 ) _this._alt = true;
        }, false );

        window.addEventListener( 'keyup', function( e ) {
            if ( e.keyCode == 18 ) _this._alt = false;
        }, false );

        this.super();

    },

    init: function( min, max, step ) {

        this.min = min;
        this.max = max;
        this.step = step;

    },

    // Observers
    // ------------------------------- 

    valueChanged: function( newValue ) {

        if ( this.step !== undefined ) {
            this.value = Math.round( this.value / this.step ) * this.step;
        }

        if ( this.min !== undefined ) {
            this.value = Math.max( this.value, this.min );
        }

        if ( this.max !== undefined ) {
            this.value = Math.min( this.value, this.max );
        }
        
        this.super();
    },

    minChanged: function() {

        this.value = Math.max( this.value, this.min );
        this.update();

    },

    maxChanged: function() {

        this.value = Math.min( this.value, this.max );
        this.update();

    },

    update: function() {
        
        var ratio = this.map( this.value, this.min, this.max, 0, 1 );

        if ( this.min < 0 && this.max > 0 ) {

            this.$.container.classList.add( 'straddle-zero' );

            var zero = this.map( 0, this.min, this.max, 0, 1 );

            if ( this.value >= 0 ) {

                this.$.fill.style.left = zero * 100 + '%';
                this.$.fill.style.width = (ratio - zero) * 100 + '%';
                this.$.fill.style.right = '';

            } else { 

                this.$.fill.style.left = '';
                this.$.fill.style.width = (zero - ratio) * 100 + '%';
                this.$.fill.style.right = ( 1 - zero ) * 100 + '%';

            }

        } else { 

            this.$.container.classList.remove( 'straddle-zero' );

            if ( this.max > 0 ) {

                this.$.fill.style.left = 0;
                this.$.fill.style.width = ratio * 100 + '%';
                this.$.fill.style.right = '';

            } else { 

                this.$.fill.style.left = '';
                this.$.fill.style.width = ( 1 - ratio ) * 100 + '%';
                this.$.fill.style.right = 0;

            }

        }

        this.$.knob.style.left = ratio * 100 + '%';

        this.$.container.classList.toggle( 'positive', this.value >= 0 );
        this.$.container.classList.toggle( 'negative', this.value < 0 );

        this.super();

    },


    // Events
    // ------------------------------- 
    
    click: function( e ) {

        this.$.input.select();

    },

    down: function( e ) {

        e.preventDefault();
        this._rect = this.$.track.getBoundingClientRect();
        if ( !this._alt ) this.value = this.valueFromX( e.x );

    },

    up: function( e ) {

        // this.$.container.classList.add( 'transition' );

    },

    trackstart: function( e ) {

        // this.$.container.classList.remove( 'transition' );
        this._dragFriction = 1;

    },

    trackx: function( e ) {

        if ( this.step === undefined ) {

            var dv = this.valueFromDX( e.ddx );

            if ( this._alt ) dv /= 10;

            this.value += dv * this._dragFriction;

        } else {
            
            this.value = this.valueFromX( e.pageX );

        }
    },

    tracky: function( e ) {

        this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) );
        
    },

    blur: function( e ) {

        var v = parseFloat( this.$.input.value );
        
        if ( v === v ) {
            this.value = v;
        }

    },

    keydown: function( e ) {

        if ( e.keyCode == 13 ) {
            this.$.input.blur();
        }

    },


    // Filters
    // ------------------------------- 

    truncate: function( v ) {

        if ( v % 1 !== 0 && this.decimals !== undefined ) {
            return this.limitDecimals( v, this.decimals );
        } else { 
            return v;
        }

    },
    

    // Helpers
    // ------------------------------- 

    limitDecimals: function( v, maxDecimals ) {

        var str = v.toString();
        var numDecimals = str.substring( str.indexOf( '.' ) + 1 ).length;

        str = v.toFixed( Math.min( numDecimals, this.decimals ) );
        
        for ( var z, i = 0, l = str.length; i < l; i++ ) {
            if ( str.charAt( i ) !== '0' ) {
                z = i;
            }
        }

        return str.substring( 0, z+1 );

    },
    
    valueFromX: function( x ) {

        return this.map( x, this._rect.left, this._rect.right, this.min, this.max );

    },

    valueFromDX: function( dx ) {

        return this.map( dx, 0, this._rect.width, 0, this.max - this.min );

    }

});
</script>

<polymer-element name="controller-number" attributes="min max value step" extends="controller-base" assetpath="../elements/controller-number/">

<template>

<style>#container {
  height: 100%;
}
#track-container {
  height: 100%;
  padding: 0 8px;
}
#track {
  width: 100%;
  height: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  display: inline-block;
  position: relative;
  background: rgba(255,255,255,0.25);
}
#fill {
  height: 1px;
  margin-top: 0px;
  margin-left: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  position: absolute;
  background: #25a0d8;
  pointer-events: none;
}
#knob {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
  -o-transition: -o-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
  -ms-transition: -ms-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
  pointer-events: none;
  position: absolute;
  background-color: #25a0d8;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#track-container:hover #knob {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}
#track-container:active #knob {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
input {
  font: 10px 'Lucida Grande', sans-serif;
  color: #25a0d8;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  -webkit-transition: background-color 0.15s linear;
  -moz-transition: background-color 0.15s linear;
  -o-transition: background-color 0.15s linear;
  -ms-transition: background-color 0.15s linear;
  transition: background-color 0.15s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input:hover,
input:focus {
  background: rgba(255,255,255,0.05);
}
.slider-true input {
  text-align: center;
  width: 25%;
  -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
  padding: 0;
}
.slider-true input:hover {
  width: 33%;
}
.slider-true input:focus {
  width: 50%;
}
.slider-false input {
  padding-left: 8px;
  width: 100%;
}
input::selection {
  background-color: rgba(255,255,255,0.25);
}
</style>

<div id="container" class="transition slider-{{ slider }}" horizontal="" layout="" center="">

    <div id="track-container" on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" on-tracky="{{ tracky }}" on-trackstart="{{ trackstart }}" horizontal="" layout="" center="" hidden?="{{ !slider }}" flex="">

        <div id="track">

            <div id="fill"></div>
            <div id="knob"></div>

        </div>

    </div>

    <input type="text" value="{{ truncate( value ) }}" on-click="{{ click }}" on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input">

    </div></template>



</polymer-element></div>
<div hidden>


<script>Gui.register( 'controller-string', function( value ) {
  
    return typeof value == 'string';

} );

Polymer( 'controller-string', {


});</script>

<polymer-element name="controller-string" extends="controller-base" assetpath="../elements/controller-string/">

<template>

<style>:host {
  height: 100%;
}
input {
  font: 10px 'Lucida Grande', sans-serif;
  color: #1ebd6e;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  -webkit-transition: background-color 0.15s linear;
  -moz-transition: background-color 0.15s linear;
  -o-transition: background-color 0.15s linear;
  -ms-transition: background-color 0.15s linear;
  transition: background-color 0.15s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: 8px;
}
input:hover,
input:focus {
  background: rgba(255,255,255,0.05);
}
</style>

<input id="input" type="text" value="{{ value }}">

</template>

</polymer-element></div>
<div hidden>


<script>Gui.register( 'controller-boolean', function( value ) {
  
    return typeof value == 'boolean';

} );

Polymer( 'controller-boolean', {

    ready: function() {
        

    },

    toggle: function() {

        console.log( 'hi' );
        this.value = !this.value;

    }
    
    
    
    

});
</script>

<polymer-element name="controller-boolean" extends="controller-base" assetpath="../elements/controller-boolean/">

<template>

<style>#container {
  height: 100%;
  cursor: pointer;
  padding-left: 8px;
}
#switch-track {
  width: 20px;
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
  -webkit-transition: background 0.1s linear;
  -moz-transition: background 0.1s linear;
  -o-transition: background 0.1s linear;
  -ms-transition: background 0.1s linear;
  transition: background 0.1s linear;
}
#switch-knob {
  height: 8px;
  width: 8px;
  border-radius: 8px;
  background: #fff;
  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -moz-transition: -moz-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -o-transition: -o-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  -ms-transition: -ms-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
  transition: transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
}
.value-true #switch-track {
  background: #864694;
}
.value-true #switch-knob {
  -webkit-transform: translate3d(12px, 0, 0);
  -moz-transform: translate3d(12px, 0, 0);
  -o-transform: translate3d(12px, 0, 0);
  -ms-transform: translate3d(12px, 0, 0);
  transform: translate3d(12px, 0, 0);
}
#text {
  margin-left: 8px;
}
.value-false #text {
  color: rgba(255,255,255,0.25);
}
</style>

<div id="container" horizontal="" layout="" center="" on-tap="{{ toggle }}" class="value-{{ value }}">
    
    <div id="switch-track">
        <div id="switch-knob"></div>
    </div>

    <!-- <div id="text" >{{ value ? 'true' : 'false' }}</div> -->

</div>

</template>

</polymer-element></div>
<div hidden>


<script>Gui.register( 'controller-function', function( value ) {
  
    return typeof value == 'function';

} );

Polymer( 'controller-function', {

} );
</script>

<polymer-element name="controller-function" extends="controller-base" assetpath="../elements/controller-function/">

<template>

<style></style>

<div id="container">
</div>

</template>

</polymer-element></div>