refactoring

11 files changed, 306 insertions, 211 deletions

diff --git a/kvmd/eslintrc.yaml b/kvmd/eslintrc.yaml
index 4880085d..74240a54 100644
--- a/kvmd/eslintrc.yaml
+++ b/kvmd/eslintrc.yaml
@@ -1,13 +1,13 @@
 globals:
-    atx: true
-    hid: true
-    keyboard: true
-    mouse: true
-    msd: true
-    session: true
-    stream: true
+    Atx: true
+    Hid: true
+    Keyboard: true
+    Mouse: true
+    Msd: true
+    Session: true
+    Stream: true
+    Ui: true
     tools: true
-    ui: true
     "$": true
     "$$": true
 
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 0473bd4d..5f27074d 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -46,21 +46,17 @@
 					System ↴
 				</a>
 				<div class="ctl-dropdown-content">
-					<button onclick="ui.showWindow('about-window')">&bull; Show about</button>
+					<button id="show-about-button">&bull; Show about</button>
 					<hr>
-					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
+					<button id="show-keyboard-button">&bull; Show keyboard</button>
 					<hr>
-					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
-					<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
+					<button id="show-stream-button">&bull; Show stream</button>
+					<button disabled id="stream-reset-button">&bull; Reset stream</button>
 					<hr>
 					<div data-dont-hide-menu id="stream-size">
 						Stream size: <span id="stream-size-counter">100%</span>
 						<div id="stream-size-slider-box">
-							<input
-								type="range" min="50" max="150" value="100" step="10"
-								oninput="stream.resize(this.value);"
-								onchange="stream.resize(this.value);"
-							/>
+							<input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
 						</div>
 					</div>
 				</div>
@@ -75,10 +71,10 @@
 					ATX &#8628;
 				</a>
 				<div class="ctl-dropdown-content">
-					<button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button>
-					<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button>
+					<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
+					<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
 					<hr>
-					<button disabled id="atx-reset-button" onclick="atx.clickButton(this);">&bull; Click Reset</button>
+					<button disabled id="atx-reset-button">&bull; Click Reset</button>
 				</div>
 			</div>
 		</li>
@@ -150,11 +146,11 @@
 					</table>
 					<hr>
 
-					<input type="file" id="msd-select-new-image-file" onchange="msd.selectNewImageFile()" />
+					<input type="file" id="msd-select-new-image-file" />
 					<div class="buttons-row">
-						<button disabled id="msd-select-new-image-button" class="row50" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button>
-						<button disabled id="msd-upload-new-image-button" class="row25" onclick="msd.clickButton(this);">Start</button>
-						<button disabled id="msd-abort-uploading-button" class="row25" onclick="msd.clickButton(this);">Abort</button>
+						<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
+						<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
+						<button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
 					</div>
 					<hr>
 
@@ -179,8 +175,8 @@
 					</div>
 
 					<div class="buttons-row">
-						<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button>
-						<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button>
+						<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
+						<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
 					</div>
 				</div>
 			</div>
@@ -195,25 +191,25 @@
 				<div class="ctl-dropdown-content">
 					<button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
 					<hr>
-					<button onclick="hid.emitShortcut('ControlLeft', 'AltLeft', 'Delete');">&bull; Ctrl+Alt+Del</button>
+					<button class="shortcut" data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
 					<hr>
-					<button onclick="hid.emitShortcut('ControlLeft', 'KeyW');">&bull; Ctrl+W</button>
-					<button onclick="hid.emitShortcut('ControlLeft', 'Escape');">&bull; Ctrl+Esc</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'Tab');">&bull; Alt+Tab</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'Escape');">&bull; Alt+Escape</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'Space');">&bull; Alt+Space</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'Enter');">&bull; Alt+Enter</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'F4');">&bull; Alt+F4</button>
+					<button class="shortcut" data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
+					<button class="shortcut" data-shortcut="ControlLeft Escape">&bull; Ctrl+Esc</button>
+					<button class="shortcut" data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
+					<button class="shortcut" data-shortcut="AltLeft Escape">&bull; Alt+Escape</button>
+					<button class="shortcut" data-shortcut="AltLeft Space">&bull; Alt+Space</button>
+					<button class="shortcut" data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
+					<button class="shortcut" data-shortcut="AltLeft F4">&bull; Alt+F4</button>
 					<hr>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen');">&bull; Alt+PrtSc</button>
