<polymer-element name="big-picker" attributes="hex">
  <template>
    <style>
     .pot {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       box-shadow: 3px 2px 10px black;
       border: 2px solid white;
       margin: 10px;
       position: absolute;
     }
     input[type=range] {
       -webkit-appearance: slider-vertical;
     }
     #wide {
       display: flex;
     }
     #samples {
       outline: 1px solid gray;
       width: 300px;
       height: 300px;
       position: relative;
     }
     #swatch {
       position: absolute;
       left: 110px;
       top: 110px;
       width: 60px;
       height: 60px;
     }

     #lightness {
       display: flex;
       outline: 1px gray solid;
       background: linear-gradient(to bottom, #ffffff 0%,#0e0e0e 100%);
       width: 50px;
     }
    </style>

    <div id="wide">
      <div id="samples">
        <template repeat="{{c in potColors}}">
          <div class="pot" style="background: {{c}}" on-click="{{setColor}}"></div>
        </template>
        <input id="swatch" type="color" id="picker" value="{{hex}}" orient="vertical">
      </div>
      
      <div id="lightness">
        <input type="range" min="0" max="1" step=".01" value="{{lightness}}">
      </div>
    </div>
  </template>
  
  <script src="color.js"></script>
  <script type="text/javascript">
    var Color = net.brehaut.Color;
    Polymer('big-picker', {
        hex: '#ffffff',
        ready: function() {
            this.lightness = .5;
            this.potColors = ['hsl(20, 100%, 50%)',
                              'hsl(60, 100%, 50%)',
                              'hsl(100, 100%, 50%)',
                              'hsl(140, 100%, 50%)',
                              'hsl(180, 100%, 50%)',
                              'hsl(220, 100%, 50%)',
                              'hsl(260, 100%, 50%)',
                              'hsl(300, 100%, 50%)',
                              'hsl(340, 100%, 50%)',
                              '#888888'];
        },
        domReady: function() {
            var pots = this.$.samples.getElementsByClassName("pot");
            $.each(pots, function (i, elem) {
                var frac = i / pots.length;
                elem.style.left = (100 + 100 * Math.sin(frac * 2 * Math.PI)) + "px";
                elem.style.top  = (100 + 100 * Math.cos(frac * 2 * Math.PI)) + "px";
            });
        },
        setColor: function(e) {
            var c = Color(e.target.templateInstance.model.c).setLightness(this.lightness);
            this.hex = c.toString();
        },
        lightnessChanged: function() {
            var c = Color(this.hex).setLightness(this.lightness);
            this.hex = c.toString();
        }
    });
  </script>
</polymer-element>