<?php

/*
 * Progress Upload Js Version 0.1
 * Author By Aan Gabriel
 * how to use ?
 * demo:
 * call the modules:
 * include 'progress.js.php';
 * call the style:
 * echo $ProgressCss;
 * call the form:
 * echo '<div class="gmenu"><form action="example.php" method="post" enctype="multipart/form-data">';
 * and example input file
 * call to show progress and status:
 * echo $Progress;
 * call the javascript:
 * echo $ProgressJs;
 * on example.php you must have status id by:
 * id="status"
 * and done
 * $ProgressCss: Default
 * $ProgressCss1: New Style
 * $ProgressCss2: New Style With animation
 * $ProgressCss3: Window Blue
 * if you use $ProgressCss3 you must use $Progress1 and $Progress1 just for this
 * new version 1.0.2
 * $aan = new UploadPr();
 * echo $aan->Style('2'); to show css
 * echo $_code; to call jquery
 * echo $aan->Show('1'); to show status
 * echo $aan->Js(); to show code of the call
 * style type 1,2,3,4
 * show type 1,2
 * warnink show must type 2 if style type 4
*/



 class UploadPr {
    private $ProgressCss3 = '<style>

@-webkit-keyframes moving-gradient {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
}

.bar {
    border-radius: 3px; 
    width:0%; 
    height:20px;
    background: -webkit-linear-gradient(
        left,
        #0193CD 30%,
        #66D4E5 80%,
        #0193CD 100%
    ) repeat;
    
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.half {
  display:none; 
  width: 100%; 
  overflow-x: hidden; 
}
.half.full {
   width: 100%; 
}
.half .bar {
   width: 100%;
}
.half.full .bar { 
 -webkit-animation-duration: 2s; 
}

.sexy {
    border: 1px solid #adadad;
    -webkit-border-radius: 2px;
}

.sexy .gradient-overlay {
    position: absolute;
    width: 100%;
    height: 20px;
    
    background-image: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .4) 50%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, .2) 100%
    );
}

.sexy .border-overlay {
    position: absolute;
    width: 100%;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, .15);
}
</style>'; 
   private $ProgressCss2 = '<style>
.progress {
   display:none; 
   position:relative; 
   width:auto; 
   border: 1px solid #ddd; 
   padding: 1px; 
   border-radius: 3px; 
}
 
.bar { 
    background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);
      -webkit-animation: animate-stripes 5s linear infinite;
      animation: animate-stripes 5s linear infinite; 
      border-radius: 3px; 
      background-size: 35px 20px, 100% 100%, 100% 100%; 
      width:0%; 
      height:20px; 
}

@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

@keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}
.percent { 
   position:absolute; 
   display:inline-block; 
   top:3px; 
   left:48%; 
}
</style>';
   private $ProgressCss1 = '<style>
.progress {
   display:none; 
   position:relative; 
   width:auto; 
   border: 1px solid #ddd; 
   padding: 1px; 
   border-radius: 3px; 
}
 
.bar { 
    background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 3px; 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
    width:0%; 
    height:20px; 
}
.percent { 
   position:absolute; 
   display:inline-block; 
   top:3px; 
   left:48%; 
}
</style>'; 
   private $ProgressCss = '<style>
.progress {
   display:none; 
   position:relative; 
   width:auto; 
   border: 1px solid #ddd; 
   padding: 1px; 
   border-radius: 3px; 
}
.bar { 
   background-color: #B4F5B4; 
   width:0%; 
   height:20px; 
   border-radius: 3px; 
}
.percent { 
   position:absolute; 
   display:inline-block; 
   top:3px; 
   left:48%; 
}
</style>';
   private $Progress = '<div class="progress" id="progress_div"><div class="bar"></div><div class="percent">0%</div></div><div id="status"></div>';
   private $Progress1 = '<div class="half full sexy" id="progress_div"><div class="border-overlay"></div><div class="gradient-overlay"></div><div class="bar"></div></div><div id="status"></div>';
   private $ProgressJs = '<script>
(function() {    
var bar = $(\'.bar\');
var percent = $(\'.percent\');
var status = $(\'#status\');
   
$(\'form\').ajaxForm({
    beforeSend: function() {
document.getElementById("progress_div").style.display="block";
        status.empty();
        var percentVal = \'0%\';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete+\'%\';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal=\'100%\';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xhr) {
		 document.getElementById("progress_div").style.display="none";
		 status.html(xhr.responseText);
	}
}); 

})();       
</script>';
    private $type = '1';
    private $types = '1';
    public function Style($type) {
      if ($type == 1) {
        return $this->ProgressCss;
      }
      if ($type == 2) {
        return $this->ProgressCss1;
      }
      if ($type == 3) {
        return $this->ProgressCss2;
      }
      if ($type == 4) {
        return $this->ProgressCss3;
      }
      else {
        return 'Error of the type';
      }
}
    public function Show($types) {
      if ($types == 1) {
        return $this->Progress;
      }
      if ($types == 2) {
        return $this->Progress1;
      }
      else {
        return 'Error of the type';
      }
 
}
    public function Jquery() {
         $_code = '<script type="text/javascript" src="' . $config['homeurl'] . '/system/plugin/src/Js/Jquery.js"></script><script src="'.$config['homeurl'].'/system/plugin/src/Js/jquery.form.js"></script>';
         return $_code;
    }
    public function Js() {
        return $this->ProgressJs;
}
} 

?>

