From 4dcaf12fa70db534cc8de5c743a55ea6f8486874 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 29 Dec 2014 23:54:55 -0800
Subject: [PATCH] Added option to select light colors

---
 homeassistant/components/http/frontend.py     |  2 +-
 .../components/http/www_static/frontend.html  |  2 +-
 .../http/www_static/polymer/bower.json        |  3 +-
 .../polymer/more-infos/more-info-light.html   | 30 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/homeassistant/components/http/frontend.py b/homeassistant/components/http/frontend.py
index c8fcb30c6cc..79ae5cc198b 100644
--- a/homeassistant/components/http/frontend.py
+++ b/homeassistant/components/http/frontend.py
@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "230e724e74d2deaf5b91eafa63c59c94"
+VERSION = "e5880ecaad14243f3e47f513a8e032b7"
diff --git a/homeassistant/components/http/www_static/frontend.html b/homeassistant/components/http/www_static/frontend.html
index d745d8d6be3..6e7d037f527 100644
--- a/homeassistant/components/http/www_static/frontend.html
+++ b/homeassistant/components/http/www_static/frontend.html
@@ -63,7 +63,7 @@ if(this.removeAttribute(a),d)return j(this,a,c);var e=c,f=m(this,a,e);return j(t
           ({{event.listener_count}} listeners)
         </div></template></div></template><script>Polymer("events-list",{cbEventClicked:null,events:[],domReady:function(){this.events=this.api.events;this.api.addEventListener("events-updated",this.eventsUpdated.bind(this))},eventsUpdated:function(){this.events=this.api.events},handleClick:function(ev){if(this.cbEventClicked){this.cbEventClicked(ev.path[0].innerHTML)}}});</script></polymer-element><polymer-element name="event-fire-dialog" attributes="api" assetpath="polymer/dialogs/"><template><paper-action-dialog id="dialog" heading="Fire Event" transition="core-transition-bottom" backdrop="true" layered="false"><core-style ref="ha-dialog"></core-style><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputType" label="Event Type" floatinglabel="true" autofocus required></paper-input><paper-input-decorator label="Event Data (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Available events:</b><events-list api="{{api}}" cbeventclicked="{{eventSelected}}"></events-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickFireEvent}}">Fire Event</paper-button></paper-action-dialog></template><script>Polymer("event-fire-dialog",{ready:function(){this.eventSelected=this.eventSelected.bind(this)},show:function(eventType,eventData){this.setEventType(eventType);this.setEventData(eventData);this.$.dialog.toggle()},setEventType:function(eventType){this.$.inputType.value=eventType},setEventData:function(eventData){this.$.inputData.value=eventData},eventSelected:function(eventType){this.setEventType(eventType)},clickFireEvent:function(){var data;if(this.$.inputData.value!==""){data=JSON.parse(this.$.inputData.value)}else{data={}}this.api.fire_event(this.$.inputType.value,data)}});</script></polymer-element><polymer-element name="paper-dialog-transition" extends="core-transition-css" assetpath="polymer/bower_components/paper-dialog/"><template><style no-shim="">:host(.paper-dialog-transition){outline:0;opacity:0;transition:transform .2s cubic-bezier(0.4,0,.2,1),opacity .2s cubic-bezier(0.4,0,.2,1);-webkit-transition:-webkit-transform .2s cubic-bezier(0.4,0,.2,1),opacity .2s cubic-bezier(0.4,0,.2,1)}:host(.paper-dialog-transition.core-opened){opacity:1;transform:none;-webkit-transform:none}:host(.paper-dialog-transition-bottom){transform:scale(0.9) translateY(200%);-webkit-transform:scale(0.9) translateY(200%)}:host(.paper-dialog-transition-center.core-opened){animation:paper-dialog-transition-center-keyframes .2s cubic-bezier(0.4,0,.2,1);-webkit-animation:paper-dialog-transition-center-keyframes .2s cubic-bezier(0.4,0,.2,1)}@keyframes paper-dialog-transition-center-keyframes{0%{transform:scale(0.5) translateY(0);-webkit-transform:scale(0.5) translateY(0)}90%{transform:scale(1) translateY(-10px);-webkit-transform:scale(1) translateY(-10px)}100%{transform:scale(1) translateY(0);-webkit-transform:scale(1) translateY(0)}}@-webkit-keyframes paper-dialog-transition-center-keyframes{0%{transform:scale(0.5) translateY(0);-webkit-transform:scale(0.5) translateY(0)}90%{transform:scale(1) translateY(-10px);-webkit-transform:scale(1) translateY(-10px)}100%{transform:scale(1) translateY(0);-webkit-transform:scale(1) translateY(0)}}</style></template><script>Polymer("paper-dialog-transition",{baseClass:"paper-dialog-transition"});</script></polymer-element><paper-dialog-transition id="paper-dialog-transition-bottom" transitiontype="bottom"></paper-dialog-transition><paper-dialog-transition id="paper-dialog-transition-center" transitiontype="center"></paper-dialog-transition><polymer-element name="core-item" attributes="label icon src" horizontal="" center="" layout="" assetpath="polymer/bower_components/core-item/"><template><style>:host{display:block;position:relative;min-height:40px;white-space:nowrap}:host(.font-scalable){min-height:2.5em}:host(.core-selected){font-weight:700}#icon{margin:0 16px 0 4px}:host(.font-scalable) #icon{margin:0 1em 0 .25em;height:1.5em;width:1.5em}polyfill-next-selector{content:':host > a'}::content>a{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.000001)}</style><template if="{{icon || src}}"><core-icon src="{{src}}" id="icon" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon></template><div id="label">{{label}}</div><content></content></template><script>Polymer("core-item",{});</script></polymer-element><style shim-shadowdom="">html /deep/ core-collapse{display:block}html /deep/ .core-collapse-closed{display:none}</style><polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow" assetpath="polymer/bower_components/core-collapse/"><template><content></content></template><script>Polymer("core-collapse",{target:null,horizontal:false,opened:false,duration:.33,fixedSize:false,allowOverflow:false,created:function(){this.transitionEndListener=this.transitionEnd.bind(this)},ready:function(){this.target=this.target||this},domReady:function(){this.async(function(){this.afterInitialUpdate=true})},detached:function(){if(this.target){this.removeListeners(this.target)}},targetChanged:function(old){if(old){this.removeListeners(old)}if(!this.target){return}this.isTargetReady=!!this.target;this.classList.toggle("core-collapse-closed",this.target!==this);this.toggleOpenedStyle(false);this.horizontalChanged();this.addListeners(this.target);this.toggleClosedClass(true);this.update()},addListeners:function(node){node.addEventListener("transitionend",this.transitionEndListener)},removeListeners:function(node){node.removeEventListener("transitionend",this.transitionEndListener)},horizontalChanged:function(){this.dimension=this.horizontal?"width":"height"},openedChanged:function(){this.update();this.fire("core-collapse-open",this.opened)},toggle:function(){this.opened=!this.opened},setTransitionDuration:function(duration){var s=this.target.style;s.transition=duration?this.dimension+" "+duration+"s":null;if(duration===0){this.async("transitionEnd")}},transitionEnd:function(){if(this.opened&&!this.fixedSize){this.updateSize("auto",null)}this.setTransitionDuration(null);this.toggleOpenedStyle(this.opened);this.toggleClosedClass(!this.opened);this.asyncFire("core-resize",null,this.target)},toggleClosedClass:function(closed){this.hasClosedClass=closed;this.target.classList.toggle("core-collapse-closed",closed)},toggleOpenedStyle:function(opened){this.target.style.overflow=this.allowOverflow&&opened?"":"hidden"},updateSize:function(size,duration,forceEnd){this.setTransitionDuration(duration);this.calcSize();var s=this.target.style;var nochange=s[this.dimension]===size;s[this.dimension]=size;if(forceEnd&&nochange){this.transitionEnd()}},update:function(){if(!this.target){return}if(!this.isTargetReady){this.targetChanged()}this.horizontalChanged();this[this.opened?"show":"hide"]()},calcSize:function(){return this.target.getBoundingClientRect()[this.dimension]+"px"},getComputedSize:function(){return getComputedStyle(this.target)[this.dimension]},show:function(){this.toggleClosedClass(false);if(!this.afterInitialUpdate){this.transitionEnd();return}if(!this.fixedSize){this.updateSize("auto",null);var s=this.calcSize();if(s=="0px"){this.transitionEnd();return}this.updateSize(0,null)}this.async(function(){this.updateSize(this.size||s,this.duration,true)})},hide:function(){this.toggleOpenedStyle(false);if(this.hasClosedClass&&!this.fixedSize){return}if(this.fixedSize){this.size=this.getComputedSize()}else{this.updateSize(this.calcSize(),null)}this.async(function(){this.updateSize(0,this.duration)})}});</script></polymer-element><polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr" assetpath="polymer/bower_components/core-menu/"><template><style>:host{display:block;height:auto}:host(.core-selected,[active]){font-weight:initial}core-item{cursor:default}::content>core-item{cursor:default}:host(.font-scalable)>core-item{min-height:2.5em}:host(.font-scalable)>core-item::shadow core-icon{margin:0 1em 0 .25em;height:1.5em;width:1.5em}#submenu{margin:0 0 0 44px}:host(.font-scalable)>#submenu{margin:0 0 0 2.75em}</style><core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}"><content select=".item-content"></content></core-item><core-menu id="submenu" selected="{{selected}}" selecteditem="{{selectedItem}}" valueattr="{{valueattr}}"><content></content></core-menu><core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse></template><script>Polymer("core-submenu",{publish:{active:{value:false,reflect:true}},opened:false,get items(){return this.$.submenu.items},hasItems:function(){return!!this.items.length},unselectAllItems:function(){this.$.submenu.selected=null;this.$.submenu.clearSelection()},activeChanged:function(){if(this.hasItems()){this.opened=this.active}if(!this.active){this.unselectAllItems()}},toggle:function(){this.opened=!this.opened},activate:function(){if(this.hasItems()&&this.active){this.toggle();this.unselectAllItems()}}});</script></polymer-element><polymer-element name="services-list" attributes="api cbServiceClicked" assetpath="polymer/components/"><template><style>:host{display:block}core-menu{margin-top:0;font-size:1rem}a{display:block}</style><template if="{{cbServiceClicked}}"><style>a,core-submenu{text-decoration:underline;cursor:pointer}</style></template><div><core-menu selected="0"><template repeat="{{serv in services}}"><core-submenu icon="{{serv.domain | getIcon}}" label="{{serv.domain}}"><template repeat="{{service in serv.services}}"><a on-click="{{serviceClicked}}" data-domain="{{serv.domain}}">{{service}}</a></template></core-submenu></template></core-menu></div></template><script>Polymer("services-list",{services:[],cbServiceClicked:null,domReady:function(){this.services=this.api.services;this.api.addEventListener("services-updated",this.servicesUpdated.bind(this))},getIcon:function(domain){return(new DomainIcon).icon(domain)},servicesUpdated:function(){this.services=this.api.services},serviceClicked:function(ev){if(this.cbServiceClicked){var target=ev.path[0];var domain=target.getAttributeNode("data-domain").value;var service=target.innerHTML;this.cbServiceClicked(domain,service)}}});</script></polymer-element><polymer-element name="service-call-dialog" attributes="api" assetpath="polymer/dialogs/"><template><paper-action-dialog id="dialog" heading="Call Service" transition="core-transition-bottom" backdrop="true" layered="false"><core-style ref="ha-dialog"></core-style><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputDomain" label="Domain" floatinglabel="true" autofocus required></paper-input><paper-input id="inputService" label="Service" floatinglabel="true" required></paper-input><paper-input-decorator label="Service Data (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Available services:</b><services-list api="{{api}}" cbserviceclicked="{{serviceSelected}}"></services-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickCallService}}">Call Service</paper-button></paper-action-dialog></template><script>Polymer("service-call-dialog",{ready:function(){this.serviceSelected=this.serviceSelected.bind(this)},show:function(domain,service,serviceData){this.setService(domain,service);this.$.inputData.value=serviceData;this.$.dialog.toggle()},setService:function(domain,service){this.$.inputDomain.value=domain;this.$.inputService.value=service},serviceSelected:function(domain,service){this.setService(domain,service)},clickCallService:function(){var data;if(this.$.inputData.value!=""){data=JSON.parse(this.$.inputData.value)}this.api.call_service(this.$.inputDomain.value,this.$.inputService.value,data)}});</script></polymer-element><polymer-element name="entity-list" attributes="api cbEntityClicked" assetpath="polymer/components/"><template><style>:host{display:block}.entityContainer{font-size:1rem}</style><template if="{{cbEntityClicked}}"><style>a{text-decoration:underline;cursor:pointer}</style></template><div><template repeat="{{state in states}}"><div class="eventContainer"><a on-click="{{handleClick}}">{{state.entity_id}}</a></div></template></div></template><script>Polymer("entity-list",{cbEventClicked:null,states:[],domReady:function(){this.api.addEventListener("states-updated",this.statesUpdated.bind(this));this.statesUpdated()},statesUpdated:function(){this.states=this.api.states},handleClick:function(ev){if(this.cbEntityClicked){this.cbEntityClicked(ev.path[0].innerHTML)}}});</script></polymer-element><polymer-element name="state-set-dialog" attributes="api" assetpath="polymer/dialogs/"><template><paper-action-dialog id="dialog" heading="Set State" transition="core-transition-bottom" backdrop="true" layered="false"><core-style ref="ha-dialog"></core-style><div layout="" horizontal=""><div class="ha-form"><paper-input id="inputEntityID" label="Entity ID" floatinglabel="true" autofocus required></paper-input><paper-input id="inputState" label="State" floatinglabel="true" required></paper-input><paper-input-decorator label="State attributes (JSON, optional)" floatinglabel="true"><textarea id="inputData" rows="5"></textarea></paper-input-decorator></div><div class="sidebar"><b>Current entities:</b><entity-list api="{{api}}" cbentityclicked="{{entitySelected}}"></entity-list></div></div><paper-button dismissive="">Cancel</paper-button><paper-button affirmative="" on-click="{{clickSetState}}">Set State</paper-button></paper-action-dialog></template><script>Polymer("state-set-dialog",{ready:function(){this.entitySelected=this.entitySelected.bind(this)},show:function(entityId,state,stateData){this.setEntityId(entityId);this.setState(state);this.setStateData(stateData);this.$.dialog.toggle()},setEntityId:function(entityId){this.$.inputEntityID.value=entityId},setState:function(state){this.$.inputState.value=state},setStateData:function(stateData){var value=stateData?JSON.stringify(stateData,null,"  "):"";this.$.inputData.value=value},entitySelected:function(entityId){this.setEntityId(entityId);var state=this.api.getState(entityId);this.setState(state.state);this.setStateData(state.attributes)},clickSetState:function(){this.api.set_state(this.$.inputEntityID.value,this.$.inputState.value,JSON.parse(this.$.inputData.value))}});</script></polymer-element><polymer-element name="more-info-default" attributes="stateObj" assetpath="polymer/more-infos/"><template><div>
       No further options here yet..
