<!--
  -- Copyright 2013 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<polymer-element name="kb-altkey-container" attributes="keyset"
    on-pointerup="{{up}}">
  <template>
    <style>
      :host {
        -webkit-box-flex: 1;
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }
    </style>
    <content select="#{{keyset}}"></content>
  </template>
  <script>
    Polymer('kb-altkey-container', {
      resetActiveElement: function() {
        var activeAccentKeySet = this.querySelector('#' + this.keyset);
        var offset = activeAccentKeySet.offset;
        var element = activeAccentKeySet.firstElementChild;
        while (offset) {
          element = element.nextElementSibling;
          offset--;
        }
        element.classList.add('active');
      },
      up: function(detail) {
        this.hidden = true;
        this.resetActiveElement();
        this.keyset = null;
      },

      hiddenChanged: function() {
        this.fire('stateChange', {
          state: 'candidatePopupVisibility',
          value: !!this.hidden
        });
      },
    });
  </script>
</polymer-element>