<style>
    body{max-width: 100%;}
</style>
<script type="text/javascript" src="/assets/cropper.js"></script>
<script type="text/javascript" src="/assets/jquery-cropper.js"></script>
<link href="/assets/cropper.css" rel="stylesheet"></link>
<div style='padding-left: 10px;display:flex; flex-wrap: wrap;width:100%;align-items: center;'>
<div style='display:inline-flex;flex-direction:column;margin-right: 10px;'>
<span style='display:inline-flex;'>
<label style='padding: 5px;'><%= t('custom_gallery.width') %>:</label><input type="text" name="width">
</span>
<span style='display:inline-flex;'>
<label style='padding: 5px;'><%= t('custom_gallery.height') %>:</label><input type="text" name="height">
</span>
</div>
<button style='height: 50px;' onclick='change_config()'>修改裁減框長寬比</button>
</div>
<div style='display:flex; flex-wrap: wrap;width:100%'>
    <% @img.each do |image| %>
        <div class='<%= image.id %>' style='width:40%;max-width:40%;margin:10px 20px;'>
            <img class='editimage' src="<%= image.file.get_org_url %>">
        </div>
    <% end %>
</div>
<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
<script>
    var cropper_img = [],options=[]
    function change_config(){
        var count = cropper_img.length
        var aspect_value = parseInt($("input[name='width']").val())/parseInt($("input[name='height']").val())
        for (var i=0;i<count;i++){
            if (isNaN(aspect_value)){
                try{
                    delete options[i]['aspectRatio']
                }
                catch{
                }
            }else{
                options[i].aspectRatio = aspect_value
            }
            $('.editimage').eq(i).cropper('destroy').cropper(options[i])   
        }
    }
    var x=[],y=[],w=[],h=[]
    var id = []
    <% @img.each do |image| %>
        <% 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 %>)
        <% else %>
            x.push('')
            y.push('')
            w.push('')
            h.push('')
        <% end %>
    <% end %>
    $('img.editimage').on('load',function() {
        var temp = $('.editimage').parent()
        temp.each(function(){id.push($(this).attr('class'))})
        var image = $('.editimage')
        var count = image.length
        <% @img.each_with_index do |_,i| %>
            options[<%= i %>] = {
                data: {
                    x: x[<%= i %>],
                    y: y[<%= i %>],
                    width: w[<%= i %>],
                    height: h[<%= i %>]
                },
                crop: function (e) {
                  x[<%= i %>] = e.detail.x
                  y[<%= i %>] = e.detail.y
                  w[<%= i %>] = e.detail.width
                  h[<%= i %>] = e.detail.height
                },
                viewMode: 2,
                zoomOnWheel: false,
                autoCropArea: 1
              };
            cropper_img.push($('.editimage').eq(<%= i %>).cropper(options[<%= i %>]));
        <% end %>
    });
    function save_data(){
        $.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>