// 图片上传
jQuery(document).ready(function() {
	$('.js-upload-image,.js-upload-images,.js-upload-imagess').each(function () {
		var $input_file       = $(this).find('input');
		var $input_file_name  = $input_file.attr('name');
		// 是否多图片上传
		var $multiple         = $input_file.data('multiple');
		// 允许上传的后缀
		var $ext              = $input_file.data('ext');
		// 图片限制大小
		var $size             = 5*1024*1024;
		// 图片列表
		var $file_list        = $('#file_list_' + $input_file_name);
		// 优化retina, 在retina下这个值是2
		var ratio             = window.devicePixelRatio || 1;
		// 缩略图大小
		var thumbnailWidth    = 100 * ratio;
		var thumbnailHeight   = 100 * ratio;
		// 实例化上传
		var uploader = WebUploader.create({
			// 选完图片后，是否自动上传。
			auto: true,
			// 去重
			duplicate: true,
			// 不压缩图片
			resize: false,
			compress: false,
			// swf图片路径
			swf: uploadUrl.WebUploader_swf,
			// 图片接收服务端。
			server: uploadUrl.image_upload_url,
			// 选择图片的按钮。可选。
			// 内部根据当前运行是创建，可能是input元素，也可能是flash.
			pick: {
				id: '#picker_' + $input_file_name,
				multiple: $multiple,
				label:"上传图片"
			},
			// 图片限制大小
			fileSingleSizeLimit: $size,
			// 只允许选择图片文件。
			accept: {
				title: 'Images',
				extensions: $ext,
				mimeTypes: 'image/jpg,image/jpeg,image/bmp,image/png,image/gif'
			}
		});

		// 当有文件添加进来的时候
		uploader.on( 'fileQueued', function( file ) {
			var $li = $(
				'<div id="' + file.id + '" class="file-item js-gallery thumbnail">' +
				//'<a class="img-link" href="">'+
				'<img>' +
				//'</a>'+
				'<div class="info">' + file.name + '</div>' +
				'<i class="remove-picture"></i>' +
				'</div>'
			),
			$img = $li.find('img');

			if ($multiple) {
				$file_list.append( $li );
			} else {
				$file_list.html( $li );
				$input_file.val('');
			}

			// 创建缩略图
			// 如果为非图片文件，可以不用调用此方法。
			// thumbnailWidth x thumbnailHeight 为 100 x 100
			uploader.makeThumb( file, function( error, src ) {
				if ( error ) {
					$img.replaceWith('<span>不能预览</span>');
					return;
				}
				$img.attr( 'src', src );
			}, thumbnailWidth, thumbnailHeight );
			// 创建进度条
			//$('<div class="progress progress-mini remove-margin active"><div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo( $li );
		});

		// 文件上传过程中创建进度条实时显示。
		uploader.on( 'uploadProgress', function( file, percentage ) {
			//$.prompt('正在上传'+percentage * 100 + '%','info');
			//var $percent = $( '#'+file.id ).find('.progress-bar');
			//$percent.css( 'width', percentage * 100 + '%' );
		});

		// 文件上传成功
		uploader.on( 'uploadSuccess', function( file, response ) {
			var $li = $( '#'+file.id );

			if (response.result == 1) {
				if ($multiple) {
					if ($input_file.val()) {
						$input_file.val($input_file.val() + ',' + response.id);
					} else {
						$input_file.val(response.id);
					}
					$li.find('.remove-picture').attr('data-id', response.id);
				} else {
					$input_file.val(response.id);
				}
			}
			//$.prompt(response.msg);
			//$('<div class="'+response.class+'"></div>').text(response.info).appendTo( $li );
			//$li.find('a.img-link').attr('href', response.path);
		});

		// 文件上传失败，显示上传出错。
		uploader.on( 'uploadError', function( file ) {
			//var $li = $( '#'+file.id );
			//$('<div class="text-danger">上传失败</div>').appendTo( $li );
			$.prompt('上传失败');
		});

		// 文件验证不通过
		uploader.on('error', function (type) {
			switch (type) {
				case 'Q_TYPE_DENIED':
					$.prompt('图片类型不正确，只允许上传后缀名为：'+$ext+'，请重新上传！');
					break;
				case 'F_EXCEED_SIZE':
					$.prompt('图片不得超过'+ ($size/1024) +'kb，请重新上传！');
					break;
			}
		});

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

		// 删除图片
		$file_list.delegate('.remove-picture', 'click', function(){
			if ($multiple) {
				var id = $(this).data('id'),
					ids = $input_file.val().split(',');

				if (id) {
					for (var i = 0; i < ids.length; i++) {
						if (ids[i] == id) {
							ids.splice(i, 1);
							break;
						}
					}
					$input_file.val(ids.join(','));
				}
			} else {
				$input_file.val('');
			}
			$(this).closest('.file-item').remove();
		});
	});
	// 图片裁剪
    $('.js-jcrop-interface').each(function () {
        var jcrop_api         = '';
        var $self             = $(this);
        var $jcrop            = $self.find('.js-jcrop');
        var $options          = $jcrop.data('options') || {};
        var $jcrop_cut_btn    = $self.find('.js-jcrop-cut-btn');
        var $jcrop_upload_btn = $self.find('.js-jcrop-upload-btn');
        var $jcrop_file       = $self.find('.js-jcrop-file');
        var $jcrop_cut_info   = $self.find('.js-jcrop-cut-info');
        var $jcrop_preview    = $self.find('.jcrop-preview');
        var $jcrop_input      = $self.find('.js-jcrop-input');
        //var $remove_picture   = $self.find('.remove-picture');
        var $thumbnail        = $self.find('.thumbnail');
        //var $img_link         = $self.find('.img-link');
        var $modal            = $self.find('.modal-popin');
        var $pic_height       = '';

        // 设置预览图监听
        $options.onChange    = showPreview;
        $options.onSelect    = showPreview;
        $options.boxWidth    = 750;
        $options.boxHeight   = 750;
        $options.saveWidth   = $options.saveWidth || null;
        $options.saveHeight  = $options.saveHeight || null;
        $options.aspectRatio = $options.aspectRatio || ($options.saveWidth / $options.saveHeight);

        // 点击上传按钮，选择图片
        $jcrop_upload_btn.click(function () {
            $jcrop_file.trigger('click');
        });

        // 加载图片（用于判断图片是否加载完毕）
        function loadImage(url, callback) {
            var img = new Image(); //创建一个Image对象，实现图片的预下载
            img.src = url;

            if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
                callback.call(img);
                return; // 直接返回，不用再处理onload事件
            }
            img.onload = function () { //图片下载完毕时异步调用callback函数。
                callback.call(img);//将回调函数的this替换为Image对象
            };
        }

        // 实时显示预览图
        function showPreview(coords)
        {
            var ratio = coords.w / coords.h; // 选区比例
            var rx,ry;
            var preview_width  = '';
            var preview_height = '';

            if ((100 / ratio) > $pic_height) {
                preview_width  = $pic_height * ratio;
                preview_height = $pic_height;
            } else {
                preview_width  = 100;
                preview_height = 100 / ratio;
            }

            rx = preview_width / coords.w;
            ry = (preview_width / ratio) / coords.h;

            if (jcrop_api) {
                $jcrop_preview.css({
                    width: Math.round(rx * jcrop_api.ui.stage.width) + 'px',
                    height: Math.round(ry * jcrop_api.ui.stage.height) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                }).parent().css({
                    width: preview_width + 'px',
                    height: preview_height + 'px'
                });
            }

            var jcrop_info = [coords.w, coords.h, coords.x, coords.y, $options.saveWidth, $options.saveHeight];
            $jcrop_cut_info.val(jcrop_info.join(','));
        }

        // 选择图片后
        $jcrop_file.change(function () {
            var files = this.files;
            var file;
            if (files && files.length) {
                file = files[0];
                if (/^image\/\w+$/.test(file.type)) {
                    // 创建FormData对象
                    var data = new FormData();
                    // 为FormData对象添加数据
                    data.append('file', file);
                    // 上传图片
                    $.ajax({
                        url: uploadUrl.jcrop_upload_url,
                        type: 'POST',
                        cache: false,
                        contentType: false,    //不可缺
                        processData: false,    //不可缺
                        data: data,
                        success: function (res) {
                            if (res.code == 1) {
                                $jcrop.attr('src', res.src).data('id', res.id).show();
                                $jcrop_preview.attr('src', res.src).parent().show();
                                loadImage(res.src, function () {
                                    if (jcrop_api != '') {
                                        jcrop_api.destroy();
                                    }
                                    $jcrop.Jcrop($options, function () {
                                        jcrop_api   = this;
                                        $pic_height = Math.round(jcrop_api.getContainerSize()[1]);
                                        $modal.modal('show');
                                    });
                                });
                            } else {
                                $.prompt('上传失败，请重新上传');
                            }
                        }
                    }).fail(function() {
                        $.prompt('服务器错误~');
                    });
                    $jcrop_file.val('');
                } else {
                    $.prompt('请选择一张图片');
                }
            }
        });

        // 关闭裁剪框
        $modal.on('hidden.bs.modal', function (e) {
            $jcrop_cut_info.val('');
        });

        /*// 删除图片
        $remove_picture.click(function () {
            $(this).parent().hide();
            $jcrop_input.val('');
        });*/

        // 裁剪图片
        $jcrop_cut_btn.click(function () {
            var $cut_value = $jcrop_cut_info.val();
            if ($jcrop.attr('src') == '') {
                $.prompt('请上传图片');
                return false;
            }
            if ($cut_value != '') {
                var $data = {
                    path: $jcrop_preview.attr('src'),
                    cut: $cut_value
                };
                $.ajax({
                    url: uploadUrl.jcrop_upload_url,
                    type: 'POST',
                    dataType: 'json',
                    data: $data
                })
                .done(function(res) {
                    if (res.code == '1') {
                        $thumbnail.show().find('img').attr('src', res.thumb || res.src);
                        $jcrop_input.val(res.id);
                        //$img_link.attr('href', res.src);
                        $jcrop_cut_info.val('');
                        $modal.modal('hide');
                    } else {
                        $.prompt(res.msg);
                    }
                })
                .fail(function() {
                    $.prompt('请求失败');
                });
            } else {
                $.prompt('请选择要裁剪的大小');
            }
        });
    });
});