             render(users)
 
             lightboxService.open($el)
+            lightboxListNavigationService.init($el)
 
         $scope.$watch "usersSearch", (searchingText) ->
             if not searchingText?

            html = usersTemplate(ctx)
            $el.find("div.watchers").html(html)

        $scope.$on "watcher:add", (ctx, item) ->
            selectedItem = item



module.directive("lightbox", ["lightboxService", LightboxDirective])

class LightboxListNavigationService
    stop: () ->
        $(document).off "keydown.list-navigation"

    init: ($el) ->
        $(document).on "keydown.list-navigation", (e) =>
            code = if e.keyCode then e.keyCode else e.which

            if code == 40 || code == 38 || code == 13
                e.preventDefault()

                active = $el.find('.active')

                if code == 13
                    active.trigger('click')

                if code == 40
                    if active.length
                        next = active.next('.watcher-single')

                        if next.length
                            active.removeClass('active')
                            next.addClass('active')
                    else
                        $el.find('.watcher-single:first').addClass('active')

                if code == 38
                    if active.length
                        prev = active.prev('.watcher-single')

                        if prev.length
                            active.removeClass('active')
                            prev.addClass('active')
                    else
                        $el.find('.watcher-single:last').addClass('active')

module.service("lightboxListNavigationService", LightboxListNavigationService)


#############################################################################
## Block Lightbox Directive
#############################################################################
