             Profile
         </h2>
 
+    handleImageOptions: (e) ->
+        state = e.target.value
+        if state == "gravatar"
+            url = @get_gravatar_url()
+        else if state == "adorable"
+            url = @get_adorable_url()
+        else if state == "custom"
+            @setState({show_image_upload: true})
+        else if state == "default"
+            url = @get_default_url()
+        @props.redux.getTable('account').set(profile : {image: url})
+
+    get_gravatar_url: -> "https://www.gravatar.com/avatar/#{md5 @props.email_address.toLowerCase()}?d=identicon&s=#{30}"
+
+    get_adorable_url: -> "https://api.adorable.io/avatars/100/#{md5 @props.email_address.toLowerCase()}.png"
+
+    get_default_url: -> ""
+
+    get_custom_url: -> @props.profile.get("image_custom")
+
+    handle_image_file_upload: (e) ->
+        console.log(e.target)
+        console.log(e.target.files)
+        files = e.target.files
+        if (files.length > 0) and (files[0].type.startsWith("image/"))
+            file = files[0]
+        if file == null
+            return
+        reader = new FileReader()
+        reader.onload = (e) =>
+            console.log e.target.result
+            @props.redux.getTable('account').set(profile : {image: e.target.result})
+        reader.readAsDataURL(file)
+
+    render_image_options: ->
+        image = @props.profile.get("image")
+        if image == @get_gravatar_url()
+            state = "gravatar"
+        else if image == @get_adorable_url()
+            state = "adorable"
+        else if image == @get_default_url()
+            state = "default"
+        else if image?.startsWith?("data:image")
+            state = "custom"
+        <FormGroup>
+            <Radio name="profile_image_options" value="default" checked={state == "default"} onChange={@handleImageOptions} inline>Default (first letter of your name)</Radio>
+            <br/>
+            <Radio name="profile_image_options" value="gravatar" checked={state == "gravatar"} onChange={@handleImageOptions} inline>Gravatar (see <a href="https://en.gravatar.com/">here</a>).</Radio>
+            <br/>
+            <Radio name="profile_image_options" value="adorable" checked={state == "adorable"} onChange={@handleImageOptions} inline>Adorable</Radio>
+            <br/>
+            <Radio name="profile_image_options" value="custom" checked={state == "custom"} onChange={@handleImageOptions} inline>Custom</Radio>
+            {if @state.show_image_upload then <label>Upload file: <input type="file" onChange={@handle_image_file_upload}/></label> else undefined}
+        </FormGroup>
+
     render: ->
         if not @props.account_id? or not @props.profile?
             return <Loading />

                <ColorPicker color={@props.profile.get('color')} style={maxWidth:"150px"} onChange={@onColorChange}/>
            </LabeledRow>
            <LabeledRow label='Picture'>
                {if @state.show_instructions then @render_instruction_well() else @render_set_gravatar()}
             </LabeledRow>
        </Panel>


    onColorChange: (value) ->
        @props.redux.getTable('account').set(profile : {color: value})

    render_header: ->
        <h2>
            <Avatar
