<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.0784313725490196);
         }
     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
       - 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="noteLabels"></g>
        <g id="connectors"></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>

<!-- 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>
    <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>