diff -r 8c4ba91adf58 -r 7ef48396f705 www/js/prod_edit.js
--- a/www/js/prod_edit.js	Thu Nov 22 22:27:42 2018 +0100
+++ b/www/js/prod_edit.js	Fri Nov 23 14:54:07 2018 +0100
@@ -21,6 +21,29 @@
  *****************************************************************************/
 
 
+function createDelElements() {
+
+	$('#eventWindow').jqxWindow({
+		theme: theme,
+		position: { x: 490, y: 210 },
+		width: 300,
+		height: 175,
+		resizable: false,
+		isModal: true,
+		modalOpacity: 0.4,
+		okButton: $('#delOk'),
+		cancelButton: $('#delCancel'),
+		initContent: function () {
+			$('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme });
+			$('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme });
+			$('#delCancel').focus();
+		}
+	});
+	$('#eventWindow').jqxWindow('hide');
+}
+
+
+
 $(document).ready(function () {
 
 	console.log("record:" + my_record + "  return:" + my_return + "  theme:" + theme);
@@ -123,6 +146,10 @@
 			$("#eq_mash_volume").val(dataRecord.eq_mash_volume);
 			$("#eq_efficiency").val(dataRecord.eq_efficiency);
 
+			if (dataRecord.stage != "Plan") {
+				// Only allow Delete when in Plan stage.
+				$("#Delete").jqxButton({ disabled: true });
+			}
 		},
 		loadError: function (jqXHR, status, error) {
 		},
@@ -143,7 +170,7 @@
 	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
 	$("#code").jqxInput({ theme: theme, width: 100, height: 23 });
 	$("#birth").jqxDateTimeInput({ theme: theme, width: 150, height: 23, formatString: 'yyyy-MM-dd' });
-	$("#stage").jqxInput({ theme: theme, width: 100, height: 23, disabled: true });
+	$("#stage").jqxInput({ theme: theme, width: 100, height: 23 });
 	$("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
 	$("#eq_name").jqxInput({ theme: theme, width: 250, height: 23 });
 	$("#eq_boil_size").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.5 });
@@ -174,155 +201,37 @@
 		position: 'top'
 	});
 
