{template Public:Page:header}
<div class="container">
  <div class="row"> 
  {template Member:Index:sidebar}
    <div class="col-lg-10 well-col-pl-30">
      <div class="row">
        <div class="well">
          <h3>上传头像</h3>
          <hr />
         {if $uclient=GetClient()}
         	 <script type="text/javascript">
				function updateavatar() {
					window.location.reload();
				}
			 </script>
             <div class="row">
              <div class="col-lg-1 my_avatar"> </div>
              <div class="col-lg-3 my_avatar">
                <div class="avatar_200">{echo GetAvatarSimple($uid,200)}</div>
                <p class="text-center">200 × 200</p>
              </div>
              <div class="col-lg-2 my_avatar">
                <div class="avatar_120">{echo GetAvatarSimple($uid,120)}</div>
                <p class="text-center">120 × 120</p>
              </div>
              <div class="col-lg-2 my_avatar">
                <div class="avatar_48">{echo GetAvatarSimple($uid,48)}</div>
                <p>48 × 48</p>
              </div>
            </div>
            
             <div class="row">
             <div class="col-lg-1"></div>
             <div class="col-lg-8">{echo $uclient->avatar($uid)}</div>
             </div>
         {else}
            {template Public:Page:webuploader}
            <script>
            
            $(function(){
                 
                var uploader = WebUploader.create({
            
                    swf: AURL+'/plugin/webuploader/Uploader.swf',
                
                    server: '{echo U("post/member/avatar")}',
            
                    pick: '#SelectAvatar',
                    
                    fileNumLimit:1,
                    
                    fileSizeLimit:1232896,
                    
                    fileSingleSizeLimit:1232896,
            
                    // 只允许选择图片文件。
                    accept: {
                       title: 'gif,jpg,png',
                       extensions: 'gif,jpg,png',
                       mimeTypes: 'image/*'
                    }
                    
                    
                });
                
                
                uploader.on( 'beforeFileQueued', function( file ) {
                    uploader.reset();
                });
                
            
                uploader.on( 'fileQueued', function( file ) {
            
                   
                   var html = $('<div id="' + file.id + '"><img></div>');
                   $('.avatar_200').html(html);
                  
                  // $('.avatar_48').html(html);
                    
                   //创建缩略图 200px
                   var img200 = html.find('img');
                    uploader.makeThumb( file, function( error, src ) {
                        if ( error ) {
                            img200.replaceWith('<span>不能预览</span>');
                            return;
                        }
            
                        img200.attr( 'src', src );
                    }, 200,200 );
                   
                   //创建缩略图 120px
                   var html2 = $('<div id="' + file.id + '"><img></div>');
                   $('.avatar_120').html(html2);
                   var img120 = html2.find('img');
                   uploader.makeThumb( file, function( error, src ) {
                        if ( error ) {
                            img120.replaceWith('<span>不能预览</span>');
                            return;
                        }
            
                        img120.attr( 'src', src );
                    }, 120,120 );
                   
                   
                   //创建缩略图 48px
                   var html3 = $('<div id="' + file.id + '"><img></div>');
                   $('.avatar_48').html(html3);
                   var img48 = html3.find('img');
                   uploader.makeThumb( file, function( error, src ) {
                        if ( error ) {
                            img48.replaceWith('<span>不能预览</span>');
                            return;
                        }
            
                        img48.attr( 'src', src );
                    }, 48,48);
                   
                   
                   $('.progress').show(500);
                   
                });
                
                 //进度条
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var percentage=percentage * 100 + '%';
                    $('#progress-avatar').html(percentage);
                    $('#progress-avatar').css( 'width',percentage);
                });
                
                
                uploader.on( 'uploadSuccess', function( file ) {
                     bootbox.dialog({
                         buttons: {  
                          cancel: {  
                             label: '确认',  
                             callback: function () { window.location.reload();}
                          }  
                       },  
                       title:'提示',
                       message: '<i class="glyphicon glyphicon-warning-sign"></i> 恭喜您,上传成功啦！', 
                        
                      });
                });
                
                uploader.on( 'uploadError', function( file,reason ) {
                    
                     bootbox.dialog({
                         buttons: {  
                          cancel: {  
                             label: '确认',  
                          }  
                       },  
                       title:'提示',
                       message: '<i class="glyphicon glyphicon-warning-sign"></i> '+reason, 
                        
                     });
                   
                });
                
                uploader.on( 'uploadComplete', function( file ) {
                    $('.progress').fadeOut();
                });
            
                
                //开始上传
                 $('#UpAvatar').on( 'click', function() {
                     uploader.upload();
                    
                });	
                
              
            });
            </script>
            
            <div class="row">
              <div class="col-lg-1 my_avatar"> </div>
              <div class="col-lg-3 my_avatar">
                <div class="avatar_200">{echo GetAvatarSimple($uid,200)}</div>
                <p class="text-center">200 × 200</p>
              </div>
              <div class="col-lg-2 my_avatar">
                <div class="avatar_120">{echo GetAvatarSimple($uid,120)}</div>
                <p class="text-center">120 × 120</p>
              </div>
              <div class="col-lg-2 my_avatar">
                <div class="avatar_48">{echo GetAvatarSimple($uid,48)}</div>
                <p>48 × 48</p>
              </div>
            </div>
            <div class="row col-pt-20">
              <div class="col-lg-1"> </div>
              <div class="col-lg-10 my_avatar col-pt-20">
              <div class="progress progress-striped active" style="display:none">
                <div style="width: 10%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-info" id="progress-avatar"> 等待上传  </div>
              </div>
              </div>
            </div>
            <div class="row padding_pt_20">
              <div class="col-lg-1 my_avatar"> </div>
              <div class="col-lg-11 my_avatar">
                <div id="SelectAvatar" style="float:left;margin-right:22px;">选择照片</div> <a class="btn btn-success" href="javascript:void(0);" id="UpAvatar" style="float:left;">上传头像</a>
              </div>
            
            </div>
            
            
            
            {/if}
            
            <hr />
            
            
            <div class="alert alert-warning fade in">
            <button data-dismiss="alert" class="close">
                ×
            </button>
            <i class="fa-fw fa fa-warning"></i>
            <strong>上传头像提示：</strong> 
            
            上传格式  JPG,GIF,PNG ，图片大小不超过1MB
            
            
            上传像素 分辨率大于200px × 200px
            
            
            
            
            </div>
                                                    

        </div>
      </div>
    </div>
  </div>
</div>

{template Public:Page:footer}