var canvas = $('canvas')
    .attr({'width' : 1200, 'height' : 500})
    .css('border', '1px solid black')
    .get(0);

if(canvas)
    var context = canvas.getContext('2d');

var model = {
    width : 0,
    height : 0,
    point : {
        x : 0,
        y : 0
    }
};

var select = $('#ukr_seeds');
select.change(getModel);

getModel();

$('#delete').click(function() {
    var inputs = $('.single-checkbox:checked');
    var n = inputs.length;
    if(n) {
        var files = [];
        $.each(inputs, function() {
            files.push($(this).val());
        });
        deleteImages(files);
    }
});

$('#select-all').click(function() {
    $('.single-checkbox').prop('checked', true);
});

function deleteImages(images) {
    var href = decodeURIComponent(location.href);
    var url = href.substring(0, href.lastIndexOf('/'));
    $.ajax({
        url: url + '/delete-images',
        type: 'POST',
        dataType: 'json',
        data: {
            images: images
        },
        success: function(data) {
            var images = data['images'];
            for(var i = 0; i < images.length; i++) {
                $('div[data-url="' + images[i] + '"]').remove();
            }
        }
    });
}


function getModel()
{
    $.ajax({
        url: location.href + '/get-params',
        data: {
            'crop_id': select.val()
        },
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            model.width = data.body.WIDTH;
            model.height = data.body.HEIGHT;
            model.point.x = data.body.X;
            model.point.y = data.body.Y;
            canvas.attr({'width' : model.width + 20, 'height' : model.height + 20});
            context.clearRect(0, 0, canvas.width, canvas.height);
            console.log(model);
        }
    });
}

function draw()
{
    var image = $('img').get(0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, model.point.x, model.point.y, model.width, model.height, 10, 10, model.width, model.height);
    console.log( image.width, image.height );
}