Gsp for crooping images

crooping.html

<style>
	.button-photo {
		margin-top: 20px;
		margin-left: 20px;
	}
	div.preview_image { 
		width: 100px; 
		height: 100px;
		overflow:hidden;
	}
	
	div.cropping {
		margin-top:20px;
	}
	div.select-file {
		margin-left: 10px;
		width: 350px;
	}
	div.imageCropping {
		background: #F1F9FE !important;
		font-size: 11px!important;
		width: 650px!important;
	}
</style>	

<div class="modal hide fade imageCropping" id="modalCroopingImage" >
        <a href="#" data-dismiss="modal" class="icon-remove fright crossCloseModal"></a>
	<div class="modal-header">
		<div >
			
		</div>
	</div>
	<div class="modal-body" style="max-height:500px;">
				
	        <g:uploadForm controller="uploadImage" action="previewImage" method="post" name="uploadImage">
		   
	                <div  class="fleft preview_image" id="div_preview_image">
	                    <img id="currentImage" src="" style="max-width:none;" />
	                    <input type="hidden" id="current_photo" />
	                </div>
	                <div class="fleft select-file ">
	                        <input type="file" name="new_photo" id="new_photo" style="font-size: 12px;line-height: 0px;"/>	                							
			</div>
			<div class="fleft">
				<input type="button" id="upload_photo" value='Upload Photo' class="hide button-photo btn fleft  btn-mini" style="width: 120px;"/>
						
				<span id="errors" class="error hide errorsCropping"></span>
			</div>	
	            	
	           	<div class="clear" ></div>
	           		
	           	<div id="loading" class="hide cropping"></div>           		
	           	<div id="cropping" class="cropping ">

				<img id="crop_image" src="" />
				<input type="hidden" id="original_photo" />
			</div>	
									
					
		        <g:hiddenField name="x" value="0" />
		        <g:hiddenField name="y" value="0" />
			<g:hiddenField name="w" value="100" />
			<g:hiddenField name="h" value="100" />				
								
		</g:uploadForm>	
				     		
	</div>
	<div class="modal-footer">
							
		<table>
			<tr>
		                <td align="center" style="width: 300px;">
				        <a href="#" data-dismiss="modal" class="btn btn-mini" style="width: 120px;">
					 	Cancel
					  </a>
				</td>
				<td style="width:100px;">&nbsp;</td>
				<td>	
					  <a href="#" id="confirm_photo" class="deactivatedButton btn btn-mini" style="width: 120px;" >
					 	 	Confirm Image
					  </a>	
				</td>	
				<td><div id="loadingConfirm" class="hide" style="margin-top: -10px;"></div></td>    
			</tr>	
		  </table>			
	</div>				    
					 		
				  
</div>