//======================================================================
// Printer configurations
//======================================================================

var config = {
		name: "DX100",
		sizes: [
			{ format: "15x10", cost: 0.20 },
			{ format: "15x20", cost: 0.40 },
			{ format: "20x30", cost: 0.80 }
		]
};

//======================================================================
// DON'T CHANGE PARAMETERS BELOW THIS LINE
//======================================================================

$(document).ready(function() {

	//----------------------------------------------------------------------
	// generate unique identifiers for upload entries.
	//----------------------------------------------------------------------
	
	// last used identifier (global)
	var uid = 0;
	
	// generate and return next identifier.
	function nextId() {
		uid += 1;
		return uid;
	}
	
	//----------------------------------------------------------------------
	// show notifications.
	//----------------------------------------------------------------------
	
	function notify(msg,mode) {
	    $.bootstrapGrowl(msg, {
	        type: mode,
	        delay: 2000,
	    });
	}

	//----------------------------------------------------------------------
	// check capabilities of used browser (file reader, drag-n-drop).
	//----------------------------------------------------------------------
	
	var hasFileRdr = 'FileReader' in window;
	var hasFileDrag = function() {
		var div = document.createElement('div');
		return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div))
			&& 'FormData' in window && hasFileRdr;
	}();
	
	//----------------------------------------------------------------------
	// handle file lists for devices.
	//----------------------------------------------------------------------
	
	// check if a change in a print job is allowed. 
	function checkChangeAllowed(e) {
		if (!$('#final').hasClass('hidden')) {
			notify('Druckauftrag ist abgeschlossen - Änderungen nicht mehr möglich!', 'danger');
			e.preventDefault();
			e.stopPropagation();
			return false;
		}
		return true;
	}
	
	// add a (raw) file to the table.
	function addFile(f) {
		// assemble file-info object
		var fi = new Object();
		fi.file = f;
		fi.preview = "";
		fi.id = nextId();
		
		// add to table instance
		var row = $('#filelist').find('tr.entry-template');
		var clone = row.clone(true)
			.removeClass('hidden entry-template')
			.attr('data-refid', fi.id);
		clone.find('.entry-name').text(fi.file.name);
		clone.find('.entry-del').attr('data-refid', fi.id);
		row.before(clone);
		
		// copy preset values
		var selSize = clone.find('.img-size');
		$.each(config.sizes, function() {
		    selSize.append($('<option/>').val(this.format).text(this.format));
		});
		var size = $('#size').val();
		selSize.val(size);
		var copy = $('#copy').val();
		clone.find('.img-copy').val(copy);
		
		// add preview (deferred execution)
		if (hasFileRdr) {
			$('button.submit').addClass('hidden');
			var reader = new FileReader();
			reader.onload = function (e) {
				fi.preview = e.target.result;
				clone.find('img.thumb').attr('src', fi.preview);
				$('button.submit').removeClass('hidden');
			}
			reader.readAsDataURL(f);
		} else {
			$('button.submit').removeClass('hidden');
		}
		// recalculate costs
		calcTotalCosts();
	}
	
	// remove a file
	$('span.entry-del').on('click', function (e) {
		if (!checkChangeAllowed(e)) {
			return
		}
		// remove from table
		var id = $(this).attr('data-refid');
		var row = $("tr[data-refid='"+id+"']");
		var name = row.find('.entry-name').text();
		row.detach();
		
		// check for remaining entries
		var count = $('#filelist').children().length;
		if (count == 1) {
			$('button.submit').addClass('hidden');
		}
		// recalculate costs
		calcTotalCosts();

		// send notification
		msg = "Bild '" + name + "' gelöscht";
		notify(msg, 'success');
	});

	// drop a file list for a device
	function dropFiles() {
		$('#filelist').children('tr').each(function () {
			var row = $(this);
			var id = row.attr('data-refid');
			if (id != "x") {
				row.detach();
			}
		});
	}

	//----------------------------------------------------------------------
	// cost calculation
	//----------------------------------------------------------------------
	
	// calculate costs for a single image (print size, number of
	// copies) on a specified device.
	function calcCost(size,copies) {
		var costs = 0.0;
		$.each(config.sizes, function() {
			if (this.format == size) {
				costs += this.cost;
			}
		});		
		return costs * copies;
	}

	// calculate total costs for current job.
	function calcTotalCosts() {
		var costs = 0;
		var num = 0;
		$('#filelist').children('tr').each(function () {
			var row = $(this);
			if (!row.hasClass('hidden')) {
				var size = row.find('.img-size').val();
				var copies = parseInt(row.find('.img-copy').val()); 
				costs += calcCost(size, copies);
				num += copies;
			}
		});
		$('span.costs').text(costs.toFixed(2).toString().replace(".", ","));
		$('span.num').text(num);
	}

	//----------------------------------------------------------------------
	// submit a printer job.
	//----------------------------------------------------------------------
	
	var uploadActive = false;
	
	// submit print queue.
	function submit() {
		
		// assemble new form data instance
		var xfer = new FormData();
		xfer.append('userid', $('#userid').text());
		xfer.append('device', config.name);
		xfer.append('costs', $('#costs span.costs').text());
		xfer.append('num', $('span.num').text());
		xfer.append('PHPSESSID', sessionId);
		
		// add entries to form
		var idList = [];
		var prints = 0;
		$('#filelist').children('tr').each(function () {
			var row = $(this);
			var id = row.attr('data-refid');
			if (id != "x") {
				idList.push(id);
				xfer.append('name_' + id, row.find('p.entry-name').text());
				xfer.append('size_' + id, row.find('select.img-size').val());
				var copy = row.find('select.img-copy').val();
				prints += parseInt(copy);
				xfer.append('copy_' + id, copy);
				xfer.append('data_' + id, row.find('img.thumb').attr('src'));
			}
		});
		xfer.append('ids', idList);
		
		// check for existing files.
		if (prints == 0) {
			notify("Keine Daten für den Upload - bitte Bilder hinzufügen...", 'warning');
			return false;
		}
		
		// send form data
		uploadActive = true;
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
			var progress = $('#progress');
			progress.removeClass('hidden');
			var bar = progress.find('.bar');
			var pval = progress.find('.value');
			var percent = progress.find('.percent');
			var receipt = progress.find('.receipt');
			percent.removeClass('hidden');
			receipt.addClass('hidden');
			// update progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = (100 * e.loaded / e.total) + '%';
				if (pc == "100%") {
					percent.addClass('hidden');
					receipt.removeClass('hidden');
					pc = 0;
				}
				pval.text(pc);
				bar.css('width', pc);
			}, false);
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					uploadActive = false;
					var ok = (xhr.status == 200);
					bar.addClass(ok ? "success" : "failure");
					$('#progress').addClass('hidden');
					if (ok) {
						var resp = JSON.parse(xhr.responseText);
						if (resp.status != "OK") {
							notify("Druckauftrag konnte NICHT verarbeitet werden: " + resp.rc, 'danger');
							return;
						}
						$('#box').addClass('hidden');
						$('#costs').addClass('hidden');
						$('button.submit').addClass('hidden');
						$('#final').removeClass('hidden');
						notify("Druckauftrag erfolgreich verschickt.", 'success');
					} else {
						notify("Druckauftrag konnte NICHT verschickt werden.", 'danger');
					}
				}
			}
			xhr.open("POST", 'upload.php', true);
			xhr.send(xfer);
		} else {
			alert("AJAX transfer...");
			$.ajax({
				type: 'POST',
				url: 'upload.php',
				data: xfer,
				contentType: false,
				processData: false, 
				success: function(response) {
					uploadActive = false;
					alert(response);
				}
			});
		}
		return true;
	}
	
	//----------------------------------------------------------------------
	// Handle page exit
	//----------------------------------------------------------------------

	$(window).bind('beforeunload', function(){
		if (uploadActive) {
			return 'Datentransfer zum Drucker läuft noch - bitte nicht beenden.';
		}
		if ($('#filelist').children('tr').length > 1) {
			return 'Druckauftrag geändert - Seite wirklich verlassen?';
		}
		return;
	});
	
	//----------------------------------------------------------------------
	// initialization entry point.
	//----------------------------------------------------------------------
	
	// prepare HTML page with given configuration
	$('#printer-name').text(config.name);
	var select = $('#size');
	$.each(config.sizes, function() {
		select.append($('<option/>').val(this.format).text(this.format));
	});
	select.val($('#size option:first').val());
	
	// initialize form
	var f = $(".box");
	
	// handle drag-n-drop
	if (hasFileDrag) {
		f.addClass('has-advanced-upload');
		f.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
			e.preventDefault();
			e.stopPropagation();
		})
		.on('dragover dragenter', function() {
			f.addClass('is-dragover');
		})
		.on('dragleave dragend drop', function() {
			f.removeClass('is-dragover');
		})
		.on('drop', function(e) {
			if (!$('#final').hasClass('hidden')) {
				notify('Druckauftrag ist abgeschlossen - hinzufügen neuer Bilder nicht möglich!', 'danger');
				return;
			}
			for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
				var file = e.originalEvent.dataTransfer.files[i];
				if (!file.type.match("image/jpeg")) {
					msg = "Datei '" + file.name + "' ist kein JPEG";
					notify(msg, 'danger');
				} else {
					addFile(file)
					msg = "Bild '" + file.name + "' eingefügt";
					notify(msg, 'success');
				}
			}	
		});
	}
	
	// handle file selection dialog
	$('#files').on('change', function(e) {
		if (!checkChangeAllowed(e)) {
			return
		}
		for (var i = 0; i < e.target.files.length; i++) {
			var file = e.target.files[i];
            if (!file.type.match("image/jpeg")) {
				msg = "Datei '" + file.name + "' ist kein JPEG";
				notify(msg, 'danger');
            } else {
            	addFile(file);
				msg = "Bild '" + file.name + "' eingefügt";
				notify(msg, 'success');
            }
		}
	});
	
	// handle size/copy changes
	$('#filelist .img-size').on('change', function(e) {
		if (!checkChangeAllowed(e)) {
			return
		}
		calcTotalCosts();
	});
	$('#filelist .img-copy').on('change', function(e) {
		if (!checkChangeAllowed(e)) {
			return
		}
		calcTotalCosts();
	});
	
	// handle submit button
	$('button.submit').on('click', function() {
		$(this).addClass('hidden');
		submit();
	});
	
	// handle button for next job creation
	$('button.new').on('click', function() {
		$('#final').addClass('hidden');
		$('#costs').removeClass('hidden');
		$('span.costs').text('0,00');
		dropFiles();
	});
	
	//------------------------------------------------------------------
	// start-up entry point
	//------------------------------------------------------------------
	
	// disable "NoJavascript" section
	$('#nojs').addClass('hidden');
	
	// query print server status
	var form = new FormData();
	var available = true;
	$.ajax({
		type: 'POST',
		url: 'status.php',
		data: form,
		contentType: false,
		processData: false,
		async: false,
		success: function(response) {
			var resp = JSON.parse(response);
			if (resp.status != "SUCCESS") {
				$('#status-msg').text(resp.rc);
				$('#status').removeClass('hidden');
				available = false;
			}
		},
		error: function(xhr, error){
			$('#status-msg').text(
				"Zur Zeit besteht keine Netzwerk-Verbindung zum Druck-Server. " +
				"Bitte versuchen Sie es später nochmal."
			);
			$('#status').removeClass('hidden');
			available = false;
		}
	});

	//------------------------------------------------------------------
	// handle authentication
	//------------------------------------------------------------------
	var userName = "?";
	var sessionId = sessionStorage.getItem('oks_fuji_sessionid');
	
	if (available) {
		if (sessionId == null) {
			// handle server-side authentication
			$('button.login').on('click', function() {
				// assemble form data
				var form = new FormData();
				form.append('username', $('#auth_user').val());
				$('#auth_user').val('');
				form.append('password', $('#auth_passwd').val());
				$('#auth_passwd').val('');
				$.ajax({
					type: 'POST',
					url: 'login.php',
					data: form,
					contentType: false,
					processData: false, 
					success: function(response) {
						var resp = JSON.parse(response);
						if (resp.status == "SUCCESS") {
							// successfully authenticated
							userName = resp.user;
							$('#userid').text(userName);
							sessionStorage.setItem('oks_fuji_user', userName);
							sessionId = resp.session;
							sessionStorage.setItem('oks_fuji_sessionid', sessionId);
							// switch to main section
							$('#auth').addClass('hidden');
							$('#main').removeClass('hidden');
							notify("Benutzer '" + userName + "' erfolgreich angemeldet.", 'success');
						} else {
							alert("Auth failure: " + resp.status + " (" + resp.error + ")");
						}
					}
				});
			});
			// switch authentication section
			$('#auth').removeClass('hidden');
		} else {
			userName = sessionStorage.getItem('oks_fuji_user');
			$('#userid').text(userName);
			// switch main section
			$('#main').removeClass('hidden');
		}
	}

	// logout authenticated user.
	$('#logout').on('click', function() {
		// drop all existing files
		dropFiles();
		// remove session storage
		sessionStorage.removeItem('oks_fuji_user');
		sessionStorage.removeItem('oks_fuji_sessionid');
		// switch sections
		$('#main').addClass('hidden');
		$('#auth').removeClass('hidden');
		$('#confirm').addClass('hidden');
		$('#progress').addClass('hidden');
		$('#final').addClass('hidden');
		notify("Benutzer '" + userName + "' abgemeldet.", 'success');
	});
});