     id = @section.data 'id'
 
     @backstage = @roofy.backstage
-    @pointer   = @roofy.controlPanel.find "> a.control[data-id='#{id}']"
-    @close     = @section.find 'a.close'
+
+    @pointer = @roofy.controlPanel.find "> a.control[data-id='#{id}']"
+    @label   = @pointer.find '> span.label'
+
+    @close = @section.find 'a.close'
 
     initialize.call @
 
     return
 
-  update: ->
+  states: ->
+    Section.STATES
+
+  active: ->
+    @state == 'active'
+
+  inactive: ->
+    @state == 'inactive'
+
+  locked: ->
+    @state == 'locked'
+
+  controls: ->
+    [@pointer, @close]
+
+  # === Events ===
+
+  beforeActivate: (section) =>
+    @state = 'locked'
+
+    lockControls.call @
+
+    update.call @
+
+    return
+
+  onActivate: (section) =>
+    @state = 'active'
+
+    enableBackstage.call @
+
+    updatePointer.call @
+
+    update.call @
+
+    unlockControls.call @
+
+    return
+
+  beforeDeactivate: (section) =>
+    @state = 'locked'
+
+    lockControls.call @
+
+    update.call @
+
+    return
+
+  onDeactivate: (section) =>
+    @state = 'inactive'
+
+    disableBackstage.call @
+
+    updatePointer.call @
+
+    update.call @
+
+    unlockControls.call @
+
+    return
+
+  onControlClick: (event) =>
+    control = $ event.currentTarget
+
+    toogle.call @
+
+    false
+
+  # === Private ===
+
+  initialize = ->
+    update.call @
+
+    setupPointer.call @
+
+    setupClose.call @
+
+    return
+
+  update = ->
     states = do @states
     states = states.join ' '
 


    return

  enableBackstage: ->
    @backstage.css
      'overflow': 'scroll'

    return

  disableBackstage: ->
    @backstage.css
      'overflow': 'hidden'

    return

  lockControls: ->
    controls = do @controls

    $.each controls, (index, control) =>
      @lockControl control

      return

  lockControl: (control) ->
    if control
      locked = control.hasClass 'locked'



      @pointer.removeClass 'active'

    @label.html label

    @pointer.attr 'title', title

    return