<script src="/lib/underscore/underscore-min.js"></script>
<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="/lib/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/lib/paper-radio-button/paper-radio-button.html">
<link rel="import" href="paint-report-elements.html">
<link rel="import" href="../rdfdb-synced-graph.html">
<link rel="import" href="../light9-collector-client.html">


<dom-module id="light9-paint-canvas">
  <template>
    <style>
     :host {
         display: block;
     }
     #parent {
         position: relative;
         height: 500px;
     }
     #parent > * {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 500px;
     }
     #toolbar {
         background: #a7a7a7;
     }
     svg > path {
         fill:none;
         stroke:rgba(255, 255, 255, 0.66);
         stroke-width:80;
         filter:url(#blur);
         stroke-linecap:butt;
         stroke-linejoin:miter;
         stroke-miterlimit:4;
     }
    </style>

    <div id="toolbar">
      <paper-radio-group selected="{{tool}}">
        <paper-radio-button name="hover">hover spot</paper-radio-button>
        <paper-radio-button name="paint">paint</paper-radio-button>
        <paper-radio-button name="erase">erase</paper-radio-button>
      </paper-radio-group>
      <button on-click="onClear">clear</button>
    </div>
    
    <div id="parent">
      <img src="{{bg}}">
      <svg id="paint" viewBox="0 0 500 221">
        <defs id="defs12751">
          <filter
              style="color-interpolation-filters:sRGB"
              id="blur"
              x="-5.0" y="-5.0"
              width="11.0" height="11.0"
          >
            <feGaussianBlur
                stdDeviation="20"
                k2="1.01"
                result="result1"
            ></feGaussianBlur>
            <!--   <feMorphology
                 in="result1"
                 operator="dilate"
                 radius="3.39"
                 result="result3"
                 ></feMorphology>
                 <feMorphology
                 in="result1"
                 radius="3.37"
                 result="result2"
                 ></feMorphology>
                 <feComposite
                 in="result3"
                 in2="result2"
                 operator="arithmetic"
                 k1="0"
                 k2="1.00"
                 k3="0.43"
                 k4="0"
                 ></feComposite> -->
          </filter>
        </defs>
      </svg>
    </div>
  </template>
  
</dom-module>

<dom-module id="light9-paint">
  <template>
    <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

    <light9-paint-canvas id="canvas" bg="bg3.jpg" painting="{{painting}}"></light9-paint-canvas>

    <iron-ajax id="solve" method="POST" url="../paintServer/solve" last-response="{{solve}}"></iron-ajax>

    <iron-ajax id="bestMatches" method="POST" url="../paintServer/bestMatches"></iron-ajax>
    
    <div>To collector: <light9-collector-client self="{{client}}"></light9-collector-client></div>

    <light9-simulation graph="{{graph}}" solution="{{solve}}" layers="{{layers}}"></light9-simulation>
  </template>
</dom-module>

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

<script src="paint-elements.js"></script>