CollageFront.js

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('body').on('click', '#addScnt', function() {
  	$('<p><label for="p_scnts"><input type="text" id="p_scnt" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
		i++;
		return false;
	});
		        
	$('body').on('click', '#remScnt', function() { 
		if( i > 2 ) {
			$(this).parents('p').remove();
			i--;
		}
	return false;
	});
});

$(window).load(function() {
	$('.collage').removeWhitespace().collagePlus();
	$('body').on('click', '#reload', function() {
		$(function() {
			$('.collage').empty();
			var i = $('#p_scents p').size();
			var src = "";
			for(p=1; p<=i; p++) {
				src = $('input[name="p_scnt_'+p+'"]').val()
				$('.collage').append("<img src='"+src+"'>");
			}
	
		});
		$('.collage').collagePlus(
			{
				// change this to adjust the height of the rows
				'targetHeight' : 300,
				// change this to try different effects
				// valid effets = effect-1 to effect-6
				//'effect' : "effect-1"
			}
		);
	    $(function() {
			    $(document).scrollTop( $(".collage").offset().top );  
		});
		setTimeout(function(){
			html2canvas($('.collage'), {
				onrendered: function(canvas) {
					var img = canvas.toDataURL("image/png");
					$('.images').append("<a href='"+img+"'>Screenshot</a><br>");
				}
			});
		}, 2000);
	});
});