     for { color, name }, i in items
       do (color, name, i) ->
         hats.insertAdjacentHTML 'beforeend', "
-          <button id=hat-#{i} style='background-color:#{color}'
-              title='Open new window with this hat'>
-            #{name}
+          <button id=hat-#{i} class=open style='background-color:#{color}'
+              draggable=true title='Open new window with this hat'>
+            <span>#{name}</span>
             <div>
               <img class=edit title=Edit src=icons/edit.png />
               <img class=delete title=Delete src=icons/delete.png />
             </div>
           </button>"
-        document.querySelector "#hat-#{i}"
-          .addEventListener 'click', ->
-            alert "hat #{i}"
-            window.close()
-        document.querySelector "#hat-#{i} .edit"
-          .addEventListener 'click', (event) ->
-            event.stopPropagation()     # don't let the button see this event
-            create "edit.html?index=#{i}&color=#{
-                encodeURIComponent color}&name=#{
-                encodeURIComponent name}", event.screenX, event.screenY
-        # XXX might want to confirm before deleting?
-        document.querySelector "#hat-#{i} .delete"
-          .addEventListener 'click', (event) ->
-            event.stopPropagation()
-            items.splice i, 1
-            storage.set items, update # recurse
     document.querySelector 'button'
       .focus()
 
-storage.get (items) ->
-  if items.length
-    window.addEventListener 'focus', update
-  else
-    storage.set [ name: 'My First Hat', color: hue2rgb Math.random() ], ->
-      window.addEventListener 'focus', update
-      update()
+# has to be window; not sure why
+window.addEventListener 'focus', update
+
+document.addEventListener 'click',
+  ({screenX, screenY, target: {className, id, parentNode: {parentNode}}}) ->
+    if className is 'open'
+      # XXX drag and drop!
+      [ ..., id ] = id.split '-'
+      alert "hat #{id}"
+      window.close()
+    else
+      { id, style } = parentNode
+      [ ..., id ] = id.split '-'
+      id = parseInt id
+      if className is 'delete'
+        # XXX might want to confirm before deleting?
+        items.splice id, 1
+        storage.set items, update
+      else if className is 'edit'
+        create "edit.html?index=#{id}&color=#{
+            encodeURIComponent bg2rgb style.backgroundColor}&name=#{
+            encodeURIComponent parentNode.querySelector('span').innerText}",
+          screenX, screenY
+
+document.querySelector '#add'
+  .addEventListener 'click', ({screenX, screenY}) ->
+    create "edit.html?color=#{encodeURIComponent pickNewColor (
+        color for {color} in items)}", screenX, screenY

      when g then (b - r) / diff + 2
      when b then (r - g) / diff + 4

pickNewColor = (colors) ->
  hues = (rgb2hue color for color in colors)
    .sort (a, b) ->
      a - b
  [ begin, offset ] = (hues.map (v, i, arr) ->
      [i, (arr[i + 1] ? arr[0] + 1) - v]
    .sort ([ai, av], [bi, bv]) ->
      bv - av)[0]                      # backwards so the maximum will be first
  offset = 1 unless offset
  hue2rgb hues[begin] + PHI * offset


create = (url, x, y) ->
  chrome.windows.create
    url: url

#    ({tabs: [ { windowId } ] }) ->
#      chrome.windows.update windowId, drawAttention: yes

# don't frighten the user with a blank menu
storage.get (items) ->
  unless items.length
    storage.set [ name: 'My First Hat', color: hue2rgb Math.random() ], ->
      update()

# script-global list, written by update(), read by everyone
items = []

update = ->
  storage.get (gotten) ->
    items = gotten
    hats = document.querySelector '#hats'
    # start with empty div
    while hats.firstChild
