<link rel="import" href="../../../third-party/polymer/polymer.html">
<!--
p2b-ui-components-blackhole is a simple image of a blackhole in the middle of a galaxy
when blackhole is running, a spinner gif is displayed in the middle of the blackhole.
-->
<polymer-element name="p2b-blackhole">
  <template>
    <link rel="stylesheet" href="../../css/common-style.css">
    <link rel="stylesheet" href="component.css">
    <img class="spinner {{ !running ? 'hidden' : '' }}" src="{{ running ? 'libs/ui-components/common/spinner.gif' : '' }}" alt="Represents a blackhole destroying objects falling into it."/>
    <cite class="attribution">Photo from Wikipedia <a target="_blank" href="http://en.wikipedia.org/wiki/Black_hole#mediaviewer/File:BH_LMC.png">by Alan R</a> (CC BY-SA 2.5)</cite>
  </template>
  <script>
    Polymer('p2b-blackhole', {
      /*
       * Sets the blackhole in motion.
       */
      start: function() {
        this.running = true;
      },
      /*
       * Brings the blackhole to a halt!
       */
      stop: function() {
        this.running = false;
      }
    });
    </script>
</polymer-element>