{% 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>
      <script>
        $('head').append("<script type='text/javascript'>\
          var fb_param = {};\
          fb_param.pixel_id = '6009860523841';\
          fb_param.value = '0.00';\
          fb_param.currency = 'USD';\
          (function(){\
            var fpw = document.createElement('script');\
            fpw.async = true;\
            fpw.src = '//connect.facebook.net/en_US/fp.js';\
            var ref = document.getElementsByTagName('script')[0];\
            ref.parentNode.insertBefore(fpw, ref);\
          })();" + "</script>" + \
         "<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6009860523841&amp;value=0&amp;currency=USD" /></noscript>");
      </script>
      <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';

        $('#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();
              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();
                  _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>