# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1538082821 -7200
# Node ID e1c50b21b7e3fecd582d57e191b1bfb6ba81da23
# Parent  4da2414eabbc1fe9dc844c344ce1ba75ba31c94d
Added new recipe screens and wizzard.

diff -r 4da2414eabbc -r e1c50b21b7e3 www/css/style.css
--- a/www/css/style.css	Wed Sep 26 15:28:59 2018 +0200
+++ b/www/css/style.css	Thu Sep 27 23:13:41 2018 +0200
@@ -192,3 +192,46 @@
     box-shadow: #024 0 0px 1px 1px;
 }
 */
+
+
+/*
+ * New recipe wizzard
+ */
+#hintBase, #hintStyle {
+    float: left;
+    margin-top: 30px;
+    margin-right: 20px;
+    padding: 5px;
+    width: 600px;
+    color: yellow;
+}
+#section {
+    margin: 5px;
+}
+#baseButtonsWrapper {
+    float: right;
+    margin-top: 30px;
+    margin-right: 10px;
+    width: 160px;
+}
+#styleButtonsWrapper {
+    float: right;
+    margin-top: 30px;
+    margin-right: 10px;
+    width: 320px;
+}
+#completedButtonsWrapper {
+    float: right;
+    margin-right: 10px;
+    width: 320px;
+    margin-top: 160px;
+}
+.nextButton {
+    float: right;
+    margin-left: 0px;
+}
+.backButton {
+    float: left;
+    margin-left: 10px;
+}
+
diff -r 4da2414eabbc -r e1c50b21b7e3 www/includes/db_recipes.php
--- a/www/includes/db_recipes.php	Wed Sep 26 15:28:59 2018 +0200
+++ b/www/includes/db_recipes.php	Thu Sep 27 23:13:41 2018 +0200
@@ -30,6 +30,7 @@
 	$sql .=    "st_name='" . mysqli_real_escape_string($connect, $_POST['st_name']);
 	$sql .= "', st_letter='" . mysqli_real_escape_string($connect, $_POST['st_letter']);
 	$sql .= "', st_guide='" . mysqli_real_escape_string($connect, $_POST['st_guide']);
+	// st_category st_category_number st_type
 	$sql .= "', st_og_min='" . $_POST['st_og_min'];
 	$sql .= "', st_og_max='" . $_POST['st_og_max'];
 	$sql .= "', st_fg_min='" . $_POST['st_fg_min'];
diff -r 4da2414eabbc -r e1c50b21b7e3 www/js/rec_edit.js
--- a/www/js/rec_edit.js	Wed Sep 26 15:28:59 2018 +0200
+++ b/www/js/rec_edit.js	Thu Sep 27 23:13:41 2018 +0200
@@ -81,7 +81,7 @@
 			{ name: 'st_abv_max', type: 'float' },
 			{ name: 'name', type: 'string' },
 			{ name: 'notes', type: 'string' },
-			{ name: 'type', type: 'number' },
+			{ name: 'type', type: 'string' },
 			{ name: 'batch_size', type: 'float' },
 			{ name: 'boil_time', type: 'float' },
 			{ name: 'efficiency', type: 'float' },
diff -r 4da2414eabbc -r e1c50b21b7e3 www/js/rec_main.js
--- a/www/js/rec_main.js	Wed Sep 26 15:28:59 2018 +0200
+++ b/www/js/rec_main.js	Thu Sep 27 23:13:41 2018 +0200
@@ -56,7 +56,7 @@
 			addButton.jqxButton({ theme: theme, width: 120, height: 20 });
 			// add new recipe.
 			addButton.click(function (event) {
-				var url= "rec_new.php?return='rec_main.php'";
+				var url= "rec_new.php?return=rec_main.php";
 				window.location.href = url;
 			});
 		},
