<{import file="index/header.html" title="头像编辑"}> 
<{include file="user/tab.html"}>
<script type="text/javascript" src="<{$__PUBLIC__}>js/jquery.dialog.js"></script>
<script type="text/javascript" src="<{$__PUBLIC__}>js/ajaxfileupload.js"></script>
<script type="text/javascript" src="<{$__PUBLIC__}>plug/Jcrop/jquery.Jcrop.js"></script> 
<link href="<{$__PUBLIC__}>plug/Jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css">
<style type="text/css"> 
.ajax_box{ width:100%; padding:0 0 0 30px; float:left; }  
.up{ width:100%; padding:0 0 20px 0; margin:10px 0 0 0; float:left; }
.up p{ padding:10px 0 10px 0; color:#999999; }

.btm{ width:100%; padding:0 0 20px 0;  }
.btm .showImg{ width:260px; height:260px;  border:1px solid #efefef; background: url(<{$__PUBLIC__}>images/noimg.png) center center no-repeat; float:left;}
.btm .thumb{ width:100px; padding:0 0 0 50px; margin:0; float:left;}
.btm .thumb span{ width:100px; padding:0 0 5px 0; color:#666; float:left; }
.btm .thumb .view{ width:100px; height:100px; border:1px solid #efefef; overflow:hidden; padding:10px 0 0 0; float: left;}

#upload_button_crop{ padding:10px 0 0 0; float:left; }
#upload_button_crop span{ margin:0; color:#666; padding:5px 15px 0 0; float:left; }
.ajax_do_bar{ width:100%; padding:25px 0 50px 30px; float:left; }

</style> 
<div class="lbox"> 
	<div class="ajax_box">
		<div class="up">
			<p>	
				新头像不允许涉及政治敏感与色情;<br> 
				图片格式必须为：bmp, jpeg, jpg, gif;不可大于2M
			</p>
			<div id="upload_button_crop">
				<span>选择图片</span>
				<a class="file" href="javascript:;">选择文件<input type="file" name="imgFile" id="imgFile" size="10" /></a>
			</div>
			<div id="upload_msg"></div> 
		</div>
		<div class="btm">
			<div class="showImg">
				<div class="show_img_box"><img src="" id="Pcrop_url"/></div>
				<div id="sub_can">
					<label><!--X1--><input type="hidden" id="x1" name="x1" /></label>
					<label><!--Y1--><input type="hidden" id="y1" name="y1" /></label>
					<label><!--X2--><input type="hidden" id="x2" name="x2" /></label>
					<label><!--Y2--><input type="hidden" id="y2" name="y2" /></label>
					<label><!--W --><input type="hidden" id="w" name="w" /></label>
					<label><!--H --><input type="hidden" id="h" name="h" /></label>
				</div>
			</div>
			<div class="thumb">
				<span>头像预览</span>
				<div class="view">
				</div>
			</div> 
		</div>  
	</div>
	<div class="ajax_do_bar">
		<a href="javascript:;" class="submit" id="do_ok">确定</a> 
	</div>
</div>
<{include file="index/footer.html"}>
<script type="text/javascript">
$(function(){
	$(document).on("click","#do_ok",function(){ 
		var x1 = $("#sub_can input[name=x1]").val();
		var y1 = $("#sub_can input[name=y1]").val();
		var x2 = $("#sub_can input[name=x2]").val(); 
		var y2 = $("#sub_can input[name=y2]").val();
		var w = $("#sub_can input[name=w]").val();
		var h = $("#sub_can input[name=h]").val(); 
		var img = $("#Pcrop_url").attr('src'); 
		$.post('?m=album&a=cut_img',{img:img,x1:x1,x2:x2,y1:y1,y2:y2,w:w,h:h},function(result){  
			var data = jQuery.parseJSON(result); 
			if(data.error == '0'){
				$('#back_img_url').attr('src',data.msg);
				alert('保存成功');
				location.href="?m=user&a=index";
			}else{
				alert(data.msg);
			} 
		});  
	}); 
	$(document).on("change", "#imgFile", function(){ 
		ajaxFileUpload(); 
	});
	function ajaxFileUpload(){
    	$("#upload_msg").ajaxStart(function(){ 
      		$(this).show(); 
   		}); 
		/* 
		.ajaxComplete(function(){ 
		   $(this).hide(); 
		}); 
		*/ 
		$.ajaxFileUpload({ 
		   	url:'?m=album&a=upload_temp', 
		   	secureuri:false, 
		   	fileElementId:'imgFile', 
		   	dataType: 'json',	//text json
		   	success: function(data){ 
				if(data.error == '1'){ 
					$('#msg').html("<span style='color:red'>上传失败</span>"); 
				}else{ 
					var jcrop_api, boundx, boundy;	 
					$(".show_img_box").html('<img id="Pcrop_url" src="'+data.url+'" />');
					$('.view').html('<img src="'+data.url+'"/>');
					$('#Pcrop_url').Jcrop({  
						boxWidth: 260,
						boxHeight: 260,
						//minSize: [50,50],
						//setSelect: [c.x,c.y,c.x2,c.y2],
						onChange: updatePreview,
						onSelect: updatePreview,
						onSelect: updateCoords,
						aspectRatio: 1  
					},function(){
						var bounds = this.getBounds(); 
						boundx = bounds[0];  
						boundy = bounds[1];
						jcrop_api = this;
					});
					function updateCoords(c){
						$('#x1').val(c.x);
						$('#y1').val(c.y);
						$('#w').val(c.w);
						$('#h').val(c.h);
					};
					function updatePreview(c){
						//$("#er").val(scalesx+' '+scalesy+' -- '+c.w+' | '+c.h);
						if (parseInt(c.w) > 0){
							$('.view img').css({  
								width: Math.round(100 / c.w * boundx) + 'px', 
								height: Math.round(100 / c.h * boundy) + 'px',  
								marginLeft: '-' + Math.round(100 / c.w * c.x) + 'px',  
								marginTop: '-' + Math.round(100 / c.h * c.y) + 'px'  
							}); 
							 
						}  
					}; 
				}
			}
		});
	}
 
});
 
</script>