<%= title "Image Crop" -%>

<% content_for(:header) do %>

<%= stylesheet_link_tag "Jcrop" %>
<%= javascript_include_tag "Jcrop" %>

<script type="text/javascript" charset="utf-8">
$(function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop,
    setSelect: [0, 0, 500, 500],
    aspectRatio: 1
  });
});

function update_crop(coords) {
  var rx = 100/coords.w;
  var ry = 100/coords.h;
  $('#preview').css({
    width: Math.round(rx * <%= @user.avatar_geometry(:large).width %>) + 'px',
    height: Math.round(ry * <%= @user.avatar_geometry(:large).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @user.avatar_geometry(:original).width %> / <%= @user.avatar_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}
</script>
<% end %>

<div id='settings' class='grid_12 boxit page'>

	<div class='crop-holder'>
			
		<div class='grid_7 omega'>
			<h4>Original:</h4>
			<%= image_tag @user.avatar.url(:large), :id => "cropbox" %>
		</div>
		
		<div class='grid_2 alpha'>

			<h4>Preview:</h4>
			
			<div style="width:100px; height:100px; overflow:hidden">
			  <%= image_tag @user.avatar.url(:large), :id => "preview" %>
			</div>

		</div>
		
	</div>

	<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :multipart => true, :class => 'validate' }) do |f| %>
	  <%= devise_error_messages! %>

		<% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
	    <%= f.hidden_field attribute, :id => attribute %>
	  <% end %>

    <% if Snorby::CONFIG[:authentication_mode] == "database" %>
  	  <p><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
      <%= f.password_field :current_password, :placeholder => 'Current Password', :class => 'required password' %></p>
    <% end %>

		<%= form_actions do %>

			<%= button "Crop Image", :class => 'success' %>

			<%= button "Cancel", :class => 'warning cancel' %>

		<% end %>

	<% end %>
	
</div>
