1 files changed, 109 insertions, 0 deletions
diff --git a/cropper/tests/example-CoordsOnLoadWithRatio.htm b/cropper/tests/example-CoordsOnLoadWithRatio.htm
new file mode 100644
index 000000000..3a696360a
--- /dev/null
+++ b/cropper/tests/example-CoordsOnLoadWithRatio.htm
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="Content-Language" content="en-us" />
+	<title>Loading &amp; displaying co-ordinates (with ratio) of crop area on attachment test<</title>
+	<script src="../lib/prototype.js" type="text/javascript"></script>	
+ 	<script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
+	<script src="../cropper.js" type="text/javascript"></script>
+	
+	
+	<script type="text/javascript" charset="utf-8">
+		
+		// setup the callback function
+		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;
+		}
+		
+		// basic example
+		Event.observe( 
+			window, 
+			'load', 
+			function() { 
+				new Cropper.Img( 
+					'testImage',
+					{
+						onEndCrop: onEndCrop,
+						displayOnInit: true,
+						onloadCoords: { x1: 10, y1: 10, x2: 210, y2: 110 },
+						ratioDim: { x: 200, y: 100 }
+					}
+				) 
+			}
+		); 		
+		
+		
+		if( typeof(dump) != 'function' ) {
+			Debug.init(true, '/');
+			
+			function dump( msg ) {
+				Debug.raise( msg );
+			};
+		} else dump( '---------------------------------------\n' );
+		
+		
+	</script>
+	<link rel="stylesheet" type="text/css" href="debug.css" media="all" />
+	<style type="text/css">
+		label { 
+			clear: left;
+			margin-left: 50px;
+			float: left;
+			width: 5em;
+		}
+		
+		html, body { 
+			margin: 0;
+		}
+		
+		#testWrap {
+			margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
+		}
+	</style>
+</head>
+<body>
+	<h2>Loading &amp; displaying co-ordinates (with ratio) of crop area on attachment test</h2>
+	<p>
+		Some test content before the image
+	</p>
+	
+	<div id="testWrap">
+		<img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+	</div>
+	
+	
+	<p>
+		<label for="x1">x1:</label>
+		<input type="text" name="x1" id="x1" />
+	</p>
+	<p>
+		<label for="y1">y1:</label>
+		<input type="text" name="y1" id="y1" />
+	</p>
+	<p>
+		<label for="x2">x2:</label>
+		<input type="text" name="x2" id="x2" />
+	</p>
+	<p>
+		<label for="y2">y2:</label>
+		<input type="text" name="y2" id="y2" />
+	</p>
+	<p>
+		<label for="width">width:</label>
+		<input type="text" name="width" id="width" />
+	</p>
+	<p>
+		<label for="height">height</label>
+		<input type="text" name="height" id="height" />
+	</p>  
+	
+</body>
+</html>
+
+