$(document).ready(function(){
	function preview(img, selection) {
		var imgWidth = $("#areaSelectPhoto").width();
		var imgHeight = $("#areaSelectPhoto").height();

		if (!selection.width || !selection.height)
		return;
		var scaleX = 960 / selection.width;
		var scaleY = 1080 / selection.height;
		
		$('#areaSelectPreview img').css({
			width: Math.round(scaleX * imgWidth),
			height: Math.round(scaleY * imgHeight),
			marginLeft: -Math.round(scaleX * selection.x1),
			marginTop: -Math.round(scaleY * selection.y1)
		});
		
		$('#x1').val(selection.x1);
		$('#y1').val(selection.y1);
		$('#x2').val(selection.x2);
		$('#y2').val(selection.y2);
	}
	$(function () {
		'use strict';
		var url = 'pagesBGUpload.php';
		$('#fileupload').fileupload({
			autoUpload: true,
			url: "pagesBGUpload.php",
			maxChunkSize: 2000000,
			done: function (e, data) {
				$("#status").html("Converting...");
				$.each(data.result.files, function (index, file) {
					$.ajax({
						url:'pagesBGConvertCrop.php',
						data:"pU=" + file.name,
						dataType:"JSON",
						cache:false,
						success:function(photoFile){
							$("#uploadedPhoto").html('<img id="areaSelectPhoto" src="' + photoFile.url + '" width="' + photoFile.imgWidth + '" />');
							$("#areaSelectPreview").html('<img src="' + photoFile.url + '" width="' + photoFile.imgWidth + '" />');
							$("#imgURL").val(photoFile.name);
							$("#uploadForm").slideUp("fast");
							$("#resizeInstr").slideDown("fast");
							setTimeout(function(){
								$("#areaSelectPhoto").imgAreaSelect({
									aspectRatio: '8 : 9',
									handles: true,
									fadeSpeed: 200,
									minHeight: 1080,
									maxHeight: 4320,
									minWidth: 960,
									maxWidth: 3840,
									show: true,
									x1: 0,
									y1: 0,
									x2: 960,
									y2: 1080,
									onInit: preview,
									onSelectChange: preview
								});
							}, 3000); 
						}
					});
				});
			},
			progressall: function (e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
				$('#progress .bar').css(
					'width',
					progress + '%'
				);
			},
			stop: function (e) {
				$("#status").html("Finished. You can now crop and save the background");
			}
		});
	});
});