--- a/bin/effecteval	Wed Jun 10 05:50:04 2015 +0000
+++ b/bin/effecteval	Wed Jun 10 06:36:08 2015 +0000
@@ -308,9 +308,8 @@
             (r'/()', SFH,
              {'path': 'light9/effecteval', 'default_filename': 'index.html'}),
             (r'/effect', EffectEdit),
-            (r'/(websocket\.js)', SFH, {'path': 'light9/rdfdb/web/'}),
             (r'/effect\.js', StaticCoffee, {'src': 'light9/effecteval/effect.coffee'}),
-            (r'/index\.js', StaticCoffee, {'src': 'light9/effecteval/index.coffee'}),
+            (r'/(effect-components\.html)', SFH, {'path': 'light9/effecteval'}),
             (r'/effectUpdates', EffectUpdates),
             (r'/code', Code),
             (r'/songEffectsUpdates', SongEffectsUpdates),

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/effecteval/effect-components.html	Wed Jun 10 06:36:08 2015 +0000
@@ -0,0 +1,108 @@
+<link rel="import" href="/lib/polymer/polymer.html">
+<script src="/websocket.js"></script>
+<script src="/lib/jquery-2.1.1.min.js"></script>
+
+<dom-module id="song-effect-list">
+  <template>
+    <template is="dom-repeat" items="{{songs}}" as="song">
+      <li>
+        <a class="song"
+           href="{{song.uri}}"
+           on-click="focusSong">Song <span>{{song.label}}</span></a>
+        <ul>
+          <template is="dom-repeat" items="{{song.effects}}" as="effect">
+            <li>
+              <l9-effect uri="{{effect.uri}}"
+                         label="{{effect.label}}"></l9-effect>
+            </li>
+          </template>
+          <li>
+            <effect-drop-target song-uri="{{song.uri}}"></effect-drop-target>
+          </li>
+        </ul>
+      </li>
+    </template>
+  </template>
+</dom-module>
+<script>
+ Polymer({
+   is: "song-effect-list",
+   properties: {
+     songs: Object
+   },
+   ready: function() {
+     reconnectingWebSocket("songEffectsUpdates", function(msg) {
+       var m, s;
+       m = window.location.search.match(/song=(http[^&]+)/);
+       if (m) {
+         var match = decodeURIComponent(m[1]);
+         this.songs = msg.songs.filter(function(s) { return s.uri == match; });
+       } else {
+         this.songs = msg.songs;
+       }
+     }.bind(this));
+   },
+   focusSong: function(ev) {
+     ev.preventDefault()
+     window.location.search = '?' + $.param({song: ev.model.song.uri});
+   }
+ });
+</script>
+
+<dom-module id="l9-effect">
+  <template>
+    <a class="effect" href="{{href}}">{{label}}</a>
+    <button on-click="deleteEffect">Delete</button>
+  </template>
+</dom-module>
+<script>
+ Polymer({
+   is: "l9-effect",
+   properties: {
+     uri: String,
+     label: String,
+     href: {
+       type: String,
+       computed: 'computeHref(uri)'
+     }
+   },
+   computeHref: function(uri) {
+     return 'effect?'+jQuery.param({uri: uri});
+   },
+   deleteEffect: function() {
+     $.ajax({
+       type: 'DELETE',
+       url: 'effect?' + $.param({uri: this.uri})
+     });
+     console.log("del", this.uri);
+   }
+ });
+</script>
+
+<dom-module id="effect-drop-target">
+  <template>
+    <div class="dropTarget"
+        on-dragenter="dragover"
+        on-dragover="dragover"
+        on-drop="drop">Add another (drop a sub or effect class)</div>
+  </template>
+</dom-module>
+<script>
+ Polymer({
+   is: "effect-drop-target",
+   properties: {
+     songUri: String
+   },
+   dragover: function(event) {
+     event.preventDefault()
+     event.dataTransfer.dropEffect = 'copy'
+   },
+   drop: function(event) {
+     event.preventDefault()
+     $.post('songEffects', {
+       uri: this.songUri,
+       drop: event.dataTransfer.getData('text/uri-list')
+     });
+   }
+ });
+</script>

--- a/light9/effecteval/index.coffee	Wed Jun 10 05:50:04 2015 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,42 +0,0 @@
-model =
-  songs: ko.observableArray([])
-
-model.dragover = (obj, event) ->
-  event.preventDefault()
-  event.originalEvent.dataTransfer.dropEffect = 'copy'
-
-model.drop = (uri, event) ->
-  event.preventDefault()
-  dropped(uri, event.originalEvent.dataTransfer.getData('text/uri-list'))
-
-model.focusSong = (song) ->
-  window.location.search = '?song=' + song.uri
-
-dropped = (songTargetUri, dropUri) ->
-  $.post('songEffects', {uri: songTargetUri, drop: dropUri})
-
-deleteEffect = (uri) ->
-  $.ajax
-    type: 'DELETE'
-    url: 'effect?' + $.param({uri: uri})
-  console.log("del", uri)
-  
-reconnectingWebSocket "songEffectsUpdates", (msg) ->
-  for s in msg.songs
-    for e in s.effects
-      do (e) ->
-        e.deleteEffect = -> deleteEffect(e.uri)
-
-
-  m = window.location.search.match(/song=(http[^&]+)/)
-  if m
-    model.songs((s for s in msg.songs when s.uri == m[1]))
-  else
-    model.songs(msg.songs)
-  
-ko.applyBindings(model)
-
-  # there's a shorter unpack thing
-  #writeBack = ko.computed ->
-  #  console.log('sendback' ,{code: model.code()})
-  
\ No newline at end of file

--- a/light9/effecteval/index.html	Wed Jun 10 05:50:04 2015 +0000
+++ b/light9/effecteval/index.html	Wed Jun 10 06:36:08 2015 +0000
@@ -4,6 +4,7 @@
     <title>effecteval</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="/style.css">
+    <link rel="import" href="effect-components.html">
   </head>
   <body>
     <div id="status">starting...</div>
@@ -11,22 +12,6 @@
     <h1>Effect instances</h1>
     <div><a href=".">View all songs</a></div>
     <!-- subscribe to a query of all effects and their songs -->
-    <ul data-bind="foreach: songs">
-      <li>
-        <a class="song" data-bind="attr: {href: uri}, click: $root.focusSong">Song <span data-bind="text: label"></span></a>
-        <ul>
-          <!-- ko foreach: effects -->
-          <li>
-            <a class="effect" data-bind="attr: {href: 'effect?'+jQuery.param({uri: uri})}, text: label"></a> <button data-bind="click: deleteEffect">Delete</button>
-          </li>
-          <!-- /ko -->
-          <li class="dropTarget" data-bind="event: {dragover: $root.dragover, dragenter: $root.dragover, drop: function(data, event) { $root.drop(uri, event); }}">Add another (drop a sub or effect class)</li>
-        </ul>
-      </li>
-    </ul>
-    <script src="/lib/jquery-2.1.1.min.js"></script>
-    <script src="/lib/knockout-3.1.0.js"></script>
-    <script src="/websocket.js"></script>
-    <script src="index.js"></script>
+    <song-effect-list></song-effect-list>
   </body>
 </html>