   BootstrapMagic.start() if BootstrapMagic.start
 
 Template._bootstrap_magic.rendered = ->
-  currentMenuItem.set bootstrap_magic_variables[0].category
-  currentPage.set bootstrap_magic_variables[0].keyName
+  currentCat.set bootstrap_magic_variables[0].category
+  currentSubCat.set bootstrap_magic_variables[0].keyName
   @.autorun -> 
-    currentPage.get()
-    currentMenuItem.get()
+    currentSubCat.get()
+    currentCat.get()
     Meteor.defer -> initColorPicker($('.color-picker-area'))
 
 Template._bootstrap_magic.helpers

  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()

getCurrentSubCat = ->
  for group in bootstrap_magic_variables
    if group.keyName is currentPage.get()
      return group

initColorPicker = (node) ->

  #   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) ->