diff -r 4da2414eabbc -r e1c50b21b7e3 www/js/rec_new.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/js/rec_new.js	Thu Sep 27 23:13:41 2018 +0200
@@ -0,0 +1,325 @@
+/*****************************************************************************
+ * Copyright (C) 2018
+ *
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of BMS
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * BrewCloud is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+
+$(document).ready(function () {
+
+	// tooltips
+	$("#name").jqxTooltip({ content: 'De naam voor dit recept.' });
+	$("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
+	$("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });
+
+	// editers
+	var srcType = [ "All Grain", "Partial Mash", "Extract" ];
+	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
+	$("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
+	$("#type").jqxDropDownList({ theme: theme, source: srcType, width: 125, height: 23, dropDownHeight: 95 });
+	$("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
+	$("#efficiency").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 40, max: 100, decimalDigits: 0, spinButtons: true, symbol: '%', symbolPosition: 'right'  });
+	$("#est_og").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1.010, max: 1.2, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 });
+
+	$("#st_name").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_category").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_category_number").jqxInput({ theme: theme, width: 70, height: 23 });
+	$("#st_style_letter").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_style_guide").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_notes").jqxInput({ theme: theme, width: 800, height: 100 });
+	$("#st_type").jqxInput({ theme: theme, width: 90, height: 23 });
+	$("#st_og_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_og_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_fg_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_fg_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_ibu_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_ibu_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_color_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_color_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_carb_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_carb_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_abv_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_abv_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_profile").jqxInput({ theme: theme, width: 800, height: 48 });
+	$("#st_ingredients").jqxInput({ theme: theme, width: 800, height: 23 });
+	$("#st_examples").jqxInput({ theme: theme, width: 800, height: 48 });
+
+	// Default values.
+	$("#type").val('All Grain');
+	$("#boil_time").val(90);
+	$("#efficiency").val(75);
+	$("#est_og").val(1.052);
+
+	// Styles dropdown list
+	var stylesUrl = "includes/db_profile_styles.php";
+	var stylesSource = {
+		datatype: "json",
+		datafields: [
+			{ name: 'record', type: 'number' },
+		        { name: 'name', type: 'string' },
+			{ name: 'category', type: 'string' },
+			{ name: 'category_number', type: 'number' },
+			{ name: 'style_letter', type: 'string' },
+			{ name: 'style_guide', type: 'string' },
+			{ name: 'type', type: 'string' },
+			{ name: 'og_min', type: 'float' },
+			{ name: 'og_max', type: 'float' },
+			{ name: 'fg_min', type: 'float' },
+			{ name: 'fg_max', type: 'float' },
+			{ name: 'ibu_min', type: 'float' },
+			{ name: 'ibu_max', type: 'float' },
+			{ name: 'color_min', type: 'float' },
+			{ name: 'color_max', type: 'float' },
+			{ name: 'carb_min', type: 'float' },
+			{ name: 'carb_max', type: 'float' },
+			{ name: 'abv_min', type: 'float' },
+			{ name: 'abv_max', type: 'float' },
+			{ name: 'notes', type: 'string' },
+			{ name: 'profile', type: 'string' },
+			{ name: 'ingredients', type: 'string' },
+			{ name: 'examples', type: 'string' }
+		],
+		url: stylesUrl,
+		async: true
+	};
+	var styleslist = new $.jqx.dataAdapter(stylesSource);
+
+	$("#styleSelect").jqxDropDownList({
+		placeHolder: "Kies bierstijl:",
+		theme: theme,
+		source: styleslist,
+		displayMember: "name",
+		width: 150,
+		height: 27,
+		dropDownWidth: 500,
+		dropDownHeight: 500,
+		renderer: function (index, label, value) {
+		var datarecord = styleslist.records[index];
+			return datarecord.style_guide + " " + datarecord.style_letter+ " " + datarecord.name;
+		}
+	});
+	$("#styleSelect").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var datarecord = styleslist.records[index];
+			$("#st_name").val(datarecord.name);
+			$("#st_category").val(datarecord.category);
+			$("#st_category_number").val(datarecord.category_number);
+			$("#st_style_letter").val(datarecord.style_letter);
+			$("#st_style_guide").val(datarecord.style_guide);
+			$("#st_type").val(datarecord.type);
+			$("#st_og_min").val(datarecord.og_min);
+			$("#st_og_max").val(datarecord.og_max);
+			$("#st_fg_min").val(datarecord.fg_min);
+			$("#st_fg_max").val(datarecord.fg_max);
+			$("#st_ibu_min").val(datarecord.ibu_min);
+			$("#st_ibu_max").val(datarecord.ibu_max);
+			$("#st_color_min").val(datarecord.color_min);
+			$("#st_color_max").val(datarecord.color_max);
+			$("#st_carb_min").val(datarecord.carb_min);
+			$("#st_carb_max").val(datarecord.carb_max);
+			$("#st_abv_min").val(datarecord.abv_min);
+			$("#st_abv_max").val(datarecord.abv_max);
+			$("#st_notes").val(datarecord.notes);
+			$("#st_profile").val(datarecord.profile);
+			$("#st_ingredients").val(datarecord.ingredients);
+			$("#st_examples").val(datarecord.examples);
+		}
+	});
+
+	//Creating wizard module
+	var wizard = (function () {
+
+		//Adding event listeners
+		var _addHandlers = function () {
+			$('#name').on('change', function (event) { wizard.validate(true); });
+			$('#type').on('change', function (event) { wizard.validate(true); });
+			$('#boil_time').on('change', function (event) { wizard.validate(true); });
+			$('#est_og').on('change', function (event) { wizard.validate(true); });
+			$('#efficiency').on('change', function (event) { wizard.validate(true); });
+			$('#styleSelect').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(),
+					st_guide: $('#st_style_guide').val(),
+					st_category: $('#st_category').val(),
+					st_category_number: $('#st_category_number').val(),
+					st_og_min: parseFloat($("#st_og_min").jqxNumberInput('decimal')),
+					st_og_max: parseFloat($("#st_og_max").jqxNumberInput('decimal')),
+					st_fg_min: parseFloat($("#st_fg_min").jqxNumberInput('decimal')),
+					st_fg_max: parseFloat($("#st_fg_max").jqxNumberInput('decimal')),
+					st_ibu_min: parseFloat($("#st_ibu_min").jqxNumberInput('decimal')),
+					st_ibu_max: parseFloat($("#st_ibu_max").jqxNumberInput('decimal')),
+					st_color_min: parseFloat($("#st_color_min").jqxNumberInput('decimal')),
+					st_color_max: parseFloat($("#st_color_max").jqxNumberInput('decimal')),
+					st_carb_min: parseFloat($("#st_carb_min").jqxNumberInput('decimal')),
+					st_carb_max: parseFloat($("#st_carb_max").jqxNumberInput('decimal')),
+					st_abv_min: parseFloat($("#st_abv_min").jqxNumberInput('decimal')),
+					st_abv_max: parseFloat($("#st_abv_max").jqxNumberInput('decimal')),
+					st_type: $("#st_type").val(),
+					type: $("#type").val(),
+					batch_size: 20.0,
+					boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
+					efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
+					est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
+					est_fg: 1.000,
+					est_color: 0,
+					color_method: "Morey",
+					est_ibu: 0,
+					ibu_method: "Tinseth",
+					mash_name: "",
+					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);
+				}
+				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;
+			},
+
+			//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();
+});
+
diff -r 4da2414eabbc -r e1c50b21b7e3 www/rec_new.php
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/rec_new.php	Thu Sep 27 23:13:41 2018 +0200
@@ -0,0 +1,129 @@
+<?php
+require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
+page_header('Nieuw recept', 'rec_new');
+?>
+
+   <div id='jqxTabs'>
+    <ul>
+     <li style="margin-left: 30px;">Recept basis</li>
+     <li>Bierstijl</li>
+     <li>Overzicht</li>
+    </ul>
+
+    <div class="section">
+     <div style="overflow: hidden;">
+      <table>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Recept naam:</td>
+        <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="name" /></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Opmerkingen:</td>
+        <td colspan="3" style="padding: 3px;"><textarea id="notes"></textarea></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Brouw type:</td>
+	<td align="left" style="padding: 3px;"><div id="type"></div></td>
+        <td style="vertical-align: top; float: right; padding: 3px;">Start SG:</td>
+        <td style="padding: 3px;"><div style="float: left;" id="est_og"></div></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Kooktijd minuten:</td>
+        <td style="padding: 3px;"><div id="boil_time"></div></td>
+        <td style="vertical-align: top; float: right; padding: 3px;">Brouwzaal rendement:</td>
+        <td style="padding: 3px;"><div id="efficiency"></div></td>
+       </tr>
+      </table>
+     </div>
+     <div id="hintBase" class="hint">
+     </div>
+     <div id="baseButtonsWrapper">
+      <input type="button" value="Volgende" class="nextButton" id="nextButtonBase" />
+     </div>
+    </div>
+
+    <div class="section">
+     <div style="overflow: hidden;">
+      <table>
+       <tr>
+	<td align="right" style="vertical-align: top;">Kies stijl:</td>
+        <td align="left" colspan="3"><div id="styleSelect">Stylenlijst</div></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Bier stijl:</td>
+        <td align="left" style="vertical-align: top;"><input readonly="1" id="st_name" /></td>
+        <td align="right" style="vertical-align: top;">Bier groep:</td>
+        <td align="left" style="vertical-align: top;"><input readonly="1" id="st_style_letter" /></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Type:</td>
+        <td align="left" style="vertical-align: top;"><input readonly="1" id="st_type" /></td>
+        <td align="right" style="vertical-align: top;">Stijl gids:</td>
+	<td align="left" style="vertical-align: top;"><input readonly="1" id="st_style_guide" /></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Categorie:</td>
+        <td align="left" style="vertical-align: top;"><input readonly="1" id="st_category" /></td>
+        <td align="right" style="vertical-align: top;">Categorie nummer:</td>
+        <td align="left" style="vertical-align: top;"><input readonly="1" id="st_category_number" /></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Opmerkingen:</td>
+        <td align="left" colspan="3"><textarea readonly="1" id="st_notes"></textarea></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Begin SG:</td>
+	<td style="padding: 3px;"><div style="float: left;" id="st_og_min"></div><div style="float: left; margin-left: 5px;" id="st_og_max"></div></td>
+        <td style="vertical-align: top; float: right; padding: 3px;">Kleur EBC:</td>
+	<td style="padding: 3px;"><div style="float: left;" id="st_color_min"></div><div style="float: left; margin-left: 5px;" id="st_color_max"></div></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Eind SG:</td>
+        <td style="padding: 3px;"><div style="float: left;" id="st_fg_min"></div><div style="float: left; margin-left: 5px;" id="st_fg_max"></div></td>
+        <td style="vertical-align: top; float: right; padding: 3px;">Koolzuur vol:</td>
+        <td style="padding: 3px;"><div style="float: left;" id="st_carb_min"></div><div style="float: left; margin-left: 5px;" id="st_carb_max"></div></td>
+       </tr>
+       <tr>
+        <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td>
+        <td style="padding: 3px;"><div style="float: left;" id="st_ibu_min"></div><div style="float: left; margin-left: 5px;" id="st_ibu_max"></div></td>
+        <td style="vertical-align: top; float: right; padding: 3px;">Alcohol vol%:</td>
+        <td style="padding: 3px;"><div style="float: left;" id="st_abv_min"></div><div style="float: left; margin-left: 5px;" id="st_abv_max"></div></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Profiel:</td>
+        <td align="left" colspan="3"><textarea readonly="1" id="st_profile"></textarea></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Ingredienten:</td>
+        <td align="left" colspan="3"><textarea readonly="1" id="st_ingredients"></textarea></td>
+       </tr>
+       <tr>
+        <td align="right" style="vertical-align: top;">Voorbeelden:</td>
+        <td align="left" colspan="3"><textarea readonly="1" id="st_examples"></textarea></td>
+       </tr>
+      </table>
+     </div>
+     <div class="hint" id="hintStyle">
+     </div>
+     <div id="styleButtonsWrapper">
+      <input type="button" value="Terug" class="backButton" id="backButtonStyle" />
+      <input type="button" value="Volgende" class="nextButton" id="nextButtonStyle" />
+     </div>
+    </div>
+
+    <div class="section">
+     <div style="overflow: hidden; margin: 25px;"><br>
+      <p>Alle nodige gegevens zijn compleet.</p>
+      <p> Zodra je de "Volgende" toets gebruikt zal een nieuw recept aangemaakt worden en<br>
+      wordt de recept editer gestart zodat je het recept verder kunt afmaken.</p>
+     </div>
+     <div id="completedButtonsWrapper">
+      <input type="button" value="Terug" id="backButtonCompleted" class="backButton" />
+      <input type="button" value="Volgende" class="nextButton" id="nextButtonCompleted" />
+     </div>
+    </div>
+   </div>
+
+<?php
+page_footer();
+?>