main.js

// save button
		jQuery('.save-crop').on('click', function() {
			console.log('saving the cropped image');
			jQuery('#cropperModal').foundation('reveal', 'close'); // TODO: this doesn't seem to work...
			currentFile.cropData = jQuery('#cropper').cropper('getData');
			var printOverlay = new Image();
			jQuery(printOverlay).on('load', function() {
				console.log('creating Print Overlay ');
				// create a 300dpi scaled canvas based off of print overlay width/height
				var scaledCanvas = jQuery('#cropper').cropper('getCroppedCanvas', {width: this.width, height: this.height});
				var scaledContext = scaledCanvas.getContext('2d');
				scaledContext.drawImage(this, 0, 0);
				currentFile.cropImage = scaledCanvas.toDataURL("image/png");
				// change initial preiew to show cropped thumbnail
				var thumbSize = 120;
				var thumbWidth = Math.min(overlay.width / overlay.height * thumbSize, thumbSize);
				var thumbHeight = Math.min(overlay.height / overlay.width * thumbSize, thumbSize);
				var thumbCanvas = jQuery('#cropper').cropper('getCroppedCanvas', {width: thumbWidth, height: thumbHeight});
				var thumbContext = thumbCanvas.getContext('2d');
				thumbContext.drawImage(overlay, 0, 0, thumbWidth, thumbHeight);
				currentFile.thumbnail.attr('src', thumbCanvas.toDataURL("image/png"));
				// change 'crop button color' and text
				var cropButton = jQuery(currentFile.previewElement).children('.button');
				cropButton.addClass('success');
				cropButton.removeClass('secondary');
				cropButton.text('Re-Crop');

				// show 'Finish' button
				var finishButton = jQuery('.button.finish');
				finishButton.removeClass('disabled');
				finishButton.addClass('success');
				finishButton.unbind('click');
				finishButton.on('click', function() {
					createFinal();
				});
				jQuery('#cropperModal').foundation('reveal', 'close');
			});
			printOverlay.src = wpVars.imageFolder + 'locket-templates/print/' + currentFile.template + '.png';
		});

		function createFinal() {
			console.log('creating the final masterpiece now');
			// create a new 4x6 canvas (1800x1200 pixels)
			jQuery('#finalCanvas').remove();
			jQuery('body').append('<canvas id="finalCanvas" width="1800" height="1200"></canvas>');

			var finalCanvas = document.getElementById('finalCanvas');
			var finalContext = finalCanvas.getContext('2d');
			// clear the canvas
			finalContext.clearRect(0, 0, finalCanvas.width, finalCanvas.height);
      prevW = 0;

			// Add 300x1200 branding to the right side of canvas
			var brandingImage = new Image();
			brandingImage.onload = function() {
				// create a 2px black border around the edge
				var borderWidth = 2;
				finalContext.fillStyle = "black";
				finalContext.fillRect(0,0,finalCanvas.width,finalCanvas.height);
				finalContext.fillStyle = "white";
				finalContext.fillRect( borderWidth, borderWidth, finalCanvas.width - (2 * borderWidth), finalCanvas.height - (2 * borderWidth) );
				// add branding image
				console.log('adding branding');
				finalContext.drawImage(this, finalCanvas.width - this.width - borderWidth, borderWidth, this.width - borderWidth, this.height - 2*borderWidth);

				// Add each of the images in a grid
				var imageList = [];
				// strip out images that have not been cropped or have errors
				jQuery.each(droplet.files, function(i, file) {
					if(file.cropImage != null) {
						imageList.push(file.cropImage);
					}
				});
				console.log('add final Images');
				console.log(imageList);

				// update progressbar
				jQuery('#progressModal').foundation('reveal', 'open');
				var progressBar = jQuery('#progressModal .meter');
				progressTotal = 4 + imageList.length; // Init + Images + Saving + never show 100%;
				var progress = 100 * (1 / progressTotal);
				progressBar.animate({
					width: progress + '%',
				}, 'slow');
				jQuery('#progressModal .steps').html('Step 1: Collecting Images');

				// start adding images to canvas
				addFinalImages(finalContext, imageList);
			};
			brandingImage.src = wpVars.imageFolder + 'locket-branding.jpg';
		}

		function addFinalImages(finalContext, imageList) {
			console.log('called addFinalImages');
      var finalCanvas = document.getElementById('finalCanvas');
			var margin = 20;
			var prevH = 0;
			var croppedImage = new Image();
			croppedImage.onload = function() {
				console.log('image has been loaded');

				// update progressbar
				jQuery('#progressModal').foundation('reveal', 'open');
				var progressBar = jQuery('#progressModal .meter');
				var currentProgress = progressTotal - imageList.length + 1
				var progress = 100 * (currentProgress / progressTotal);
				progressBar.animate({
					width: progress + '%',
				}, 'slow');
				jQuery('#progressModal .steps').html('Step 2: Cropping Images <small>(' + imageList.length + ' remaing)</small>');

				//keep adding to fill 4" column
				while ((prevH + this.height + margin ) < finalCanvas.height) {
					// add greyish background to non-image areas.
					finalContext.fillStyle = "#e6e6e6";
					finalContext.fillRect(prevW + margin + 1, prevH + margin + 1, this.width - 2, this.height - 2);
					// add the image now.
					finalContext.drawImage(this, prevW + margin, prevH + margin);
					prevH = this.height + prevH + margin;
				}
				prevH = 0;
				prevW = this.width + prevW + margin;

				// remove first image from array
				imageList.splice(0,1);
				// add the next image if there is one
				if(imageList.length > 0) {
					addFinalImages(finalContext, imageList);
				} else {
					var finalCanvasData = finalCanvas.toDataURL("image/png");
					saveFinal(finalCanvasData);
				}
			};
			croppedImage.src = imageList[0];
		}

		function saveFinal(finalCanvasData){
			console.log('saving the masterpiece');

			// update progressbar
			jQuery('#progressModal').foundation('reveal', 'open');
			var progressBar = jQuery('#progressModal .meter');
			var currentProgress = progressTotal - 1;
			var progress = 100 * (currentProgress / progressTotal);
			progressBar.animate({
				width: progress + '%',
			}, 'slow');
			jQuery('#progressModal .steps').html('Step 3: Saving final image');

			jQuery('#finalImage').remove();
			jQuery('body').append('<img src="" id="finalImage" width="1800" height="1200">');
			jQuery('#finalImage').attr('src', finalCanvasData);

			data = { 'action': 'cropper_upload',
				'nonce' : wpVars.nonce,
				'sessionID': wpVars.sessionID,
				'imageData': finalCanvasData,
				'imageName': 'final.jpg' //TODO: Do we need this, or can we change it to include the date+time
			};
			jQuery.post(wpVars.ajaxurl, data, function(response) {
				if(response.success) {
					progressBar.animate({
						width: '100%',
					}, 'slow');

					jQuery('#emailImage').val(response.path);
					jQuery('#finalImage').attr('src', response.url);
					jQuery('#downloadImage').attr('href',response.url);
					var downloadImage = new Image();
					jQuery(downloadImage).on('load', function() {
						jQuery('#progressModal').foundation('reveal', 'close');
						jQuery('#finishModal').foundation('reveal', 'open');
					});
					downloadImage.src = response.url;
				}
			});
		}