[jQuery] imageAreaSelect bug

[Chris]

im using the imageAreaSelect ( http://odyniec.net/projects/imgareaselect/
) plugin.

i have (code below and at http://pastebin.com/ma828e3e ) which works
fine. i.e. i am able to select a portion of the image.

<script type="text/javascript">

        $(window).load(function () {
                $('#asdf img').imgAreaSelect({ maxWidth: 20,
maxHeight: 20 });

        });

</script>

<div id="asdf" style="display:block;">

                        <img src="../../common/images/blankImage.gif"
alt="A ladybug being harassed by an ant." title="A ladybug being
harassed by an ant." />

</div>

--------------------------------------


However, if #asdf was initially hidden and displayed again ( as seen
in this code http://pastebin.com/mb87bcc1 and below), the script
doesnt work appropriately as it was supposed to. anyone know why? This
is a screenshot of how it looks http://imagebin.org/20058

<script type="text/javascript">

        $(document).ready(function(){

                $('#asdf').slideDown('slow');

});

        $(window).load(function () {
                $('#asdf img').imgAreaSelect({ maxWidth: 20,
maxHeight: 20 });

        });

</script>

<div id="asdf" style="display:none;">

                        <img src="../../common/images/blankImage.gif"
alt="A ladybug being harassed by an ant." title="A ladybug being
harassed by an ant." />

</div>

---------------------------------------------------------------------

Alternatively, im trying to crop an image then upload it onto the
server with the image cropped. If anyone knows a good working jquery
plugin for this, please recommend one.