-    </div></template><script>Polymer("more-info-default");</script></polymer-element><polymer-element name="core-range" attributes="value min max step ratio" assetpath="polymer/bower_components/core-range/"><script>Polymer("core-range",{value:0,min:0,max:100,step:1,ratio:0,observe:{"value min max step":"update"},calcRatio:function(value){return(this.clampValue(value)-this.min)/(this.max-this.min)},clampValue:function(value){return Math.min(this.max,Math.max(this.min,this.calcStep(value)))},calcStep:function(value){return this.step?Math.round(value/this.step)/(1/this.step):value},validateValue:function(){var v=this.clampValue(this.value);this.value=this.oldValue=isNaN(v)?this.oldValue:v;return this.value!==v},update:function(){this.validateValue();this.ratio=this.calcRatio(this.value)*100}});</script></polymer-element><polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate" assetpath="polymer/bower_components/paper-progress/"><template><style>:host{display:inline-block;width:200px;height:4px}#progressContainer{position:relative;height:100%;background-color:#c8c8c8;overflow:hidden}#activeProgress,#secondaryProgress{-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:scaleX(0);transform:scaleX(0)}#activeProgress{background-color:#0f9d58}#secondaryProgress{background-color:#87ceac}#activeProgress.indeterminate{-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation:indeterminate-bar 1s linear infinite;animation:indeterminate-bar 1s linear infinite}@-webkit-keyframes indeterminate-bar{0%{-webkit-transform:translate(-50%) scaleX(0)}50%{-webkit-transform:translate(0%) scaleX(0.3)}100%{-webkit-transform:translate(50%) scaleX(0)}}@keyframes indeterminate-bar{0%{transform:translate(-50%) scaleX(0)}50%{transform:translate(0%) scaleX(0.3)}100%{transform:translate(50%) scaleX(0)}}</style><div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"><div id="secondaryProgress" fit=""></div><div id="activeProgress" fit=""></div></div></template><script>Polymer("paper-progress",{secondaryProgress:0,indeterminate:false,step:0,observe:{"value secondaryProgress min max indeterminate":"update"},update:function(){this.super();this.secondaryProgress=this.clampValue(this.secondaryProgress);this.secondaryRatio=this.calcRatio(this.secondaryProgress)*100;this.$.activeProgress.classList.toggle("indeterminate",this.indeterminate)},transformProgress:function(progress,ratio){var transform="scaleX("+ratio/100+")";progress.style.transform=progress.style.webkitTransform=transform},ratioChanged:function(){this.transformProgress(this.$.activeProgress,this.ratio)},secondaryRatioChanged:function(){this.transformProgress(this.$.secondaryProgress,this.secondaryRatio)}});</script></polymer-element><polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" assetpath="polymer/bower_components/paper-slider/"><template><style>:host{display:inline-block;width:200px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus){outline:0}#sliderContainer{position:relative;width:calc(100% - 32px);height:32px}#sliderContainer.editable{float:left;width:calc(100% - 72px);margin:12px 0}.bar-container{position:absolute;top:0;left:16px;height:100%;width:100%;overflow:hidden}.ring>.bar-container{left:20px;width:calc(100% - 4px);transition:left .18s ease,width .18s ease}.ring.expand:not(.pin)>.bar-container{left:30px;width:calc(100% - 14px)}.ring.expand.dragging>.bar-container{transition:none}#sliderBar{position:absolute;top:15px;left:0;height:2px;width:100%;padding:8px 0;margin:-8px 0}.ring #sliderBar{left:-4px;width:calc(100% + 4px)}.ring.expand:not(.pin) #sliderBar{left:-14px;width:calc(100% + 14px)}.slider-markers{position:absolute;top:15px;left:15px;height:2px;width:calc(100% + 2px);box-sizing:border-box;pointer-events:none}.slider-markers::after,.slider-marker::after{content:"";display:block;width:2px;height:2px;border-radius:50%;background-color:#000}#sliderBar::shadow #activeProgress{background-color:#3f51b5}.transiting #sliderBar::shadow #activeProgress{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnob{position:absolute;left:0;top:0;width:32px;height:32px}.transiting>#sliderKnob{transition:left .08s ease}#sliderKnob:focus{outline:0}#sliderKnob.dragging{transition:none}.snaps>#sliderKnob.dragging{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnobInner{width:12px;height:12px;box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;background-color:#3f51b5;transition:height .18s ease,width .18s ease}.expand:not(.pin)>#sliderKnob>#sliderKnobInner{width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.ring>#sliderKnob>#sliderKnobInner{background-color:transparent;border:2px solid #c8c8c8}#sliderKnobInner::before{background-color:#3f51b5}.pin>#sliderKnob>#sliderKnobInner::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;margin-left:3px;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg) scale(0) translate(0);transform:rotate(-45deg) scale(0) translate(0)}#sliderKnobInner::before,#sliderKnobInner::after{transition:-webkit-transform .2s ease,background-color .18s ease;transition:transform .2s ease,background-color .18s ease}.pin.ring>#sliderKnob>#sliderKnobInner::before{background-color:#c8c8c8}.pin.expand>#sliderKnob>#sliderKnobInner::before{-webkit-transform:rotate(-45deg) scale(1) translate(17px,-17px);transform:rotate(-45deg) scale(1) translate(17px,-17px)}.pin>#sliderKnob>#sliderKnobInner::after{content:attr(value);position:absolute;top:0;left:0;width:32px;height:26px;text-align:center;color:#fff;font-size:10px;-webkit-transform:scale(0) translate(0);transform:scale(0) translate(0)}.pin.expand>#sliderKnob>#sliderKnobInner::after{-webkit-transform:scale(1) translate(0,-17px);transform:scale(1) translate(0,-17px)}.slider-input{width:40px;float:right;overflow:hidden}.slider-input::shadow input{text-align:center}#sliderContainer.disabled{pointer-events:none}.disabled>#sliderKnob>#sliderKnobInner{width:8px;height:8px;background-color:#c8c8c8}.disabled.ring>#sliderKnob>#sliderKnobInner{background-color:transparent}#sliderContainer.disabled #sliderBar::shadow #activeProgress{background-color:#c8c8c8}</style><template if="{{!disabled}}"><core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys><core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys></template><div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"><div class="bar-container"><paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryprogress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress></div><template if="{{snaps && !disabled}}"><div class="slider-markers" horizontal="" layout=""><template repeat="{{markers}}"><div flex="" class="slider-marker"></div></template></div></template><div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified="" center="" horizontal="" layout=""><div id="sliderKnobInner" value="{{immediateValue}}"></div></div></div><template if="{{editable}}"><paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input></template></template><script>Polymer("paper-slider",{snaps:false,pin:false,disabled:false,secondaryProgress:0,editable:false,maxMarkers:100,observe:{"step snaps":"update"},ready:function(){this.update()},update:function(){this.positionKnob(this.calcRatio(this.value));this.updateMarkers()},minChanged:function(){this.update();this.setAttribute("aria-valuemin",this.min)},maxChanged:function(){this.update();this.setAttribute("aria-valuemax",this.max)},valueChanged:function(){this.update();this.setAttribute("aria-valuenow",this.value);this.fire("core-change")},disabledChanged:function(){if(this.disabled){this.removeAttribute("tabindex")}else{this.tabIndex=0}},immediateValueChanged:function(){if(!this.dragging){this.value=this.immediateValue}this.fire("immediate-value-change")},expandKnob:function(){this.expand=true},resetKnob:function(){this.expandJob&&this.expandJob.stop();this.expand=false},positionKnob:function(ratio){this.immediateValue=this.calcStep(this.calcKnobPosition(ratio))||0;this._ratio=this.snaps?this.calcRatio(this.immediateValue):ratio;this.$.sliderKnob.style.left=this._ratio*100+"%"},inputChange:function(){this.value=this.$.input.value;this.fire("change")},calcKnobPosition:function(ratio){return(this.max-this.min)*ratio+this.min},trackStart:function(e){this._w=this.$.sliderBar.offsetWidth;this._x=this._ratio*this._w;this._startx=this._x||0;this._minx=-this._startx;this._maxx=this._w-this._startx;this.$.sliderKnob.classList.add("dragging");this.dragging=true;e.preventTap()},trackx:function(e){var x=Math.min(this._maxx,Math.max(this._minx,e.dx));this._x=this._startx+x;this.immediateValue=this.calcStep(this.calcKnobPosition(this._x/this._w))||0;var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="translate3d("+(this.snaps?this.calcRatio(this.immediateValue)*this._w-this._startx:x)+"px, 0, 0)"},trackEnd:function(){var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="";this.$.sliderKnob.classList.remove("dragging");this.dragging=false;this.resetKnob();this.value=this.immediateValue;this.fire("change")},knobdown:function(e){e.preventDefault();this.expandKnob()},bardown:function(e){e.preventDefault();this.transiting=true;this._w=this.$.sliderBar.offsetWidth;var rect=this.$.sliderBar.getBoundingClientRect();var ratio=(e.x-rect.left)/this._w;this.positionKnob(ratio);this.expandJob=this.job(this.expandJob,this.expandKnob,60);this.fire("change")},knobTransitionEnd:function(e){if(e.target===this.$.sliderKnob){this.transiting=false}},updateMarkers:function(){this.markers=[];var l=(this.max-this.min)/this.step;if(!this.snaps&&l>this.maxMarkers){return}for(var i=0;i<l;i++){this.markers.push("")}},increment:function(){this.value=this.clampValue(this.value+this.step)},decrement:function(){this.value=this.clampValue(this.value-this.step)},incrementKey:function(ev,keys){if(keys.key==="end"){this.value=this.max}else{this.increment()}this.fire("change")},decrementKey:function(ev,keys){if(keys.key==="home"){this.value=this.min}else{this.decrement()}this.fire("change")}});</script></polymer-element><polymer-element name="more-info-light" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.brightness paper-slider::shadow #sliderKnobInner,.brightness paper-slider::shadow #sliderBar::shadow #activeProgress{background-color:#039be5}</style><div><div center="" horizontal="" layout="" class="brightness"><div>Brightness</div><paper-slider max="255" flex="" on-core-change="{{brightnessSliderChanged}}" value="{{brightnessValue}}"></paper-slider></div></div></template><script>Polymer("more-info-light",{brightnessValue:0,observe:{"stateObj.attributes.brightness":"brightnessChanged"},brightnessChanged:function(oldVal,newVal){this.brightnessValue=newVal},brightnessSliderChanged:function(ev,details,target){var bri=parseInt(target.value);if(isNaN(bri))return;if(bri===0){this.api.turn_off(this.stateObj.entity_id)}else{this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,brightness:bri})}}});</script></polymer-element><polymer-element name="more-info-content" attributes="api stateObj" assetpath="polymer/more-infos/"><template><template id="more-info-light"><more-info-light api="{{api}}" stateobj="{{stateObj}}"></more-info-light></template><template id="more-info-default"><more-info-default stateobj="{{stateObj}}"></more-info-default></template><template bind="" ref="{{'more-info-' + stateObj.moreInfoType}}"></template></template><script>Polymer("more-info-content");</script></polymer-element><polymer-element name="state-card-dialog" attributes="api" assetpath="polymer/dialogs/"><template><paper-action-dialog id="dialog" transition="core-transition-bottom" backdrop="true" layered="false"><core-style ref="ha-dialog"></core-style><style></style><div><state-card-content stateobj="{{stateObj}}" api="{{api}}"></state-card-content><br><more-info-content stateobj="{{stateObj}}" api="{{api}}"></more-info-content></div><paper-button dismissive="">Dismiss</paper-button><paper-button affirmative="" on-click="{{editClicked}}">Edit State</paper-button></paper-action-dialog></template><script>Polymer("state-card-dialog",{stateObj:{},show:function(stateObj){this.stateObj=stateObj;this.$.dialog.toggle()},editClicked:function(ev){this.api.showEditStateDialog(this.stateObj.entity_id)}});</script></polymer-element><polymer-element name="home-assistant-api" attributes="auth" assetpath="polymer/"><template><paper-toast id="toast" role="alert" text=""></paper-toast><event-fire-dialog id="eventDialog" api="{{api}}"></event-fire-dialog><service-call-dialog id="serviceDialog" api="{{api}}"></service-call-dialog><state-set-dialog id="stateSetDialog" api="{{api}}"></state-set-dialog><state-card-dialog id="stateCardDialog" api="{{api}}"></state-card-dialog></template><script>State=function(json,api){this.api=api;this.attributes=json.attributes;this.entity_id=json.entity_id;var parts=json.entity_id.split(".");this.domain=parts[0];this.object_id=parts[1];if(this.attributes.friendly_name){this.entityDisplay=this.attributes.friendly_name}else{this.entityDisplay=this.object_id.replace(/_/g," ")}this.state=json.state;this.last_changed=json.last_changed};Object.defineProperties(State.prototype,{stateDisplay:{get:function(){var state=this.state.replace(/_/g," ");if(this.attributes.unit_of_measurement){return state+" "+this.attributes.unit_of_measurement}else{return state}}},isCustomGroup:{get:function(){return this.domain=="group"&&!this.attributes.auto}},canToggle:{get:function(){return this.domain=="group"&&(this.state=="on"||this.state=="off")||this.api.hasService(this.domain,"turn_on")}},cardType:{get:function(){if(this.canToggle){return"toggle"}else{return"display"}}},moreInfoType:{get:function(){if(this.domain==="light"){return"light"}else{return"default"}}}});Polymer("home-assistant-api",{auth:"not-set",states:[],services:[],events:[],stateUpdateTimeout:null,created:function(){this.api=this;this.turn_on=this.turn_on.bind(this);this.turn_off=this.turn_off.bind(this)},getState:function(entityId){var found=this.states.filter(function(state){return state.entity_id==entityId},this);return found.length>0?found[0]:null},hasService:function(domain,service){var found=this.services.filter(function(serv){return serv.domain==domain&&serv.services.indexOf(service)!==-1},this);return found.length>0},_laterFetchStates:function(){if(this.stateUpdateTimeout){clearTimeout(this.stateUpdateTimeout)}this.stateUpdateTimeout=setTimeout(this.fetchStates.bind(this),6e4)},_sortStates:function(states){states.sort(function(one,two){if(one.entity_id>two.entity_id){return 1}else if(one.entity_id<two.entity_id){return-1}else{return 0}})},_pushNewState:function(new_state){var state;var stateFound=false;for(var i=0;i<this.states.length;i++){if(this.states[i].entity_id==new_state.entity_id){state=this.states[i];state.attributes=new_state.attributes;state.last_changed=new_state.last_changed;state.state=new_state.state;stateFound=true;break}}if(!stateFound){this.states.push(new State(new_state,this));this._sortStates(this.states)}this.fire("states-updated")},_pushNewStates:function(new_states){new_states.map(function(state){this._pushNewState(state)}.bind(this))},fetchAll:function(){this.fetchStates();this.fetchServices();this.fetchEvents()},fetchState:function(entityId){var successStateUpdate=function(new_state){this._pushNewState(new_state)};this.call_api("GET","states/"+entityId,null,successStateUpdate.bind(this))},fetchStates:function(onSuccess,onError){var successStatesUpdate=function(newStates){this._sortStates(newStates);this.states=newStates.map(function(json){return new State(json,this)}.bind(this));this.fire("states-updated");this._laterFetchStates();if(onSuccess){onSuccess(this.states)}};this.call_api("GET","states",null,successStatesUpdate.bind(this),onError)},fetchEvents:function(onSuccess,onError){var successEventsUpdated=function(events){this.events=events;this.fire("events-updated");if(onSuccess){onSuccess(events)}};this.call_api("GET","events",null,successEventsUpdated.bind(this),onError)},fetchServices:function(onSuccess,onError){var successServicesUpdated=function(services){this.services=services;this.fire("services-updated");if(onSuccess){onSuccess(this.services)}};this.call_api("GET","services",null,successServicesUpdated.bind(this),onError)},turn_on:function(entity_id,options){this.call_service("homeassistant","turn_on",{entity_id:entity_id},options)},turn_off:function(entity_id,options){this.call_service("homeassistant","turn_off",{entity_id:entity_id},options)},set_state:function(entity_id,state,attributes){var payload={state:state};if(attributes){payload.attributes=attributes}var successToast=function(new_state){this.showToast("State of "+entity_id+" set to "+state+".");this._pushNewState(new_state)};this.call_api("POST","states/"+entity_id,payload,successToast.bind(this))},call_service:function(domain,service,parameters,options){parameters=parameters||{};options=options||{};var successHandler=function(changed_states){if(service=="turn_on"&&parameters.entity_id){this.showToast("Turned on "+parameters.entity_id+".")}else if(service=="turn_off"&&parameters.entity_id){this.showToast("Turned off "+parameters.entity_id+".")}else{this.showToast("Service "+domain+"/"+service+" called.")}this._pushNewStates(changed_states);if(options.success){options.success()}};var errorHandler=function(error_data){if(options.error){options.error(error_data)}};this.call_api("POST","services/"+domain+"/"+service,parameters,successHandler.bind(this),errorHandler)},fire_event:function(eventType,eventData){eventData=eventData||{};var successToast=function(){this.showToast("Event "+eventType+" fired.")};this.call_api("POST","events/"+eventType,eventData,successToast.bind(this))},call_api:function(method,path,parameters,onSuccess,onError){var url="/api/"+path;if(false){if(path==="states"||path==="services"||path==="events"){url="/demo/"+path+".json"}else{return}}var req=new XMLHttpRequest;req.open(method,url,true);req.setRequestHeader("X-HA-access",this.auth);req.onreadystatechange=function(){if(req.readyState==4){if(req.status>199&&req.status<300){if(onSuccess){onSuccess(JSON.parse(req.responseText))}}else{if(onError){var data=req.responseText?JSON.parse(req.responseText):{};onError(data)}}}}.bind(this);if(parameters){req.send(JSON.stringify(parameters))}else{req.send()}},showStateCardDialog:function(entityId){this.$.stateCardDialog.show(this.getState(entityId))},showEditStateDialog:function(entityId){var state=this.getState(entityId);this.showSetStateDialog(entityId,state.state,state.attributes)},showSetStateDialog:function(entityId,state,stateAttributes){entityId=entityId||"";state=state||"";stateAttributes=stateAttributes||null;this.$.stateSetDialog.show(entityId,state,stateAttributes)},showFireEventDialog:function(eventType,eventData){eventType=eventType||"";eventData=eventData||"";this.$.eventDialog.show(eventType,eventData)},showCallServiceDialog:function(domain,service,serviceData){domain=domain||"";service=service||"";serviceData=serviceData||"";this.$.serviceDialog.show(domain,service,serviceData)},showToast:function(message){this.$.toast.text=message;this.$.toast.show()},logOut:function(){this.auth=""}});</script></polymer-element></div>
+    </div></template><script>Polymer("more-info-default");</script></polymer-element><polymer-element name="core-range" attributes="value min max step ratio" assetpath="polymer/bower_components/core-range/"><script>Polymer("core-range",{value:0,min:0,max:100,step:1,ratio:0,observe:{"value min max step":"update"},calcRatio:function(value){return(this.clampValue(value)-this.min)/(this.max-this.min)},clampValue:function(value){return Math.min(this.max,Math.max(this.min,this.calcStep(value)))},calcStep:function(value){return this.step?Math.round(value/this.step)/(1/this.step):value},validateValue:function(){var v=this.clampValue(this.value);this.value=this.oldValue=isNaN(v)?this.oldValue:v;return this.value!==v},update:function(){this.validateValue();this.ratio=this.calcRatio(this.value)*100}});</script></polymer-element><polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate" assetpath="polymer/bower_components/paper-progress/"><template><style>:host{display:inline-block;width:200px;height:4px}#progressContainer{position:relative;height:100%;background-color:#c8c8c8;overflow:hidden}#activeProgress,#secondaryProgress{-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:scaleX(0);transform:scaleX(0)}#activeProgress{background-color:#0f9d58}#secondaryProgress{background-color:#87ceac}#activeProgress.indeterminate{-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation:indeterminate-bar 1s linear infinite;animation:indeterminate-bar 1s linear infinite}@-webkit-keyframes indeterminate-bar{0%{-webkit-transform:translate(-50%) scaleX(0)}50%{-webkit-transform:translate(0%) scaleX(0.3)}100%{-webkit-transform:translate(50%) scaleX(0)}}@keyframes indeterminate-bar{0%{transform:translate(-50%) scaleX(0)}50%{transform:translate(0%) scaleX(0.3)}100%{transform:translate(50%) scaleX(0)}}</style><div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"><div id="secondaryProgress" fit=""></div><div id="activeProgress" fit=""></div></div></template><script>Polymer("paper-progress",{secondaryProgress:0,indeterminate:false,step:0,observe:{"value secondaryProgress min max indeterminate":"update"},update:function(){this.super();this.secondaryProgress=this.clampValue(this.secondaryProgress);this.secondaryRatio=this.calcRatio(this.secondaryProgress)*100;this.$.activeProgress.classList.toggle("indeterminate",this.indeterminate)},transformProgress:function(progress,ratio){var transform="scaleX("+ratio/100+")";progress.style.transform=progress.style.webkitTransform=transform},ratioChanged:function(){this.transformProgress(this.$.activeProgress,this.ratio)},secondaryRatioChanged:function(){this.transformProgress(this.$.secondaryProgress,this.secondaryRatio)}});</script></polymer-element><polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" assetpath="polymer/bower_components/paper-slider/"><template><style>:host{display:inline-block;width:200px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus){outline:0}#sliderContainer{position:relative;width:calc(100% - 32px);height:32px}#sliderContainer.editable{float:left;width:calc(100% - 72px);margin:12px 0}.bar-container{position:absolute;top:0;left:16px;height:100%;width:100%;overflow:hidden}.ring>.bar-container{left:20px;width:calc(100% - 4px);transition:left .18s ease,width .18s ease}.ring.expand:not(.pin)>.bar-container{left:30px;width:calc(100% - 14px)}.ring.expand.dragging>.bar-container{transition:none}#sliderBar{position:absolute;top:15px;left:0;height:2px;width:100%;padding:8px 0;margin:-8px 0}.ring #sliderBar{left:-4px;width:calc(100% + 4px)}.ring.expand:not(.pin) #sliderBar{left:-14px;width:calc(100% + 14px)}.slider-markers{position:absolute;top:15px;left:15px;height:2px;width:calc(100% + 2px);box-sizing:border-box;pointer-events:none}.slider-markers::after,.slider-marker::after{content:"";display:block;width:2px;height:2px;border-radius:50%;background-color:#000}#sliderBar::shadow #activeProgress{background-color:#3f51b5}.transiting #sliderBar::shadow #activeProgress{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnob{position:absolute;left:0;top:0;width:32px;height:32px}.transiting>#sliderKnob{transition:left .08s ease}#sliderKnob:focus{outline:0}#sliderKnob.dragging{transition:none}.snaps>#sliderKnob.dragging{transition:-webkit-transform .08s ease;transition:transform .08s ease}#sliderKnobInner{width:12px;height:12px;box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;background-color:#3f51b5;transition:height .18s ease,width .18s ease}.expand:not(.pin)>#sliderKnob>#sliderKnobInner{width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.ring>#sliderKnob>#sliderKnobInner{background-color:transparent;border:2px solid #c8c8c8}#sliderKnobInner::before{background-color:#3f51b5}.pin>#sliderKnob>#sliderKnobInner::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;margin-left:3px;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg) scale(0) translate(0);transform:rotate(-45deg) scale(0) translate(0)}#sliderKnobInner::before,#sliderKnobInner::after{transition:-webkit-transform .2s ease,background-color .18s ease;transition:transform .2s ease,background-color .18s ease}.pin.ring>#sliderKnob>#sliderKnobInner::before{background-color:#c8c8c8}.pin.expand>#sliderKnob>#sliderKnobInner::before{-webkit-transform:rotate(-45deg) scale(1) translate(17px,-17px);transform:rotate(-45deg) scale(1) translate(17px,-17px)}.pin>#sliderKnob>#sliderKnobInner::after{content:attr(value);position:absolute;top:0;left:0;width:32px;height:26px;text-align:center;color:#fff;font-size:10px;-webkit-transform:scale(0) translate(0);transform:scale(0) translate(0)}.pin.expand>#sliderKnob>#sliderKnobInner::after{-webkit-transform:scale(1) translate(0,-17px);transform:scale(1) translate(0,-17px)}.slider-input{width:40px;float:right;overflow:hidden}.slider-input::shadow input{text-align:center}#sliderContainer.disabled{pointer-events:none}.disabled>#sliderKnob>#sliderKnobInner{width:8px;height:8px;background-color:#c8c8c8}.disabled.ring>#sliderKnob>#sliderKnobInner{background-color:transparent}#sliderContainer.disabled #sliderBar::shadow #activeProgress{background-color:#c8c8c8}</style><template if="{{!disabled}}"><core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys><core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys></template><div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}"><div class="bar-container"><paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryprogress="{{secondaryProgress}}" on-down="{{bardown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress></div><template if="{{snaps && !disabled}}"><div class="slider-markers" horizontal="" layout=""><template repeat="{{markers}}"><div flex="" class="slider-marker"></div></template></div></template><div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}" on-transitionend="{{knobTransitionEnd}}" center-justified="" center="" horizontal="" layout=""><div id="sliderKnobInner" value="{{immediateValue}}"></div></div></div><template if="{{editable}}"><paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input></template></template><script>Polymer("paper-slider",{snaps:false,pin:false,disabled:false,secondaryProgress:0,editable:false,maxMarkers:100,observe:{"step snaps":"update"},ready:function(){this.update()},update:function(){this.positionKnob(this.calcRatio(this.value));this.updateMarkers()},minChanged:function(){this.update();this.setAttribute("aria-valuemin",this.min)},maxChanged:function(){this.update();this.setAttribute("aria-valuemax",this.max)},valueChanged:function(){this.update();this.setAttribute("aria-valuenow",this.value);this.fire("core-change")},disabledChanged:function(){if(this.disabled){this.removeAttribute("tabindex")}else{this.tabIndex=0}},immediateValueChanged:function(){if(!this.dragging){this.value=this.immediateValue}this.fire("immediate-value-change")},expandKnob:function(){this.expand=true},resetKnob:function(){this.expandJob&&this.expandJob.stop();this.expand=false},positionKnob:function(ratio){this.immediateValue=this.calcStep(this.calcKnobPosition(ratio))||0;this._ratio=this.snaps?this.calcRatio(this.immediateValue):ratio;this.$.sliderKnob.style.left=this._ratio*100+"%"},inputChange:function(){this.value=this.$.input.value;this.fire("change")},calcKnobPosition:function(ratio){return(this.max-this.min)*ratio+this.min},trackStart:function(e){this._w=this.$.sliderBar.offsetWidth;this._x=this._ratio*this._w;this._startx=this._x||0;this._minx=-this._startx;this._maxx=this._w-this._startx;this.$.sliderKnob.classList.add("dragging");this.dragging=true;e.preventTap()},trackx:function(e){var x=Math.min(this._maxx,Math.max(this._minx,e.dx));this._x=this._startx+x;this.immediateValue=this.calcStep(this.calcKnobPosition(this._x/this._w))||0;var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="translate3d("+(this.snaps?this.calcRatio(this.immediateValue)*this._w-this._startx:x)+"px, 0, 0)"},trackEnd:function(){var s=this.$.sliderKnob.style;s.transform=s.webkitTransform="";this.$.sliderKnob.classList.remove("dragging");this.dragging=false;this.resetKnob();this.value=this.immediateValue;this.fire("change")},knobdown:function(e){e.preventDefault();this.expandKnob()},bardown:function(e){e.preventDefault();this.transiting=true;this._w=this.$.sliderBar.offsetWidth;var rect=this.$.sliderBar.getBoundingClientRect();var ratio=(e.x-rect.left)/this._w;this.positionKnob(ratio);this.expandJob=this.job(this.expandJob,this.expandKnob,60);this.fire("change")},knobTransitionEnd:function(e){if(e.target===this.$.sliderKnob){this.transiting=false}},updateMarkers:function(){this.markers=[];var l=(this.max-this.min)/this.step;if(!this.snaps&&l>this.maxMarkers){return}for(var i=0;i<l;i++){this.markers.push("")}},increment:function(){this.value=this.clampValue(this.value+this.step)},decrement:function(){this.value=this.clampValue(this.value-this.step)},incrementKey:function(ev,keys){if(keys.key==="end"){this.value=this.max}else{this.increment()}this.fire("change")},decrementKey:function(ev,keys){if(keys.key==="home"){this.value=this.min}else{this.decrement()}this.fire("change")}});</script></polymer-element><script>var colorPickerPrototype=Object.create(HTMLElement.prototype);colorPickerPrototype.onMouseDown=function(e){this.addEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseUp=function(e){this.removeEventListener("mousemove",this.onMouseMove)};colorPickerPrototype.onMouseMove=function(e){e.preventDefault();if(this.mouseMoveIsThrottled){this.mouseMoveIsThrottled=false;this.onColorSelect(e);setTimeout(function(){this.mouseMoveIsThrottled=true}.bind(this),100)}};colorPickerPrototype.onColorSelect=function(e){if(this.context){var coords=this.relativeMouseCoordinates(e);var data=this.context.getImageData(coords.x,coords.y,1,1).data;this.setColor({r:data[0],g:data[1],b:data[2]})}};colorPickerPrototype.pickerDraw=function(){this.canvas=document.createElement("canvas");this.canvas.setAttribute("width",this.width);this.canvas.setAttribute("height",this.height);this.canvas.setAttribute("style","cursor:crosshair");this.canvas.setAttribute("class","simpleColorPicker");this.context=this.canvas.getContext("2d");var colorGradient=this.context.createLinearGradient(0,0,this.width,0);colorGradient.addColorStop(0,"rgb(255,0,0)");colorGradient.addColorStop(.16,"rgb(255,0,255)");colorGradient.addColorStop(.32,"rgb(0,0,255)");colorGradient.addColorStop(.48,"rgb(0,255,255)");colorGradient.addColorStop(.64,"rgb(0,255,0)");colorGradient.addColorStop(.8,"rgb(255,255,0)");colorGradient.addColorStop(1,"rgb(255,0,0)");this.context.fillStyle=colorGradient;this.context.fillRect(0,0,this.width,this.height);var bwGradient=this.context.createLinearGradient(0,0,0,this.height);bwGradient.addColorStop(0,"rgba(255,255,255,1)");bwGradient.addColorStop(.5,"rgba(255,255,255,0)");bwGradient.addColorStop(.5,"rgba(0,0,0,0)");bwGradient.addColorStop(1,"rgba(0,0,0,1)");this.context.fillStyle=bwGradient;this.context.fillRect(0,0,this.width,this.height)};colorPickerPrototype.setColor=function(rgb){this.color={hex:this.rgbToHex(rgb),rgb:rgb};this.setAttribute("color",this.color.hex);var event=new CustomEvent("colorselected",{detail:{rgb:this.color.rgb,hex:this.color.hex}});this.dispatchEvent(event)};colorPickerPrototype.componentToHex=function(c){var hex=c.toString(16);return hex.length==1?"0"+hex:hex};colorPickerPrototype.rgbToHex=function(color){return"#"+colorPickerPrototype.componentToHex(color.r)+colorPickerPrototype.componentToHex(color.g)+colorPickerPrototype.componentToHex(color.b)};colorPickerPrototype.relativeMouseCoordinates=function(e){var x=0,y=0;if(this.canvas){var rect=this.canvas.getBoundingClientRect();x=e.clientX-rect.left;y=e.clientY-rect.top}return{x:x,y:y}};colorPickerPrototype.createdCallback=function(e){var attrs={width:this.getAttribute("width"),height:this.getAttribute("height")};this.canvas=null;this.context=null;this.color=null;this.mouseMoveIsThrottled=true;this.width=attrs.width||300;this.height=attrs.height||300;this.shadowRoot=this.createShadowRoot();this.pickerDraw();this.shadowRoot.appendChild(this.canvas);this.addEventListener("click",this.onColorSelect);this.addEventListener("mousedown",this.onMouseDown);this.addEventListener("mouseup",this.onMouseUp)};document.registerElement("color-picker",{prototype:colorPickerPrototype});</script><polymer-element name="more-info-light" attributes="stateObj api" assetpath="polymer/more-infos/"><template><style>.brightness{margin-bottom:8px}.brightness paper-slider::shadow #sliderKnobInner,.brightness paper-slider::shadow #sliderBar::shadow #activeProgress{background-color:#039be5}</style><div><div center="" horizontal="" layout="" class="brightness"><div>Brightness</div><paper-slider max="255" flex="" on-core-change="{{brightnessSliderChanged}}" value="{{brightnessValue}}"></paper-slider></div><color-picker id="colorpicker" width="350" height="200" color="{{colorValue}}"></color-picker></div></template><script>Polymer("more-info-light",{colorValue:0,brightnessValue:0,observe:{"stateObj.attributes.brightness":"brightnessChanged","stateObj.attributes.xy_color":"colorChanged"},brightnessChanged:function(oldVal,newVal){this.brightnessValue=newVal},colorChanged:function(oldVal,newVal){console.log(newVal)},domReady:function(){this.$.colorpicker.addEventListener("colorselected",this.colorPicked.bind(this))},brightnessSliderChanged:function(ev,details,target){var bri=parseInt(target.value);if(isNaN(bri))return;if(bri===0){this.api.turn_off(this.stateObj.entity_id)}else{this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,brightness:bri})}},colorPicked:function(ev){var color=ev.detail.rgb;this.api.call_service("light","turn_on",{entity_id:this.stateObj.entity_id,rgb_color:[color.r,color.g,color.b]})}});</script></polymer-element><polymer-element name="more-info-content" attributes="api stateObj" assetpath="polymer/more-infos/"><template><template id="more-info-light"><more-info-light api="{{api}}" stateobj="{{stateObj}}"></more-info-light></template><template id="more-info-default"><more-info-default stateobj="{{stateObj}}"></more-info-default></template><template bind="" ref="{{'more-info-' + stateObj.moreInfoType}}"></template></template><script>Polymer("more-info-content");</script></polymer-element><polymer-element name="state-card-dialog" attributes="api" assetpath="polymer/dialogs/"><template><paper-action-dialog id="dialog" transition="core-transition-bottom" backdrop="true" layered="false"><core-style ref="ha-dialog"></core-style><style></style><div><state-card-content stateobj="{{stateObj}}" api="{{api}}"></state-card-content><br><more-info-content stateobj="{{stateObj}}" api="{{api}}"></more-info-content></div><paper-button dismissive="">Dismiss</paper-button><paper-button affirmative="" on-click="{{editClicked}}">Edit State</paper-button></paper-action-dialog></template><script>Polymer("state-card-dialog",{stateObj:{},show:function(stateObj){this.stateObj=stateObj;this.$.dialog.toggle()},editClicked:function(ev){this.api.showEditStateDialog(this.stateObj.entity_id)}});</script></polymer-element><polymer-element name="home-assistant-api" attributes="auth" assetpath="polymer/"><template><paper-toast id="toast" role="alert" text=""></paper-toast><event-fire-dialog id="eventDialog" api="{{api}}"></event-fire-dialog><service-call-dialog id="serviceDialog" api="{{api}}"></service-call-dialog><state-set-dialog id="stateSetDialog" api="{{api}}"></state-set-dialog><state-card-dialog id="stateCardDialog" api="{{api}}"></state-card-dialog></template><script>State=function(json,api){this.api=api;this.attributes=json.attributes;this.entity_id=json.entity_id;var parts=json.entity_id.split(".");this.domain=parts[0];this.object_id=parts[1];if(this.attributes.friendly_name){this.entityDisplay=this.attributes.friendly_name}else{this.entityDisplay=this.object_id.replace(/_/g," ")}this.state=json.state;this.last_changed=json.last_changed};Object.defineProperties(State.prototype,{stateDisplay:{get:function(){var state=this.state.replace(/_/g," ");if(this.attributes.unit_of_measurement){return state+" "+this.attributes.unit_of_measurement}else{return state}}},isCustomGroup:{get:function(){return this.domain=="group"&&!this.attributes.auto}},canToggle:{get:function(){return this.domain=="group"&&(this.state=="on"||this.state=="off")||this.api.hasService(this.domain,"turn_on")}},cardType:{get:function(){if(this.canToggle){return"toggle"}else{return"display"}}},moreInfoType:{get:function(){if(this.domain==="light"){return"light"}else{return"default"}}}});Polymer("home-assistant-api",{auth:"not-set",states:[],services:[],events:[],stateUpdateTimeout:null,created:function(){this.api=this;this.turn_on=this.turn_on.bind(this);this.turn_off=this.turn_off.bind(this)},getState:function(entityId){var found=this.states.filter(function(state){return state.entity_id==entityId},this);return found.length>0?found[0]:null},hasService:function(domain,service){var found=this.services.filter(function(serv){return serv.domain==domain&&serv.services.indexOf(service)!==-1},this);return found.length>0},_laterFetchStates:function(){if(this.stateUpdateTimeout){clearTimeout(this.stateUpdateTimeout)}this.stateUpdateTimeout=setTimeout(this.fetchStates.bind(this),6e4)},_sortStates:function(states){states.sort(function(one,two){if(one.entity_id>two.entity_id){return 1}else if(one.entity_id<two.entity_id){return-1}else{return 0}})},_pushNewState:function(new_state){var state;var stateFound=false;for(var i=0;i<this.states.length;i++){if(this.states[i].entity_id==new_state.entity_id){state=this.states[i];state.attributes=new_state.attributes;state.last_changed=new_state.last_changed;state.state=new_state.state;stateFound=true;break}}if(!stateFound){this.states.push(new State(new_state,this));this._sortStates(this.states)}this.fire("states-updated")},_pushNewStates:function(new_states){new_states.map(function(state){this._pushNewState(state)}.bind(this))},fetchAll:function(){this.fetchStates();this.fetchServices();this.fetchEvents()},fetchState:function(entityId){var successStateUpdate=function(new_state){this._pushNewState(new_state)};this.call_api("GET","states/"+entityId,null,successStateUpdate.bind(this))},fetchStates:function(onSuccess,onError){var successStatesUpdate=function(newStates){this._sortStates(newStates);this.states=newStates.map(function(json){return new State(json,this)}.bind(this));this.fire("states-updated");this._laterFetchStates();if(onSuccess){onSuccess(this.states)}};this.call_api("GET","states",null,successStatesUpdate.bind(this),onError)},fetchEvents:function(onSuccess,onError){var successEventsUpdated=function(events){this.events=events;this.fire("events-updated");if(onSuccess){onSuccess(events)}};this.call_api("GET","events",null,successEventsUpdated.bind(this),onError)},fetchServices:function(onSuccess,onError){var successServicesUpdated=function(services){this.services=services;this.fire("services-updated");if(onSuccess){onSuccess(this.services)}};this.call_api("GET","services",null,successServicesUpdated.bind(this),onError)},turn_on:function(entity_id,options){this.call_service("homeassistant","turn_on",{entity_id:entity_id},options)},turn_off:function(entity_id,options){this.call_service("homeassistant","turn_off",{entity_id:entity_id},options)},set_state:function(entity_id,state,attributes){var payload={state:state};if(attributes){payload.attributes=attributes}var successToast=function(new_state){this.showToast("State of "+entity_id+" set to "+state+".");this._pushNewState(new_state)};this.call_api("POST","states/"+entity_id,payload,successToast.bind(this))},call_service:function(domain,service,parameters,options){parameters=parameters||{};options=options||{};var successHandler=function(changed_states){if(service=="turn_on"&&parameters.entity_id){this.showToast("Turned on "+parameters.entity_id+".")}else if(service=="turn_off"&&parameters.entity_id){this.showToast("Turned off "+parameters.entity_id+".")}else{this.showToast("Service "+domain+"/"+service+" called.")}this._pushNewStates(changed_states);if(options.success){options.success()}};var errorHandler=function(error_data){if(options.error){options.error(error_data)}};this.call_api("POST","services/"+domain+"/"+service,parameters,successHandler.bind(this),errorHandler)},fire_event:function(eventType,eventData){eventData=eventData||{};var successToast=function(){this.showToast("Event "+eventType+" fired.")};this.call_api("POST","events/"+eventType,eventData,successToast.bind(this))},call_api:function(method,path,parameters,onSuccess,onError){var url="/api/"+path;if(false){if(path==="states"||path==="services"||path==="events"){url="/demo/"+path+".json"}else{return}}var req=new XMLHttpRequest;req.open(method,url,true);req.setRequestHeader("X-HA-access",this.auth);req.onreadystatechange=function(){if(req.readyState==4){if(req.status>199&&req.status<300){if(onSuccess){onSuccess(JSON.parse(req.responseText))}}else{if(onError){var data=req.responseText?JSON.parse(req.responseText):{};onError(data)}}}}.bind(this);if(parameters){req.send(JSON.stringify(parameters))}else{req.send()}},showStateCardDialog:function(entityId){this.$.stateCardDialog.show(this.getState(entityId))},showEditStateDialog:function(entityId){var state=this.getState(entityId);this.showSetStateDialog(entityId,state.state,state.attributes)},showSetStateDialog:function(entityId,state,stateAttributes){entityId=entityId||"";state=state||"";stateAttributes=stateAttributes||null;this.$.stateSetDialog.show(entityId,state,stateAttributes)},showFireEventDialog:function(eventType,eventData){eventType=eventType||"";eventData=eventData||"";this.$.eventDialog.show(eventType,eventData)},showCallServiceDialog:function(domain,service,serviceData){domain=domain||"";service=service||"";serviceData=serviceData||"";this.$.serviceDialog.show(domain,service,serviceData)},showToast:function(message){this.$.toast.text=message;this.$.toast.show()},logOut:function(){this.auth=""}});</script></polymer-element></div>
 <div hidden><polymer-element name="home-assistant-style" assetpath="polymer/"><template><core-style id="ha-dialog">
       paper-action-dialog, paper-dialog {
         font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
diff --git a/homeassistant/components/http/www_static/polymer/bower.json b/homeassistant/components/http/www_static/polymer/bower.json
index 2445f3e26be..16451a6d71b 100644
--- a/homeassistant/components/http/www_static/polymer/bower.json
+++ b/homeassistant/components/http/www_static/polymer/bower.json
@@ -34,6 +34,7 @@
     "paper-item": "polymer/paper-item#~0.5.2",
     "moment": "~2.8.4",
     "core-style": "polymer/core-style#~0.5.2",
-    "paper-slider": "polymer/paper-slider#~0.5.2"
+    "paper-slider": "polymer/paper-slider#~0.5.2",
+    "color-picker-element": "~0.0.2"
   }
 }
