 
             NewPoint {valence: @props.valence}
 
+##
+# DecisionBoard
+# Handles the user's list of important points in crafting state. 
+# Primary motivation for pulling this out separately is to 
+# animate between results and crafting states using the 
+# ReactTransitionGroup interface.
 DecisionBoard = React.createClass
   displayName: 'DecisionBoard'
 
   componentWillEnter: (callback) ->
+    # Don't display the pro/con columns immediately, 
+    # otherwise they won't fit side by side as the 
+    # area animates the width
     $(@getDOMNode()).hide()
     _.delay =>
       $(@getDOMNode()).show()
       callback()
     , transition_speed
 
-  componentWillLeave: (callback) -> 
+  componentWillLeave: (callback) ->
     $(@getDOMNode()).hide()
     callback()
     # $(@getDOMNode()).slideUp transition_speed / 4, ->

  componentWillEnter: (callback) ->
    @place()

    $(@getDOMNode()).hide()
    _.delay =>
      $(@getDOMNode()).show()

#////////////////////////////////////////////////////////////
# Exploratory reimplemenntation of considerit client in React
#////////////////////////////////////////////////////////////

# Ugliness in this prototype: 
#   - ReactTransitionGroup based animations force defining custom components
#     when I'd rather just keep them in the parent component. 
#   - State transition javascript animations sometimes require setting css (e.g. width or transform), 
#     which are duplicated in the CSS itself to accommodate navigating directly to that state.
#   - Keeping javascript and CSS variables synchronized
#      * transition_speed
#      * slider width
#   - Not clear where to handle splitting up opinions into segments
#   - Sticky decision board requires hacks to CSS of community cons to get them to stay to the right
#   - Haven't declared prop types for the components
#   - Some animations are living in places that access DOM not managed by them

# React aliases
R = React.DOM
ReactTransitionGroup = React.addons.TransitionGroup

# Variables that need to be kept synchronized with CSS
transition_speed = 700   # Speed of transition from results to crafting (and vice versa)
histogram_width = 636    # Width of the slider / histogram base


#####
# Responsibilities that will later be managed by ActiveREST
all_users = {} 

parseProposal = (data) ->
  # Build hash of user information
  data.users = $.parseJSON data.users
  for user in data.users
    if !user.avatar_file_name
      user.avatar_file_name = {small: '/system/default_avatar/small_default-profile-pic.png', large: '/system/default_avatar/large_default-profile-pic.png'}
    else
      user.avatar_file_name = {small: "/system/avatars/#{user.id}/small/#{user.avatar_file_name}", large: "/system/avatars/#{user.id}/large/#{user.avatar_file_name}"}
    all_users[user.id] = user

  # separate pro and con points
  data.pro_community_points = _.where data.points, {is_pro: true}
  data.con_community_points = _.where data.points, {is_pro: false}

  ##
  # Split up opinions into segments. For now we'll keep three hashes: 
  #   - all opinions
  #   - high level segments (the seven original segments, strong supporter, neutral, etc)
  #   - small segments that represent individual columns in the histogram, now that 
  #     we do not have wide bars per se
  num_opinions = data.opinions.length

  # an initial function for sizing avatars
  biggest_possible_avatar_size = 50
  data.avatar_size = biggest_possible_avatar_size / Math.sqrt( (num_opinions + 1)/10  )

  # Calculate how many segments columns to put on the histogram. Note that for the extremes and for neutral, we'll hack it 
  # to allow three columns for those segments. 
  data.num_small_segments = Math.floor(histogram_width/data.avatar_size) - 2 * 3 - 1 #for the additional cols for the extremes+neutral 

  seven_original_opinion_segments = {0:[],1:[],2:[],3:[],4:[],5:[],6:[]}

  histogram_small_segments = {}
  histogram_small_segments[i] = [] for i in [0..data.num_small_segments]
    
  max_slider_variance = 2.0 # In old system, opinion stances varied from -1.0 to 1.0. 

  for opinion in data.opinions
    seven_original_opinion_segments[opinion.stance_segment].push opinion
    small_segment = Math.floor(data.num_small_segments * (opinion.stance + 1) / max_slider_variance)
    histogram_small_segments[small_segment].push opinion

  data.seven_original_opinion_segments = seven_original_opinion_segments
  data.histogram_small_segments = histogram_small_segments

  data

fetch = (options, callback, error_callback) ->
  error_callback ||= (xhr, status, err) -> console.error 'Could not fetch data', status, err.toString()

  $.ajax
    url: options.url
    dataType: 'json'
    success: (data) =>
      if options.type == 'proposal'
        data = parseProposal data
      callback data

    error: error_callback




####################
# REACT COMPONENTS #
####################

# These are the components and their relationships:
#                       Proposal
#                   /      |            \ 
#    CommunityPoints   DecisionBoard      GiveOpinionButton
#               |          | 
#               |      YourPoints
#               |    /            \
#              Point             NewPoint

# DecisionBoard and GiveOpinionButton exist only for the sake of the particular way
# React affords animations right now. See ReactTransitionGroup below. 


##
# NewPoint
# Handles adding a new point into the system. Only rendered when proposal is in Crafting state. 
# Manages whether the user has clicked "add a new point". If they have, show new point form. 
NewPoint = React.createClass
  displayName: 'NewPoint'

