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

<dom-module id="light9-simulation">
  <template>
    <style>
     #solutions { display: flex; margin: 20px; }
     #single-light { margin-right: 70px; }
     #multi-light {}
     #breakdown { position: relative; }
     #sources { display: flex; }
     #solution { display: flex; margin-top: 80px; }
     #connectors { position: absolute; width: 100%; height: 100%; z-index: -1; }
     #connectors path { stroke: #615c54; stroke-width: 3px; }

     [draggable=true]:hover {
         box-shadow: 0 0 20px yellow;
     }
         
     
    </style>

    <div id="solutions">
      <div id="single-light">
        <div>Single pic best match:</div>

        <!-- drag this img to make an effect out of just it -->
        <light9-capture-image name="lighhtnamehere" path="{{solution.bestMatch.path}}"></light9-capture-image>

        <div>Error: {{solution.bestMatch.dist}}</div>
        
        <light9-device-settings graph="{{graph}}" subj="{{solution.bestMatch.uri}}"></light9-device-settings>
      </div>

      <!-- existing effect best match? -->
      
      <div id="multi-light">
        Created from multiple lights:

        <div id="breakdown">
          <svg id="connectors">
            <g>
              <path d="M 112,241 L 150,280"></path>
              <path d="M 332,241 L 150,280"></path>
              <path d="M 532,241 L 150,280"></path>
              <path d="M 732,241 L 150,280"></path>
            </g>
            
          </svg>
          <div id="sources">
            <div class="effectLike" draggable="true">
              <light9-capture-image name="aura1" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
              <light9-device-settings></light9-device-settings>
            </div>
            <div>
              <light9-capture-image name="aura2" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
              <light9-device-settings></light9-device-settings>
            </div>
            <div>
              <light9-capture-image name="aura3" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
              <light9-device-settings></light9-device-settings>
            </div>
            <div>
              <light9-capture-image name="aura4" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
              <light9-device-settings></light9-device-settings>
            </div>
          </div>
          
          <div id="solution">
            <div>
              <div>combined</div>
              <!-- drag this img to make an effect out of it -->
              <div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div>
              <div>error 9980</div>
            </div>
            <div>
              <div>residual</div>
              <div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div>
            </div>
          </div>
        </div>

        Save as effect named <input> <button>Save</button>
      </div>

  </template>
</dom-module>

<!-- merge more with light9-collector-device -->
<dom-module id="light9-device-settings">
  <template>
    <style>
     :host {
         display: block;
         break-inside: avoid-column;
         border: 2px solid gray;
         padding: 8px;
     }
     td.nonzero {
         background: #310202;
         color: #e25757;
     }
     td.full {
         background: #2b0000;
         color: red;
         font-weight: bold;
     }
    </style>
    <h3><a href="{{subj}}">{{label}}</a></h3>
    <table class="borders">
      <tr>
        <th>device attr</th>
        <th>value</th>
      </tr>
      <template is="dom-repeat" items="{{attrs}}">
        <tr>
          <td>{{item.attr}}</td>
          <td class$="{{item.valClass}}">{{item.val}}</td>
        </tr>
      </template>

  </template>
 
</dom-module>

<dom-module id="light9-capture-image">
  <template>
    <style>
     :host { display: block; }
       img {
         outline: 1px solid #232323;
         margin: 5px;
     }
    </style>
    <div>{{name}}</div>
    <div><img width="100" src="../{{path}}"></div>
  </template>
  <script>
   Polymer({
       is: "light9-capture-image",
       properties: {
           name: { type: String },
           path: { type: String },
       }
   });
  </script>
</dom-module>