jcrop changing imge src after page load

jcrop changing imge src after page load

I am using jcrop for image cropping on the fly and want the user to have
the option of changing the image before they start to crop.
For some reason I cannot get the image to change.
jsfiddle http://jsfiddle.net/UUKP4/2/
When I look at the code in firefly it shows two img elements and one being
inside a jcrop container with no id.
how can I change the image?
code
#jcrop_target { width:200px; }
$(function () {
$('#jcrop_target').Jcrop();
});
function chageImage() {
alert("hello");
$('#jcrop_target').attr('src',
'http://eofdreams.com/data_images/dreams/cat/cat-06.jpg');
}
<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg"
id="jcrop_target" />
<input type='button' value='change image' id='changeImage'
onclick='chageImage();'>