anchor.diff:                R.div className: 'switch_auth_mode', 
                   R.span null, if root.auth_mode == 'register' then 'If you already have an account, ' else 'If you don\'t have an account, '
                   R.a className: 'toggle_auth', onClick: @toggleAuthMode, if root.auth_mode == 'register' then 'Log In' else 'Create an Account'
  -
  -
  -
  -
  -
  -
  -##
  -# AuthHeader
  -# Should be refactored into Auth. Shares styles with Slider.
  -AuthHeader = ReactiveComponent
  -  displayName: 'AuthHeader'
  -
  -  componentDidMount : -> 
  -    $slider_base = $(@getDOMNode()).find('.slider_base')
  -    if !$slider_base.hasClass "ui-slider"
  -      $slider_base.slider
  -        disabled: true
  -        min: -1
  -        max: 1
  -        step: .01
  -        value: -@data('slider').stance
  -
  -  toggleAuthMode : -> 
  -    app_data = @data('application')
  -    current_user = @data('/current_user')
  -    email = $(@getDOMNode()).find('#user_email').val()
  -
  -    @data('auth').email = email if email && email.length > 0
  -    app_data.auth_mode = if app_data.auth_mode == 'register' then 'login' else 'register'    
  -    current_user.errors = []
  -
  -  render : ->
  -    my_data = @data('slider')
  -    segment = my_data.stance_segment
  -    app_data = @data('application')
  -
  -    # Can't be dynamically set b/c of integration with asset fingerprinting. This is 
  -    # also why this file is ERB
  -    if segment == 3
  -      bubblemouth_src = "<%= asset_path 'bubblemouth_neutral-crafting.png' %>"
  -    else
  -      bubblemouth_src = "<%= asset_path 'bubblemouth-crafting.png' %>"
  -
  -    slider_feedback = 'Please Introduce Yourself' 
  -
  -    mouth_scaler = if my_data.stance_segment > 3 then -1 else 1
  -    mouth_x = if my_data.stance_segment == 3 then 0 else -7.5
  -
  -
  -    bubble_mouth_props = 
  -      transform: "scale(#{mouth_scaler * 1.5}, 1.5) translate(#{mouth_x * 1.5}px, 7px)"
  -    handle_props = 
  -      transform: "scale(2.5) translateY(-8px)"
  -
  -    crossbrowserTransformProperty = (props) -> _.extend props,
  -      '-webkit-transform' : props.transform
  -      '-ms-transform' : props.transform
  -      '-moz-transform' : props.transform
  -
  -    crossbrowserTransformProperty bubble_mouth_props
  -    crossbrowserTransformProperty handle_props
  -
  -    R.div className: 'slider', 
  -      R.div className:'slider_base', style : {width: HISTOGRAM_WIDTH}, 
  -        R.div className: 'ui-slider-handle', 
  -          R.div className: 'the_handle', onClick: @togglePage, style: handle_props
  -          R.img className:'bubblemouth', src: bubblemouth_src, style: bubble_mouth_props
  -          R.div className:'slider_feedback', 
  -            slider_feedback
  -
  -            if app_data.auth_mode in ['login', 'register']
  -              R.div className: 'switch_auth_mode', 
  -                R.span null, if app_data.auth_mode == 'register' then 'If you already have an account, ' else 'If you don\'t have an account, '
  -                R.a className: 'toggle_auth', onClick: @toggleAuthMode, if app_data.auth_mode == 'register' then 'Log In' else 'Create an Account'
  -
  -
   
   
   Auth = ReactiveComponent
  
positive.code: 
  
  ## ########################
  ## Initialize data & defaults
  
  fetch 'histogram',
    highlighted_users : null
  
negative.code:       top_level_component = React.renderComponent Root(
                                           long_id : long_id
                                           ), document.getElementById('content')
    results : (long_id) -> @proposal long_id, 'results'
  
  window.app_router = new Router()
  