anchor.diff:          stroke_width: stroke_width
           dash_array: dash
   
  +####
  +# GroupSelectionRegion
  +#
  +# Draws a border around the selected opinion(s)
  +# Shows a bubble mouth for selected opinions or 
  +# a user name + avatar display if we've selected
  +# an individual opinion.
  +GroupSelectionRegion = ReactiveComponent
  +  displayName: 'GroupSelectionRegion'
  +
  +  render : -> 
  +    hist = fetch 'histogram'
  +
  +    has_histogram_focus = hist.selected_opinions || hist.selected_opinion
  +    if has_histogram_focus
  +      DIV 
  +        style: 
  +          width: BODY_WIDTH + 80
  +          border: "3px solid #{if get_selected_point() then '#ccc' else focus_blue }"
  +          height: '100%'
  +          position: 'absolute'
  +          borderRadius: 16
  +          marginLeft: if lefty then 200 else -BODY_WIDTH/2 - 40
  +          left: if lefty then 0 else '50%'
  +          top: 18
  +
  +        # draw a bubble mouth
  +        if hist.selected_opinions
  +          w = 40; h = 30
  +          left = translateStanceToPixelX(hist.selected_opinion_value, BODY_WIDTH) + 10
  +
  +          DIV 
  +            style: cssTriangle 'top', \
  +                               (if get_selected_point() then '#ccc' else focus_blue), \
  +                               w, h,               
  +                                  position: 'relative'
  +                                  top: -32
  +                                  left: left
  +
  +            DIV
  +              style: cssTriangle 'top', 'white', w - 1, h - 1,
  +                position: 'relative'
  +                left: -(w - 2)/2
  +                top: 6
  +
  +        # draw a name + avatar display for the selected opinion
  +        else 
  +          place_avatar_opinion_value = \
  +               if hist.selected_opinion_value > 0 then .8 else -.8
  +          left = translateStanceToPixelX(place_avatar_opinion_value, BODY_WIDTH) + 20
  +
  +          avatar_size = 80
  +          user = fetch(fetch(hist.selected_opinion).user)
  +          name = user.name or 'Anonymous'
  +          title = "#{name}'#{if name[name.length - 1] != 's' then 's' else ''} Opinion"
  +
  +          name_width = widthWhenRendered(title, {fontSize: '30px', fontWeight: '600'})
  +
  +          if hist.selected_opinion_value > 0
  +            name_style = 
  +              left: -28 - avatar_size * .5 - name_width 
  +              borderTopLeftRadius: 16
  +              paddingRight: avatar_size * .75
  +              paddingLeft: 18
  +
  +          else
  +            name_style = 
  +              left: avatar_size/4
  +              borderTopRightRadius: 16
  +              paddingLeft: avatar_size * .75
  +              paddingRight: 18
  +                
  +          DIV style: {left: left, position: 'absolute'},
  +
  +            DIV null,
  +              Avatar 
  +                key: user
  +                user: user
  +                hide_tooltip: true
  +                style: 
  +                  position: 'absolute'
  +                  width: avatar_size
  +                  height: avatar_size
  +                  top: -avatar_size * .75
  +                  left: -avatar_size/4
  +                  zIndex: 99 
  +                  border: "3px solid #{focus_blue}"
  +
  +              DIV 
  +                style: _.extend name_style,
  +                  position: 'absolute'
  +                  backgroundColor: focus_blue
  +                  paddingTop: 8
  +                  paddingBottom: 8
  +                  color: 'white'
  +                  top: -58
  +                  width: name_width + 10 + 18 + avatar_size * .75 + 10
  +
  +
  +                SPAN 
  +                  style: 
  +                    fontSize: 30
  +                  title
  +
  +    else 
  +      SPAN null
   
   ##
   # YourPoints
  
positive.code: }
  """
  
  ####
  # GroupSelectionRegion
  #
  # Draws a border around the selected opinion(s)
  # Shows a bubble mouth for selected opinions or 
  # a user name + avatar display if we've selected
  # an individual opinion.
  GroupSelectionRegion = ReactiveComponent
    displayName: 'GroupSelectionRegion'
  
    render : -> 
      hist = fetch 'histogram'
  
      has_histogram_focus = hist.selected_opinions || hist.selected_opinion
      if has_histogram_focus
        DIV 
          style: 
            width: BODY_WIDTH + 80
            border: "3px solid #{if get_selected_point() then '#ccc' else focus_blue }"
            height: '100%'
            position: 'absolute'
            borderRadius: 16
            marginLeft: if lefty then 200 else -BODY_WIDTH/2 - 40
            left: if lefty then 0 else '50%'
            top: 18
  
          # draw a bubble mouth
          if hist.selected_opinions
            w = 40; h = 30
            left = translateStanceToPixelX(hist.selected_opinion_value, BODY_WIDTH) + 10
  
            DIV 
              style: cssTriangle 'top', \
                                 (if get_selected_point() then '#ccc' else focus_blue), \
                                 w, h,               
                                    position: 'relative'
                                    top: -32
                                    left: left
  
              DIV
                style: cssTriangle 'top', 'white', w - 1, h - 1,
                  position: 'relative'
                  left: -(w - 2)/2
                  top: 6
  
          # draw a name + avatar display for the selected opinion
          else 
            place_avatar_opinion_value = \
                 if hist.selected_opinion_value > 0 then .8 else -.8
            left = translateStanceToPixelX(place_avatar_opinion_value, BODY_WIDTH) + 20
  
            avatar_size = 80
            user = fetch(fetch(hist.selected_opinion).user)
            name = user.name or 'Anonymous'
            title = "#{name}'#{if name[name.length - 1] != 's' then 's' else ''} Opinion"
  
            name_width = widthWhenRendered(title, {fontSize: '30px', fontWeight: '600'})
  
            if hist.selected_opinion_value > 0
              name_style = 
                left: -28 - avatar_size * .5 - name_width 
                borderTopLeftRadius: 16
                paddingRight: avatar_size * .75
                paddingLeft: 18
  
            else
              name_style = 
                left: avatar_size/4
                borderTopRightRadius: 16
                paddingLeft: avatar_size * .75
                paddingRight: 18
                  
            DIV style: {left: left, position: 'absolute'},
  
              DIV null,
                Avatar 
                  key: user
                  user: user
                  hide_tooltip: true
                  style: 
                    position: 'absolute'
                    width: avatar_size
                    height: avatar_size
                    top: -avatar_size * .75
                    left: -avatar_size/4
                    zIndex: 99 
                    border: "3px solid #{focus_blue}"
  
                DIV 
                  style: _.extend name_style,
                    position: 'absolute'
                    backgroundColor: focus_blue
                    paddingTop: 8
                    paddingBottom: 8
                    color: 'white'
                    top: -58
                    width: name_width + 10 + 18 + avatar_size * .75 + 10
  
  
                  SPAN 
                    style: 
                      fontSize: 30
                    title
  
      else 
        SPAN null
  
  
  Homepage = ReactiveComponent
  
negative.code:       StateGraph()
  
    resetSelection: (e) ->
      # TODO: This is ugly. Perhaps it would be better to have components 
      #       register a callback when a click bubbles all the way to the
      #       top. There are global interdependencies to unwind as well.
  
      if !fetch('auth').form
        hist = fetch 'histogram'
  