<!--
Copyright 2013 The Toolkitchen 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 UI Elements
 */
/**
 * @class polymer-ui-menu-item
 */
-->
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
<link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">

<polymer-element name="polymer-ui-menu-item" extends="polymer-ui-theme-aware" attributes="src label icon active selected selectedItem">
  <template>
    <link rel="stylesheet" href="polymer-ui-menu-item.css">
    <div id="item" class="{{theme}}" active?="{{active}}">
      <polymer-ui-icon src="{{src}}" icon="{{icon}}" showing?="{{icon || src}}"></polymer-ui-icon>
      <span id="label">{{label}}<content select=".item-content"></content></span>
    </div>
    <polymer-ui-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}">
      <content></content>
    </polymer-ui-menu>
    <polymer-collapse targetId="menu" closed="{{!active}}"></polymer-collapse>
  </template>
  <script>
    Polymer('polymer-ui-menu-item', {
      /**
       * The URL of an image for the icon.
       *
       * @attribute src
       * @type string
       * @default ''
       */
      src: '',
      /**
       * Specifies the label for the menu item.
       *
       * @attribute label
       * @type string
       * @default ''
       */
      label: '',
      /**
       * Indicates active state.
       *
       * @attribute active
       * @type boolean
       * @default false
       */
      active: false,
      get items() {
        return this.$.menu.items;
      },
      activeChanged: function() {
        if (!this.active) {
          this.$.menu.selected = -1;
        }
        this.$.item.classList.toggle('no-active-bg', this.$.menu.items.length);
      }
    });
  </script>
</polymer-element>
