  <!-- The <activity-sk> custom element declaration.
  
    Displays a spinner and an optional text. Usually set while content is loading. 
  
    Attributes:
      busy - is true when spinner is active. This can used hide parts of the page while 
             the spinner is active. 

    Events:
      None

    Methods:
      startSpinner(text) - Activates the spinner and displays 'text' next to it.

      stopSpinner() - Stops the spinner and hides the element. 

  -->

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">

<dom-module id="activity-sk">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div hidden$="{{_hide}}">
      <paper-spinner id="activitySpinner"></paper-spinner> 
      <span>{{_text}}</span>
    </div>
  </template>
  <script>
    Polymer({
      is: 'activity-sk',

      properties: {
        busy: {
          type: Boolean, 
          value: false, 
          notify: true, 
          reflectToAttribute: true
        },
        _text: {
          type: String,
          value: ''
        }
      }, 

      startSpinner: function(text) {
        this._text = text; 
        this.$.activitySpinner.active = true; 
        this._hide = false;
        this.set('busy', true);
      }, 

      stopSpinner: function() {
        this._text='';
        this.$.activitySpinner.active = false;
        this._hide = true;
        this.set('busy', false);
      }

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