--- a/light9/web/timeline/timeline-elements.html	Wed Jun 07 07:41:06 2017 +0000
+++ b/light9/web/timeline/timeline-elements.html	Thu Jun 08 07:54:08 2017 +0000
@@ -135,11 +135,24 @@
 <dom-module id="light9-timeline-diagram-layer">
   <template>
     <style>
-     :host {
+      :host {
+      }
+      svg {
+      width: 100%;
+      height: 100%;
+      }
+      #notes > path {
+      
+      stroke:#000000;
+      stroke-width:1.5;
+      }
+     #notes > path.hover {
+         stroke-width: 1.5;
+         stroke: #888;
      }
-     svg {
-         width: 100%;
-         height: 100%;
+     #notes > path.selected {
+         stroke-width: 5;
+         stroke: red;
      }
     </style>
     <svg xmlns="http://www.w3.org/2000/svg"

--- a/light9/web/timeline/timeline.coffee	Wed Jun 07 07:41:06 2017 +0000
+++ b/light9/web/timeline/timeline.coffee	Thu Jun 08 07:54:08 2017 +0000
@@ -459,7 +459,6 @@
           if @worldPts and timeEditFor not in @pointUris
             return false
     return true
-      
             
   update: (patch) ->
     if not @patchCouldAffectMe(patch)
@@ -890,11 +889,12 @@
 
   
 Polymer
-  # note boxes
+  # note boxes. Page selection.
   is: 'light9-timeline-diagram-layer'
   properties: {}
   ready: ->
     @elemById = {}
+    @selection = {hover: ko.observable(null), selected: ko.observable([])}
 
   attached: ->
     @querySelector('svg').add
@@ -904,7 +904,7 @@
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
 
-  getOrCreateElem: (uri, groupId, tag, attrs) ->
+  getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->
     elem = @elemById[uri]
     if !elem
       elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)
@@ -912,6 +912,8 @@
       elem.setAttribute('id', uri)
       for k,v of attrs
         elem.setAttribute(k, v)
+      if moreBuild
+        moreBuild(elem)
     return elem
 
   clearElem: (uri, suffixes) -> # todo: caller shouldn't have to know suffixes!
@@ -928,7 +930,7 @@
         return true
     return false
     
-  setNote: (uri, curvePts, effect) ->
+  setNote: (uri, curvePts, effect, classes) ->
     areaId = uri + '/area'
     labelId = uri + '/label'
     if not @anyPointsInView(curvePts)
@@ -947,11 +949,34 @@
         hash += effect.charCodeAt(i)
       hue = (hash * 8) % 360
       sat = 40 + (hash % 20) # don't conceal colorscale too much
+
+    attrs = {style: "fill:hsla(#{hue}, #{sat}%, 58%, 0.313);"}
+    elem = @getOrCreateElem areaId, 'notes', 'path', attrs, (elem) =>
+      elem.addEventListener 'mouseenter', =>
+        @selection.hover(uri)
+        log('enter', uri)
+      elem.addEventListener 'mousedown', (ev) =>
+        log('click', uri)
+        sel = @selection.selected()
+        if ev.getModifierState('Control')
+          if uri in sel
+            sel = _.without(sel, uri)
+          else
+            sel.push(uri)
+        else
+          sel = [uri]
+        @selection.selected(sel)
+      elem.addEventListener 'mouseleave', =>
+        log('leave', uri)
+        @selection.hover(null)
+    elem.setAttribute('d', svgPathFromPoints(curvePts))
+    @updateNotePathClasses(uri, elem)
+
+  updateNotePathClasses: (uri, elem) ->
+    ko.computed =>
+      classes = 'light9-timeline-diagram-layer ' + (if @selection.hover() == uri then 'hover' else '') + ' '  + (if uri in @selection.selected() then 'selected' else '')
+      elem.setAttribute('class', classes)
     
-    elem = @getOrCreateElem(areaId, 'notes', 'path',
-      {style:"fill:hsla(#{hue}, #{sat}%, 58%, 0.313); stroke:#000000; stroke-width:1.5;"})
-    elem.setAttribute('d', svgPathFromPoints(curvePts))
-
     #elem = @getOrCreateElem(uri+'/label', 'noteLabels', 'text', {style: "font-size:13px;line-height:125%;font-family:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"})
     #elem.setAttribute('x', curvePts[0].e(1)+20)
     #elem.setAttribute('y', curvePts[0].e(2)-10)