{% 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-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-extensions=".pdf,.doc,.docx,.txt,.rtf,.odt,.png,.jpg,.jpeg,.ppt,.pptx"
          data-fp-store-path="{{ course.school.slug }}/ {{ course.slug }}/"
          data-fp-services="COMPUTER,DROPBOX,URL,GOOGLE_DRIVE,GMAIL,EVERNOTE,BOX,FACEBOOK,FLICKR,GITHUB,SKYDRIVE,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" style="display: none;">
          <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 class="small-8 small-offset-3 columns large-2">
    <div id="save-btn" style="display:none">
      <i class=icon-save></i> Save
    </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();
        });
        
        document.getElementById('save-btn').style.display = 'inline';

      };
      
      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]);
          }
      };
      
      // below is obsolete without the drag-drop widget that we removed from the partial above
      // filepicker.setKey('A5pg98pDjQk6k3lBZ8VDVz')
      // filepicker.makeDropPane($dropzone[0], {
      //     multiple: true,
      //     extensions: ".pdf, .doc, .docx, .txt, .rtf, .odt, .png, .jpg, .jpeg, .ppt, .pptx, .md, .rst",
      //     path: "{{ course.school.slug }}/ {{ course.slug }}/",
      //     dragEnter: function() {
      //         $dropzone.html("Drop to upload").css({
      //             'backgroundColor': "#E0E0E0",
      //             'border': "1px solid #000"
      //         });
      //     },
      //     dragLeave: function() {
      //         alert("drag leave");
      //         $dropzone.html("Drop files here").css({
      //             'backgroundColor': "#F6F6F6",
      //             'border': "1px dashed #666"
      //         });
      //     },
      //     onSuccess: function(InkBlobs) {
      //         alert("on success");
      //         $dropzone.text("Done, see result below");
      //         $dropzone_result.text(JSON.stringify(InkBlobs));
      //         console.log("this one also worked");
      //         console.log(InkBlobs);
      //         console.log('--------------------------------------------------');
      //         console.log("starting form copy");
      //         makeFileForm();
      //     },
      //     onError: function(type, message) {
      //         alert("on error");
      //         $dropzone_result.text('('+type+') '+ message);
      //     },
      //     onProgress: function(percentage) {
      //         alert("on progress");
      //         $dropzone.text("Uploading ("+percentage+"%)");
      //     }
      // });

      $('#save-btn').on('click', function(e){
        e.stopPropagation();
        _trackEvent('upload', 'upload form submitted');
        $('#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();
            mimetype = $(el).find('.mimetype').val();

            $.post('{% url 'upload_post' %}', {
              'name': name,
              'fp_file': fp_file,
              'tags': tags,
              'course': course,
              'csrfmiddlewaretoken': csrf,
              'mimetype': mimetype
            }, 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();
                document.getElementById('save-btn').style.display = 'none';
                $('#forms_container .inline-form').remove();
                setTimeout(function(){
                  location.reload(true);
                }, 15000);
              }
            });
            // Add the name we've just uploaded to the list
            uploaded_files.push(name);
        });
      });

    });
  // FIXME: Style and arrange everything
  </script>


</section>