<!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></title>
</head>
<body>
	<!--
		
		This is a static test file for the HTML & CSS structure employed, tested in 
		the following browsers:
		
			PC:
				IE 6:          working
				IE 5.5:        working
				IE 5.0:        opacity issues
				FF 1.5:        working
				Opera 9:       working
			MAC:
				Camino 1.0:    working
				FF 1.5:        working
				Safari 2.0:    working
				
	-->	
	<style type="text/css">		
		.imgCrop_wrap {
			width: 500px;   /* @TODO IN JS */
			height: 333px;  /* @TODO IN JS */
			position: relative;
			cursor: crosshair;
		}
		
		/* fix for IE displaying all boxes at line-height by default */
		.imgCrop_wrap,
		.imgCrop_wrap * {
			font-size: 0;
		}
		
		.imgCrop_overlay {
			background-color: #000;
			opacity: 0.5;
			filter:alpha(opacity=50);
			position: absolute;
			width: 100%;
			height: 100%;
		}
		
		.imgCrop_selArea {
			position: absolute;
			cursor: move;
			/* @TODO: rest to be done via JS when selecting areas */
			top: 110px;
			left: 210px;
			width: 200px;
			height: 200px;
			z-index: 2;
			background: transparent url(castle.jpg) no-repeat  -210px -110px;
		}
		
		/* imgCrop_clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
		.imgCrop_clickArea {
			width: 100%;
			height: 100%;
			background-color: #FFF;
			opacity: 0.01;
			filter:alpha(opacity=01);
		}
				
		.imgCrop_marqueeHoriz {
			position: absolute;
			width: 100%;
			height: 1px;
			background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
		}
		
		.imgCrop_marqueeVert {
			position: absolute;
			height: 100%;
			width: 1px;
			background: transparent url(marqueeVert.gif) repeat-y 0 0;
		}
				
		.imgCrop_marqueeNorth { top: 0; left: 0; }
		.imgCrop_marqueeEast  { top: 0; right: 0; }
		.imgCrop_marqueeSouth { bottom: 0px; left: 0; }
		.imgCrop_marqueeWest  { top: 0; left: 0; }
		
		
		.imgCrop_handle {
			position: absolute;
			border: 1px solid #333;
			width: 6px;
			height: 6px;
			background: #FFF;
			opacity: 0.5;
			filter:alpha(opacity=50);
			z-index: 3;
		}
		
		.imgCrop_handleN {
			top: -3px;
			left: 0;
			margin-left: 49%;    /* @TODO : in JS */
			cursor: n-resize;
		}
		
		.imgCrop_handleNE { 
			top: -3px;
			right: -3px;
			cursor: ne-resize;
		}
		
		.imgCrop_handleE {
			top: 0;
			right: -3px;
			margin-top: 49%;    /* @TODO : in JS */
			cursor: e-resize;
		}
		
		.imgCrop_handleSE {
			right: -3px;
			bottom: -3px;
			cursor: se-resize;
		}
		
		.imgCrop_handleS {
			right: 0;
			bottom: -3px;
			margin-right: 49%; /* @TODO : in JS */
			cursor: s-resize;
		}
		
		.imgCrop_handleSW {
			left: -3px;
			bottom: -3px;
			cursor: sw-resize;
		}
		
		.imgCrop_handleW {
			top: 0;
			left: -3px;
			margin-top: 49%;  /* @TODO : in JS */
			cursor: e-resize;
		}
		
		.imgCrop_handleNW {
			top: -3px;
			left: -3px;
			cursor: nw-resize;
		}
		
		/**
		 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
		 */
		.imgCrop_dragArea {
			width: 100%;
			height: 100%;
			z-index: 200;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		
		.imgCrop_previewWrap {
			width: 200px;  /* @TODO : in JS */
			height: 200px; /* @TODO : in JS */
			overflow: hidden;
			position: relative;
		}
		
		/* @TODO : all in JS */
		.imgCrop_previewWrap img {
			position: absolute;
			width: 500px;
			height: 333px;
			left: -210px;
			top: -110px;
		}
		
		/**
		 * These are just for the static test
		 */
		.imgCrop_wrap {
			margin: 20px 0 0 50px;
			float: left;
		}
		
		#previewWrapper {
			float: left;
			margin-left: 20px;
		}
		
			
	</style>
	
	<br /><br />
	
	<!-- This is all attached to the image dynamically -->
	<div class="imgCrop_wrap">
		<img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
		<div class="imgCrop_dragArea">
			<div class="imgCrop_overlay"></div>
			<div class="imgCrop_selArea">
				<!-- marquees -->
				<!-- the inner spans are only required for IE to stop it making the divs 1px high/wide -->
				<div class="imgCrop_marqueeHoriz imgCrop_marqueeNorth"><span></span></div>
				<div class="imgCrop_marqueeVert imgCrop_marqueeEast"><span></span></div>
				<div class="imgCrop_marqueeHoriz imgCrop_marqueeSouth"><span></span></div>
				<div class="imgCrop_marqueeVert imgCrop_marqueeWest"><span></span></div>			
				<!-- handles -->
				<div class="imgCrop_handle imgCrop_handleN"></div>
				<div class="imgCrop_handle imgCrop_handleNE"></div>
				<div class="imgCrop_handle imgCrop_handleE"></div>
				<div class="imgCrop_handle imgCrop_handleSE"></div>
				<div class="imgCrop_handle imgCrop_handleS"></div>
				<div class="imgCrop_handle imgCrop_handleSW"></div>
				<div class="imgCrop_handle imgCrop_handleW"></div>
				<div class="imgCrop_handle imgCrop_handleNW"></div>
				<div class="imgCrop_clickArea"></div>
			</div>	
			<div class="imgCrop_clickArea"></div>	
		</div>	
	</div>
	
	<div id="previewWrapper">
		<h3>Preview:</h3>
		<div class="imgCrop_previewWrap">
			<img src="castle.jpg" alt="test image" id="previewImage" />
		</div>
	</div>
</body>
</html>