         @port = chrome.runtime.connect name: 'options'
         @port.onMessage.addListener (msg) ->
             if msg.type is 'set auto_opac'
-                $ '#auto_opac-toggle'
+                H.$ '#auto_opac-toggle'
                     .checked = msg.value
 
         self = this
-        $ '#color'
+        H.$ '#color'
             .addEventListener 'input', (event) ->
                 event.preventDefault()
                 self.color = C.hex_to_rgb @value

                        console.log 'ERROR when setting auto_opac!!'
                        console.log chrome.runtime.lastError
        
        $ '#export'
          .addEventListener 'click', =>
            # show EXPORT dialog
            $ '#dialog'
              .style.visibility = "visible"

            $ '#dialog-json'
              .value = JSON.stringify @table.kfs

        $ '#import'
          .addEventListener 'click', =>
            $ '#dialog'
              .style.visibility = "visible"

            for el in $$ '.import-dialog'
              do -> el.style.visibility = "visible"

        $ '#dialog-load'
          .addEventListener 'click', =>
            console.log "attempting to load json!"
            try
              kfs = JSON.parse $('#dialog-json').value
              console.log kfs
              if kfs.length? and kfs.length > 0
                @table.clear_kfs()

'use strict'

K = require './keyframes.coffee'
C = require './color_helpers.coffee'
H = require './helpers.coffee'

class KFTable
    constructor: (@table, @keymode) ->
