<%@ page contentType="text/html; charset=GBK" session="false"%>
<%@ taglib uri="/cmsTag" prefix="cms"%>


<!DOCTYPE html>
<html>
	<head>
		<%
			response.setHeader("Pragma", "No-cache");
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expires", 0);
		%>
		<title>裁剪图片</title>

		<!--加载 js -->

		<link rel="stylesheet" type="text/css" href="../style/default/main.css" />
		<link rel="stylesheet" type="text/css" href="../javascript/crop/css/jquery.Jcrop.css" />
		<script type="text/javascript" src="../common/js/jquery-1.6.2.min.js"></script>
		<script src="../javascript/crop/js/jquery.Jcrop.js"></script>
		<script language="javascript" type="text/javascript" src="../javascript/commonUtil.js"></script>

		<style type="text/css">
<!--
body {


}

.uploadImg
{
	cursor:pointer

}
-->
</style>
	</head>
	<script language="JavaScript" type="text/javascript">
	
var img = new Image();
img.src="${param.imageUrl}";

$(function(){
			$('#cropbox').Jcrop(
				{
					//onSelect: disposeCropAction
					//onChange: disposeCropAction,
					//setSelect: [200,150,140,120]
					//aspectRatio: 586 / 204
				
				
				}
			);
		});


function disposeCropAction(cropData)
{
	if (parseInt(cropData.w) > 0)
	{
	//这里的rx ry是子图比例,下面的预览图DIV和这个比例一致
		var rx = 150 / cropData.w;
		var ry = 150 / cropData.h;

      // alert(img.width+":"+img.height);
		$('#preview').css
		({
			width: Math.round(rx * img.width) + 'px',
			height: Math.round(ry * img.height) + 'px',
			marginLeft: '-' + Math.round(rx * cropData.x) + 'px',
			marginTop: '-' + Math.round(ry * cropData.y) + 'px'
		});
	}
	
    $('#x').val(cropData.x);
	$('#y').val(cropData.y);
	$('#w').val(cropData.w);
	$('#h').val(cropData.h);
}

</script>
	<table broder=1>
	
			
				<img id="cropbox" class='uploadImgs' src="${param.imageUrl}" />
		
	</table>
	<%--<table>
		<tr>
			<td>
				<div style="width:150px;height:150px;overflow:hidden;">
					<img src="${param.imageUrl}" id="preview" />
				</div>

			</td>
			<td>
				<input type="button" id="crop" value="保存裁剪" onClick="javascript:sumbitCropPic();">
			</td>
		</tr>
	</table>



<div class="breadnavTab" style="top:500px">
	--%>
	<form method="post" name='cropForm' id='cropForm'>
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" value="0" />
		<input type="hidden" id="h" name="h" />
		<input type="hidden" id="targetImgFile" name="targetImgFile" value="${param.imageUrl}" />

	</form>


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


function sumbitCropPic()
{

//alert($('#w').val() +$('#h').val() +$('#x').val() +$('#y').val()  );
	if ($('#w').val()=="0")
	{   
		alert('请先选择裁剪区域!');
		return false;
	}
	
	
	
	var url = "../../content/cropPhoto.cmd?targetImgFile=${param.imageUrl}&flowFlag=${param.flowFlag}&gid=${param.gid}&x="+document.getElementById("x").value+"&y="+document.getElementById("y").value+"&w="+document.getElementById("w").value+"&h="+document.getElementById("h").value;
  
    $.ajax({type:'POST',async:false,url:url,success:
  	function(data, textStatus)
  	{
         if('success'!=data)
         {
            alert(data);
            return;
         }
         else 
         {
  		     window.close();  
             return;  
         }
  	}
  });
	
	
	
				

}

</script>
</html>

