         points: []
         valence: 'con'
 
+##
+# GiveOpinionButton
+# Displays the give opinion button which toggles to crafting state. 
+# Primary motivation for pulling this out separately is to 
+# animate between results and crafting states using the 
+# ReactTransitionGroup interface.
 GiveOpinionButton = React.createClass
   displayName: 'GiveOpinionButton'
 
+  # Moves the GiveOpinionButton under the slider handle
   place: ->
     left = $('.ui-slider-handle').offset().left - $('.opinion_region').offset().left 
     
     if @props.currentOpinion > 50 # position right justified when opposing
-      left -= 120 # width of give opinion button
-
+      # 120 is based on width of give opinion button, which can't be checked here b/c this is before animation is complete
+      left -= 120 
+
+    # Ugly to manipulate the opinion region here
+    # Problem: This code will not run when results is directly accessed.
     $('.opinion_region').css
       transform: "translate(#{left}, -18px)"
       '-webkit-transform': "translate(#{left}px, -18px)"

      R.div className:'proposal_histogram_region',
        R.div className:'histogram_layout', 'data-state':@state.state, 'data-prior-state':@state.priorstate,
          #for segment in [6..0]
          for segment in [@num_small_segments..0]
            R.div key:"#{segment}", className:"histogram_bar #{if segment_is_extreme_or_neutral(segment) then 'extreme_or_neutral' else '' }", id:"segment-#{segment}", 'data-segment':segment, style: {width: if segment_is_extreme_or_neutral(segment) then "#{3 * @avatar_size}px" else "#{@avatar_size}px"},
              R.ul className:'histogram_bar_users',
                for opinion in @state.data.histogram_small_segments[segment] #@state.data.opinions[segment]
                  R.li key:"#{opinion.user_id}", id:"avatar-#{opinion.user_id}", className:"avatar segment-#{segment}", 'data-action':'user_opinion', 'data-id':opinion.user_id, style:{height:"#{@avatar_size}px", width:"#{@avatar_size}px"}, 'data-tooltip':'user_profile'



          R.div className:'histogram_base', 
            R.div className:'feeling_slider ui-slider-handle',

                  comment_count: point.comment_count
                  author: point.user_id

##
# YourPoints
# List of important points for the active user. 
# Two instances used for Pro and Con columns. Shown as part of DecisionBoard. 
# Creates NewPoint instances.
YourPoints = React.createClass
  displayName: 'YourPoints'

