{% extends 'base.html' %}

{% block head %}
  <script type="text/javascript" src="/static/js/upload/progressbar.js"></script>
<!--  <script type="text/javascript" src="/static/js/upload/firefogg.js"></script> -->
  <script type="text/javascript" src="/static/js/upload/upload.js"></script>

  
  <script type="text/javascript">
var add_url = "/files/add"
var edgeQueue;
$(function() {
  edgeQueue = new UploadQueue();
  $('#categoryForm').submit(function(e) {
    e.preventDefault();
    var params = {
      'category_id': $('#id_category').val(),
      'category_name': $('#id_category_name').val()
    };
    $.getJSON("/files/add_category", params, function(response) {
      var category_id = response.category_id;
      $('#files_category').val(category_id);
      $('#categoryWrapper').hide();
      $('#addFilesWrapper').show();
    });
  });

/*
  $('#filesList').bind("fileAdded", function() {
      
  });
*/

  $('#file').change(function() {
    var t = this;
    for (var i=0; i<t.files.length;i++) {
      var f = t.files[i];
      edgeQueue.addFile(f);      
    }
  });

});


$(function() {
  var f = window.document;
  f.addEventListener("dragenter", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
  f.addEventListener("dragover", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
  f.addEventListener("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();  
    var files = e.dataTransfer.files;
    for (var i=0; i<files.length; i++) {
      var fil = files[i];
      edgeQueue.addFile(fil);
    }
  }, false);
});


  </script>

  <style type="text/css">
#addFilesWrapper {
  display: none;
}

.uploading {
  background-color: blue;
}

.uploaded {
  background-color: green;
}

#progressbar {
  display: none;
  background-color: #80ADB0;
}

#progressstatus {
  background-color: #005740;
}

  </style>
{% endblock %}



{% block body %}
  <div>
    <div id="categoryWrapper">
      <form id="categoryForm" action="" method="POST">
        {{ categoryForm.as_p }}
        <input id="categorySubmit" value="Submit" type="submit" />
      </form>
    </div>

    <div id="addFilesWrapper">
      <form id="addFile" action="/files/add" method="POST" enctype="multipart/form-data">
       <input id="files_category" name="files_category" type="hidden" />
       <input id="file" name="file" type="file" multiple="multiple" value="Select Files.." />
<!--
       <input id="upload" type="button" value="Upload" style="display: none" />
       <input id="submit" type="submit" value="Upload" />
-->
      </form>
      <!--
      <form id="firefogg" style="display: none">
       <input id="selectFile" type="button" value="Select File.." />
       <input id="submitFile" type="button" value="Upload" />
      </form>
      -->
      <ul id="filesList">

      </ul>
      <div id='progressbar'></div>
    </div>
  </div>
<!--
  <div id="filesWrapper">
    <input id="fileInput" type="file" name="file" multiple="multiple" /> <br />
    <div id="fileList">
    </div>
  </div>
-->
{% endblock %}