--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/service/pilight/static/big-picker.html	Sat Jul 12 22:29:20 2014 -0700
@@ -0,0 +1,91 @@
+<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>