{% load url from future %}
{% include 'partial/opentip.html' %}
<section id=filepicker-form class="extend-form">
<!-- Javascript -->
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
  <div class="row" id="">
    <div class="small-8 small-offset-1 columns large-10">
        <input id="filepicker-file-upload"
          type="filepicker-dragdrop"
          data-fp-apikey="A5pg98pDjQk6k3lBZ8VDVz"
          data-fp-multiple="true"
          data-fp-folders="true"
          data-fp-button-class="add-note-btn small-10 columns large-4"
          data-fp-button-text="<i class=icon-upload></i> add notes"
          data-fp-drag-text="Drop Some Knowledge"
          data-fp-drag-class="dragdrop show-for-medium-up large-7 columns"
          data-fp-mimetypes="*/*"
          data-fp-store-path="{{ course.school.slug }}/ {{ course.slug }}/"
          data-fp-store-location="S3"
          data-fp-services="COMPUTER,DROPBOX,URL,GOOGLE_DRIVE,EVERNOTE,GMAIL,BOX,FACEBOOK,FLICKR,PICASA,IMAGE_SEARCH,WEBCAM,FTP"
          />
    </div>
  </div> <!--.row -->
  <div class="row" >
    <div class="small-10 small-offset-1 columns">
      <div id="forms_container">
      </div>
      <div id="success" class="hide">
        <p>Thank you for sharing:</p>
        <ul id="uploaded_files">
        </ul>
        <p>Your files are being processed and should be viewable within a few minutes.</p>
        <p>If you'd like to share again, please <a href="">click here</a>.</p>
      </div>
    </div>

    <div id="form-template" class="row" style="display:none">
      <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
        <div class="small-11 large-6 columns">
          <legend>Title of Note <small class="form">* Required</small></legend>
          <input type="text" class="intext" id="id_name" name="name"
                placeholder="">
        </div>
        <div class="small-12 large-5 columns">
          <legend>Tags (comma seperated)</legend>
          <input type="text" id="id_tags" name="tags" class="taggit-tags"
                placeholder="shakespeare, econ, physics">
        </div>
        <div class="show-for-small columns small-1 end">
          <i class="icon-remove-sign awesome-action remove"></i>
        </div>
        <div class="hidden-fields" style="display:none;">
          <input type="text" id="id_fpfile" name="fpfile" class="fpurl">
          <input type="text" id="id_mimetype" name="mimetype" class="mimetype">
          <input type="text" id="id_course" name="course" value="{{ course.id }}"
            class="course_id">
          {% csrf_token %}
          <input type="text" class="csrf" value='{{ csrf_token }}'>
        </div>
        <div class="show-for-medium-up columns large-1 end">
          <i class="icon-remove-sign awesome-action remove" id="icon-remove-sign"></i>
        </div>
      </form>
    </div>
  </div>
  <div id="save-btn-wrapper" class="hide row">
    <div class="small-10 small-offset-1 columns">
        <div class="row" style="display: inline;">
          <form class="inline-form" method="POST" action="{% url 'upload_post' %}">
            <div class="small-11 large-6 columns">
                <legend>Your Email Address (Optional)</legend>
                <input type="text" class="intext" id="id_email" name="email"
                      placeholder="">
              </div>
          </form>
        </div>
        <div class="row">
          <div class="small-8 large-6 columns">
            <div id="save-btn" class="action-btn">
              <i class=icon-save></i> Save
            </div>
          </div>
        </div>
    </div>
  </div>

  <script>
    var uploaded_files = new Array();
    $(function(){
      // these are obsolete without the drag-drop widget that we removed from the partial above
      // var $dropzone = $('#filepicker_dropzone');
      var $dropzone_result = $('#filepicker_dropzone_result');


      /*
       *  load the file form template and append it to the form container
       *  takes a fileupload event
       */
      makeFileForm = function(upFile) {
        var _form = document.getElementById('form-template').cloneNode(deep=true);
        // save the Filename to the form name field
        $(_form.children[0].children[0].children[1]).val(upFile.filename); // replace with upFile name
        _form.style.display = "inline";
        _form.id = null; // clear the unique id
        // save the FP url to the form
        $(_form.children[0].children[3].children[0]).val(upFile.url);
        console.log(upFile);
        // save the mimetype to the form
        $(_form.children[0].children[3].children[1]).val(upFile.mimetype);

        document.getElementById('forms_container').appendChild(_form);
        
        _gat._getTracker()._trackEvent('upload', 'filepicker file drop');

        $('.remove').on('click', function(e){
            e.stopPropagation();
            console.log($(this).parent().parent());
            $(this).parent().parent().remove();
        });

        $('#save-btn-wrapper').show();
      }

      $('#save-btn').on('click', function(e){
        e.stopPropagation();
        $('#forms_container .inline-form').each(function(i,el){
            console.log("inline form " + i + "el: " + el);
            var name, tags, fpurl, course;
            name = $(el).find('.intext').val();
            fp_file = $(el).find('.fpurl').val();
            tags = $(el).find('.taggit-tags').val();
            course = $(el).find('.course_id').val();
            csrf = $(el).find('.csrf').val();
            email = $('#id_email').val();
            mimetype = $(el).find('.mimetype').val();

            $.post('{% url 'upload_post' %}', {
              'name': name,
              'fp_file': fp_file,
              'tags': tags,
              'course': course,
              'csrfmiddlewaretoken': csrf,
              'mimetype': mimetype,
              'email': email
            }, function(data){
              if (data === 'success') {
                // For multiple uploads, we may end up clearing and re-
                //  writing this multiple times, but show the same list
                //  each time.
                $('#uploaded_files').empty();
                for (var i=0; i < uploaded_files.length; i++) {
                  $('#uploaded_files').append($('<li>', {text: uploaded_files[i]}));
                }
                $('#success').show();
                $('#save-btn-wrapper').hide();
                $('#forms_container .inline-form').remove();
                _gat._getTracker()._trackEvent('upload', 'upload form submitted');
                setTimeout(function(){
                  location.reload(true);
                }, 15000);
              }
            });
            // Add the name we've just uploaded to the list
            uploaded_files.push(name);
        });
      });
      
      var fileup = document.getElementById('filepicker-file-upload');
      fileup.onchange = function(event){
        $dropzone_result.text(event);
          for (var i=0; i < event.fpfiles.length; i++){
            makeFileForm(event.fpfiles[i]);
          }
      };

    });
  </script>


</section>