-					<button onclick="hid.emitShortcut('PrintScreen');">&bull; PrtSc</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen">&bull; Alt+PrtSc</button>
+					<button class="shortcut" data-shortcut="PrintScreen">&bull; PrtSc</button>
 					<hr>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyR');">&bull; Alt+SysRq+R</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyE');">&bull; Alt+SysRq+E</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyI');">&bull; Alt+SysRq+I</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyS');">&bull; Alt+SysRq+S</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyU');">&bull; Alt+SysRq+U</button>
-					<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyB');">&bull; Alt+SysRq+B</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyR">&bull; Alt+SysRq+R</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyE">&bull; Alt+SysRq+E</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyI">&bull; Alt+SysRq+I</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyS">&bull; Alt+SysRq+S</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyU">&bull; Alt+SysRq+U</button>
+					<button class="shortcut" data-shortcut="AltLeft PrintScreen KeyB">&bull; Alt+SysRq+B</button>
 				</div>
 			</div>
 		</li>
diff --git a/kvmd/web/js/atx.js b/kvmd/web/js/atx.js
index 56b49e54..cb0163ed 100644
--- a/kvmd/web/js/atx.js
+++ b/kvmd/web/js/atx.js
@@ -1,53 +1,44 @@
-var atx = new function() {
-	this.loadInitialState = function() {
+function Atx() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __init__ = function() {
+		$("atx-power-led").title = "Power Led";
+		$("atx-hdd-led").title = "Disk Activity Led";
+
+		$("atx-power-button").onclick = () => __clickButton("power", null, "Are you sure to click the power button?");
+		$("atx-power-button-long").onclick = () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?");
+		$("atx-reset-button").onclick = () => __clickButton("reset", null, "Are you sure to reboot the server?");
+	};
+
+	/********************************************************************************/
+
+	self.loadInitialState = function() {
 		var http = tools.makeRequest("GET", "/kvmd/atx", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					atx.setButtonsBusy(JSON.parse(http.responseText).result.busy);
+					__setButtonsBusy(JSON.parse(http.responseText).result.busy);
 				} else {
-					setTimeout(atx.loadInitialState, 1000);
+					setTimeout(self.loadInitialState, 1000);
 				}
 			}
 		});
 	};
 
