$(function(){
    $('div.editImgToThumb').each(function(){
        var cont    = $(this);
        var id      = cont.attr('id');

        var img     = $('#' + id + '-img',     cont);
        var preview = $('#' + id + '-preview', cont);

        var x       = $('input[name="' + id + '-x"]',    cont);
        var y       = $('input[name="' + id + '-y"]',    cont);
        var lato    = $('input[name="' + id + '-lato"]', cont);

        var showPreview = function(coords){
            var w = img.width();
            var h = img.height();

            var rx = 100 / coords.w;
            var ry = 100 / coords.h;

            preview.css({
                width:      Math.round(rx * w) + 'px',
                height:     Math.round(ry * h) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop:  '-' + Math.round(ry * coords.y) + 'px'
            });

            x.val( Math.round(coords.x) );
            y.val( Math.round(coords.y) );
            lato.val( Math.round(coords.w) );
        };

        img.Jcrop({
            onChange:    showPreview,
            onSelect:    showPreview,
            setSelect:   [Math.round(x.val()),                        Math.round(y.val()),
                          Math.round(lato.val()), Math.round(lato.val())],

            boxWidth:    500,
            boxHeight:   500,
            aspectRatio: 1
    	});
    });
});