<link rel="import" href="/lib/polymer/polymer.html">
<link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="/lib/iron-ajax/iron-ajax.html">
<link rel="import" href="light9-timeline-audio.html">
<link rel="import" href="../rdfdb-synced-graph.html">
<link rel="import" href="../light9-music.html">
<link rel="import" href="../light9-color-picker.html">
<link rel="import" href="../edit-choice.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;
     }
     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
         position: absolute;
         left: 0; top: 0; right: 0; bottom: 0;
     }
     #debug {
      background: white;
      font-family: monospace;
      font-size: 125%;
      height: 15px;
     }
    </style>
    <div>
      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
      <light9-music id="music"
                    song="{{playerSong}}"
                    t="{{songTime}}"
                    playing="{{songPlaying}}"
                    duration="{{songDuration}}"></light9-music>
      timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>
      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>
    </div>
    <div id="debug">[[debug]]</div>
    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>
    <light9-timeline-audio id="audio"
                           graph="{{graph}}"
                           show="{{show}}"
                           song="{{song}}"></light9-timeline-audio>
    <light9-timeline-time-zoomed id="zoomed"
                                 graph="{{graph}}"
                                 dia="{{dia}}"
                                 set-adjuster="{{setAdjuster}}"
                                 song="{{song}}"
                                 show="{{show}}"
                                 zoom="{{viewState.zoomSpec}}"
                                 zoom-in-x="{{zoomInX}}">
    </light9-timeline-time-zoomed>
    <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer>
    <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">
    </light9-adjusters-canvas>
    <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>
  </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%;
     }
     #rows.dragging {
         background: rgba(126, 52, 245, 0.0784);
         }
     light9-timeline-audio {
         width: 100%;
         height: 100px;
     }
     light9-timeline-graph-row {
         flex-grow: 1;
     }
    </style>
    <div id="top">
      <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
      <light9-timeline-audio id="audio"
                             graph="{{graph}}"
                             song="{{song}}"
                             show="{{show}}"
                             zoom="{{zoomFlattened}}">
      </light9-timeline-audio>
      <div id="rows">
        <template is="dom-repeat" items="{{rows}}">
          <light9-timeline-graph-row graph="{{graph}}"
                                     dia="{{dia}}"
                                     set-adjuster="{{setAdjuster}}"
                                     song="{{song}}"
                                     zoom-in-x="{{zoomInX}}"
                                     row-index="{{item}}"
          >
          </light9-timeline-graph-row>
        </template>
      </div>
    </div>
  </template>
</dom-module>


<!--
     SVG or canvas that draws these:
       - background grids
       - zoom arcs
       - notes
     
     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 {
     }
     svg {
         width: 100%;
         height: 100%;
     }
    </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>
    </svg>
  </template>
</dom-module>

<dom-module id="light9-cursor-canvas">
  <template>
    <style>
     #canvas, :host {
         pointer-events: none;
     }
    </style>
    <canvas id="canvas"></canvas>
  </template>
</dom-module>
      
<dom-module id="light9-adjusters-canvas">
  <template>
    <style>
     #canvas, :host {
         pointer-events: none;
     }
    </style>
    <canvas id="canvas"></canvas>
  </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>
    <!-- light9-timeline-note repeated here -->
  </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 rect="{{inlineRect}}"
                                       graph="{{graph}}"
                                       song="{{song}}"
                                       uri="{{uri}}"
    >
    </light9-timeline-note-inline-attrs>
  </template>
</dom-module>

<!-- All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.
     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>
</dom-module>

<!-- sometimes we draw attrs within the shape of a note. -->
<dom-module id="light9-timeline-note-inline-attrs">
  <template>
    <style>
     #top {
         position: absolute;
         overflow: hidden;
         background: rgba(123, 123, 123, 0.71);
         border-radius: 6px;
         border: 1px solid #313131;
         padding: 3px;
         z-index: 2;
     }
    </style>
    <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">
      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>
      <table>
        <tr><th>effect:</th><td><edit-choice uri="{{effect}}" label="{{effectLabel}}"></edit-choice></td></tr>
        <tr><th>colorScale:</th><td>
          <light9-color-picker color="{{colorScale}}"></light9-color-picker>
        </td></tr>
      </table>
    </div>
  </template>
</dom-module>

<script src="/lib/sylvester/sylvester.js"></script>
<script src="/lib/d3/build/d3.min.js"></script>

<!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->
<script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
<!-- master version -->
<xxscript 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="/lib/underscore/underscore-min.js"></script>
<script src="adjustable.js"></script>
<script src="timeline.js"></script>