<{import file="mheader.html" title="头像编辑"}> 
<link rel="stylesheet" type="text/css" href="<{$__PUBLIC__}>plug/Jcrop/jquery.Jcrop.min.css">
<{import file="user/tab.html"}> 
<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:#999; }

.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; 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; 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; } 


/*按钮*/
.upload_button2{ position:relative; overflow:hidden; float:left; }
.upload_button2 a{ width:100px; height:30px; border-radius:2px; background:#f8f8f8; border:1px solid #ddd; position:relative; text-align:center; line-height:30px; color:#333;float:left; }
.upload_button2 a input{ cursor:pointer; width:100px; height:30px; position: absolute; top:0; right:0; margin: 0; opacity: 0; filter:alpha(opacity=0); 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_crop2" class="upload_button2"> 
				<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>
				<input type="hidden" id="image_url" value=""/>
			</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>
<{import file="mfooter.html"}>
<script type="text/javascript" src="<{$__PUBLIC__}>plug/Jcrop/jquery.Jcrop.js"></script> 
<script type="text/javascript">
$(document).on("click", "#do_ok", function(){ 
	var x1 	= $("#x1").val();
	var y1 	= $("#y1").val();
	var x2 	= $("#x2").val(); 
	var y2 	= $("#y2").val();
	var w 	= $("#w").val();
	var h 	= $("#h").val();
	var img = $("#image_url").val();
	$.post(URI+'album/cut_img', {image: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('保存成功', function(){
				location.href = URI+"user/index"; 
			}); 
		}else{
			$.alert(data.msg);
		} 
	});  
}); 

upload("#imgFile", URI+'album/upload_temp', function(data, $this){ 
	if(data.error == '0'){
				var jcrop_api, boundx, boundy;	 
				$(".show_img_box").html('<img id="Pcrop_url" src="'+data.url+'" />');
				$("#image_url").val(data.name);
				$('.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'  
						}); 
						 
					}  
				};  
				
	}else{
		 alert(data.msg);
	} 
});

	 
</script>