           unless d3.event.target?.type is "checkbox"
             d3.select(this).select("input")[0][0].click()
 
+
+
     horizonsEnter.append("canvas")
       .attr("width", width)
       .attr("height", height)
       .on("mousemove", ->
         left = this.getBoundingClientRect().left
         t = interval(tscale.invert(d3.event.clientX - left))
-        pos = tscale(t) + left + Math.floor(stepWidth/2)
-
-        r = this.parentNode.parentNode.getBoundingClientRect()
-        clip = "rect("+(r.top - 5)+"px,"+r.right+"px,"+Math.round(r.bottom)+"px,0px)"
-        parent.select(".rule")
-          .style("display", "block")
-          .style("clip", clip)
-          .style("left", pos + "px")
+
+        chart.showRuleAt t
+        fire "ruleMoved", t
       )
-      .on("mouseout", -> parent.select(".rule").style("display", "none"))
+      .on("mouseout", -> 
+        chart.showRuleAt null
+        fire "ruleMoved", null
+      )
 
     item = horizonsEnter.append("span")
       .attr("class", "item")

  .interval(timeInterval)
  .showLegend(true)
  .on("applyFilter", (selected) -> applyFilter "donor", selected)

recipientsChart = horizonChart()
  .title("Recipients")
  .interval(timeInterval)
  .showLegend(false)
  .on("applyFilter", (selected) -> applyFilter "recipient", selected)

purposesChart = horizonChart()
  .title("Purposes")
  .interval(timeInterval)
  .showLegend(false)
  .on("applyFilter", (selected) -> applyFilter "purpose", selected)


loadData = (filters) ->

    .concat colorsBetween("#e5f5e0",d3.hcl("#00441b").darker(), numBands)  # positive


  parent = null
  width = bandWidth
  height = bandHeight
  tscale = d3.time.scale().range([0, width])
