<section id="profile" class="content_wrapper innerPage">
            <div class="container clearfix">
              <div class="image-upload">
                <h2><?php echo getLang('Pictures'); ?></h2>
                <div class="profile-picture">
                  <h3><i class="fa fa-unlock"></i> <?php echo getLang('Avatar_Picture'); ?></h3>
                  <!--<p><i class="fa fa-info-circle"></i> Click the Upload Photos button. You get a popup, the click or drag picture on that, the click any button to resize and move any position, then click tick mark to save. </p>-->
                  <div class="profile-pic">
                    <img src="<?php if(!empty($userDetials['filename']) && file_exists(FCPATH.'assets/userfiles/'.$userDetials['path'].'/320/'.$userDetials['filename'].'.'.$userDetials['extension'])){ echo  base_url().'assets/userfiles/'.$userDetials['path'].'/320/'.$userDetials['filename'].'.'.$userDetials['extension']; } else { echo  base_url().'assets/images/default-avatar.jpg'; }?>" alt="" srcset="<?php if(!empty($userDetials['filename']) && file_exists(FCPATH.'assets/userfiles/'.$userDetials['path'].'/320/'.$userDetials['filename'].'.'.$userDetials['extension'])){ echo  base_url().'assets/userfiles/'.$userDetials['path'].'/320/'.$userDetials['filename'].'.'.$userDetials['extension']; } else { echo  base_url().'assets/images/default-avatar.jpg'; }?> 1x">
                    <a class="change-pic" href="<?php echo base_url();?>change/<?php echo base64_encode($userDetials['id']); ?>" name="" title="<?php echo getLang('edit'); ?>"><i class="fa fa-edit"></i></a>
                    <a class="rorate" href="<?php echo base_url();?>profile/rotate/<?php echo base64_encode($userDetials['id']); ?>" name="" title="<?php echo getLang('Rotate'); ?>"><i class="fa fa-repeat"></i></a>
                  </div>
                </div>

                <div class="profile-picture upload-picture">
                  <h3><i class="fa fa-upload"></i><?php echo getLang('Uploaded_Pictures'); ?></h3>
                  <ul>
                  <?php if(!empty($userImages)){ 
                          foreach ($userImages as $value) { ?>
                           <li>
                              <div class="profile-pic">
                                <div class="profile_thumb">
                                  <div class="profile_thumb" style="background:url('<?php if(file_exists(FCPATH.'assets/userfiles/'.$value['path'].'/'.$value['filename'].'.'.$value['extension'])){ echo base_url().'assets/userfiles/'.$value['path'].'/'.$value['filename'].'.'.$value['extension']; } else { echo 'images/default-avatar.jpg'; }?>') no-repeat center center / cover;"></div>

                                  <a class="change-pic" href="<?php echo base_url();?>change/<?php echo base64_encode($userDetials['id']); ?>" name="" title="<?php echo getLang('edit'); ?>"><i class="fa fa-edit"></i></a>
                                  <a class="rorate" href="<?php echo base_url();?>profile/rotate/<?php echo base64_encode($userDetials['id']); ?>" name="" title="<?php echo getLang('Rotate'); ?>"><i class="fa fa-repeat"></i></a>
                                </div>
                                <a class="change-pic" href="<?php echo base_url();?>profile/rotate/<?php echo base64_encode($value['id']); ?>" name="" title="<?php echo getLang('Rotate'); ?>"><i class="fa fa-repeat"></i></a>
                                <?php if($value['is_private']==1){ ?>
                                <a class="unlock" href="<?php echo base_url();?>profile/lock/2/<?php echo base64_encode($value['gai_id']); ?>" name="" title="<?php echo getLang('Make_public_share_with_the_community'); ?>" onclick="return confirm('<?php echo getLang('Are_you_sure_to_unlock'); ?>');"><i class="fa fa-eye-slash" ></i></a>
                                <?php } else { ?>
                                <a class="unlock" href="<?php echo base_url();?>profile/lock/1/<?php echo base64_encode($value['gai_id']); ?>" name="" title="<?php echo getLang('Make_private_share_by_personal_request'); ?>" onclick="return confirm('<?php echo getLang('Are_you_sure_to_lock'); ?>');"><i class="fa fa-eye" ></i></a>
                                <?php } ?>
                                <a class="del-pic" href="<?php echo base_url();?>profile/deleteImage/<?php echo base64_encode($value['id']); ?>" onclick="return confirm('<?php echo getLang('Are_you_sure'); ?>');">
                                    <i class="fa fa-trash"></i>
                                </a>
                              </div>
                            </li>
                  <?php } } ?>  
                  </ul>
                  <div class="upload-bttn-box">
                  <?php echo $this->utility->showMsg(); ?>
                  <!--<div id="show_image_name"></div>-->
                  <img src="images/default-avatar.jpg" alt="" id="preview" class="preview-image" style="display:none">
                    <form action="" method="post" enctype="multipart/form-data">

                         <div class="upload_btn">
                          <input type="file" id="uploadPic" name="pics[]" multiple>
                          <label type="button" class="btn_gold" for="uploadPic"><?php echo getLang('Uploaded_Pictures'); ?> </label>
                          </div> 

                        <button type="submit" class="btn_gold" id="picSubmit" ><?php echo getLang('Save'); ?></button> 
                      </form>
                     
                  </div>


                  <?php if($this->session->userdata('user_id')== 25267 || $this->session->userdata('user_id') == 11330){?>
                  <div id="container" class="video-containar">
                  <h3 style="margin-top: 50px;"><i class="fa fa-upload"></i>Upload Videos</h3>

                  <ul>
                  <?php if(!empty($userVideos)){ 
                          foreach ($userVideos as $video) { ?>
                            <?php if(file_exists(FCPATH.'assets/videos/uploads/thumb/'.str_replace('mp4', 'jpg', $video['filename']))){?>
                           <li>
                              <div class="profile-pic">
                                <div class="profile_thumb">
                                  <div class="profile_thumb video_thumb" data-id="<?php echo $video['id']; ?>" style="background:url('<?php echo base_url().'assets/videos/uploads/thumb/'.str_replace('mp4', 'jpg', $video['filename']); ?>') no-repeat center center / cover;"></div>
                              </div>
                              <a class="del-pic" href="<?php echo base_url();?>upload/deleteVideo/<?php echo base64_encode($video['id']); ?>" onclick="return confirm('<?php echo getLang('Are_you_sure'); ?>');">
                                    <i class="fa fa-trash"></i>
                                </a>
                            </div>
                            </li>
                          <?php }?>
                  <?php } } ?>  
                  </ul>


                  <div id="myProgress" style="display: none;">
                    <div id="myBar"></div>
                  </div>
                  <div id="body">
                    <div id="filelist"></div>
                    <div id="container">

                       <div class="upload_btn">
                          <input type="hidden" id="file_ext" name="file_ext" value="<?=substr( md5( rand(10,100) ) , 0 ,10 )?>">
                          <label type="button" id="uploadFile" name="uploadFile">Select video file </label>
                          <button id="upload" class="btn_gold">Upload</button>
                        </div>
                    </div>
                    
                    <div id="console"></div>
                  </div>

                  <?php //echo $ext = pathinfo(FCPATH . "assets/videos/uploads/abc.mp4", PATHINFO_FILENAME);?>
                </div>

              <?php } ?>


              </div>
              
            </div>
