$(document).ready(function(){
    var jcrop_api;
    var previewWidth = 0;
    var previewHeight = 0;
    var cropWidth = 0;
    var cropHeight = 0;
    var src = '';

    function updateCoords(c)
    {
        cropWidth = c.w;
        cropHeight = c.h;
    };

    $('.btCropCreate').click(function() {
        var data = jcrop_api.getSelection();

        console.log('Salvo', data)

        data.widthPreview = previewWidth;
        data.heightPreview = previewHeight;
        data.cropWidth = cropWidth;
        data.cropHeight = cropHeight;
        data.src = src;
        var target = $(this).data('href');

        $.ajax({
             type: "POST",
             url: target,
             data: data
        }).done(function() {
            // $('#modal_crop').modal('hide');
            $('.crop-overlay').css('display', 'none');
            $('.crop-wrapper').css('display', 'none');
        });

        return false;
    });

    $('.btn-crop').click(function(){
        // $('#modal_crop').modal('show');
        $('.crop-overlay').css('display', 'block');
        $('.crop-wrapper').css('display', 'block');

        var $this = $(this),
            $target = $(".crop-wrapper #"+$this.data('id'))
            // $target = $("#"+$this.data('id'))
            width = $this.data('width'),
            height = $this.data('height'),

        cropWidth = $this.data('c-width');
        cropHeight = $this.data('c-height');
        var cropRatio = cropWidth/cropHeight;

        if (width/height >= 1) {
            previewWidth = (500<width) ? 500 : width;
            var percentual = previewWidth/width;
            previewHeight = height*percentual;
        } else {
            previewHeight = (500 < height) ? 500 : height;
            var percentual = previewHeight/height;
            previewWidth = width*percentual;
        }

        // var previewRatio = previewWidth/previewHeight,
        // minW = (previewWidth < cropWidth*percentual) ? previewWidth : cropWidth*percentual,
        // minH = (previewHeight < cropHeight*percentual) ? previewHeight : cropHeight*percentual,
        // maxW = (previewRatio < cropRatio) ? previewWidth : previewHeight*cropRatio,
        // maxH = (previewRatio > cropRatio) ? previewHeight : previewWidth/cropRatio;

        src = $this.attr('href');
        $target.find('.crop').remove();

        $target.prepend('<div class="crop" style="margin:0 auto; width:'+previewWidth+'px; height:'+previewHeight+'px;"><img style="width:'+previewWidth+'px; height:'+previewHeight+'px" src="'+src+'"/></div>')

        // var x1 = (previewWidth-maxW);
        // var x2 = maxW + x1;
        // var y1 = (previewHeight-maxH);
        // var y2 = maxH+y1;

        setTimeout(function() {
            var options = {
                aspectRatio: 1,
                // setSelect: [ x1, y1, x2, y2 ],
                onSelect: updateCoords
            }

            $target.find('.crop').Jcrop(options,function(){
              jcrop_api = this;
            });

            //jcrop_api.setOptions(options)
        }, 300);

        return false;
    });
});
