<!--
  -- 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-options-menu-item" attributes="layout label active"
    on-pointerup="up" on-pointerover="over" on-pointerout="out">
  <template>
    <style>
      @host {
        * {
          -webkit-padding-end: 5px;
          -webkit-padding-start: 5px;
          color: #fff;
          display: -webkit-box;
          font-family: 'Open Sans', 'Noto Sans UI', sans-serif;
          font-weight: 300;
          height: 28px;
        }
        *.active {
          background-color: #848490;
        }
    </style>
    <span>{{label}}</span>
  </template>
  <script>
    Polymer('kb-options-menu-item', {
      /**
       * Layout to select on a key press.
       */
      layout: null,

      up: function(event) {
        if (this.layout == 'none') 
          hideKeyboard();
        else
          this.fire('set-layout', {layout: this.layout});
        this.hidden = true;
      },

      over: function(event) {
        this.classList.add('active');
      },

      out: function(event) {
        this.classList.remove('active');
      },
    });
  </script>
</polymer>

<polymer-element name="kb-options-menu">
  <template>
    <style>
      @host {
        * {
          -webkit-box-orient: vertical;
          background-color: #3b3b3e;
          border-radius: 2px;
          display: -webkit-box;
          left: 0;
          position: absolute;
          top: 0;
          z-index: 1;
        }
      }
    </style>
    <!-- TODO(kevers): This is a temporary placeholder to enable testing
      -- of layout switching.  Deprecate once a decision is reached on
      -- a more permanent solution for layout selection. -->
    <kb-options-menu-item layout="system-qwerty" label="System QWERTY">
    </kb-options-menu-item>
    <kb-options-menu-item layout="qwerty" label="QWERTY">
    </kb-options-menu-item>
    <kb-options-menu-item layout="dvorak" label="Dvorak">
    </kb-options-menu-item>
    <kb-options-menu-item layout="none" label="Hide keyboard">
    </kb-options-menu-item>
  </template>
  <script>
    Polymer('kb-options-menu', {});
   </script>
</polymer>

<polymer-element name="kb-keyboard-overlay" attributes="keyset"
    on-pointerup="up">
  <template>
    <style>
      @host {
        * {
          background-color: rgba(0, 0, 0, 0.6);
          bottom: 0;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    </style>
    <!-- Insert popups here. -->
    <kb-options-menu id="options" hidden></kb-options-menu>
  </template>
  <script>
    Polymer('kb-keyboard-overlay', {
      up: function() {
        this.hidden = true;
      }
    });
  </script>
</polymer-element>