<!DOCTYPE html>
<!--
Copyright 2016 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.
-->
<!--
The 'overlay-message' displays an overlaid pop-up on top of the content.

By default 'overlay-message' will close whenever other elements are focused
as well as automatically disappear after 'duration'.

Example usage:

  <overlay-message id="message" opened="true">Draft saved.</overlay-message>

Or:

  var message = document.getElementById("message");
  message.updateContent("Draft saved.");

Position is default at the center of the screen.  Position can be changed
by overriding style attributes:

  overlay-message {
    top: 26px;
    left: 10px;
  }
-->

<link rel="import" href="/components/core-overlay/core-overlay.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">

<polymer-element
    name="overlay-message"
    attributes="text autoCloseDisabled transition duration opened maxWidth
                delay">
  <template>
    <style>
      :host {
        border: 1px solid #f0c36d;
        background-color: #f9edbe;
      }

      #container {
        overflow: hidden;
        margin: 5px;
      }
    </style>


    <paper-shadow z="1" hasPosition></paper-shadow>

    <core-overlay id="overlay" target="{{}}" opened="{{opened}}"
        autoCloseDisabled="{{autoCloseDisabled}}"
        sizingTarget="{{$.container}}" transition="{{transition}}"></core-overlay>

    <div id="container" horizontal layout  max-width="{{maxWidth}}">
      <div class="message-content" flex id="content"></div>
      <div class="message-content">
        <content></content>
      </div>
    </div>

  </template>

  <script>
    'use strict';
    Polymer('overlay-message', {

      /**
       * Number of milliseconds to stay opened. 0 to stay open indefinitely.
       */
      duration: 6000,

      /**
       * Whether to close overlay if focus is taken somewhere else.
       */
      autoCloseDisabled: false,

      /**
       * Number of milliseconds to wait before opening.
       */
      delay: 0,

      ready: function() {
        this.defaultConfig = {
          'duration': this.duration,
          'autoCloseDisabled': this.autoCloseDisabled,
          'delay': this.delay
        };
      },

      /**
       * Update content and open 'overlay-message'.  If 'overlay-message' is
       * already opened, it will close then re-open.
       * @param {string} content String message to display.
       * @param {Object} config Dictionary of 'overlay-message' attributes to
       *    use for this message.
       */
      updateContent: function(content, config) {
        this.setConfig(config);
        this.$.content.innerHTML = content;
        if (this.delay > 0) {
          if (this.showJob) {
            this.showJob.stop();
          }
          this.showJob = this.job(this.showJob, this.show, this.delay);
        } else {
          this.show();
        }
      },

      setConfig: function(config) {
        config = config || this.defaultConfig;
        if ('duration' in config) {
          this.duration = config['duration'];
        }
        if ('autoCloseDisabled' in config) {
          this.autoCloseDisabled = config['autoCloseDisabled'];
        }
        if ('delay' in config) {
          this.delay = config['delay'];
        }
      },

      /**
       * Hide this overlay message.
       */
      hide: function() {
        if (this.showJob) {
          this.showJob.stop();
        }
        this.opened = false;
      },

      /**
       * Show this overlay message.
       */
      show: function() {
        if (this.hideJob) {
          this.hideJob.stop();
        }
        if (this.showJob) {
          this.showJob.stop();
        }
        if (this.duration > 0) {
          this.hideJob = this.job(this.hideJob, this.hide, this.duration);
        }
        this.opened = true;
      }
    });
  </script>
</polymer-element>