   str.charAt(0).toUpperCase() + str.slice(1)
 camelToSnake = (str) -> str.replace(/\W+/g, '_').replace(/([a-z\d])([A-Z])/g, '$1-$2')
 
-@currentPage = new ReactiveVar()
-@currentMenuItem = new ReactiveVar()
+@currentSubCat = new ReactiveVar()
+@currentCat = new ReactiveVar()
 
 getCurrentSubCat = ->
   for group in bootstrap_magic_variables
-    if group.keyName is currentPage.get()
+    if group.keyName is currentSubCat.get()
       return group
 
 initColorPicker = (node) ->

    BootstrapMagic.setOverride $input.attr('name'), $input.val()

  'click .menu-secondary-list' : -> 
    currentMenuItem.set(@category)
    if (_.map _.where(bootstrap_magic_variables, { category: currentMenuItem.get() }), (obj) -> obj).length is 1
      currentPage.set(_.where(bootstrap_magic_variables, { category: currentMenuItem.get() })[0].keyName)
 
  'click .menu-tertiary-list' : -> currentPage.set(@keyName)

  # 'click #reset' :-> do something
  #   return bootstrap_magic_variables

  "categories" : ->  _.map _.groupBy(bootstrap_magic_variables, 'category'), (obj) ->  obj[0]
  "subCategories" : ->  _.map _.where(bootstrap_magic_variables, { category: currentCat.get() }), (obj) -> obj
  "previewTmpl" : -> Template["bootstrap_magic_preview_#{camelToSnake @keyName}"] || null
  "inputTmpl" : -> Template["bootstrap_magic_input_#{@type}"] || null
  "formattedCat" : -> formatCamel @category
  "typeIs" : (type) -> @type is type
  "currentSubCat" : getCurrentSubCat
  "isSelectedCat" : -> @category is currentCat.get()
  "isSelectedSubCat" : ->  @keyName is currentSubCat.get()

Template._bootstrap_magic.events
  'change input.bootstrap-magic-input' : (e) ->
