{extend name="wap/default_new/base" /}
{block name="resources"}
<style>
	.face-box{
		background: #272822;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.face{
		width: 96%;
		height: 80%;
		text-align: center;
		margin:0 2%;
		position: relative;
		top: 45px;
	    line-height: 35;
	}
	.face .facepic{
		max-width: 96%;
		max-height: 100%;
		vertical-align: middle;
	}
	.upload_face{
		width: 96%;
		height: 40px;
		line-height: 40px;
		background: #E03115;
		color: #fff;
		text-align: center;
		margin:0 2% 20px 2%;
		position: absolute;
		bottom: 15px;
		border-radius: 5px;
		z-index: 20;
	}
</style>
{/block}
{block name="goodsHead"}

<section class="head">
	<a class="head_back" href="{:__URL('APP_MAIN/member/personalData')}"><i class="icon-back"></i></a>
	<div class="head-title" id="title">{:lang('profile_picture')}</div>
	
</section>
{/block}
{block name="main"} 
<section class="face-box">
	<div class="face">
		{notempty name="$member_img"}
		<img src="{:__IMG($default_headimg)}" class="lazy_load facepic" data-original="{:__IMG($member_img)}" alt=""  id="imgLogo">
		{else/}
		<img src="{:__IMG($default_headimg)}" alt="" class="facepic" id="imgLogo">
		{/notempty}
	</div>
	<a href="javascript:void(0);">
   		<span style=""> 
       		<input hidefocus="true" size="1" class="input-file" name="file_upload" id="uploadImg" nc_type="change_store_label" type="file" style="width: 95%;padding: 0;border: none 0;opacity: 0;filter: alpha(opacity = 0);cursor: pointer;margin: 0 2% 0 2%;position: absolute;z-index: 10;top: 0;"
				onchange="imgUpload(this);"> 
			<input type="hidden" id="Logo" value="{$member_img}" />
		</span>
    </a>
	<div class="upload_face">
		{:lang('save_avatar')}
	</div>
</section>
{/block}
{block name="bottom"}
{/block}
{block name="javascript"}
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<script>
$(function(){
	var windowHeight = $(document).height();
	var imgHeight = $(".facepic").height();
	$("#uploadImg").height(windowHeight);
	$(".face-box").height(windowHeight);
})
function imgUpload(event) {
	var fileid = $(event).attr("id");
	var data = { 'file_path' : UPLOADAVATOR };
	uploadFile(fileid,data,function(res){
		if(res.code){
			$("#imgLogo").attr("src",__IMG(res.data));
			$("#Logo").val(res.data);
			showBox(res.message,"success");
		}else{
			showBox(res.message,"error");
		}
	}, 1);
}
$(".upload_face").click(function(){
	var user_headimg = $("#Logo").val();
	$.ajax({
		type : "post",
		url : "{:__URL('APP_MAIN/member/modifyFace')}",
		data : {"user_headimg" : user_headimg},
		success : function(data){
			if(data['code']>0){
				location.href=__URL("APP_MAIN/member/personalData");
			}
		}
	})
})
</script>
{/block}