-	this.setState = function(state) {
-		atx.setButtonsBusy(state.busy);
+	self.setState = function(state) {
+		__setButtonsBusy(state.busy);
 		$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off");
 		$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off");
 	};
 
-	this.clearState = function() {
-		[
-			"atx-power-led",
-			"atx-hdd-led",
-		].forEach(function(name) {
-			$(name).className = "led-off";
-		});
+	self.clearState = function() {
+		$("atx-power-led").className = "led-off";
+		$("atx-hdd-led").className = "led-off";
 	};
 
-	this.clickButton = function(el_button) {
-		var button = null;
-		var confirm_msg = null;
-		var timeout = null;
-
-		switch (el_button.id) {
-			case "atx-power-button":
-				button = "power";
-				confirm_msg = "Are you sure to click the power button?";
-				break;
-			case "atx-power-button-long":
-				button = "power_long";
-				confirm_msg = "Are you sure to perform the long press of the power button?";
-				timeout = 15000;
-				break;
-			case "atx-reset-button":
-				button = "reset";
-				confirm_msg = "Are you sure to reboot the server?";
-				break;
-		}
-
-		if (button && confirm(confirm_msg)) {
+	var __clickButton = function(button, timeout, confirm_msg) {
+		if (confirm(confirm_msg)) {
 			var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
 				if (http.readyState === 4) {
 					if (http.status === 409) {
@@ -60,13 +51,11 @@ var atx = new function() {
 		}
 	};
 
-	this.setButtonsBusy = function(busy) {
-		[
-			"atx-power-button",
-			"atx-power-button-long",
-			"atx-reset-button",
-		].forEach(function(name) {
-			document.getElementById(name).disabled = busy;
-		});
+	var __setButtonsBusy = function(busy) {
+		$("atx-power-button").disabled = busy;
+		$("atx-power-button-long").disabled = busy;
+		$("atx-reset-button").disabled = busy;
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js
index 86d3931d..319b0327 100644
--- a/kvmd/web/js/hid.js
+++ b/kvmd/web/js/hid.js
@@ -1,36 +1,48 @@
-var hid = new function() {
+function Hid() {
+	var self = this;
+
+	/********************************************************************************/
+
 	var __ws = null;
+
 	var __chars_to_codes = {};
 	var __codes_delay = 50;
 
-	this.init = function() {
-		keyboard.init();
-		mouse.init();
+	var __keyboard = new Keyboard();
+	var __mouse = new Mouse();
+
+	var __init__ = function() {
 		if (window.navigator.clipboard && window.navigator.clipboard.readText) {
 			__chars_to_codes = __buildCharsToCodes();
 			$("pak-button").onclick = __pasteAsKeys;
 		} else {
-			$("pak-button").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
+			$("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
 		}
+
+		Array.prototype.forEach.call($$("shortcut"), function(el_shortcut) {
+			el_shortcut.onclick = () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "));
+		});
 	};
 
-	this.setSocket = function(ws) {
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
 		__ws = ws;
-		keyboard.setSocket(ws);
-		mouse.setSocket(ws);
+		__keyboard.setSocket(ws);
+		__mouse.setSocket(ws);
 		$("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws);
 	};
 
-	this.updateLeds = function() {
-		keyboard.updateLeds();
-		mouse.updateLeds();
+	self.updateLeds = function() {
+		__keyboard.updateLeds();
+		__mouse.updateLeds();
 	};
 
-	this.releaseAll = function() {
-		keyboard.releaseAll();
+	self.releaseAll = function() {
+		__keyboard.releaseAll();
 	};
 
-	this.emitShortcut = function(...codes) {
+	var __emitShortcut = function(codes) {
 		return new Promise(function(resolve) {
 			tools.debug("Emitting keys:", codes);
 
@@ -44,7 +56,7 @@ var hid = new function() {
 
 			var index = 0;
 			var iterate = () => setTimeout(function() {
-				keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
+				__keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
 				++index;
 				if (index < raw_events.length) {
 					iterate();
@@ -118,18 +130,20 @@ var hid = new function() {
 				if (codes_count <= 256 || confirm(confirm_msg)) {
 					$("pak-button").disabled = true;
 					$("pak-led").className = "led-pak-typing";
+					$("pak-led").title = "Autotyping...";
 
 					tools.debug("Paste-as-keys:", clipboard_text);
 
 					var index = 0;
 					var iterate = function() {
-						hid.emitShortcut(...clipboard_codes[index]).then(function() {
+						__emitShortcut(clipboard_codes[index]).then(function() {
 							++index;
 							if (index < clipboard_codes.length && __ws) {
 								iterate();
 							} else {
 								$("pak-button").disabled = false;
 								$("pak-led").className = "led-off";
+								$("pak-led").title = "";
 							}
 						});
 					};
@@ -138,4 +152,6 @@ var hid = new function() {
 			}
 		});
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/keyboard.js b/kvmd/web/js/keyboard.js
index 15cab179..41fa4813 100644
--- a/kvmd/web/js/keyboard.js
+++ b/kvmd/web/js/keyboard.js
@@ -1,4 +1,13 @@
-var keyboard = new function() {
+function Keyboard() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __keys = [];
+	var __modifiers = [];
+
 	var __mac_cmd_hook = ((
 		window.navigator.oscpu
 		|| window.navigator.platform
@@ -6,11 +15,9 @@ var keyboard = new function() {
 		|| "Unknown"
 	).indexOf("Mac") !== -1);
 
-	var __ws = null;
-	var __keys = [];
-	var __modifiers = [];
+	var __init__ = function() {
+		$("hid-keyboard-led").title = "Keyboard free";
 
-	this.init = function() {
 		$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
 		$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
 
@@ -27,6 +34,7 @@ var keyboard = new function() {
 			};
 			__keys.push(el_key);
 		});
+
 		Array.prototype.forEach.call($$("modifier"), function(el_key) {
 			el_key.onmousedown = () => __toggleModifierHandler(el_key);
 			__modifiers.push(el_key);
@@ -37,28 +45,35 @@ var keyboard = new function() {
 		}
 	};
 
-	this.setSocket = function(ws) {
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
 		if (ws !== __ws) {
-			keyboard.releaseAll();
+			self.releaseAll();
 			__ws = ws;
 		}
-		keyboard.updateLeds();
+		self.updateLeds();
 	};
 
-	this.updateLeds = function() {
-		var focused = (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window")));
-		$("hid-keyboard-led").className = (focused ? "led-on" : "led-off");
+	self.updateLeds = function() {
+		if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
+			$("hid-keyboard-led").className = "led-on";
+			$("hid-keyboard-led").title = "Keyboard captured";
+		} else {
+			$("hid-keyboard-led").className = "led-off";
+			$("hid-keyboard-led").title = "Keyboard free";
+		}
 	};
 
-	this.releaseAll = function() {
+	self.releaseAll = function() {
 		__keys.concat(__modifiers).forEach(function(el_key) {
 			if (__isActive(el_key)) {
-				keyboard.fireEvent(el_key.id, false);
+				self.fireEvent(el_key.id, false);
 			}
 		});
 	};
 
-	this.fireEvent = function(code, state) {
+	self.fireEvent = function(code, state) {
 		$("keyboard-window").dispatchEvent(new KeyboardEvent(
 			(state ? "keydown" : "keyup"),
 			{code: code}
@@ -77,7 +92,7 @@ var keyboard = new function() {
 					__keys.forEach(function(el_key) {
 						if (__isActive(el_key)) {
 							// __commonHandler(el_key, false, "pressed");
-							keyboard.fireEvent(el_key.id, false);
+							self.fireEvent(el_key.id, false);
 						}
 					});
 				}
@@ -142,4 +157,6 @@ var keyboard = new function() {
 			}));
 		}
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/main.js b/kvmd/web/js/main.js
index 5f6b8f73..9739fce5 100644
--- a/kvmd/web/js/main.js
+++ b/kvmd/web/js/main.js
@@ -1,7 +1,6 @@
 function main() {
-	ui.init();
-	hid.init();
-	session.loadKvmdVersion();
-	session.startPoller();
-	stream.startPoller();
+	var hid = new Hid();
+	new Session(new Atx(), hid, new Msd());
+	new Stream();
+	new Ui(hid);
 }
diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js
index bdc37bb0..4be05c99 100644
--- a/kvmd/web/js/mouse.js
+++ b/kvmd/web/js/mouse.js
@@ -1,22 +1,32 @@
-var mouse = new function() {
+function Mouse() {
+	var self = this;
+
+	/********************************************************************************/
+
 	var __ws = null;
+
 	var __current_pos = {x: 0, y:0};
 	var __sent_pos = {x: 0, y:0};
+
 	var __stream_hovered = false;
 
-	this.init = function() {
-		var el_stream_box = $("stream-box");
-		el_stream_box.onmouseenter = __hoverStream;
-		el_stream_box.onmouseleave = __leaveStream;
-		el_stream_box.onmousedown = (event) => __buttonHandler(event, true);
-		el_stream_box.onmouseup = (event) => __buttonHandler(event, false);
-		el_stream_box.oncontextmenu = (event) => event.preventDefault();
-		el_stream_box.onmousemove = __moveHandler;
-		el_stream_box.onwheel = (event) => __wheelHandler(event);
+	var __init__ = function() {
+		$("hid-mouse-led").title = "Mouse free";
+
+		$("stream-box").onmouseenter = __hoverStream;
+		$("stream-box").onmouseleave = __leaveStream;
+		$("stream-box").onmousedown = (event) => __buttonHandler(event, true);
+		$("stream-box").onmouseup = (event) => __buttonHandler(event, false);
+		$("stream-box").oncontextmenu = (event) => event.preventDefault();
+		$("stream-box").onmousemove = __moveHandler;
+		$("stream-box").onwheel = __wheelHandler;
+
 		setInterval(__sendMove, 100);
 	};
 
-	this.setSocket = function(ws) {
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
 		__ws = ws;
 		if (ws) {
 			$("stream-box").classList.add("stream-box-mouse-enabled");
@@ -25,18 +35,24 @@ var mouse = new function() {
 		}
 	};
 
+	self.updateLeds = function() {
+		if (__ws && __stream_hovered) {
+			$("hid-mouse-led").className = "led-on";
+			$("hid-mouse-led").title = "Mouse tracked";
+		} else {
+			$("hid-mouse-led").className = "led-off";
+			$("hid-mouse-led").title = "Mouse free";
+		}
+	};
+
 	var __hoverStream = function() {
 		__stream_hovered = true;
-		mouse.updateLeds();
+		self.updateLeds();
 	};
 
 	var __leaveStream = function() {
 		__stream_hovered = false;
-		mouse.updateLeds();
-	};
-
-	this.updateLeds = function() {
-		$("hid-mouse-led").className = (__ws && __stream_hovered ? "led-on" : "led-off");
+		self.updateLeds();
 	};
 
 	var __buttonHandler = function(event, state) {
@@ -105,4 +121,6 @@ var mouse = new function() {
 			}));
 		}
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/msd.js b/kvmd/web/js/msd.js
index 05671f7b..1dfdd1d3 100644
--- a/kvmd/web/js/msd.js
+++ b/kvmd/web/js/msd.js
@@ -1,62 +1,80 @@
-var msd = new function() {
+function Msd() {
+	var self = this;
+
+	/********************************************************************************/
+
 	var __state = null;
 	var __upload_http = null;
 	var __image_file = null;
 
-	this.loadInitialState = function() {
+	var __init__ = function() {
+		$("msd-led").title = "Unknown state";
+
+		$("msd-select-new-image-file").onchange = __selectNewImageFile;
+		$("msd-select-new-image-button").onclick = () => $("msd-select-new-image-file").click();
+
+		$("msd-upload-new-image-button").onclick = __clickUploadNewImageButton;
+		$("msd-abort-uploading-button").onclick = __clickAbortUploadingButton;
+
+		$("msd-switch-to-kvm-button").onclick = () => __clickSwitchButton("kvm");
+		$("msd-switch-to-server-button").onclick = () => __clickSwitchButton("server");
+	};
+
+	/********************************************************************************/
+
+	self.loadInitialState = function() {
 		var http = tools.makeRequest("GET", "/kvmd/msd", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					msd.setState(JSON.parse(http.responseText).result);
+					self.setState(JSON.parse(http.responseText).result);
 				} else {
-					setTimeout(msd.loadInitialState, 1000);
+					setTimeout(self.loadInitialState, 1000);
 				}
 			}
 		});
 	};
 
-	this.setState = function(state) {
+	self.setState = function(state) {
 		__state = state;
 		__applyState();
 	};
 
-	this.clickButton = function(el_button) {
-		if (el_button.id === "msd-upload-new-image-button") {
-			var form_data = new FormData();
-			form_data.append("image_name", __image_file.name);
-			form_data.append("image_data", __image_file);
-
-			__upload_http = new XMLHttpRequest();
-			__upload_http.open("POST", "/kvmd/msd/write", true);
-			__upload_http.upload.timeout = 5000;
-			__upload_http.onreadystatechange = __uploadStateChange;
-			__upload_http.upload.onprogress = __uploadProgress;
-			__upload_http.send(form_data);
-
-		} else if (el_button.id === "msd-abort-uploading-button") {
-			__upload_http.onreadystatechange = null;
-			__upload_http.upload.onprogress = null;
-			__upload_http.abort();
-			__upload_http = null;
-			$("msd-progress").setAttribute("data-label", "Aborted");
-			$("msd-progress-value").style.width = "0%";
-
-		} else if (el_button.id === "msd-switch-to-kvm-button" || el_button.id === "msd-switch-to-server-button") {
-			var to = (el_button.id === "msd-switch-to-kvm-button" ? "kvm" : "server");
-			var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
-				if (http.readyState === 4) {
-					if (http.status !== 200) {
-						alert("Switch error:", http.responseText);
-					}
+	var __clickUploadNewImageButton = function() {
+		var form_data = new FormData();
+		form_data.append("image_name", __image_file.name);
+		form_data.append("image_data", __image_file);
+
+		__upload_http = new XMLHttpRequest();
+		__upload_http.open("POST", "/kvmd/msd/write", true);
+		__upload_http.upload.timeout = 5000;
+		__upload_http.onreadystatechange = __uploadStateChange;
+		__upload_http.upload.onprogress = __uploadProgress;
+		__upload_http.send(form_data);
+	};
+
+	var __clickAbortUploadingButton = function() {
+		__upload_http.onreadystatechange = null;
+		__upload_http.upload.onprogress = null;
+		__upload_http.abort();
+		__upload_http = null;
+		$("msd-progress").setAttribute("data-label", "Aborted");
+		$("msd-progress-value").style.width = "0%";
+	};
+
+	var __clickSwitchButton = function(to) {
+		var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					alert("Switch error:", http.responseText);
 				}
-				__applyState();
-			});
+			}
 			__applyState();
-			el_button.disabled = true;
-		}
+		});
+		__applyState();
+		$("msd-switch-to-" + to + "-button").disabled = true;
 	};
 
-	this.selectNewImageFile = function() {
+	var __selectNewImageFile = function() {
 		var el_input = $("msd-select-new-image-file");
 		var image_file = (el_input.files.length ? el_input.files[0] : null);
 		if (image_file && image_file.size > __state.info.size) {
@@ -72,21 +90,21 @@ var msd = new function() {
 		if (__state.connected_to === "server") {
 			$("msd-another-another-user-uploads").style.display = "none";
 			$("msd-led").className = "led-on";
-			$("msd-status").innerHTML = "Connected to Server";
+			$("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
 			$("msd-another-another-user-uploads").style.display = "none";
 		} else if (__state.busy) {
 			if (!__upload_http) {
 				$("msd-another-another-user-uploads").style.display = "block";
 			}
 			$("msd-led").className = "led-msd-writing";
-			$("msd-status").innerHTML = "Uploading new image";
+			$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
 		} else {
 			$("msd-another-another-user-uploads").style.display = "none";
 			$("msd-led").className = "led-off";
 			if (__state.in_operate) {
-				$("msd-status").innerHTML = "Connected to KVM";
+				$("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
 			} else {
-				$("msd-status").innerHTML = "Unavailable";
+				$("msd-status").innerHTML = $("msd-led").title = "Unavailable";
 			}
 		}
 
@@ -141,4 +159,6 @@ var msd = new function() {
 			$("msd-progress-value").style.width = percent + "%";
 		}
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/session.js b/kvmd/web/js/session.js
index f52b3dde..3169c8c1 100644
--- a/kvmd/web/js/session.js
+++ b/kvmd/web/js/session.js
@@ -1,9 +1,22 @@
-var session = new function() {
+function Session(atx, hid, msd) {
+	// var self = this;
+
+	/********************************************************************************/
+
 	var __ws = null;
+
 	var __ping_timer = null;
 	var __missed_heartbeats = 0;
 
-	this.loadKvmdVersion = function() {
+	var __init__ = function() {
+		$("link-led").title = "Not connected yet...";
+		__loadKvmdVersion();
+		__startPoller();
+	};
+
+	/********************************************************************************/
+
+	var __loadKvmdVersion = function() {
 		var http = tools.makeRequest("GET", "/kvmd/info", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
@@ -13,13 +26,13 @@ var session = new function() {
 					$("about-version-python").innerHTML = version.python;
 					$("about-version-platform").innerHTML = version.platform;
 				} else {
-					setTimeout(session.loadKvmdVersion, 1000);
+					setTimeout(__loadKvmdVersion, 1000);
 				}
 			}
 		});
 	};
 
-	this.startPoller = function() {
+	var __startPoller = function() {
 		$("link-led").className = "led-link-connecting";
 		$("link-led").title = "Connecting...";
 		var http = tools.makeRequest("GET", "/wsauth", function() {
@@ -56,8 +69,6 @@ var session = new function() {
 		} else if (event.msg_type === "event") {
 			if (event.msg.event === "atx_state") {
 				atx.setState(event.msg.event_attrs);
-			// } else if (event.msg.event === "atx_click") {
-			//	atx.setButtonsBusy(event.msg.event_attrs.button);
 			} else if (event.msg.event === "msd_state") {
 				msd.setState(event.msg.event_attrs);
 			}
@@ -85,7 +96,7 @@ var session = new function() {
 		__ws = null;
 		setTimeout(function() {
 			$("link-led").className = "led-link-connecting";
-			setTimeout(session.startPoller, 500);
+			setTimeout(__startPoller, 500);
 		}, 500);
 	};
 
@@ -105,4 +116,6 @@ var session = new function() {
 			}
 		}
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js
index e393c6fe..f1c5d950 100644
--- a/kvmd/web/js/stream.js
+++ b/kvmd/web/js/stream.js
@@ -1,9 +1,25 @@
-var stream = new function() {
+function Stream() {
+	// var self = this;
+
+	/********************************************************************************/
+
 	var __prev_state = false;
 	var __normal_size = {width: 640, height: 480};
 	var __size_factor = 1;
 
-	this.startPoller = function() {
+	var __init__ = function() {
+		$("stream-led").title = "Stream inactive";
+
+		$("stream-reset-button").onclick = __clickResetButton;
+		$("stream-size-slider").oninput = __resize;
+		$("stream-size-slider").onchange = __resize;
+
+		__startPoller();
+	};
+
+	/********************************************************************************/
+
+	var __startPoller = function() {
 		var http = tools.makeRequest("GET", "/streamer/?action=snapshot", function() {
 			if (http.readyState === 2 || http.readyState === 4) {
 				var status = http.status;
@@ -15,6 +31,7 @@ var stream = new function() {
 					$("stream-image").className = "stream-image-inactive";
 					$("stream-box").classList.add("stream-box-inactive");
 					$("stream-led").className = "led-off";
+					$("stream-led").title = "Stream inactive";
 					$("stream-reset-button").disabled = true;
 				} else if (!__prev_state) {
 					__refreshImage();
@@ -22,14 +39,15 @@ var stream = new function() {
 					$("stream-image").className = "stream-image-active";
 					$("stream-box").classList.remove("stream-box-inactive");
 					$("stream-led").className = "led-on";
+					$("stream-led").title = "Stream is active";
 					$("stream-reset-button").disabled = false;
 				}
 			}
 		});
-		setTimeout(stream.startPoller, 2000);
+		setTimeout(__startPoller, 2000);
 	};
 
-	this.clickResetButton = function() {
+	var __clickResetButton = function() {
 		$("stream-reset-button").disabled = true;
 		var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
 			if (http.readyState === 4) {
@@ -40,7 +58,8 @@ var stream = new function() {
 		});
 	};
 
-	this.resize = function(percent) {
+	var __resize = function() {
+		var percent = $("stream-size-slider").value;
 		$("stream-size-counter").innerHTML = percent + "%";
 		__size_factor = percent / 100;
 		__applySizeFactor();
@@ -58,8 +77,9 @@ var stream = new function() {
 				__normal_size = JSON.parse(http.responseText).result.size;
 				__applySizeFactor();
 				$("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
-				ui.showWindow("stream-window");
 			}
 		});
 	};
-};
+
+	__init__();
+}
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
index b4ad9290..c1e3cfc5 100644
--- a/kvmd/web/js/ui.js
+++ b/kvmd/web/js/ui.js
@@ -1,18 +1,18 @@
-var ui = new function() {
+function Ui(hid) {
 	var __top_z_index = 0;
 	var __windows = [];
 	var __ctl_items = [];
 
-	this.init = function() {
+	/********************************************************************************/
+
+	var __init__ = function() {
 		Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
 			el_item.onclick = () => __toggleMenu(el_item);
 			__ctl_items.push(el_item);
 		});
 
 		Array.prototype.forEach.call($$("window"), function(el_window) {
-			var el_grab = el_window.querySelector(".window-header .window-grab");
-
-			__makeWindowMovable(el_grab, el_window);
+			__makeWindowMovable(el_window);
 			__windows.push(el_window);
 
 			var el_button = el_window.querySelector(".window-header .window-button-close");
@@ -56,11 +56,16 @@ var ui = new function() {
 		window.onmouseup = __globalMouseButtonHandler;
 		// window.oncontextmenu = __globalMouseButtonHandler;
 
-		ui.showWindow("stream-window");
+		$("show-about-button").onclick = () => __showWindow($("about-window"));
+		$("show-keyboard-button").onclick = () => __showWindow($("keyboard-window"));
+		$("show-stream-button").onclick = () => __showWindow($("stream-window"));
+
+		__showWindow($("stream-window"));
 	};
 
-	this.showWindow = function(id) {
-		var el_window = $(id);
+	/********************************************************************************/
+
+	var __showWindow = function(el_window) {
 		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
 			var view = __getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
@@ -147,7 +152,7 @@ var ui = new function() {
 		}
 	};
 
-	var __makeWindowMovable = function(el_grab, el_window) {
+	var __makeWindowMovable = function(el_window) {
 		var prev_x = 0;
 		var prev_y = 0;
 
@@ -180,7 +185,7 @@ var ui = new function() {
 		}
 
 		el_window.setAttribute("data-centered", "");
-		el_grab.onmousedown = startMoving;
+		el_window.querySelector(".window-header .window-grab").onmousedown = startMoving;
 		el_window.onclick = () => __raiseWindow(el_window);
 	};
 
@@ -207,4 +212,6 @@ var ui = new function() {
 			tools.debug("Raised window:", el_window);
 		}
 	};
-};
+
+	__init__();
+}