<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="../edit-choice.html">
<link rel="import" href="inline-attrs.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;
     }
     #coveredByDiagram {
         position: relative;
         display: flex;
         flex-direction: column;
         height: 100%;
     }
     #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>
    <div id="coveredByDiagram">
      <light9-timeline-audio id="audio"
                             graph="{{graph}}"
                             show="{{show}}"
                             song="{{song}}"></light9-timeline-audio>
      <light9-timeline-time-zoomed id="zoomed"
                                   graph="{{graph}}"
                                   selection="{{selection}}"
                                   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" selection="{{selection}}"></light9-timeline-diagram-layer>
      <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">
      </light9-adjusters-canvas>
      <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>
    </div>
  </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%;
         flex-direction: column;
     }
     #top {
     }
     #rows {
         height: 100%;
     }
     #rows.dragging {
         background: rgba(126, 52, 245, 0.0784);
     }
     light9-timeline-time-axis {
     }
     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>
    <div id="rows"></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%;
      }
      #notes > path {
      
      stroke:#000000;
      stroke-width:1.5;
      }
     #notes > path.hover {
         stroke-width: 1.5;
         stroke: #888;
     }
     #notes > path.selected {
         stroke-width: 5;
         stroke: red;
     }
    </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 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}}"
                                       selection="{{selection}}"
                                       song="{{song}}"
                                       uri="{{uri}}"
                                       effect="{{effect}}"
    >
    </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>


<script src="/lib/async/dist/async.js"></script>
<script src="/lib/knockout/dist/knockout.js"></script>
<script src="/lib/shortcut/index.js"></script>
<script src="/lib/sylvester/sylvester.js"></script>
<script src="/lib/underscore/underscore-min.js"></script>
<script src="/node_modules/d3/dist/d3.min.js"></script>
<script src="/node_modules/n3/n3-browser.js"></script> 
<script src="/node_modules/pixi.js/dist/pixi.min.js"></script>

<script src="adjustable.js"></script>
<script src="adjusters.js"></script>
<script src="drawing.js"></script>
<script src="timeline.js"></script>
<script src="cursor_canvas.js"></script>