$(document).ready(function() {
  // hide all input's upload-form-div's
  $('div[id$="-upload-form-div"]').hide();
  // hide all input's manual-group's
  $('div[id$="-manual-group"]').hide();
  initialisePlaceholder();
  // initialise tooltips using tipsy
  initialiseTipsys();
});

// place proper div in input placeholder
function initialisePlaceholder() {
  //var inputArray = new Array();
  $('div[id$="-placeholder"]').each(function(index) {
    // get input name part of id
    var input = this.id.replace(/^(.*)-placeholder$/, '$1')
    // set that input's placeholder to that input's manual-group
    $('#' + input + '-placeholder').html($('#' + input + '-manual-group').html());
  });
}

function toggleManualFileInput(input) {
  // set that input's placeholder to upload-form-div or manual-group according to checkbox
  if($('input[name="upload-checkbox-' + input + '"]').is(':checked')) {
    $('#' + input + '-placeholder').html($('#' + input + '-upload-form-div').html());
  } else {
    $('#' + input + '-placeholder').html($('#' + input + '-manual-group').html());
  }
  // need to re-initialise tooltips when we replace divs
  initialiseTipsys();

}

// files are appended as hidden inputs so that we know them after form submission
function uploadFile(input) { //, files) {
  // get the filename from this input's upload-form
  var filename = $('#' + input + '-upload-form :input').val();

  // append filename as hidden input to main workflow-form (so that main form
  // knows what the uploaded file's name was)!
  // TODO: what if it exists already!? - currently replaces it
  $('#workflow-form').append("<input name='" + input + "-file' type='hidden' value='" + filename +"' />");


  //var file = files[0];

  // create form to send to server-side upload handler
  //var formdata = new FormData();

  // include file to form
  //formdata.append("file", file);


  // get the form from the document (jQuery selector wasn't working inside function!)
  var formdata = new FormData(document.getElementById(input + '-upload-form'));

  //$.ajax({
  //  type: "POST",
  //  url: "http://" + document.location.host + "/t2web/upload",

  var xhr = new XMLHttpRequest();
  //xhr.file = file; // not necessary if you create scopes like this
  xhr.upload.addEventListener('progress', function(e) {
      var done = e.position || e.loaded, total = e.totalSize || e.total;
      console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
  }, false);
  if ( xhr.upload ) {
      console.log("AAAAAAAAAAAAAAAA");
      xhr.upload.onprogress = function(e) {
          var done = e.position || e.loaded, total = e.totalSize || e.total;
          console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
      };
  }
  xhr.onreadystatechange = function(e) {
      if ( 4 == this.readyState ) {
          console.log(['xhr upload complete', e]);
      }
  };

  xhr.open('post', "http://" + document.location.host + "/t2web/upload", false);
  xhr.send(formdata);
  


  // submit the form to upload the file
  // we would like to do that via XHR to include client-side progress bar!
  //$('#' + input + '-upload-form').submit();

}

// initilises certain html elements to employ tipsy for their tooltips
function initialiseTipsys() {
  $('[name$="-input"]').tipsy({gravity: 'e', fade: true, html: true, fallback: "No available example"});
  $('[for$="-label"]').tipsy({gravity: 'e', fade: true, html: true, fallback: "No available description"});
  //$('[name$="-input"]').tooltip();

}