$(document).ready(function() {
	
	// how many images on one page
	var imagesPerPage = 3;
	
	// hold the selected images
	var images = new Array();
	
	// base url to pdf generator
	var baseUrl = '/pdf/generate/' + modelId + '/download.pdf';
	
	// the preview container
	var pc = $('#pdf-preview-container');

	// print the selection
	$('#button-print').click(function() {
		if(images.length > 0)  {
			var imageString = '?mode=selected';
			for(var i = 0; i < images.length; i++) {
				if(images[i].active == true) {
					imageString += '&images[]=' + images[i].id + '';
				}
			}
			var url = baseUrl + imageString;
			var openedWindow = window.open(url, "pdfprint");
		} else {
			alert('Please select at least one image!');
		}
	});

	// clear the selection
	var clearSelection = function() {
		// remove all previews
		// empty image array
		images = new Array();
		// redraw container
		redrawPreviewImages();
	}
	
	// add image to list
	var addImage = function(id) {
		var image = new Object();
		image.id = id;
		image.active = true;
		images.push(image);
		// redraw container
		redrawPreviewImages();
	}
	
	// remove image from list
	var removeImage = function(position) {
		for(var i = 0; i < images.length; i++) {
			if(images[i].active == true && i == position) {
				images[i].active = false; // set as inactive
			}
		}
		// redraw container
		redrawPreviewImages();
	}
	
	// redraw the preview 
	var redrawPreviewImages = function() {
		var a = 0;
		var page = 1;
		// empty container
		$(pc).empty();
		// print first page
		$(pc).append('<div class="page-item" id="pp-'+page+'"></div>');
		for(var i = 0; i < images.length; i++) {
			if(images[i].active == true) {
				if(a == imagesPerPage) {
					// add new page
					page++;
					$(pc).append('<div class="page-item" id="pp-'+page+'"></div>');
					a = 0;
				}
				a++;
				var img = $('div.selectable-item[rel=' + images[i].id + ']:first img').attr('src');
				$('#pp-' + page).append('<div class="preview-image-item" rel="' + i + '"><img src="' + img + '" alt="Bild ' + a + '" /></div>');
			}
		}
		// scroll to bottom
		var o = page * 145;
		$(pc).scrollTo( {top: o + 'px'}, 0);
		// add remove on click event handler
		$('.preview-image-item').click(function() {
			var position = $(this).attr('rel');
			removeImage(position);
		});
	}
	
	// handle selection of an image
	$('.selectable-item').click(function() {
		// add image
		var id = $(this).attr('rel');
		addImage(id);
	});

	// handle clearing image list
	$('#button-clear').click(function() {
		// clear
		clearSelection();
	});

	// handle selection of all images
	$('#button-select-all').click(function() {
		// clear
		clearSelection();
		// search for selectable images
		$('.selectable-item').each(function() {
			var id = $(this).attr('rel');
			addImage(id);
		});
	});
	
	// initial drawing
	redrawPreviewImages();

});