<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
-->
<link rel="import" href="g-icon-button.html"/>
<link rel="import" href="g-overlay.html">
<link rel="import" href="g-menu.html"/>
<polymer-element name="g-menu-button" attributes="src selected opened responsive valign selectedClass">
  <template>
    <link rel="stylesheet" href="css/g-menu-button.css" />
    <g-icon-button id="button" touch-action="none" on-tap="toggle" src="{{src}}" active="{{opened}}"></g-icon-button>
    <div responsive="{{responsive}}" valign="{{valign}}">
      <g-overlay id="overlay" class="slideup" opened="{{opened}}" modal>
        <div class="arrow"></div>
        <div class="arrow arrow-inner"></div>
        <g-menu id="overlayMenu" selected="{{selected}}" selectedClass="{{selectedClass}}" on-activate="toggle">
          <content select="*"></content>
        </g-menu>
      </g-overlay>
    </div>
  </template>
  <script>
    Polymer('g-menu-button', {
      src: '',
      selected: '',
      opened: false,
      responsive: false,
      valign: 'center',
      //* Toggle the opened state of the dropdown.
      toggle: function() {
        this.opened = !this.opened;
      },
      //* Returns the selected item.
      get selection() {
        return this.$.overlayMenu.selection;
      }
    });
  </script>
</polymer-element>
