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: 
    render: ->
      current_user = @data('/current_user')
      if current_user.user
        R.div className: 'userbar', 
          Avatar key: current_user.user, tag: R.span, className: 'userbar_avatar', style: {height: 20, width: 20}
          R.a 'data-action': 'logout', onClick: @logout, 'logout'
  
negative.code:       includers = @data().includers
  
        _.delay =>
          if @isMounted()
            hist = @data('histogram')
  
            if hist.highlighted_users == includers
              hist.highlighted_users = null
              save(hist)
        , 200
  
  
  