<link rel="import" href="../../yatta-element.html">
<link rel="import" href="../../../Yatta-Connectors/xmpp-connector/xmpp-connector.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">

<polymer-element name="yatta-test" attributes="yatta connector stuff">
  <template>
    <h1 id="text" contentEditable> Check this out !</h1>
    <xmpp-connector id="connector" connector={{connector}} room="testy-xmpp-polymer"></xmpp-connector>
    <yatta-element connector={{connector}} val={{yatta}}>
      <yatta-property name="slider" val={{slider}}>
      </yatta-property>
      <yatta-property name="stuff" val={{stuff}}>
        <yatta-property id="otherstuff" name="otherstuff" val={{otherstuff}}>
        </yatta-property>
      </yatta-property>
    </yatta-element>
    <yatta-element val={{otherstuff}}>
      <yatta-property name="nostuff" val={{nostuff}}>
      </yatta-property>
    </yatta-element>
    <paper-slider min="0" max="200" immediateValue={{slider}}></paper-slider>
  </template>
  <script>
  Polymer({
    ready: function(){
      window.y_stuff_property = this.$.otherstuff;
      this.yatta.val("slider",50)
      var that = this;
      this.connector.whenSynced(function(){
        if(that.yatta.val("text") == null){
          that.yatta.val("text","stuff","mutable");
        }
        that.yatta.val("text").bind(that.$.text,that.shadowRoot)
      })
    }
  })
  </script>
</polymer-element>