<style>
    body{max-width: 100%;}
</style>
<script type="text/javascript" src="/assets/cropper.js"></script>
<link href="/assets/cropper.css" rel="stylesheet"></link>
<img class='editimage'src="<%= @image.file.get_org_url %>">
<div class='img-preview'></div>
<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
<script>
    var x=[],y=[],w=[],h=[]
    <% if @image.custom_album_crops.first.nil? %>
        <% @image.custom_album_crops.new() %>
    <% end %>
    <% if !(@image.custom_album_crops.first.crop_x.to_s.empty?) %>
        x.push(<%= @image.custom_album_crops.first.crop_x %>)
        y.push(<%= @image.custom_album_crops.first.crop_y %>)
        w.push(<%= @image.custom_album_crops.first.crop_w %>)
        h.push(<%= @image.custom_album_crops.first.crop_h %>)
    <% end %>
    $('img.editimage').on('load',function() {
        var image = $('.editimage')
        var options = {
            data: {
                x: x[0],
                y: y[0],
                width: w[0],
                height: h[0]
            },
            crop: function (e) {
              x[0] = e.detail.x
              y[0] = e.detail.y
              w[0] = e.detail.width
              h[0] = e.detail.height
              console.log('x:'+x+'y:'+y)
            },
            viewMode: 2,
            zoomOnWheel: false,
            autoCropArea: 1,
            minContainerWidth: parseInt($('.editimage').width()),
            minContainerHeight: parseInt($('.editimage').height())
          };
        var cropper = new Cropper(image[0],options);
    });
    function save_data(){
        var temp = location.href.split('/').slice(-2)
        var id = [temp[0]]
        $.ajax({
        url : '/admin/custom_galleries/save_crop',
        dataType : "json",
        type : "post",
        data:{x:x,y:y,w:w,h:h,id:id},
        success:function(data){
            window.location.href = data.href;
        },
        error:function(){
            alert('Your server has some problem, please try again later!')
        }
        })
    }
</script>