<link rel="import" href="/lib/polymer/polymer.html">

<!-- (potentially-zoomed) spectrogram view -->
<dom-module id="light9-timeline-audio">
  <template>
    <style>
     :host {
         display: block;
         /* shouldn't be seen, but black is correct for 'no
         audio'. Maybe loading stripes would be better */
         background: #202322; 
     }
     div {
         width: 100%;
         height: 100%;
         overflow: hidden;
     }
     img {
         height: 100%;
         position: relative;
     }
    </style>
    <div>
      <img src="{{imgSrc}}"
           style="width: {{imgWidth}} ; left: {{imgLeft}}">
    </div>
  </template>
  <script>
   log = console.log
   Polymer({
       is: "light9-timeline-audio",
       properties: {
           graph: {type: Object, notify: true},
           show: {type: String, notify: true},
           song: {type: String, notify: true},
           zoom: {type: Object, notify: true},
           imgSrc: { type: String, notify: true},
           imgWidth: { computed: '_imgWidth(zoom)' },
           imgLeft: { computed: '_imgLeft(zoom)' },
       },
       observers: [
           'setImgSrc(graph, show, song)'
       ],
       ready: function() {
           this.zoom = {duration: 0};
       },       
       setImgSrc: function() {
           graph.runHandler(function() {
               try {
                   var root = this.graph.stringValue(
                       this.graph.Uri(this.show),
                       this.graph.Uri(':spectrogramUrlRoot'));
               } catch(e) {
                   return;
               }
               
               try {
                   var filename = this.graph.stringValue(
                       this.song, this.graph.Uri(':songFilename'));
               } catch(e) {
                   return;
               }
               
               this.imgSrc = root + '/' + filename.replace('.wav', '.png');
           }.bind(this), "timeline-audio " + this.song);
       },
       _imgWidth: function(zoom) {
           if (!zoom.duration) {
               return "100%";
           }

           return (100 / ((zoom.t2 - zoom.t1) / zoom.duration)) + "%";
       },
       _imgLeft: function(zoom) {
           if (!zoom.duration) {
               return "0";
           }

           var percentPerSec = 100 / (zoom.t2 - zoom.t1);
           return (-percentPerSec * zoom.t1) + '%';
       },
   });
  </script>
</dom-module>