var pointX1;
var pointY1;
var pointX2;
var pointY2;
var width;
var height;

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('#jcropError').html('Selezionare l\' area da ritagliare').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#' + pointX1).val(e.x);
    $('#' + pointY1).val(e.y);
    $('#' + pointX2).val(e.x2);
    $('#' + pointY2).val(e.y2);
    $('#' + width).val(e.w);
    $('#' + height).val(e.h);
};

// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;

function fileSelectHandler(image_file, w, h, x1, y1, x2, y2) {
    pointX1 = x1;
    pointY1 = y1;
    pointX2 = x2;
    pointY2 = y2;
    width = w;
    height = h;

    // get selected file
    var oFile = $('#' + image_file)[0].files[0];

    // hide all errors
    $('#jcropError').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (!rFilter.test(oFile.type)) {
        $('#jcropError').html('Selezionare una immagine valida (jpg e png sono ammesse)').show();
        return;
    }

    // check for file size
    //if (oFile.size > 250 * 1024) {
    //    $('#jcropError').html('You have selected too big file, please select a one smaller image file').show();
    //    return;
    //}

    // preview element
    var oImage = document.getElementById('jcropPreview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
    oReader.onload = function (e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('#jcropStep2').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            
            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') {
                jcrop_api.destroy();
                jcrop_api = null;
                $('#jcropPreview').width(oImage.naturalWidth);
                $('#jcropPreview').height(oImage.naturalHeight);
            }            

            setTimeout(function () {
                // initialize Jcrop
                $('#jcropPreview').Jcrop({
                    boxWidth: 600,
                    boxHeight: 600,
                    aspectRatio: 1, // keep aspect ratio 1:1
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: updateInfo,
                    onSelect: updateInfo,
                    trueSize: [600,600]
                }, function () {

                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];

                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                    jcrop_api.animateTo([100, 100, 400, 300]);
                    jcrop_api.setOptions({ aspectRatio: 4 / 3 });
                });
            }, 3000);

        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}