Image Select Help

Hello
I am trying to create code to allow an image to be uploaded, then a area to be selected and a thumbnail made of the selected area which will be the fixed sized. I am using some of the code available here http://odyniec.net/projects/imgareaselect/ the problem is i can not get the coordinates that are created by the selection boxed passed on via hidden form fields that then are retrieved.

the code i have for the form is as follows:

<form name="thumbnail" id="saveThumb" action="crop.php" method="post">
<input type="hidden" name="x1" id="x1" value="" />
<input type="hidden" name="y1" id="y1" value="" />
<input type="hidden" name="x2" id="x2" value="" />
<input type="hidden" name="y2" id="y2" value="" />
<input type="submit" name="submit" value="Submit" id="saveThumb" />
</form>

and the following is the code for processing the information into the form value....

$(document).ready(function(){
$('#saveThumb').click(function(){
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
if (x1 == "" || y1 == "" || x2 == "" || y2 == "" || w == "" || h == "") {
alert("You must make a selection first");
return false;
}
else {
return true;
}

and the code i have at the moment just for testing the code out and displaying one of the values....

<?php
echo $_POST["x1"];

?>


Can any one help me...