ImageAreaSelec: It wont preview the pre-selection on init

Question

this is how I am preselecting (thanks to this question/answer ImageAreaSelect: preselect biggest thumbnail possible respecting aspectRatio)

var thwidth = $('#thumbnail').width();
    var thheight = $('#thumbnail').height();
    var aspectRatio = <?php echo $thumb_height/$thumb_width;?>;

var selWidth = 640;

var photo = $('#thumbnail'),
   photoWidth = parseInt($('#thumbnail').width()),
   maxWidth = Math.min(selWidth, photoWidth),
   maxHeight = maxWidth * aspectRatio,
   yTop = parseInt(photo.height()) / 2 - maxHeight / 2;



var thumbsel = $('#thumbnail').imgAreaSelect({ 
    x1: photoWidth / 2 - maxWidth / 2,
    y1: yTop,
    x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
    y2: yTop + maxHeight,
    aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>',
    onSelectStart: function(){
        $('#filters li').first().find('a').click();
    },
    onSelectChange: preview,
    onInit: preview,
    handles: true,
    resizable:true,
    show:true 
});

But the preview method it doesn't seem to be loaded on Init. User needs to re-select, resize or at least dragg current selection so it's previewed:

The preview method (taken from their site)

function preview(img, selection) {
    $('#filters li').first().find('a').click();
    var scaleX = <?php echo $thumb_width;?> / selection.width;
    var scaleY = <?php echo $thumb_height;?> / selection.height;

    $('#uploaded_file').css({
        width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
        height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

I tried with this on the init function:

$('.imgareaselect-selection').mouseup();

But with no much success...

But I believe that the solution would be in re-producing the selection dragged or something similar?

-EDIT-

If you checkout this screenshot:

you can see that the preselection has been successfully done, but the prevew didn't..

If I just click/move the selection: then it's previewed

So the question would be:

How can I reproduce the selection changed? vía plugin methods or DOM events

JSFiddle

-EDIT2-

Well I came out with this solution, why not running preview function after the plugin init?

var my_options = {
        x1 : photoWidth / 2 - maxWidth / 2,
        y1 : yTop,
        width : (photoWidth / 2 - maxWidth / 2) + maxWidth - photoWidth / 2 - maxWidth / 2,
        height : yTop + maxHeight - yTop
}
preview('',my_options);

Answer 1

You were on the right track trying to construct the selection object manually, but I'd guess it didn't work because you didn't populate the x2, y2 fields. Here's a working example for the preview displaying on page load: JSFiddle

HTML

<div class="box">
    <div align="center">
        <img src="http://funcook.com/upload_pic_r/resize_1366627050.jpg" id="thumbnail" alt="Create Thumbnail" />
            <h2>Previsualiza el resultado</h2>

        <div id="uploaded_file_holder" style="border:1px #e5e5e5 solid; float:left; position:relative; left: 44px; overflow:hidden; width:640px; height:380px;">
            <img id="uploaded_file" src="http://funcook.com/upload_pic_r/resize_1366627050.jpg" style="position: relative;" alt="Thumbnail Preview" />
        </div>
        <form method="post" action="/picture_recipe.php" class="save_recipe_image" name="thumbnail">
            <input type="hidden" id="x1" value="" name="x1" />
            <input type="hidden" id="y1" value="" name="y1" />
            <input type="hidden" id="x2" value="" name="x2" />
            <input type="hidden" id="y2" value="" name="y2" />
            <input type="hidden" id="w" value="" name="w" />
            <input type="hidden" id="h" value="" name="h" />
            <input type="hidden" value="206" id="id_recipe" name="id_recipe" />
            <input type="text" value="" id="effectApplied" name="effectApplied" style="display: none;" />
        </form>
    </div>
</div>

jQuery

function preview(img, selection) {
    $('#filters li').first().find('a').click();
    var scaleX = 640 / selection.width;
    var scaleY = 380 / selection.height;

    $('#uploaded_file').css({
        width: Math.round(scaleX * 550) + 'px',
        height: Math.round(scaleY * 412) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

$(function () {
    var photo = $('#thumbnail'),
        selWidth = 640,
        aspectRatio = 0.59375,
        photoWidth = parseInt(photo.width()),
        maxWidth = Math.min(selWidth, photoWidth),
        maxHeight = Math.floor(maxWidth * aspectRatio),
        yTop = parseInt(photo.height()) / 2 - maxHeight / 2,
        selection = {
            x1: photoWidth / 2 - maxWidth / 2,
            y1: yTop,
            x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
            y2: yTop + maxHeight
        };

    selection.height = selection.y2 - selection.y1;
    selection.width = selection.x2 - selection.x1;

    var thumbsel = photo.imgAreaSelect({
        x1: selection.x1,
        y1: selection.y1,
        x2: selection.x2,
        y2: selection.y2,
        aspectRatio: '1:0.59375',
        onSelectStart: function () {
            $('#filters li').first().find('a').click();
        },
        onSelectChange: preview,
        onSelectEnd: preview,
        handles: true,
        resizable: true,
        show: true
    });

    preview(null, selection);
});