/* jshint browser:true, jquery:true */
$(function() {
  var uploadInput = $('#upload-input'),
      uploadBtn = $('#upload-btn'),
      uploadFiles = $('#upload-filelist');

  var btnContent = '';

  if (!$.hasFileAPI()) {
    $('#no-file-api').show();
    uploadBtn.hide();
  }

  uploadBtn.cabinet(uploadInput);

  uploadBtn.on('dragenter', function(e) {
    if (this === e.target) {
      $(this).addClass('drop');
      btnContent = $(this).html();
      $(this).html('Drop it here~');
    }
  });

  uploadBtn.on('drop', function(e) {
    $(this).trigger('dragleave');
  });

  uploadBtn.on('dragleave', function(e) {
    node = e.target;
    do {
      if (node === this) {
        $(this).removeClass('drop');
        $(this).html(btnContent);
        break;
      }
    } while (node = node.parentNode);
  });

  var MAX_SIZE = (function(node) {
    var max = node.attr('data-max-size') || '120MiB';
    var num = parseInt(/([0-9,]+).*/.exec(max)[1].replace(',', ''));
    var unit = /(?:([KMGTPEZY])(i)?B|([BKMGTPEZY]))/.exec(max) || ['B', '', ''];

    var oneUnit = Math.pow(
      (unit[2] === 'i' ? 1024 : 1000),
      'BKMGTPEZY'.indexOf(unit[1])
    );

    return num * oneUnit;
  })(uploadInput);

  var createRow = function(filename, size, extra) {
    var rowItem = $('<li class=file>'),
        rowName = $('<span class=file-name>'),
        rowProg = $('<div class="file-progress progress-outer">'),
        rowSize = $('<span class=file-size>'),
        rowUrl = $('<span class=file-url>');

    rowItem.addClass(extra || '');

    $('<div class=progress-inner>').appendTo(rowProg);

    rowItem.attr('data-filename', escape(filename));
    rowName.text(filename);
    rowSize.text(size);

    rowItem.append(rowName, rowProg, rowSize, rowUrl);

    return rowItem;
  };

  uploadBtn.on('change', function(e) {
    uploadFiles.empty().removeClass('error completed');

    var files = uploadInput[0].filelist;

    files.forEach(function(file) {
      createRow(file.name, file.humanSize).appendTo(uploadFiles);
    });

    var totalRow = createRow('', files.humanSize, 'total');
    totalRow.appendTo(uploadFiles);

    if (files.size > MAX_SIZE) {
      uploadFiles.addClass('error');

      $('.file-name', totalRow).html('onii-chan y-your upload is t-too ' +
        'big&hellip;');
      return;
    }

    var up = files.upload('upload.php');

    var eachRow = function(files, fn) {
      var hits = {};
      files.forEach(function(file) {
        ++hits[file.name] || (hits[file.name] = 0);
        var row = $($('li[data-filename="' + escape(file.name) + '"]') +
          [hits[file.name] || 0]);
        fn.call(row, row, file, files);
      });
    };

    var totalName = $('.file-name', totalRow);

    up.on('uploadprogress', function(e, files) {
      eachRow(files, function(row, file, files) {
        $('.progress-inner', row).width((file.percentUploaded * 100) + '%');
      });
      $('.progress-inner', totalRow).width((files.percentUploaded * 100) + '%');
    });

    up.on('uploadcomplete', function(e) {
      $('.progress-inner').width('100%');
      totalName.text('Grabbing URLs...');
    });

    up.on('load', function(e, res) {
      switch (e.target.status) {
        case 200:
          var res = JSON.parse(res);
          if (!res.success) {
            uploadFiles.addClass('error');
            $('.file-name', totalRow).text('Something went wrong; try again ' +
              'later.');
            break;
          }
          eachRow(res.files, function(row, file, files) {
            var link = $('<a>');

            link.attr('href', file.url)
                .attr('target', '_BLANK')
                .text(file.url.replace('http://', '').replace('https://', ''));

            $('.file-url', row).append(link);
          });
          uploadFiles.addClass('completed');
          totalName.text('Done!');
          break;
        case 413:
          uploadFiles.addClass('error completed');
          // Terrible work-around, but necessary since otherwise the '&hellip;'
          // entity is left decoded.
          totalName.html($('<div/>').html('onii-chan, y-your upload is t-too ' +
            'big&hellip;').text());
          break;
        default:
          uploadFiles.addClass('error completed');
          totalName.text('Something went wrong; try again later.');
      }
    });
    up.upload();
  });
});