diff --git a/homeassistant/components/http/www_static/polymer/more-infos/more-info-light.html b/homeassistant/components/http/www_static/polymer/more-infos/more-info-light.html
index 8a7f3a3d1ec..8ad2f87f6ee 100644
--- a/homeassistant/components/http/www_static/polymer/more-infos/more-info-light.html
+++ b/homeassistant/components/http/www_static/polymer/more-infos/more-info-light.html
@@ -1,9 +1,15 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/paper-slider/paper-slider.html">
 
+<link rel="import" href="../bower_components/color-picker-element/dist/color-picker.html">
+
 <polymer-element name="more-info-light" attributes="stateObj api">
 <template>
   <style>
+    .brightness {
+      margin-bottom: 8px;
+    }
+
     .brightness paper-slider::shadow #sliderKnobInner,
     .brightness paper-slider::shadow #sliderBar::shadow #activeProgress {
       background-color: #039be5;
@@ -18,21 +24,34 @@
         value="{{brightnessValue}}">
       </paper-slider>
     </div>
+    <color-picker id="colorpicker"
+      width="350" height="200" color="{{colorValue}}">
+    </color-picker>
   </div>
 </template>
 <script>
 Polymer({
 
+  colorValue: 0,
   brightnessValue: 0,
 
   observe: {
-    'stateObj.attributes.brightness': 'brightnessChanged'
+    'stateObj.attributes.brightness': 'brightnessChanged',
+    'stateObj.attributes.xy_color': 'colorChanged'
   },
 
   brightnessChanged: function(oldVal, newVal) {
     this.brightnessValue = newVal;
   },
 
+  colorChanged: function(oldVal, newVal) {
+    console.log(newVal);
+  },
+
+  domReady: function() {
+    this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this));
+  },
+
   brightnessSliderChanged: function(ev, details, target) {
     var bri = parseInt(target.value);
 
@@ -46,6 +65,15 @@ Polymer({
         brightness: bri
       });
     }
+  },
+
+  colorPicked: function(ev) {
+    var color = ev.detail.rgb;
+
+    this.api.call_service("light", "turn_on", {
+      entity_id: this.stateObj.entity_id,
+      rgb_color: [color.r, color.g, color.b]
+    });
   }
 
 });