-moment = require 'moment'
-
 module.exports =
 class StatusBarManager
   count: 0
 
   constructor: (statusBar, @duplicateTimeDelay) ->
+    @onClick = @onClick.bind(this)
+    @onAnimationEnd = @onAnimationEnd.bind(this)
     @render()
     @tile = statusBar.addRightTile(
       item: @element
-      priority: 100
+      priority: 10
     )
 
   render: ->
     @number = document.createElement('div')
+    @number.classList.add('notifications-count-number')
     @number.textContent = @count
-    @number.addEventListener 'animationend', (e) => @number.classList.remove('new-notification') if e.animationName is 'new-notification'
+    @number.addEventListener 'animationend', @onAnimationEnd
 
     @element = document.createElement('a')
     @element.classList.add('notifications-count', 'inline-block')
-    @tooltip = atom.tooltips.add(@element, title: 'Notifications')
+    @tooltip = atom.tooltips.add(@element, title: '0 notifications')
     span = document.createElement('span')
+    span.classList.add('notifications-count-badge')
     span.appendChild(@number)
     @element.appendChild(span)
-    @element.addEventListener 'click', => atom.commands.dispatch(@element, 'notifications-plus:toggle-log')
+    @element.addEventListener 'click', @onClick
+
 
     lastNotification = null
     for notification in atom.notifications.getNotifications()


      lastNotification = notification

  destroy: ->
    @tile.destroy()
    @tile = null
    @tooltip.dispose()
    @tooltip = null

  addNotification: (notification) ->
    date = moment(notification.timestamp).format('LT')
    @tooltip.dispose()
    @tooltip = atom.tooltips.add(@element, title: "Last Notification #{date}")
    @element.setAttribute('last-type', notification.getType())
    @number.textContent = ++@count
    @number.classList.add('new-notification')

  clear: ->

    @number.textContent = @count
    @element.removeAttribute 'last-type'
    @tooltip.dispose()
    @tooltip = atom.tooltips.add(@element, title: "0 notifications")
