What steps will reproduce the problem?

This is my set up:
1: I upload an image that is passed to a php file through an iFrame.
2: The uploaded image is being processed by the php file and returns the 
result to the js function "updateImgLarge"
3: updateImgLarge creates a new image element and puts the newly uploaded 
file as the src. then it loads the js function "loadCropper".
4: then you can crop the image and save the thumbnail by submitting the 
crop values to a php file that creates the image.


What is the expected output? What do you see instead?

After cropping the first image and uploading a second image, the cropping 
values do not change. 
You can adjust the cropping rectangle but the values stay the same as the 
previous crop that you made with the other image.
As a result when hitting the upload thumbnail button you will get a crop 
of the new image but with the same coordinates as the first image that you 
cropped.

This only happens in IE7, it works fine in FF and Chrome. I did not test 
it in IE8.


What version of the product are you using? On what operating system?
I am using the same version as in the demo file on Windows Vista 64.


Please provide any additional information below.

Some of the code that I used:


<script type="text/javascript" language="javascript">


		function updateImgLarge(img_src, w, h, img_name){

			document.getElementById("testWrap").innerHTML 
= ""; 

			var newImg = document.createElement("img");
			document.getElementById("testWrap").appendChild
(newImg);

			newImg.src = img_src;
			newImg.width = w;
			newImg.height = h;
			newImg.id = "testImage";
			
 			document.crop_img.reset();
			document.getElementById('th_file_ext').value = 
img_name;

			loadCropper();
		}






	function onEndCrop( coords, dimensions ) {
		$( 'x1' ).value = coords.x1;
		$( 'y1' ).value = coords.y1;
		$( 'x2' ).value = coords.x2;
		$( 'y2' ).value = coords.y2;
		$( 'width' ).value = dimensions.width;
		$( 'height' ).value = dimensions.height;
	}

	function loadCropper(){	
		new Cropper.ImgWithPreview(
			'testImage',
			{
				previewWrap: 'previewWrap',
				minWidth: 120,
				minHeight: 120,
				ratioDim: { x: 120, y: 120 },
				onEndCrop: onEndCrop
			}
		);
	}

</script>

	<span class="iframe_container">
		<iframe id="submit_target" name="submit_target" src="#" 
style="width:0;height:0;border:0px solid #000;"></iframe>
	</span>


	<form action="img_functions.php" method="post" 
target="submit_target" enctype="multipart/form-data">
	
		<h2>Upload Photo</h2>

		Photo <input type="file" name="image" size="30" /> 

		<input type="hidden" name="upload" />
		<input type="submit" value="upload!" />
	</form>

	<br /><br />


	<div id="testWrap">
		
	</div>
	
	
	<div id="previewOuterWrap">
		<h2>Crop preview:</h2>
		<div id="previewWrap"></div>
	</div>
	<span class="clear_float"></span>


	<form name="crop_img" id="crop_img" action="img_functions.php" 
method="post" target="submit_target">
		<div id="results">
			<h2>Crop values:</h2>
			<div>
				<label for="x1">x1:</label>
				<input type="text" name="x1" id="x1" 
size="4" />
			</div>
			<div>
				<label for="y1">y1:</label>
				<input type="text" name="y1" id="y1" 
size="4" />
			</div>
			<div>
				<label for="x2">x2:</label>
				<input type="text" name="x2" id="x2" 
size="4" />
			</div>
			<div>
				<label for="y2">y2:</label>
				<input type="text" name="y2" id="y2" 
size="4" />
			</div>
			<div>
				<label for="width">width:</label>
				<input type="text" name="width" id="width" 
size="4" />
			</div>
			<div>
				<label for="height">height:</label>
				<input type="text" name="height" 
id="height" size="4" />
			</div>
		</div>

		<input type="hidden" name="file_ext" value="" 
id="th_file_ext" />
		<br />
		<input type="submit" name="upload_thumbnail" 
value="upload!" />
	</form>