{% extends 'main_base.html' %}

{% block title %}
  Upload Files
{% endblock %}

{% block pageTitle %}
  //|||\\ File Uploader
{% endblock %}

{% block extra_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" src="/static/js/upload/edgeUpload.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;
      var category_name = response.category_name;
      $('#files_category').val(category_id);
      $('#categoryWrapper').hide();
      $('#addFilesWrapper').show();
      $('#uploadStudy').text(category_name);
    });
  });

/*
  $('#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>

	<link rel="stylesheet" href="/static/css/files/upload.css" />
{% endblock %}



{% block content %}
  <div>
    <div id="categoryWrapper">
      <div id="categoryHelp">
        Select a Study below or create a new one to start uploading to. 
      </div>
      <form id="categoryForm" action="" method="POST">
        {{ categoryForm.as_p }}
        <input id="categorySubmit" value="Begin" type="submit" />
      </form>
    </div>

    <div id="addFilesWrapper">
      <div id="uploadingTo">
        Uploading to: <span id="uploadStudy"></span>
      </div>
      <div id="uploadInstructions">
        Select one or multiple files, or just drag any number of files from your computer into this browser window to upload. View them <a href="http://edgwareroad.org/sandbox/archive">here</a>.
      </div>
      <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 %}
