<link rel="import" href="/lib/polymer/polymer.html">
<link rel="import" href="light9-timeline-audio.html">
<link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="rdfdb-synced-graph.html">
<link rel="import" href="light9-music.html">


<!-- Whole editor- include this on your page.
     Most coordinates are relative to this element.
   -->
<dom-module id="light9-timeline-editor">
  <template>
    <style>
     :host {
         background: #444;
         display: flex;
         flex-direction: column;
         position: relative;
         border: 1px solid black;
         overflow: hidden;
     }
     light9-timeline-audio {
         width: 100%;
         height: 30px;
     }
     light9-timeline-time-zoomed {
         flex-grow: 1;
     }
     light9-timeline-diagram-layer, light9-timeline-adjusters {
         position: absolute;
         left: 0; top: 0; right: 0; bottom: 0;
     }
    </style>
    <div>
      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
      <light9-music id="music"
                    song="{{song}}"
                    t="{{songTime}}"
                    playing="{{songPlaying}}"
                    duration="{{songDuration}}"></light9-music>
      timeline editor: song [{{song}}] <button>unlink</button>
      <label><input type="checkbox"> follow player song choice</label>
    </div>
    <div>[[debug]]</div>
    <light9-timeline-audio id="audio"></light9-timeline-audio>
    <light9-timeline-time-zoomed id="zoomed"
                                 graph="{{graph}}"
                                 zoom="{{viewState.zoomSpec}}"
                                 zoom-in-x="{{zoomInX}}">
    </light9-timeline-time-zoomed>
    <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer>
    <light9-timeline-adjusters id="adjusters"
                               dia="{{dia}}"
                               adjs="{{adjs}}">
    </light9-timeline-adjusters>
  </template>
 
</dom-module>

<!-- the whole section that pans/zooms in time (most of the editor) -->
<dom-module id="light9-timeline-time-zoomed">
  <template>
    <style>
     :host {
         display: flex;
         height: 100%;
     }
     div {
         display: flex;
         flex-direction: column;
         height: 100%;
     }
     light9-timeline-audio {
         width: 100%;
         height: 100px;
     }
     light9-timeline-graph-row {
         flex-grow: 1;
     }
    </style>
    <div>
      <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
      <light9-timeline-audio id="audio"
                             zoom="{{zoomFlattened}}">
      </light9-timeline-audio>
      <template is="dom-repeat" items="{{rows}}">
        <light9-timeline-graph-row graph="{{graph}}"
                                   zoom-in-x="{{zoomInX}}">
        </light9-timeline-graph-row>
      </template>
    </div>
  </template>
  <script>
   Polymer({
       is: "light9-timeline-time-zoomed",
       behaviors: [
           Polymer.IronResizableBehavior
       ],
       properties: {
           graph: { type: Object, notify: true },
           zoomInX: { type: Object, notify: true },
           rows: {value: [0]},
           zoom: {type: Object, notify: true, observer: 'onZoom'},
           zoomFlattened: {type: Object, notify: true}
       },
       onZoom: function() {
           ko.computed(function() {
               this.zoomFlattened = ko.toJS(this.zoom);
           }.bind(this));
       }
   });
  </script>
</dom-module>


<!--
     SVG or canvas that draws these:
       - background grids
       - zoom arcs
       - notes
       - annotations on notes
       - connectors between adjusters and their targets
     
     This element is not responsible for any hit detection. Things you click (rows,
     notes, adjusters, etc) are caught on their respective elements. (But is that
     wrong in the case of notes?)
   -->
<dom-module id="light9-timeline-diagram-layer">
  <template>
    <style>
     :host {
         pointer-events: none;
     }
     svg {
         width: 100%;
         height: 100%;
         pointer-events: none;
     }
    </style>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" >
      <g id="layer1">
        <text
            xml:space="preserve"
            style="font-size:13px;line-height:125%;font-family:'Verana Sans';-inkscape-font-specification:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"
            x="-338.38403"
            y="631.3988"
            id="text4290"
            sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text>
        <g id="timeAxis" transform="translate(0,40)"></g>
        <g id="mouse"></g>
        <g id="notes"></g>
        <g id="connectors"></g>
        <g id="cursor">
          <path id="cursor1" style="fill:none; stroke:#ff0303; stroke-width:1.5; stroke-linecap:butt;" />
          <path id="cursor2" style="fill:#9c0303;" />
          <path id="cursor3" style="fill:none; stroke:#ff0303; stroke-width:3; stroke-linecap:butt;" />
        </g>
      </g>
    </svg>
  </template>
