-$(document).ready ->
-  search = $("#search-results")
+hasResults = if $('#search-results a').length > 0 then true else false
 
-  # search.on 'mouseover', 'li', ->
-  #   search.children('a').removeClass('selected')
-  #   $(this).parent('a').addClass 'selected'
-  #   $(this).mouseout -> $(this).parent('a').removeClass 'selected'
+currentSelection = $("#search-results a.selected")
 
-  Mousetrap.bind 'down', (e) ->
-    if e.preventDefault
-      e.preventDefault()
-    else
-      e.returnValue = false
-    console.log 'next'
-    if $("#search-results a.selected").index() + 1 == $("#search-results").children().length
-      console.log 'end of list'
-    else if !$('#search-results a').hasClass('selected')
-      $("#search-results a").first().addClass("selected")
-      console.log 'first first first'
-    else
-      $("#search-results a.selected").removeClass("selected").next().addClass('selected')
-      console.log 'down down down'
+results = $('#search-results')
 
 
-  Mousetrap.bind 'up', (e) ->
-    if e.preventDefault
+traverseUp = ->
+  console.log 'up arrow pressed'
+  return
+
+
+traverseDown = ->
+  console.log 'down arrow pressed'
+  $("#search-results a.selected").removeClass('selected').next().addClass('selected')
+  # return
+
+
+hoverSelection = ->
+  # TODO Refactor, currently it's very redundant
+  query = $('#search-results a')
+  $(query).on 'mouseenter', () -> $(this).addClass 'selected'
+  $(query).on 'mouseleave', () -> $(this).removeClass 'selected'
+  return
+
+arrayEqual = (a, b) ->
+  a.length is b.length and a.every (elem, i) -> elem is b[i]
+
+
+highlightSelection = ->
+  target = document.querySelector('#search-results')
+
+  # create an observer instance
+  observer = new MutationObserver((mutations) ->
+
+    oldResults = []
+
+    if $('#search-results a').index() != -1
+      $('#search-results a').each (index, element) ->
+        url = $(this).attr('href')
+        oldResults.push url
+        return
+
+    console.log 'old results: ' + oldResults
+    console.log 'oldResults count: ' + $(oldResults).length
+
+    i = 0
+    len = mutations.length
+    newResults = []
+    while i < len
+      resultsList = mutations[0].target
+
+      if i < mutations[0].length - 1
+        url = resultsList.querySelectorAll('a')[i].pathname
+        newResults.push url
+
+        $('#search-results a').each (index, element) ->
+          $(this).addClass 'selected' if index == 0
+      i++
+
+    $('#search-results a').each (index, element) ->
+      # FIXME
+      # this is "reseting" the selector to the top each time
+      if index == 0
+        console.log 'index = 0'
+        $(this).addClass 'selected'
+      return
+  )
+
+  # configuration of the observer:
+  config =
+    childList: true
+    subtree: true
+
+  # pass in the target node, as well as the observer options
+  observer.observe target, config
+
+
+  $('#search-posts').keydown (e) ->
+    if e.which == 40 # if the down arrow is pressed . . .
       e.preventDefault()
-    else
-      e.returnValue = false
-    console.log 'previous'
 
-    if $("#search-results a.selected").index() == 0
-      console.log 'end of list'
-    else
-      $("#search-results a.selected").removeClass("selected").prev().addClass('selected')
+      endOfList =
+        $("#search-results a.selected").index() + 1 == $("#search-results").children().length
+
+      observer.disconnect()
+      traverseDown() unless endOfList
+
+    else if e.which == 38 # if the up arrow is pressed . . .
+      e.preventDefault()
+      
+      observer.disconnect()
+      traverseUp()
+
+  $('#search-posts').keyup (e) ->
+    # once the up or down arrow is released . . .
+    if e.which == 40 or e.which == 38
+      observer.observe target, config
+  return
+
+
+$(document).ready ->
+  highlightSelection()
+  hoverSelection()
 
   Mousetrap.bind 'enter', (e) ->
     if e.preventDefault

  Mousetrap.bind 'e m a c s', ->
    console.log 'did you mean: vim'

  return

      e.returnValue = false
    window.open $('#search-results a.selected').attr('href'), '_self'


  Mousetrap.bind 'o h', ->
    console.log 'io'
