```coffeescript
document.addEventListener 'turbolinks:load', ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      boxWidth: 500
      boxHeight: 400
      onSelect: @update
      onChange: @update

  update: (coords) =>
    $('#avatar_crop_x').val(coords.x)
    $('#avatar_crop_y').val(coords.y)
    $('#avatar_crop_w').val(coords.w)
    $('#avatar_crop_h').val(coords.h)

  updatePreview: (coords) =>
    $('#preview').css
        width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
        height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'
        marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
        marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'
```

Make JCrop use window height as boxWidth
user
```coffeescript
document.addEventListener 'turbolinks:load', ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      boxWidth: window.innerWidth
      boxHeight: window.innerHeight
      onSelect: @update
      onChange: @update

  update: (coords) =>
    $('#avatar_crop_x').val(coords.x)
    $('#avatar_crop_y').val(coords.y)
    $('#avatar_crop_w').val(coords.w)
    $('#avatar_crop_h').val(coords.h)

  updatePreview: (coords) =>
    $('#preview').css
        width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
        height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'
        marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
        marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'
```
assistant