title: jcrop preview contains strange error
body: <p>I need help with my jcrop preview.  I am following this tutorial from <a href="http://railscasts.com" rel="nofollow">railscasts</a> #182, but something is wrong and I can seem to figure it out. It is a bit difficult to explain but The crop preview doesn't work and a second image appears inside the crop resizing handles.  This extra image stretches and skews with the resizing of the crop. Since this is a bit confusing and my app is still on my local machine, I have included a <a href="http://screencast.com/t/pyHzvaNt" rel="nofollow">video demo of the current functionality </a>  as well what I assume is all of the relevant code below.   </p>
  
  <p>I also sent an email to jcrop and they suggested this could be caused by an error in my preview area.  I assume this is correct as I am currently using the one provided by Ryan Bates' railscasts tut.  The only other thing that I thought might be an issues is the "attr_accessible"  and "attr_accessor".  I am new to ruby and rails so I am have a bit of a difficult time understanding my errors. Any help would be greatly appreciated, please let me know if I can provide any further info.</p>
  
  <p>First here is my avatar_uploader.rb</p>
  
  <pre><code>class AvatarUploader &lt; CarrierWave::Uploader::Base
    include CarrierWave::RMagick
  
    storage :file
  
    # Override the directory where uploaded files will be stored.
    # This is a sensible default for uploaders that are meant to be mounted:
    def store_dir
      "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
  
    version :large do
      resize_to_limit(600, 600)
    end
  
    version :thumb do
      process :crop
      resize_to_fill(100, 100)
    end
  
    version :mini do
      process :crop
      resize_to_fill(48, 48)
    end
  
    version :nano do
      process :crop
      resize_to_fill(20, 20)
    end
  
    def crop
      if model.crop_x.present?
        resize_to_limit(600, 600)
        manipulate! do |img|
          x = model.crop_x.to_i
          y = model.crop_y.to_i
          w = model.crop_w.to_i
          h = model.crop_h.to_i
          img.crop!(x, y, w, h)
        end
      end
    end
  end
  </code></pre>
  
  <p>user.rb</p>
  
  <pre><code>class User &lt; ActiveRecord::Base
    belongs_to :team
    # Define roles
    ROLES = %w[admin conference president tailgater author banned]
  
    # Include default devise modules. Others available are:
    # :token_authenticatable, :encryptable, :confirmable, :lockable, :timeoutable and :omniauthable
    devise :database_authenticatable, :registerable,
           :recoverable, :rememberable, :trackable, :validatable
  
    # Setup accessible (or protected) attributes for your model
    attr_accessible :email, :password, :password_confirmation, :remember_me, 
                    :role, :avatar, :team_id
    #Include uploader
    mount_uploader :avatar, AvatarUploader
    attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
    after_update :crop_avatar
  
    def crop_avatar
      avatar.recreate_versions! if crop_x.present?
    end
  
  end
  </code></pre>
  
  <p>crop.html.erb</p>
  
  <pre><code>&lt;h1&gt;Crop Avatar&lt;/h1&gt;
  
  &lt;%= image_tag @user.avatar_url(:large), id: "cropbox" %&gt;
  
  &lt;h4&gt;Preview&lt;/h4&gt;
  &lt;div style="width:100px; height:100px; overflow:hidden"&gt;
    &lt;%= image_tag @user.avatar.url(:large), :id =&gt; "mypreview" %&gt;
  &lt;/div&gt;
  
  &lt;%= form_for @user do |f| %&gt;
    &lt;% %w[x y w h].each do |attribute| %&gt;
      &lt;%= f.hidden_field "crop_#{attribute}" %&gt;
    &lt;% end %&gt;
    &lt;div class="actions"&gt;
      &lt;%= f.submit "Crop" %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>users.js.coffee</p>
  
  <pre><code>jQuery -&gt;
    new AvatarCropper()
  
  class AvatarCropper
    constructor: -&gt;
      $('#cropbox').Jcrop
        aspectRatio: 1
        setSelect: [0, 0, 600, 600]
        onSelect: @update
        onChange: @update
  
    update: (coords) =&gt;
      $('#user_crop_x').val(coords.x)
      $('#user_crop_y').val(coords.y)
      $('#user_crop_w').val(coords.w)
      $('#user_crop_h').val(coords.h)
      @updatePreview(coords)
  
    updatePreview: (coords) =&gt;
            $('#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'
  </code></pre>