-
-
-/*
-	//Creating wizard module
-	var wizard = (function () {
+	// Buttons sidebar
+	$("#rec_edit").jqxButton({ template: "primary", width: '110px', theme: theme });
 
-		//Adding event listeners
-		var _addHandlers = function () {
-			$('#name').on('change', function (event) { wizard.validate(true); });
-			$('#nextButtonCompleted').click(function () {
-				console.log("insert start");
-				var newrow = {
-					record: -1,
-					name: $("#name").val(),
-					notes: $("#notes").val(),
-					st_name: $('#st_name').val(),
-					st_letter: $('#st_style_letter').val(),
-					mash_ph: 5.4,
-					mash_sparge_temp: 78.0
-				};
-				var data = "insert=true&return=" + my_return + "&" + $.param(newrow);
-				$.ajax({
-					dataType: 'json',
-					url: "includes/db_recipes.php",
-					cache: false,
-					data: data,
-					type: "POST",
-					success: function (data, status, xhr) {
-						// update command is executed.
-						window.location.href = my_return;
-					},
-					error: function(jqXHR, textStatus, errorThrown) {
-					}
-				});
-			});
-			$('.nextButton').click(function () {
-				wizard.validate(true);
-				$('#jqxTabs').jqxTabs('next');
-			});
-			$('.backButton').click(function () {
-				wizard.validate(true);
-				$('#jqxTabs').jqxTabs('previous');
-			});
-		};
-
-		return {
-			//Initializing the wizzard - creating all elements, adding event handlers and starting the validation
-			init: function () {
-				$('#jqxTabs').jqxTabs({
-					theme: theme,
-					height: 630,
-					width: 1280,
-					autoHeight: false,
-					position: 'top',
-					keyboardNavigation: false
-				});
-				$('#nextButtonBase').jqxButton({ theme: theme, width: 150 });
-				$('#nextButtonStyle').jqxButton({ theme: theme, width: 150});
-				$('#backButtonStyle').jqxButton({ theme: theme, width: 150});
-				$('#nextButtonCompleted').jqxButton({ theme: theme, width: 150});
-				$('#backButtonCompleted').jqxButton({ theme: theme, width: 150});
-				_addHandlers();
-				this.validate();
-				this.showHint('Validation hints.');
-			},
-
-			//Validating all wizard tabs
-			validate: function (notify) {
-				if (!this.firstTab(notify)) {
-					$('#jqxTabs').jqxTabs('disableAt', 1);
-					$('#jqxTabs').jqxTabs('disableAt', 2);
-					return;
-				} else {
-					$('#jqxTabs').jqxTabs('enableAt', 1);
+	// Buttons below
+	$("#Delete").jqxButton({ template: "danger", width: '80px', theme: theme });
+	$("#Delete").click(function () {
+		// Open a popup to confirm this action.
+		$('#eventWindow').jqxWindow('open');
+		$("#delOk").click(function () {
+			var data = "delete=true&" + $.param({ record: my_record });
+			$.ajax({
+				dataType: 'json',
+				url: url,
+				cache: false,
+				data: data,
+				type: "POST",
+				success: function (data, status, xhr) {
+					// delete command is executed.
+					window.location.href = my_return;
+				},
+				error: function (jqXHR, textStatus, errorThrown) {
 				}
-				if (!this.secondTab(notify)) {
-					$('#jqxTabs').jqxTabs('disableAt', 2);
-					return;
-				} else {
-					$('#jqxTabs').jqxTabs('enableAt', 2);
-				}
-			},
-
-			//Displaying message to the user
-			showHint: function (message, selector) {
-				if (typeof selector === 'undefined') {
-					selector = '.hint';
-				}
-				if (message === '') {
-					message = 'Ok, je mag doorgaan.';
-				}
-				$(selector).html('<strong>' + message + '</strong>');
-			},
+			});
+		});
+	});
 
-			//Validating the first tab
-			firstTab: function (notify) {
-				var name = $('#name').val(),
-				    type = $('#type').val(),
-				    boil_time = parseFloat($("#boil_time").jqxNumberInput('decimal')),
-				    est_og = parseFloat($("#est_og").jqxNumberInput('decimal')),
-				    efficiency = parseFloat($("#efficiency").jqxNumberInput('decimal')),
-				    message = '';
-				if (name.length < 3) {
-					message += 'Je moet een recept naam invullen. <br />';
-				}
-				// Check if name already exists.
-				if (type.length < 1) {
-					message += 'Je moet een brouw type kiezen. <br />';
-				}
-				if ((boil_time < 4) || (boil_time > 360)) {
-					message += 'De kooktijd moet tussen 4 en 360 minuten zijn. <br />';
-				}
-				if ((est_og < 1.010) || (est_og > 1.200)) {
-					message += 'Het OG moet tussen 1.010 en 1.500 zijn. <br />';
-				}
-				if ((efficiency < 35) || (efficiency > 95)) {
-					message += 'Het brouwzaal rendement moet tussen 35 en 95 zijn. <br />';
-				}
-				if (message !== '') {
-					if (notify) {
-						this.showHint(message, '#hintBase');
-					}
-					return false;
-				}
-				this.showHint('Ok, je mag doorgaan.', '#hintBase');
-				return true;
-			},
+	$("#Cancel").jqxButton({ template: "primary", width: '80px', theme: theme });
+	$("#Cancel").click(function () {
+		window.location.href = my_return;
+	});
 
-			//Validating the second tab
-			secondTab: function (notify) {
-				var stylesel = $('#styleSelect').val(),
-				    message = '';
-				if (stylesel.length < 3) {
-					message += 'Je moet een bierstijl kiezen. <br />';
-				}
-				if (message !== '') {
-					if (notify) {
-						this.showHint(message, '#hintStyle');
-					}
-					return false;
-				}
-				this.showHint('Ok, je mag doorgaan.', '#hintStyle');
-				return true;
-			}
-		}
-	} ());
-*/
-	//Initializing the wizard
-//	wizard.init();
-
+	createDelElements();
 });