imgselectarea modal window remove selection

Question

I have got a little problem with imgAreaSelect plugin. Here is the example of what i did. http://jsfiddle.net/H4hEx/19/

But when you close modal window and click again to modal window button, selection area did not remove. So how to destroy selection when you close modal window? (even when you don`t click button "close" or "save changes") I guess i need to write a code which will destroy x1,x2,y1,y2. Is it right?

And the other thing i try to do is to limit selection area. How to limit selection area so that user could not select white box at the right of image?

$(document).ready(function () {

    $('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', handles: 'True', parent: '#parent',

onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);       
//alert(selection.x1 + ',' + selection.y1 + ',' + selection.x2 + ',' + selection.y2);   
        
    }

});
});
var c = 0; // current image (array key index)

function loadImage(){
    $("<img/>").attr({src:image[c], id:"image", class:"img-thumbnail", style:"width:80%;"}).load(function() {
      $('#thumbnail').html( this );
  }); 
}
loadImage(); // load 1 image

/*
 * imgAreaSelect default style
 */

.imgareaselect-border1 {
 background: url(border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
 opacity: 0.5;
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-outer {
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-selection {  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://krept.com/knoted/js/jquery.imgareaselect.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-1">
  Modal-1
</button>


<!-- Modal-1 -->
<div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <div id="parent" style="position:relative;"><span id="thumbnail" style="display: inline-block;"><img id="image" style="width:80%;" src="http://upload.wikimedia.org/wikipedia/en/f/fa/416_into_Ottawa.png" /></span></div>
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>