<!--
   The <zoom-dialog-sk> custom element declaration.

  A dialog that wraps around the multi-zoom-sk element.

  Attributes:
    None

  Methods:
    open(detail) - Opens the dialog with the given detail that is passed to the
                   multi-zoom-sk element.

  Events:
    None

  Mailboxes:
    None

-->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="multi-zoom-sk.html">

<dom-module id="zoom-dialog-sk">
  <template>
    <paper-dialog id="zoomDialog" opened="{{opened}}">
      <paper-dialog-scrollable>
        <multi-zoom-sk id="zoomer"></multi-zoom-sk>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-dismiss>Close</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: "zoom-dialog-sk",

      properties: {
        opened: {
          type: Boolean,
          value: false,
          notify: true
        }
      },

      ready: function() {
        this.listen(this, 'iron-overlay-closed', '_handleZoomClosed');
        this.listen(this, 'iron-overlay-opened', '_handleZoomDialogOpened');
      },

      open: function(detail) {
        this._zoomDetail = detail;
        this.$.zoomDialog.open();
      },

      _handleZoomDialogOpened: function(ev) {
        if (this._zoomDetail) {
          this.$.zoomer.setDetails(this._zoomDetail);
          this.$.zoomDialog.refit();
        }
      },

      _handleZoomClosed: function (ev) {
       this.$.zoomer.clear();
       this._zoomDetail = null;
      }

    });
  </script>
</dom-module>