<style type="text/css">
#upload {position:absolute;top: 40%;left: 35%;margin-top: -110px;display:none;z-index:9999;
  margin-left: -160px;border: 1px solid black;background: #33393D;padding:10px;
border-radius: 5px;box-shadow: 10px 10px 5px #444;}
#upload td {padding-bottom:5px;}
#upload td { color:white;font-weight:bold}
#upload table,#upload th,#upload td{border:0}
.progressbar {width: 300px;background: url(/rtl/wfm/progressbar.png) no-repeat 0 -40px;}
.progressbar-completed {height: 20px;margin-left: -1px;background: url(/rtl/wfm/progressbar.png) no-repeat 1px 0;}
.progressbar-completed div {
    float: right;
    width: 50%;
    height: 20px;
    margin-right: -1px;
    background: url(/rtl/wfm/progressbar.png) no-repeat 100% 0;
    display: inline;
}
</style>
<div id="upload">
<table>
  <tr>
    <td>Uploading:&nbsp;<span id="uploading"></span></td>
  </tr>
  <tr>
    <td>
      <div class="progressbar">
        <div id="curprogressbar" class="progressbar-completed" style="width:0;">
          <div>&nbsp;</div>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Uploaded:&nbsp;<span id="uploaded"></span></td>
  </tr>
  <tr>
    <td>
      <div class="progressbar">
        <div id="totprogressbar" class="progressbar-completed" style="width:0%;">
          <div>&nbsp;</div>
        </div>
      </div>
    </td>
  </tr>
</table>
</div>
<script type="text/javascript">
function startDragDrop(dropQ)
{
   var files=[];
   var totSize=0;
   var uplSize=0;
   var totFiles=0;
   var uplFiles=0;
   var xhr;
   scroll(0,0);
   function _setMask(time){
      $('#overlaymask').css({'width':$(window).width(),'height':$(document).height()}).fadeTo(time?time:0,0.8);
   };
   function maskResize() {_setMask();}
   function setMask(time) {
      _setMask(time);
      $(window).bind('resize',maskResize);
   };
   function hideMask() {
      $('#overlaymask').hide();
      $(window).unbind('resize',maskResize);
   };
   $('<img id="dropbox" src="/rtl/wfm/dropbox.png" />').appendTo('body');
   function progressBar(name, percent) {
      $(name).css('width', Math.round(percent)+"%");
   };
   function curProgressBar(percent) {
      progressBar("#curprogressbar", percent);
   };
   function totProgressBar(percent) {
      progressBar("#totprogressbar", percent);
   };
   function uploading(name) {
      $("#uploading").html(name);
   };
   function uploaded() {
      $("#uploaded").html(uplFiles+" / "+totFiles);
   };
   function refresh() {
      window.location.reload(true);
   };
   function uploadNext() {
      var f;
      scroll(0,0);
      var filter = window.dropFilter ? window.dropFilter : function() { return false; };
      do {
         f=files.shift();
      } while(f && filter(f.name));
      if(f) {
         uploading(f.name);
         xhr = new XMLHttpRequest();
         xhr.onreadystatechange=function(){
            if (xhr.readyState == 4) {
               try {
                  var x=$.parseJSON(xhr.responseText)
                  if(x) {
                     if(x.err) {
                        var msg;
                        if(x.emsg) msg=x.emsg;
                        else msg=x.err;
                        alert(msg);
                        setTimeout(refresh, 200);
                        return;
                     }
                     else if(x.execjs) eval(x.execjs);
                  }
               }
               catch(e) {}
               curProgressBar(100);
               uplSize+=f.size;
               totProgressBar(uplSize * 100 / totSize);
               uplFiles++;
               uploaded();
               uploadNext();
            }
         };
         xhr.upload.addEventListener("progress", function(e) {
            if(e.lengthComputable) {
               curProgressBar(e.loaded * 100 / f.size);
               totProgressBar((e.loaded + uplSize) * 100 / totSize);
            }
         }, false);
         xhr.upload.addEventListener("error", function(e) {
            var name=f.name;
            setTimeout(function() {
               alert("Uploading "+name+" failed!");
            }, 100);
         }, false);  
         xhr.upload.addEventListener("abort", refresh, false);
         xhr.open("PUT", window.dropURL ? (window.dropURLName ? window.dropURL+f.name : window.dropURL) : window.location.href+f.name);
         xhr.setRequestHeader("x-requested-with","upload")
         xhr.send(f);

      }
      else
         setTimeout(refresh, 200);
   };
   function addFiles(nf) {
      for(k in nf) {
         if(nf[k].size && nf[k].name)
         {
            totSize += nf[k].size;
            totFiles++;
            files.push(nf[k]);
         }
      }
      totProgressBar(uplSize*100/totSize);
      uploaded();
      if(totFiles) {
         $('#upload').show();
         setMask();
         if(!xhr) uploadNext();
      }
      else
         hideMask();
   };
   var timerId;
   function dragleave() {
      if(!timerId) return;
      hideMask();
      $("#dropbox").hide();
      isActive=false;
      if(timerId) clearTimeout(timerId);
      timerId=null;
   }
   function drop(e) {
      dragleave();
      $('#dropbox').hide();
      addFiles(e.originalEvent.dataTransfer.files);
   };
   $('body').bind('drop',drop).bind('dragover',function() {
      if(timerId) return;
      $('#upload').hide();
      $("#dropbox").show();
      setMask();
      timerId=setTimeout(dragleave, 3000);
   });
   $('#overlaymask').bind('dragleave', dragleave);
   addFiles(dropQ);
};
</script>