</section>
<script type="text/javascript">
  BASE_URL = "<?php echo base_url();?>";
</script>

<script src="<?=base_url();?>public/js/plupload/plupload.full.min.js"></script>
<script>
  var check = 0;
  var datafile = new plupload.Uploader({
  runtimes : 'html5,flash,silverlight,html4',
  browse_button : 'uploadFile', // you can pass in id...
  container: document.getElementById('container'), // ... or DOM Element itself
  chunk_size: '1mb', 
  url : BASE_URL + 'upload/uploadtoserver',
  max_file_count: 1,

  //ADD FILE FILTERS HERE
  filters : {
     mime_types: [
        {title : "WEBM files", extensions : "webm"},
        {title : "MPEG files", extensions : "mpeg"},
        {title : "OGG files", extensions : "ogg"},
        {title : "MP4 files", extensions : "mp4"},
        {title : "AVI files", extensions : "avi"},
        {title : "WMV files", extensions : "wmv"},
        {title : "MOV files", extensions : "mov"},
        {title : "FLV files", extensions : "flv"},
      ]
    
  }, 

  // Flash settings
  flash_swf_url : BASE_URL + 'public/js/plupload/Moxie.swf',

  // Silverlight settings
  silverlight_xap_url : BASE_URL + 'public/js/plupload/Moxie.xap',
   

  init: {
    PostInit: function() {
      document.getElementById('filelist').innerHTML = '';  
      document.getElementById('upload').onclick = function() {
      datafile.start();
        return false;
      };
    },

    FilesAdded: function(up, files) {
      plupload.each(files, function(file) {
        var file_ext = file.name.split('.');
        if(file_ext.length > 1){
          file_ext = file_ext[1].toLowerCase();
        }
        if(file_ext == 'webm' || file_ext == 'mpeg' || file_ext == 'ogg' || file_ext == 'mp4' || file_ext == 'avi' || file_ext == 'wmv' || file_ext == 'mov' || file_ext == 'flv') {
          if(file.size/1000000 > 100){
            alert('Please select video size less than 100MB');
          } else {
            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
          }
        } else {
          alert('Please select proper video file format');
        }
      });
    },

    UploadProgress: function(up, file) {
      //document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
      var file_ext = file.name.split('.');
      if(file_ext.length > 1){
        file_ext = file_ext[1].toLowerCase();
      }
      if(file_ext == 'webm' || file_ext == 'mpeg' || file_ext == 'ogg' || file_ext == 'mp4' || file_ext == 'avi' || file_ext == 'wmv' || file_ext == 'mov' || file_ext == 'flv') {
        if(file.size/1000000 > 100){
          alert('Please select video size less than 100MB');
        } else {
          document.getElementById("myProgress").style.display = "block";
          var elem = document.getElementById("myBar");
          elem.innerHTML = file.percent + "% ....";
          elem.style.width = file.percent + "%";
          console.log('percent--------'+file.percent);
          if(file.percent == 100){
            document.getElementById("myBar").innerHTML = "Done";
            document.getElementById("myProgress").style.display = "none";

            setTimeout(function(){
              window.location.reload();
            }, 3000)
          }
        }
      } else{
        alert('Please select proper video file format');
      }
      /*if(file.percent == 100 && check == 0){
        check = 1;
          document.getElementById("myProgress").style.display = "block";
          var elem = document.getElementById("myBar");
          var width = 1;
          var id = setInterval(frame, 1000);
          function frame() {
            if (width >= 100) {
              clearInterval(id);
              document.getElementById("myBar").innerHTML = "Done";
              document.getElementById("myProgress").style.display = "none";
              window.location.href=BASE_URL + 'pictures';
              i = 0;
              
            } else {
              width++;
              elem.style.width = width + "%";
            }
          }
      }*/
    },
    ChunkUploaded: function(up, file, result) {
            response_data = JSON.parse(result.response);
            console.log('response_data--------'+result.response.result);
        },
    Error: function(up, err) {
      document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
    }
  }
});

datafile.init();
</script>

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
  $('body').on('change', '#uploadPic', function (e) {
        var reader = new FileReader();
        var files = e.target.files,
        filesLength = files.length;
        var that = $(this);
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {                
                var file = e.target;
                console.log(e.target.result);
                /*var height = this.height;
                var width = this.width;*/
                var imgData = e.target.result;
                var decode = imgData.split(';');
                var decodeAgain = decode[0].split('/').pop().toLowerCase();
                if(decodeAgain == 'jpeg' || decodeAgain == 'png' || decodeAgain == 'jpg') {
                     var filesrc = e.target.result;
                        that.parent().parent().append('<li class="pip">\
                            <div class="img-box">\
                              <img src="'+ filesrc +'" alt="" width="200"/>\
                            </div>\
                        </li>');
                    //}
                }
            });
            fileReader.readAsDataURL(f);
        }
        
    });
</script>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #b3975b;
}
</style>