!function($, window, document, _undefined)
{
	"use strict";

	// ################################## AVATAR UPLOAD HANDLER ###########################################

	XF.AvatarUpload = XF.Element.newHandler({

		options: {},

		init: function()
		{
			var $form = this.$target,
				$file = $form.find('.js-uploadAvatar'),
				$avatar = $form.find('.js-avatar'),
				$deleteButton = $form.find('.js-deleteAvatar');

			if ($avatar.find('img').length)
			{
				$deleteButton.show();
			}
			else
			{
				$deleteButton.hide();
			}

			$file.on('change', XF.proxy(this, 'changeFile'));
			$form.on('ajax-submit:response', XF.proxy(this, 'ajaxResponse'));
		},

		changeFile: function(e)
		{
			if ($(e.target).val() != '')
			{
				this.$target.submit();
			}
		},

		ajaxResponse: function(e, data)
		{
			if (data.errors || data.exception)
			{
				return;
			}

			e.preventDefault();

			if (data.message)
			{
				XF.flashMessage(data.message, 3000);
			}

			var $form = this.$target,
				$delete = $form.find('.js-deleteAvatar'),
				$file = $form.find('.js-uploadAvatar'),
				$avatar = $form.find('.js-avatar'),
				$x = $form.find('.js-avatarX'),
				$y = $form.find('.js-avatarY'),
				useCustom = ($form.find('input[name="use_custom"]:checked').val() == 1);

			if (!useCustom)
			{
				$('.js-gravatarPreview').attr('src', data.gravatarTest ? data.gravatarPreview : data.gravatarUrl);
				if (data.gravatarTest)
				{
					return;
				}
			}
			else
			{
				$avatar.css({
					left: data.cropX * -1,
					top: data.cropX * -1
				});
				$x.val(data.cropX);
				$y.val(data.cropY);
				$avatar.data('x', data.cropX);
				$avatar.data('y', data.cropY);

				XF.Element.initializeElement($avatar);

				$file.val('');
			}

			XF.updateAvatars(data.userId, data.avatars, useCustom);

			if (data.defaultAvatars)
			{
				$delete.hide();
			}
			else
			{
				$delete.show();
			}

			$('.js-avatarCropper').trigger('avatar:updated', data);
		}
	});

	// ################################## AVATAR CROPPER HANDLER ###########################################

	XF.AvatarCropper = XF.Element.newHandler({

		options: {
			size: 96,
			x: 0,
			y: 0
		},

		$img: null,
		size: 96,

		x: 0,
		y: 0,

		imgW: null,
		imgH: null,

		cropSize: null,
		scale: null,

		init: function()
		{
			this.$target.one('avatar:updated', XF.proxy(this, 'avatarsUpdated'));

			this.$img = this.$target.find('img');

			if (!this.$img.length)
			{
				return;
			}

			this.initTest();
		},

		avatarsUpdated: function(e, data)
		{
			this.options.x = data.cropX;
			this.options.y = data.cropY;
			this.init();
		},

		initTest: function()
		{
			var	img = this.$img[0],
				tests = 0,
				self = this;

			var test = function()
			{
				tests++;
				if (tests > 50)
				{
					return;
				}

				if (img.naturalWidth > 0)
				{
					self.setup();
				}
				else if (img.naturalWidth === 0)
				{
					setTimeout(test, 100);
				}
				// if no naturalWidth support (IE <9), don't init
			};

			test();
		},

		setup: function()
		{
			this.imgW = this.$img[0].naturalWidth;
			this.imgH = this.$img[0].naturalHeight;

			this.cropSize = Math.min(this.imgW, this.imgH);
			this.scale = this.cropSize / this.options.size;

			this.$img.cropbox({
				width: this.size,
				height: this.size,
				zoom: 0,
				maxZoom: 0,
				controls: false,
				showControls: 'never',
				result: {
					cropX: this.options.x * this.scale,
					cropY: this.options.y * this.scale,
					cropW: this.cropSize,
					cropH: this.cropSize
				}
			}).on('cropbox', XF.proxy(this, 'onCrop'));
		},

		onCrop: function(e, results)
		{
			this.$target.parent().find('.js-avatarX').val(results.cropX / this.scale);
			this.$target.parent().find('.js-avatarY').val(results.cropY / this.scale);
		}
	});

	XF.Element.register('avatar-upload', 'XF.AvatarUpload');
	XF.Element.register('avatar-cropper', 'XF.AvatarCropper');
}
(jQuery, window, document);