</dom-module>


<!-- seconds labels -->
<dom-module id="light9-timeline-time-axis">
  <template>
    <style>
     div {
         width: 100%;
         height: 31px;
     }
    </style>
    <div></div>
  </template>
</dom-module>

<!-- one row of notes -->
<dom-module id="light9-timeline-graph-row">
  <template>
    <style>
     :host {
         border-top: 1px solid black;
         display: flex;
     }
    </style>
    <template is="dom-repeat" items="[1]">
      <light9-timeline-note graph="{{graph}}"
                            zoom-in-x="{{zoomInX}}">
      </light9-timeline-note>
    </template>
  </template>
</dom-module>

<!-- One trapezoid note shape in a row.
     This element has the right Y coords.
     We compute X coords from the zoom setting.
     diagram-layer draws the note body. -->
<dom-module id="light9-timeline-note">
  <template>
    <style>
     :host {
         display: block;
         background: green;
         /* outline: 2px solid red; */
     }
    </style>
    <light9-timeline-note-inline-attrs></light9-timeline-note-inline-attrs>
  </template>
</dom-module>

<!-- All the adjusters you can edit or select.
     This element manages their layout and suppresion.
     Owns the selection.
     Maybe includes selecting things that don't even have adjusters.
     Maybe manages the layout of other labels and text too, to avoid overlaps.
   -->
<dom-module id="light9-timeline-adjusters">
  <template>
    <style>
     :host {
         pointer-events: none; /* restored on the individual adjusters */
     }

    </style>
    <template is="dom-repeat" items="{{adjs}}">
      <light9-timeline-adjuster dia="{{dia}}"
                                adj="{{item}}"></light9-timeline-adjuster>
    </template>
  </template>
</dom-module>

<!-- Yellow dotted handle that you can adjust to edit something.
     Knows an attribute to edit and the true screen location, even if
     parent <light9-timeline-adjusters> has offset us a bit to avoid a
     text overlap.
     Draws affordance arrows and a connector line if we're far
     away from the point that we edit.
     May grow to a bigger editor when you click or drag.
   -->
<dom-module id="light9-timeline-adjuster">
  <template>
    <style>
     /* 
     #top {outline: 2px solid rgba(255, 0, 0, 0.25);}
     table {outline: 2px solid rgba(0, 0, 255, 0.19);}
     */
     
     #top {
         position: absolute;
         display: inline-block;
     }
     table {
         position: relative;
         left: -50%;
         top: -40px; /* percent had no effect */
         z-index: 2;
         border-collapse: collapse;
     }
     td {
         text-align: center;
         font-size: 20px;
     }
     span {
         font-size: 16px;
         background: rgba(255, 255, 0, 0.5);
         border: 3px yellow dotted;
         border-radius: 8px;
         padding: 5px;

         cursor: ew-resize;
         -webkit-user-select: none;
         pointer-events: all;
     }
     span.empty {
         width: 30px; /* todo: supposed to fill the whole visible section*/
         height: 13px;
         display: inline-block;
         background: rgba(0,0,0,0);
     }
    </style>
    <div id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px">
      <table>
        <tr><td></td><td style="visibility: hidden">↑</td><td></td></tr>
        <tr><td>←</td><td><span id="label" class$="[[spanClass]]">[[displayValue]]</span></td><td>→</td></tr>
        <tr><td></td><td style="visibility: hidden">↓</td><td></td></tr>
      </table>
    </div>
    
  </template>
</dom-module>

<!-- sometimes we draw attrs within the shape of a note. -->
<dom-module id="light9-timeline-note-inline-attrs">
  <template>

  </template>
  <script>
   Polymer({
       is: "light9-timeline-note-inline-attrs",
       properties: {
       }
   });
  </script>
</dom-module>

<script src="/lib/sylvester/sylvester.js"></script>
<script src="/lib/d3/build/d3.min.js"></script>
<script src="/lib/N3.js/browser/n3-browser.js"></script>
<script src="/lib/knockout/dist/knockout.debug.js"></script>
<script src="/lib/shortcut/index.js"></script>
<script src="/lib/async/dist/async.js"></script>
<script src="adjustable.js"></script>
<script src="timeline.js"></script>