diff -r 58618d93c0fb -r a810539dc218 www/js/mon_fermenter.js
--- a/www/js/mon_fermenter.js	Mon Jan 07 22:35:32 2019 +0100
+++ b/www/js/mon_fermenter.js	Tue Jan 08 21:54:19 2019 +0100
@@ -27,6 +27,8 @@
 	var	bcode = '';
 	var	yl = 12;	// Normal yeast temp range
 	var	yh = 24;
+	var	bstage = '';
+	var	bmode = '';
 
 	var gaugeoptions = {
 		min: 0, max: 40, width: 375, height: 375,
@@ -55,12 +57,45 @@
 		animationDuration: 1200,
 		caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] }
 	};
+	var switchoptions = {
+		height: 68,
+		width: 35,
+		theme: theme,
+		thumbSize:'50%',
+		orientation: 'vertical'
+	};
 
+	srcMode = [ "OFF", "NONE", "FRIDGE", "BEER", "PROFILE" ];
+	srcStage = [ "PRIMARY", "SECONDARY", "TERTIARY", "CARBONATION" ];
 	$("#gaugeContainer_air").jqxGauge( gaugeoptions );
 	$("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} );
 	$("#gaugeContainer_beer").jqxGauge( gaugeoptions );
 	$("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} );
 	$("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions );
+	$("#fermenter_toggle1").jqxSwitchButton( switchoptions );
+	$("#fermenter_toggle2").jqxSwitchButton( switchoptions );
+	$("#fermenter_toggle3").jqxSwitchButton( switchoptions );
+
+	$("#info_mode").jqxDropDownList({ theme: theme, source: srcMode, width: 100, height: 23, dropDownHeight: 156 });
+	$("#info_stage").jqxDropDownList({ theme: theme, source: srcStage, width: 150, height: 23, dropDownHeight: 125 });
+
+	function sendBase(stage, mode) {
+
+		console.log("sendBase("+stage+", "+mode+")");
+		var data  = 'node=rpi01&alias=unit0&payload={"stage":"' + stage;
+		    data += '","mode":"' + mode + '","setpoint":{"low":17.8,"high":18.2}}';
+		$.ajax({
+			url: "cmd_fermenter.php",
+			data: data,
+			type: "POST",
+			success: function(data) {
+				//do something after something is recieved from php
+			},
+			error: function(jqXHR, textStatus, errorThrown) {
+				console.log("sendBase() error");
+			}
+		});
+	}
 
     	var url = "getfermenter.php?uuid='" + my_uuid + "'";
     	var source = {
@@ -110,27 +145,25 @@
 		loadComplete: function (records) {
 			var record = dataAdapter.records[0];
 			var oline = (record.online) ? "On-line" : "Off-line";
-			var html  = "<table style='width: 100%; padding: 10px;'>";
-			    html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>";
-			    html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
-			    html += "<tr><td>Systeem</td><td>" + record.node +  "/" + record.alias + " " + oline + "</td></tr>";
-			    html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>";
-			    html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>";
-			    html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>"
-			    html += "</<table>";
-			$("#fermenter_info").html(html);
+			$("#info_uuid").html(record.uuid);
+			$("#info_system").html(record.node +  "/" + record.alias + " " + oline);
+			$("#info_beer").html(record.beercode + " - " + record.beername);
 			bcode = record.beercode;
 			bname = record.beername;
+			bstage = record.stage;
+			bmode = record.mode;
+			$("#info_mode").jqxDropDownList('selectItem', record.mode);
+			$("#info_stage").jqxDropDownList('selectItem', record.stage);
 
 			if (record.online && (record.mode != "OFF")) {
-				$("#fermentor_powerled").html('<div class="LEDblue_on"></div>Power');
+				$("#fermenter_powerled").html('<div class="LEDblue_on"></div>Power');
 			} else {
-				$("#fermentor_powerled").html('<div class="LEDblue_off"></div>Power');
+				$("#fermenter_powerled").html('<div class="LEDblue_off"></div>Power');
 			}
 			if (record.online && (record.alarm != "0")) {
-				$("#fermentor_alarmled").html('<div class="LEDred_on"></div>Alarm');
+				$("#fermenter_alarmled").html('<div class="LEDred_on"></div>Alarm');
 			} else {
-				$("#fermentor_alarmled").html('<div class="LEDred_off"></div>Alarm');
+				$("#fermenter_alarmled").html('<div class="LEDred_off"></div>Alarm');
 			}
 
 			$("#target_lo").html(record.setpoint_low.toFixed(1));
@@ -139,21 +172,32 @@
 			$("#load_beer").html(record.beer_temperature.toFixed(3));
 
 			if (record.online && (record.heater_state != "0")) {
-				$("#fermentor_led1").html('<div class="LEDgreen_on"></div>Heat');
+				$("#fermenter_led1").html('<div class="LEDgreen_on"></div>Heat');
 			} else {
-				$("#fermentor_led1").html('<div class="LEDgreen_off"></div>Heat');
+				$("#fermenter_led1").html('<div class="LEDgreen_off"></div>Heat');
 			}
 			if (record.online && (record.cooler_state != "0")) {
-				$("#fermentor_led2").html('<div class="LEDgreen_on"></div>Cool');
+				$("#fermenter_led2").html('<div class="LEDgreen_on"></div>Cool');
 			} else {
-				$("#fermentor_led2").html('<div class="LEDgreen_off"></div>Cool');
+				$("#fermenter_led2").html('<div class="LEDgreen_off"></div>Cool');
 			}
 			if (record.online && (record.fan_state != "0")) {
-				$("#fermentor_led3").html('<div class="LEDgreen_on"></div>Fan');
+				$("#fermenter_led3").html('<div class="LEDgreen_on"></div>Fan');
 			} else {
-				$("#fermentor_led3").html('<div class="LEDgreen_off"></div>Fan');
+				$("#fermenter_led3").html('<div class="LEDgreen_off"></div>Fan');
 			}
-
+			if (record.online && (record.mode == "NONE")) {
+				$("#fermenter_toggle1").jqxSwitchButton( 'enable' );
+				$("#fermenter_toggle2").jqxSwitchButton( 'enable' );
+				$("#fermenter_toggle3").jqxSwitchButton( 'enable' );
+			} else {
+				$("#fermenter_toggle1").jqxSwitchButton( 'disable' );
+				$("#fermenter_toggle2").jqxSwitchButton( 'disable' );
+				$("#fermenter_toggle3").jqxSwitchButton( 'disable' );
+				$("#fermenter_toggle1").val( (record.heater_state != "0") );
+				$("#fermenter_toggle2").val( (record.cooler_state != "0") );
+				$("#fermenter_toggle3").val( (record.fan_state != "0") );
+			}
 
 			$('#gaugeContainer_air').jqxGauge({ value: record.air_temperature });
 			if (record.online && (record.air_state == "OK")) {
@@ -182,6 +226,14 @@
 		dataAdapter.dataBind();
 	}, 10000);
 
+	$('#info_mode').on('change', function (event) {
+		sendBase(bstage, args.item.value);
+	});
+	$('#info_stage').on('change', function (event) {
+		sendBase(args.item.value, bmode);
+	});
+
+
 	// The chart button.
    	$("#FLog").jqxButton({ template: "info", width: '150px', theme: theme });
 	$("#FLog").click(function () {