//= require 'jquery.ui.sortable'
//= require 'jquery.iframe-transport'
//= require 'jquery.file-upload'

/*
  upload file tag 结构

  div class="ui-upload uploaded" data-type="#{type}" data-value="#{src}"
    div class="ui-type-#{type} ui-upload-type"
      div.ui-upload-tag.ui-wrap
        span.glyphicon.glyphicon-#{type}

      div.ui-upload-progress.ui-wrap

      div.ui-upload-preview.ui-wrap

      div.ui-upload-file.ui-wrap
        input type="hidden" value="#{value}" name="#{name}"
        input.file data-form-data="#{form_data}" data-name="#{name}" title="" data-url="#{url}" name="file" id="qiniu-#{uuid}" type="file"

      div.ui-upload-close
        span.glyphicon.glyphicon-remove
 */
(function() {
  'use strict';

  // 设置文件的预览
  function set_tag_preview($root, data) {
    var $preview,
      val = data.value,
      type = data.type;

    if (!val || !type) return ;

    $preview = $root.find('.ui-upload-preview');

    switch (type) {
      case 'image':
      case 'avatar':
        $preview.html('<img src="' + val + '"/>');
        break;
      case 'audio':
        $preview.html('<audio controls src="' + val + '"></audio>');
        break;
      case 'video':
        $preview.html('<video controls src="' + val + '"></video>');
        break;
      case 'file':
        $preview.html('<a href="' + val + '">' + (data.filename || val) + '</a>');
        break;
    }
  }

  function set_tag_value($root, key) {
    $root.removeClass('uploading').addClass('uploaded');
    $root.find('input[type=hidden]').val(key);
  }

  function del_tag_value($root) {
    $root
      .removeClass('uploading').removeClass('uploaded')
      .find('input[type=hidden]').val('');
  }


  // 头像选择组件
  $(function() {
    var $upload_root,
        $container = $('.avatars_choose_container');

    if (!$container.length) {
      return false;
    }

    $(document).on('click', '.avatar-file .btn', function() {
      var $btn = $(this),
          center = {},
          offset, size;

      $upload_root = $btn.closest('.avatar-file').find('.ui-upload');

      offset = $btn.offset();
      size = {width: $btn.outerWidth(), height: $btn.outerHeight()};

      center.x = size.width / 2 + offset.left;
      center.y = size.height + offset.top;

      $container.removeClass('hide');
      $container.css({
        top: center.y + 15,
        left: center.x - $container.outerWidth() / 2
      });

    });

    $container.on('click', 'img', function() {
      var $img = $(this),
          key;
      key = $img.data('key');
      if (key && $upload_root) {
        set_tag_value($upload_root, key);
        set_tag_preview($upload_root, {value: $img.attr('src'), type: 'avatar'});
        $container.addClass('hide');
      }
    });
    $container.on('click', '.close', function() {
      $upload_root = null;
      $container.addClass('hide');
      return false;
    });
    $container.on('click', '.upload', function() {
      if ($upload_root) {
        $upload_root.find('.file').trigger('click');
        return false;
      }
    });
  });


  function init_async_file_upload($elem) {
    var $root = $elem.closest('.ui-upload'),
      params = $root.data(),
      $progress_bar = $root.find('.ui-upload-progress');

    set_tag_preview($root, params);

    $elem.fileupload({
      dataType: 'json',
      type: 'POST',
      dropZone: $root,
      pasteZone: $root,
      add: function (e, data) {
        var file = data.files[0];

        if (file && file.name) {
          params.filename = file.name;
        }

        if (file && params.type !== 'file' ) {
          // 支持的文件类型，放在 types 字段中，暂时还没实现，有点乱了
          var allow_types = params.types && params.types.split(',') || params.type.split(','),
            type = file.type,
            allowed = false;

          // 有些有 file， 但 file.type = "" ， 可能是客户端识别不了文件的 type
          if (type !== '') {
            if (params.type === 'image' || params.type === 'audio' || params.type === 'video') {
              for (var allow_type, i = 0; i < allow_types.length; ++i) {
                allow_type = $.trim(allow_types[i]);
                if (allow_type.indexOf('/') > 0 && allow_type === type ||
                    allow_type.indexOf('/') < 0 && type.split('/').shift() === allow_type) {

                  allowed = true;
                }
              }
            } else {
              allowed = true;
            }
          }

          if (!allowed) {
            window.alerts.warning('upload_file_type_not_allowed');
            return false;
          }
        }

        $progress_bar.css('width', '1%').text('1%').parent();
        $root.addClass('uploading');

        data.submit()
          .fail(function () {
            $root.removeClass('uploading');
            window.alerts.warning('Failure. Bad connection. please try again.');
          });
      },
      progress: function(e, data) {
        var percent = parseInt(data.loaded / data.total * 100, 10) + '%';
        if (percent === '100%') percent = '99%';
        $progress_bar.css('width', percent).text(percent);
      },
      done: function (e, data) {
        data = data.result;
        var $file_input = $root.find('input[type=file]');
        var download_host = $file_input.attr('data-download-host');
        var is_url_val = $file_input.attr('data-url-value');
        var url = download_host + '/' + data.key;

        if (is_url_val) {
          params.value = url;
        } else {
          params.value = data.key;
        }

        $root.trigger('uploaded', [data]);
        set_tag_value($root, params.value);

        set_tag_preview($root, params);
      }
    });
  }

  $.fn.qiniu_fileupload = function () {
    this.each(function () {
      init_async_file_upload($(this));
    });
  };

  /*
   七牛上传组件，它的 tag 是在后端生成的
   所以在页面加载的时候我就把一部分 tag 放在一个隐藏的 div 内
   然后在需要加载这些 tag 的地方放一个标签
  */
  var $container = $('.qiniu-file-tags');
  $container.on('fill', function(e, placeholder_elem) {
    var $children = $container.children(),
        $placeholder_elem = $(placeholder_elem),
        $append, data;
    if (!$children.length) {
      window.alerts.danger('qi_niu_file_tag_not_enough');
      return ;
    }

    data = $placeholder_elem.data();
    $append = $children.last();

    $placeholder_elem.append($append);

    if (data.value && data.src) {
      set_tag_value($append, data.value);
      set_tag_preview($append, {value: data.src, type: $append.attr('data-type')});

    } else {
      del_tag_value($append);
    }

    // 删除所有事件
    // 默认通过 jQuery 移除某个 DOM 时，jQuery 会删除这个 DOM 里所有元素的所有事件
    $append.off().find('input.file').qiniu_fileupload(); // 添加上传文件事件
  });


  $container.on('recycle', function(e, upload_elem) {
    $container.append(upload_elem);
  });


  // 初始化
  $(function() {
    // 文件删除事件监控
    $(document).delegate('.ui-upload-close', 'click', function() {
      var $root = $(this).closest('.ui-upload');
      del_tag_value($root);
    });

    // 初始化上传文件组件
    $('.ui-upload .file').off().qiniu_fileupload();

    // 部署上传文件表单
    $('.qiniu-file-place').each(function() {
      var $placeholder = $(this);
      if (!$placeholder.find('.ui-upload').length) {
        $container.trigger('fill', [this]);
      }
    });
  });

})();