$(document).ready(function(){

    $().cropper("destroy");

    var $crop_container = $('.ibox-content').find('.js-img-crop-container'),
        aspect_ratio    = $crop_container.attr('data-aspect-ratio'),
        $crop_container_cover = $('.ibox-content').find('.js-cover-crop-container'),
        aspect_ratio_cover    = $crop_container_cover.attr('data-aspect-ratio'),
        $uploaded_img   = $('.ibox-content').find('.js-input-image'),
        $uploaded_cover   = $('.ibox-content').find('.js-input-cover'),
        $image = $('.ibox-content').find('.js-img-crop-container > img');
    $cover_image = $('.ibox-content').find('.js-cover-crop-container > img');
    if(typeof aspect_ratio !== 'undefined'){
        var heightAndWidth = aspect_ratio.split(':'),
            ratio = heightAndWidth[0] / heightAndWidth[1];
    }
    if(typeof aspect_ratio_cover !== 'undefined'){
        var heightAndWidth = aspect_ratio_cover.split(':'),
            cover_ratio = heightAndWidth[0] / heightAndWidth[1];
    }

    $image.cropper({
        aspectRatio: ratio,
        zoomable: false,
        zoomOnTouch: false,
        zoomOnWheel: false,
        autoCropArea: 1,
        done: function (data) {
            $('.ibox-content').find('input[name="x"]').val(data.x);
            $('.ibox-content').find('input[name="y"]').val(data.y);
            $('.ibox-content').find('input[name="w"]').val(data.width);
            $('.ibox-content').find('input[name="h"]').val(data.height);
        }
    });
    $cover_image.cropper({
        aspectRatio: cover_ratio,
        zoomable: false,
        zoomOnTouch: false,
        zoomOnWheel: false,
        autoCropArea: 1,
        done: function (data) {
            $('.ibox-content').find('input[name="cover_x"]').val(data.x);
            $('.ibox-content').find('input[name="cover_y"]').val(data.y);
            $('.ibox-content').find('input[name="cover_w"]').val(data.width);
            $('.ibox-content').find('input[name="cover_h"]').val(data.height);
        }
    });


    if (window.FileReader) {
        $uploaded_img.on('change', function () {


            var fileReader = new FileReader(),
                files      = this.files,
                file       = files[0],
                size       = files[0].size;
            if(file ){
                if (/^image\/\w+$/.test(file.type)) {
                    if(size < 8388608) {
                        fileReader.readAsDataURL(file);
                        fileReader.onload = function () {
                            //$image.cropper("destroy");
                            $image.cropper("replace", this.result);

                        };
                    }else{
                        toastr['warning']("Please choose an image that is less than 8Mb.", "Warning");
                    }
                } else {
                    toastr['warning']("Please choose an image file.", "Warning");
                }
            }

        });
        $uploaded_cover.on('change', function () {


            var fileReader = new FileReader(),
                files      = this.files,
                file       = files[0],
                size       = files[0].size;

            if(file){
                if (/^image\/\w+$/.test(file.type)) {
                    if(size < 4194304) {
                        fileReader.readAsDataURL(file);
                        fileReader.onload = function () {
                            //$image.cropper("destroy");
                            $cover_image.cropper("replace", this.result);

                        };
                    }else{
                        toastr['warning']("Please choose an image that is less than 8Mb.", "Warning");
                    }
                } else {
                    toastr['warning']("Please choose an image file.", "Warning");
                }
            }

        });
    } else {
        $uploaded_img.addClass("hide");
        $uploaded_cover.addClass("hide");
    }
});

