jQuery(function() {
  var $ = jQuery,
    ratio = window.devicePixelRatio || 1,
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
    uploader;

  // 初始化Web Uploader
  uploader = WebUploader.create({

    // 自动上传。
    auto: true,

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '.filePicker',

    // 只允许选择文件，可选。
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
    }
  });

  // 当有文件添加进来的时候
  uploader.on('fileQueued', function(file) {
    console.log(file);
    var $id = $('select.uploader').val(), $list = $('tr[data-id='+$id+'] .filelist');
    var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' +
        '<div class="info">' + file.name + '</div>' + '</div>'),
      $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>').appendTo( $li ),
      $img = $li.find('img');

      $li.on( 'mouseenter', function() {
          $btns.stop().animate({height: 30});
      });

      $li.on( 'mouseleave', function() {
          $btns.stop().animate({height: 0});
      });

      $btns.on('click', 'span', function() {
        var index = $(this).index();

        switch (index) {
          case 0:
            uploader.removeFile(file);
            return;
        }
      });


    $list.append($li);

    // 创建缩略图
    uploader.makeThumb(file, function(error, src) {
      if (error) {
        $img.replaceWith('<span>不能预览</span>');
        return;
      }

      $img.attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
  });

  uploader.on('fileDequeued', function( file ) {
    removeFile( file );
  });


  // 文件上传过程中创建进度条实时显示。
  uploader.on('uploadProgress', function(file, percentage) {
    var $li = $('#' + file.id),
      $percent = $li.find('.progress span');

    // 避免重复创建
    if (!$percent.length) {
      $percent = $('<p class="progress"><span></span></p>')
        .appendTo($li)
        .find('span');
    }

    $percent.css('width', percentage * 100 + '%');
  });

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on('uploadSuccess', function(file) {
    $('#' + file.id).addClass('upload-state-done');
  });

  // 文件上传失败，现实上传出错。
  uploader.on('uploadError', function(file) {
    var $li = $('#' + file.id),
      $error = $li.find('div.error');

    // 避免重复创建
    if (!$error.length) {
      $error = $('<div class="error"></div>').appendTo($li);
    }

    $error.text('上传失败');
  });

  // 完成上传完了，成功或者失败，先删除进度条。
  uploader.on('uploadComplete', function(file) {
    $('#' + file.id).find('.progress').remove();
  });

  $('.file-item').on('mouseenter', function () {
    $(this).find('.file-panel').stop().animate({height: 30});
  });

  $('.file-item').on('mouseleave', function () {
    $(this).find('.file-panel').stop().animate({height: 0});
  })

  $('.file-panel').on('click', 'span', function () {
    var id = $(this).parents('.file-item.thumbnail').attr('id'), file = {id, id};
    removeFile(file);
  });

  function removeFile( file ) {
    var $li = $('#'+file.id);
    $li.off().find('.file-panel').off().end().remove();
    alert('删除成功');
  }
});