diff --git a/ChangeLog.md b/ChangeLog.md
index d45b80c1..67d290ab 100644
--- a/ChangeLog.md
+++ b/ChangeLog.md
@@ -1,4 +1,25 @@
 # Changelog:
+* **17.03.19**
+    - Using VAD by default instead of PPT
+    - Improved mobile experience:
+        - Double touch join channel
+        - Removed the info bar for devices smaller than 500px
+    - Added country flags and names
+    - Added favicon, which change when you're recording
+    - Fixed double cache loading
+    - Fixed modal sizing scroll bug
+    - Added a channel subscribe all button
+    - Added individual channel subscribe settings
+    - Improved chat switch performance
+    - Added a chat message URL finder
+        - Escape URL detection with `!<url>`
+    - Improved chat experience
+        - Displaying offline chats as offline
+        - Notify when user closes the chat
+        - Notify when user disconnect/reconnects
+    - Preloading hostbanners to prevent flickering
+    - Fixed empty channel and server kick messages
+    
 * **17.02.19**
     - Removed WebAssembly as dependency (Now working with MS Edge as well (but without audio))
     - Improved channel tree performance
diff --git a/files.php b/files.php
index 4e1645dc..dec1bd59 100644
--- a/files.php
+++ b/files.php
@@ -258,9 +258,97 @@
 		],
 	];
 
-	function list_dir($base_dir, $match = null, $depth = -1, &$results = array(), $dir = "") {
+	function systemify_path($path) {
+        return str_replace("/", DIRECTORY_SEPARATOR, $path);
+    }
+
+    function join_path(...$paths) {
+        $result_path = "";
+        foreach ($paths as $path) {
+            if(strlen($result_path) > 0)
+                $result_path .= DIRECTORY_SEPARATOR . $path;
+            else
+                $result_path = $path;
+        }
+
+        return $result_path;
+    }
+
+    function create_directories(&$error, $path, $dry_run = false) {
+        if(strpos(PHP_OS, "Linux") !== false) {
+            $command = "mkdir -p " . $path;
+        } else if(strpos(PHP_OS, "WINNT") !== false) {
+            $command = "mkdir " . $path; /* default path tree */
+        } else {
+            $error = "unsupported system";
+            return false;
+        }
+
+        echo $command . PHP_EOL;
+        if(!$dry_run) {
+            exec($command, $error, $state);
+            if($state) {
+                $error = "Command execution results in " . $state . ": " . implode(' ', $error);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function delete_directories(&$error, $path, $dry_run = false) {
+        if(strpos(PHP_OS, "Linux") !== false) {
+            $command = "rm -r " . $path;
+        } else if(strpos(PHP_OS, "WINNT") !== false) {
+            $command = "rm -r " . $path;
+        } else {
+            $error = "unsupported system";
+            return false;
+        }
+
+        echo $command . PHP_EOL;
+        if(!$dry_run) {
+            $state = 0;
+            exec($command, $output, $state);
+
+            if($state !== 0) {
+                $error = "Command execution results in " . $state . ": " . implode(' ', $output);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function create_link(&$error, $source, $target, $dry_run = false) {
+        if(strpos(PHP_OS, "Linux") !== false) {
+            $command = "ln -s " . $source . " " . $target;
+        } else if(strpos(PHP_OS, "WINNT") !== false) {
+            $command = "mklink " . (is_dir($target) ? "/D " : "") . " " . $target . " " . $source;
+        } else {
+            $error = "unsupported system";
+            return false;
+        }
+
+        echo $command . PHP_EOL;
+        if(!$dry_run) {
+            $state = 0;
+            exec($command, $output, $state);
+
+            if($state !== 0) {
+                $error = "Command execution results in " . $state . ": " . implode(' ', $output);
+                return false;
+            }
+        }
+        return true;
+    }
+
+
+    function list_dir($base_dir, $match = null, $depth = -1, &$results = array(), $dir = "") {
 		if($depth == 0) return $results;
 
+		if(!is_dir($base_dir . $dir)) {
+		    echo "Skipping directory " . $base_dir . $dir . PHP_EOL;
+		    return $results;
+        }
 		$files = scandir($base_dir . $dir);
 
 		foreach($files as $key => $value){
@@ -279,12 +367,14 @@
 	class AppFile {
 		public $type;
 		public $name;
-		public $path;
-		public $local_path;
+
+		public $target_path; /* relative path to the target file viewed from the file root */
+		public $local_path; /* absolute path to local file */
+
 		public $hash;
 	}
 
-	function find_files($flag = 0b11, $local_path_prefix = "./", $type = "dev", $args = []) { //TODO Use cache here!
+	function find_files($flag = 0b11, $local_path_prefix = "." . DIRECTORY_SEPARATOR, $type = "dev", $args = []) { //TODO Use cache here!
 		global $APP_FILE_LIST;
 		$result = [];
 
@@ -303,23 +393,22 @@
 				if(!$valid)
 					continue;
 			}
-			$entries = list_dir($local_path_prefix . $entry["local-path"], $entry["search-pattern"], isset($entry["search-depth"]) ? $entry["search-depth"] : -1);
+			$entries = list_dir(
+                systemify_path($local_path_prefix . $entry["local-path"]),
+                $entry["search-pattern"],
+                isset($entry["search-depth"]) ? $entry["search-depth"] : -1
+            );
 			foreach ($entries as $f_entry) {
 				if(isset($entry["search-exclude"]) && preg_match($entry["search-exclude"], $f_entry)) continue;
 				$file = new AppFile;
 
-				$idx_sep = strrpos($f_entry, DIRECTORY_SEPARATOR);
-				$file->path = "./" . $entry["path"] . "/";
-				if($idx_sep > 0) {
-					$file->name = substr($f_entry, strrpos($f_entry, DIRECTORY_SEPARATOR) + 1);
-					$file->path = $file->path . substr($f_entry, 0, strrpos($f_entry, DIRECTORY_SEPARATOR));
-				} else {
-					$file->name = $f_entry;
-				}
+				$f_info = pathinfo($f_entry);
+				$file->target_path = systemify_path($entry["path"]) . DIRECTORY_SEPARATOR . $f_info["dirname"] . DIRECTORY_SEPARATOR;
+				$file->local_path = getcwd() . DIRECTORY_SEPARATOR . systemify_path($entry["local-path"]) . DIRECTORY_SEPARATOR . $f_info["dirname"] . DIRECTORY_SEPARATOR;
 
-				$file->local_path = $local_path_prefix . $entry["local-path"] . DIRECTORY_SEPARATOR . $f_entry;
+                $file->name = $f_info["basename"];
 				$file->type = $entry["type"];
-				$file->hash = sha1_file($file->local_path);
+				$file->hash = sha1_file($file->local_path . DIRECTORY_SEPARATOR . $file->name);
 
 				if(strlen($file->hash) > 0) {
 					foreach ($result as $e)
@@ -334,10 +423,17 @@
 	}
 
 	if(isset($_SERVER["argv"])) { //Executed by command line
-		if(strpos(PHP_OS, "Linux") == -1) {
-			error_log("Invalid operating system! Help tool only available under linux!");
-			exit(1);
-		}
+	    $supported = false;
+		if(strpos(PHP_OS, "Linux") !== false) {
+		    $supported = true;
+		} else if(strpos(PHP_OS, "WIN") !== false) {
+            $supported = true;
+        }
+        if(!$supported) {
+            error_log("Invalid operating system (" . PHP_OS . ")! Help tool only available under linux!");
+            exit(1);
+        }
+
 		if(count($_SERVER["argv"]) < 2) {
 			error_log("Invalid parameters!");
 			goto help;
@@ -358,10 +454,10 @@
 			if($_SERVER["argv"][3] == "dev" || $_SERVER["argv"][3] == "development") {
 				if ($_SERVER["argv"][2] == "web") {
 					$flagset = 0b01;
-					$environment = "web/environment/development";
+					$environment = join_path("web", "environment", "development");
 				} else if ($_SERVER["argv"][2] == "client") {
 					$flagset = 0b10;
-					$environment = "client-api/environment/ui-files/raw";
+					$environment = join_path("client-api", "environment", "ui-files", "raw");
 				} else {
 					error_log("Invalid type!");
 					goto help;
@@ -370,10 +466,10 @@
 				$type = "rel";
 				if ($_SERVER["argv"][2] == "web") {
 					$flagset = 0b01;
-					$environment = "web/environment/release";
+					$environment = join_path("web", "environment", "release");
 				} else if ($_SERVER["argv"][2] == "client") {
 					$flagset = 0b10;
-					$environment = "client-api/environment/ui-files/raw";
+					$environment = join_path("client-api", "environment", "ui-files", "raw");
 				} else {
 					error_log("Invalid type!");
 					goto help;
@@ -385,37 +481,29 @@
 
 			{
 				if(!$dry_run) {
-					exec($command = "rm -r " . $environment, $output, $state);
-					exec($command = "mkdir -p " . $environment, $output, $state); if($state) goto handle_error;
+				    if(delete_directories($error, $environment) === false)
+				        goto handle_error;
+
+					if(create_directories($error, $environment) === false)
+					    goto handle_error;
 				}
 
-				$files = find_files($flagset, "./", $type, array_slice($_SERVER["argv"], 4));
+				$files = find_files($flagset, "." . DIRECTORY_SEPARATOR, $type, array_slice($_SERVER["argv"], 4));
 				$original_path = realpath(".");
 				if(!chdir($environment)) {
 					error_log("Failed to enter directory " . $environment . "!");
 					exit(1);
 				}
 
-				foreach($files as $file) {
-					if(!$dry_run && !is_dir($file->path)) {
-						exec($command = "mkdir -p " . $file->path, $output, $state);
-						if($state) goto handle_error;
+                /** @var AppFile $file */
+                foreach($files as $file) {
+					if(!$dry_run && !is_dir($file->target_path) && strlen($file->target_path) > 0) {
+                        if(create_directories($error, $file->target_path, $dry_run) === false)
+                            goto handle_error;
 					}
 
-					$parent_base = substr_count(realpath($file->path), DIRECTORY_SEPARATOR) - substr_count(realpath('.'), DIRECTORY_SEPARATOR);
-					$parent_file = substr_count(realpath("."), DIRECTORY_SEPARATOR) - substr_count($original_path, DIRECTORY_SEPARATOR); //Current to parent
-					$parent = $parent_base + $parent_file;
-
-					$path = "";
-					for($index = 0; $index < $parent; $index++)
-						$path = $path  . "../";
-
-					$command = "ln -s " . $path . $file->local_path . " " . $file->path;
-					if(!$dry_run) {
-						exec($command, $output, $state);
-						if($state) goto handle_error;
-					}
-					echo $command . PHP_EOL;
+                    if(create_link($output, $file->local_path . $file->name, $file->target_path . $file->name, $dry_run) === false)
+                        goto handle_error;
 				}
 				if(!chdir($original_path)) {
 					error_log("Failed to reset directory!");
@@ -425,18 +513,20 @@
 			}
 
 			if(!$dry_run) {
-				exec("./scripts/git_index.sh sort-tag", $output, $state);
+				exec("." . DIRECTORY_SEPARATOR . "scripts" . DIRECTORY_SEPARATOR . "git_index.sh sort-tag", $output, $state);
 				file_put_contents($environment . DIRECTORY_SEPARATOR . "version", $output);
 
 				if ($_SERVER["argv"][2] == "client") {
-					if(!chdir("client-api/environment")) {
+					if(!chdir("client-api" . DIRECTORY_SEPARATOR . "environment")) {
 						error_log("Failed to enter directory client-api/environment!");
 						exit(1);
 					}
-					if(!is_dir("versions/beta"))
-						exec($command = "mkdir -p versions/beta", $output, $state); if($state) goto handle_error;
-					if(!is_dir("versions/stable"))
-						exec($command = "mkdir -p versions/beta", $output, $state); if($state) goto handle_error;
+					if(!is_dir("versions" . DIRECTORY_SEPARATOR . "beta")) {
+                        exec($command = "mkdir -p versions/beta", $output, $state); if($state) goto handle_error;
+                    }
+					if(!is_dir("versions/stable")) {
+                        exec($command = "mkdir -p versions/beta", $output, $state); if($state) goto handle_error;
+					}
 
 					exec($command = "ln -s ../api.php ./", $output, $state); $state = 0; //Dont handle an error here!
 					if($state) goto handle_error;
@@ -445,10 +535,8 @@
 
 			exit(0);
 			handle_error:
-			error_log("Failed to execute command '" . $command . "'!");
-			error_log("Command returned code " . $state . ". Output: " . PHP_EOL);
-			foreach ($output as $line)
-				error_log($line);
+			error_log("Command execution failed!");
+			error_log("Error message: " . $error);
 			exit(1);
 		}
 	}
\ No newline at end of file
diff --git a/package.json b/package.json
index b0abb3d9..01d07950 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "directories": {},
   "scripts": {
     "compile-sass": "sass --update .:.",
-    "build-worker": "tsc -p shared/js/workers/tsconfig_worker_codec.json",
+    "build-worker-codec": "tsc -p shared/js/workers/tsconfig_worker_codec.json",
+    "build-worker-pow": "tsc -p shared/js/workers/tsconfig_worker_pow.json",
     "dtsgen": "node tools/dtsgen/index.js",
     "trgen": "node tools/trgen/index.js",
     "ttsc": "ttsc",
diff --git a/scripts/web_build.sh b/scripts/web_build.sh
index f06d1336..9fda09ea 100755
--- a/scripts/web_build.sh
+++ b/scripts/web_build.sh
@@ -28,9 +28,14 @@ if [[ $? -ne 0 ]]; then
 fi
 
 echo "Generating web workers"
-npm run build-worker
+npm run build-worker-codec
 if [[ $? -ne 0 ]]; then
-    echo "Failed to build web workers"
+    echo "Failed to build web worker codec"
+    exit 1
+fi
+npm run build-worker-pow
+if [[ $? -ne 0 ]]; then
+    echo "Failed to build web worker pow"
     exit 1
 fi
 
diff --git a/setup_windows.md b/setup_windows.md
new file mode 100644
index 00000000..e637c140
--- /dev/null
+++ b/setup_windows.md
@@ -0,0 +1,35 @@
+# Setup the develop environment on windows
+## 1.0 Requirements
+The following tools or applications are required to develop the web client:
+- [1.1 IDE](#11-ide)
+- [1.2 XAMPP (apache & php)](#12-xampp-with-a-web-server-and-php)
+- [1.3 NPM](#13-npm)
+- [1.4 Git bash](#14-git-bash)
+
+### 1.1 IDE
+For developing TeaWeb you require and IDE.  
+Preferable is PHPStorm from Jetbrains because the've already build in compiling on changes.  
+Else you've to run the compiler to compile the TS or SCSS files to js e.g. css files.
+
+### 1.2 XAMPP with a web server and PHP
+You require PHP (grater than 5) to setup and manage the project files.  
+PHP is required for the index page as well.
+The web server is required for browsing your final environment and watch your result.  
+The final environment will be found at `web/environemnt/development/`. More information about  
+the file structure could be found [here (TODO: link me!)]().
+
+### 1.3 NPM 
+NPM min 6.X is required to develop this project.  
+With NPM you could easily download all required dependencies by just typing `npm install`.  
+IMPORTANT: NPM must be available within the PATH environment variable!  
+
+### 1.4 Git bash
+For using the `.sh` build scripts you require Git Bash.  
+A minimum of 4.2 is recommend, but in general every version should work.  
+
+## 2.0 Development environment setup
+### 2.1 Native code (codecs) (Not required)
+If you dont want to develop the codec part or something related to the native
+webassembly part of TeaWeb you could skip this step and follow the steps in [2.1-b](#21-b-skip-native-code-setup)
+
+### 2.1-b Skip native code setup
diff --git a/shared/css/static/channel-tree.scss b/shared/css/static/channel-tree.scss
index 21c92257..ee2eb2f4 100644
--- a/shared/css/static/channel-tree.scss
+++ b/shared/css/static/channel-tree.scss
@@ -37,6 +37,7 @@
             flex-direction: row;
             justify-content: stretch;
 
+            cursor: pointer;
             margin-left: 0;
 
             .server_type {
@@ -134,6 +135,10 @@
                         display: block;
                     }
                 }
+
+                .icon_no_sound {
+                    display: flex;
+                }
             }
 
             .container-clients {
@@ -193,7 +198,15 @@
 }
 
 /* all icons related to basic_icons */
-.clicon {width:16px;height:16px;background:url('../../img/ts/basic_icons.png') no-repeat;background-size: 16px 608px;}
+.clicon {
+    width:16px;
+    height:16px;
+    background:url('../../img/ts/basic_icons.png') no-repeat;
+    background-size: 16px 608px;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
 
 .host {background-position: 0 -448px}
 
diff --git a/shared/css/static/control_bar.scss b/shared/css/static/control_bar.scss
index 8f4abda1..2ec3a444 100644
--- a/shared/css/static/control_bar.scss
+++ b/shared/css/static/control_bar.scss
@@ -47,13 +47,11 @@ $background:lightgray;
 
 	.button-dropdown {
 		.buttons {
-			display: grid;
-			grid-template-columns: auto auto;
-			grid-template-rows: 100%;
-			grid-gap: 2px;
+            display: flex;
+            flex-direction: row;
 
 			.button {
-				margin-right: 0px;
+				margin-right: 0;
 			}
 
 			.button-dropdown {
@@ -83,6 +81,7 @@ $background:lightgray;
 					background-color: rgba(0,0,0,0.4);
 					border-color: rgba(255, 255, 255, .75);
 					/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
+                    border-left: 2px solid rgba(255, 255, 255, .75);
 				}
 			}
 		}
@@ -103,6 +102,11 @@ $background:lightgray;
 
 			z-index: 1000;
 			/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
+
+			&.right {
+
+			}
+
 			.icon {
 				vertical-align: middle;
 				margin-right: 5px;
@@ -131,8 +135,8 @@ $background:lightgray;
 			}
 		}
 
-		&:hover {
-			.dropdown.displayed {
+		&:hover.displayed {
+			.dropdown {
 				display: block;
 			}
 		}
diff --git a/shared/css/static/frame/SelectInfo.scss b/shared/css/static/frame/SelectInfo.scss
index bcf52dff..2a98df19 100644
--- a/shared/css/static/frame/SelectInfo.scss
+++ b/shared/css/static/frame/SelectInfo.scss
@@ -1,11 +1,18 @@
-.select_info_table { }
-.select_info_table tr { }
-.select_info_table tr td { }
+.select_info_table {
+	tr {
+		td {
+			&:nth-child(1) {
+				font-weight: bold;
+				padding-right: 5px;
+				//min-width: max(35%, 20px);
+			}
 
-.select_info_table tr td:nth-child(1) {
-    font-weight: bold;
-    padding-right: 5px;
-    min-width: 20%;
+			&:nth-child(2) {
+				//min-width: max(75%, 40px);
+				word-break: break-word;
+			}
+		}
+	}
 }
 
 .select_server {
@@ -17,21 +24,18 @@
 
 	.button-update {
 		width: 100%;
-		height: 23px;
 
 		&:disabled {
-			color: red;
 			pointer-events: none;
 		}
-		&:not(:disabled) {
-			color: green;
-		}
 	}
 
 	.container {
 		max-height: 100%;
 		display: flex;
 		flex-direction: column;
+		padding-right: 0;
+		padding-left: 0;
 
 		.hostbanner {
 			overflow: hidden;
@@ -39,23 +43,27 @@
 	}
 }
 
-/*
-  <div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
-                                <div class="container-banner"></div>
-                                <div class="container-info"></div>
-                            </div>
- */
 .select_info {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
 	width: 100%;
 
+	> .close {
+        z-index: 500;
+		display: none;
+		position: absolute;
+		right: 5px;
+		top: 5px;
+	}
+
 	> div {
 		width: 100%;
 	}
 
 	.container-banner {
+        position: relative;
+
 		flex-grow: 1;
 		flex-shrink: 2;
 		max-height: 25%;
@@ -74,9 +82,29 @@
 			position: relative;
 			flex-grow: 1;
 
-			img {
-				position: absolute;
-			}
+            .image-container {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                height: 100%;
+
+                div {
+                    background-position: center;
+
+                    &.hostbanner-mode-0 { }
+
+                    &.hostbanner-mode-1 {
+                        width: 100%;
+                        height: auto;
+                    }
+
+                    &.hostbanner-mode-2 {
+                        background-size: contain!important;
+                        width:100%;
+                        height:100%
+                    }
+                }
+            }
 		}
 	}
 
@@ -105,4 +133,13 @@
 			}
 		}
 	}
+
+    .button-browser-info {
+        vertical-align: bottom;
+        cursor: pointer;
+
+        &:hover {
+            background-color: gray;
+        }
+    }
 }
\ No newline at end of file
diff --git a/shared/css/static/general.scss b/shared/css/static/general.scss
index 8217371c..c0d474b8 100644
--- a/shared/css/static/general.scss
+++ b/shared/css/static/general.scss
@@ -228,8 +228,14 @@ footer .container {
 }
 
 $separator_thickness: 4px;
+$small_device: 650px;
+$animation_length: .5s;
+
 .app {
+    min-width: 350px;
+
 	.container-app-main {
+		position: relative;
 		display: flex;
 		flex-direction: row;
 		justify-content: stretch;
@@ -301,8 +307,78 @@ $separator_thickness: 4px;
 		flex-direction: row;
 		justify-content: stretch;
 	}
+
+
+    .hide-small {
+        opacity: 1;
+        transition: opacity $animation_length linear;
+    }
+
+    .show-small {
+        display: none;
+
+        opacity: 0;
+        transition: opacity $animation_length linear;
+    }
 }
 
+@media only screen and (max-width: $small_device) {
+    .app-container {
+        right: 0;
+        left: 0;
+        bottom: 25px;
+        top: 0;
+
+        transition: all $animation_length linear;
+        overflow: auto;
+    }
+
+    .app {
+        .container-app-main {
+            .container-info {
+                display: none;
+                position: absolute;
+
+                width: 100%!important; /* override the seperator property */
+                height: 100%;
+
+                z-index: 1000;
+
+                &.shown {
+                    display: block;
+                }
+
+                .select_info {
+                    > .close {
+                        display: block;
+                    }
+                }
+            }
+
+            .container-channel-chat + .container-seperator {
+                display: none;
+                animation: fadeout $animation_length linear;
+            }
+
+            .container-channel-chat {
+                width: 100%!important; /* override the seperator property */
+            }
+        }
+    }
+
+    .hide-small {
+        display: none;
+        opacity: 0;
+        transition: opacity $animation_length linear;
+    }
+
+    .show-small {
+        display: block!important;
+
+        opacity: 1!important;
+        transition: opacity $animation_length linear;
+    }
+}
 .container-seperator {
 	background: lightgray;
 	flex-grow: 0;
@@ -328,6 +404,7 @@ $separator_thickness: 4px;
 }
 
 .icon-container {
+	position: relative;
 	display: inline-block;
 	height: 16px;
 	width: 16px;
@@ -354,8 +431,6 @@ $separator_thickness: 4px;
 }
 
 html, body {
-	min-height: 500px;
-	min-width: 500px;
 	overflow: hidden;
 }
 
@@ -365,13 +440,24 @@ body {
 }
 
 .icon-playlist-manage {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
+    &.icon {
+        width: 16px;
+        height: 16px;
 
+        background-position: -5px -5px;
+        background-size: 25px;
+    }
+
+    &.icon_x32 {
+        width: 32px;
+        height: 32px;
+
+        background-position: -11px -9px;
+        background-size: 50px;
+    }
+
+	display: inline-block;
 	background: url('../../img/music/playlist.svg') no-repeat;
-	background-position: -11px -9px;
-	background-size: 50px;
 }
 
 x-content {
diff --git a/shared/css/static/ts/chat.scss b/shared/css/static/ts/chat.scss
index 51a68352..9fd2d806 100644
--- a/shared/css/static/ts/chat.scss
+++ b/shared/css/static/ts/chat.scss
@@ -35,6 +35,20 @@
                     display: inline-block;
                     vertical-align: top;
                 }
+
+                .event-message { /* special formated messages */
+                    &.event-partner-disconnect {
+                        color: red;
+                    }
+
+                    &.event-partner-connect {
+                        color: green;
+                    }
+
+                    &.event-partner-closed {
+                        color: orange;
+                    }
+                }
             }
         }
     }
@@ -62,11 +76,9 @@
             cursor: pointer;
             height: 18px;
 
-            &.active {
-                background: #11111111;
-            }
-
             .btn_close {
+                display: none;
+
                 float: none;
                 margin-right: -5px;
                 margin-left: 8px;
@@ -78,9 +90,34 @@
                 }
             }
 
-            .name, .chatIcon {
+            .name, .chat-type {
                 display: inline-block;
             }
+
+            .name {
+                color: black;
+            }
+
+            &.closeable {
+                .btn_close {
+                    display: inline-block;
+                }
+            }
+
+            &.active {
+                background: #11111111;
+            }
+
+            &.offline {
+                .name {
+                    color: gray;
+                }
+            }
+            &.unread {
+                .name {
+                    color: blue;
+                }
+            }
         }
     }
 
diff --git a/shared/css/static/ts/country.scss b/shared/css/static/ts/country.scss
new file mode 100644
index 00000000..4515f67b
--- /dev/null
+++ b/shared/css/static/ts/country.scss
@@ -0,0 +1,1008 @@
+.country {
+    width: 16px;
+    height: 11px;
+    background: url('../../../img/ts/country_icons.png'), url('../../img/ts/country_icons.png') no-repeat;
+
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+.country.flag-ad {
+    background-position: 0 -11px
+}
+
+.country.flag-ae {
+    background-position: 0 -22px
+}
+
+.country.flag-af {
+    background-position: 0 -33px
+}
+
+.country.flag-ag {
+    background-position: 0 -44px
+}
+
+.country.flag-ai {
+    background-position: 0 -55px
+}
+
+.country.flag-al {
+    background-position: 0 -66px
+}
+
+.country.flag-am {
+    background-position: 0 -77px
+}
+
+.country.flag-an {
+    background-position: 0 -88px
+}
+
+.country.flag-ao {
+    background-position: 0 -99px
+}
+
+.country.flag-ar {
+    background-position: 0 -110px
+}
+
+.country.flag-as {
+    background-position: 0 -121px
+}
+
+.country.flag-at {
+    background-position: 0 -132px
+}
+
+.country.flag-au {
+    background-position: 0 -143px
+}
+
+.country.flag-aw {
+    background-position: 0 -154px
+}
+
+.country.flag-ax {
+    background-position: 0 -165px
+}
+
+.country.flag-az {
+    background-position: 0 -176px
+}
+
+.country.flag-ba {
+    background-position: 0 -187px
+}
+
+.country.flag-bb {
+    background-position: 0 -198px
+}
+
+.country.flag-bd {
+    background-position: 0 -209px
+}
+
+.country.flag-be {
+    background-position: 0 -220px
+}
+
+.country.flag-bf {
+    background-position: 0 -231px
+}
+
+.country.flag-bg {
+    background-position: 0 -242px
+}
+
+.country.flag-bh {
+    background-position: 0 -253px
+}
+
+.country.flag-bi {
+    background-position: 0 -264px
+}
+
+.country.flag-bj {
+    background-position: 0 -275px
+}
+
+.country.flag-bl {
+    background-position: 0 -286px
+}
+
+.country.flag-bm {
+    background-position: 0 -297px
+}
+
+.country.flag-bn {
+    background-position: 0 -308px
+}
+
+.country.flag-bo {
+    background-position: 0 -319px
+}
+
+.country.flag-br {
+    background-position: 0 -330px
+}
+
+.country.flag-bs {
+    background-position: 0 -341px
+}
+
+.country.flag-bt {
+    background-position: 0 -352px
+}
+
+.country.flag-bv {
+    background-position: 0 -363px
+}
+
+.country.flag-bw {
+    background-position: 0 -374px
+}
+
+.country.flag-by {
+    background-position: 0 -385px
+}
+
+.country.flag-bz {
+    background-position: 0 -396px
+}
+
+.country.flag-ca {
+    background-position: 0 -407px
+}
+
+.country.flag-cc {
+    background-position: 0 -418px
+}
+
+.country.flag-cd {
+    background-position: 0 -429px
+}
+
+.country.flag-cf {
+    background-position: 0 -440px
+}
+
+.country.flag-cg {
+    background-position: 0 -451px
+}
+
+.country.flag-ch {
+    background-position: 0 -462px
+}
+
+.country.flag-ci {
+    background-position: 0 -473px
+}
+
+.country.flag-ck {
+    background-position: 0 -484px
+}
+
+.country.flag-cl {
+    background-position: 0 -495px
+}
+
+.country.flag-cm {
+    background-position: 0 -506px
+}
+
+.country.flag-cn {
+    background-position: 0 -517px
+}
+
+.country.flag-co {
+    background-position: 0 -528px
+}
+
+.country.flag-cr {
+    background-position: 0 -539px
+}
+
+.country.flag-cs {
+    background-position: 0 -550px
+}
+
+.country.flag-cu {
+    background-position: 0 -561px
+}
+
+.country.flag-cv {
+    background-position: 0 -572px
+}
+
+.country.flag-cx {
+    background-position: 0 -583px
+}
+
+.country.flag-cy {
+    background-position: 0 -594px
+}
+
+.country.flag-cz {
+    background-position: 0 -605px
+}
+
+.country.flag-de {
+    background-position: 0 -616px
+}
+
+.country.flag-dj {
+    background-position: 0 -627px
+}
+
+.country.flag-dk {
+    background-position: 0 -638px
+}
+
+.country.flag-dm {
+    background-position: 0 -649px
+}
+
+.country.flag-do {
+    background-position: 0 -660px
+}
+
+.country.flag-dz {
+    background-position: 0 -671px
+}
+
+.country.flag-ec {
+    background-position: 0 -682px
+}
+
+.country.flag-ee {
+    background-position: 0 -693px
+}
+
+.country.flag-eg {
+    background-position: 0 -704px
+}
+
+.country.flag-eh {
+    background-position: 0 -715px
+}
+
+.country.flag-er {
+    background-position: 0 -726px
+}
+
+.country.flag-es {
+    background-position: 0 -737px
+}
+
+.country.flag-et {
+    background-position: 0 -748px
+}
+
+.country.flag-fi {
+    background-position: 0 -759px
+}
+
+.country.flag-fj {
+    background-position: 0 -770px
+}
+
+.country.flag-fk {
+    background-position: 0 -781px
+}
+
+.country.flag-fm {
+    background-position: 0 -792px
+}
+
+.country.flag-fo {
+    background-position: 0 -803px
+}
+
+.country.flag-fr {
+    background-position: 0 -814px
+}
+
+.country.flag-ga {
+    background-position: 0 -825px
+}
+
+.country.flag-gb {
+    background-position: 0 -836px
+}
+
+.country.flag-gd {
+    background-position: 0 -847px
+}
+
+.country.flag-ge {
+    background-position: 0 -858px
+}
+
+.country.flag-gf {
+    background-position: 0 -869px
+}
+
+.country.flag-gg {
+    background-position: 0 -880px
+}
+
+.country.flag-gh {
+    background-position: 0 -891px
+}
+
+.country.flag-gi {
+    background-position: 0 -902px
+}
+
+.country.flag-gl {
+    background-position: 0 -913px
+}
+
+.country.flag-gm {
+    background-position: 0 -924px
+}
+
+.country.flag-gn {
+    background-position: 0 -935px
+}
+
+.country.flag-gp {
+    background-position: 0 -946px
+}
+
+.country.flag-gq {
+    background-position: 0 -957px
+}
+
+.country.flag-gr {
+    background-position: 0 -968px
+}
+
+.country.flag-gs {
+    background-position: 0 -979px
+}
+
+.country.flag-gt {
+    background-position: 0 -990px
+}
+
+.country.flag-gu {
+    background-position: 0 -1001px
+}
+
+.country.flag-gw {
+    background-position: 0 -1012px
+}
+
+.country.flag-gy {
+    background-position: 0 -1023px
+}
+
+.country.flag-hk {
+    background-position: 0 -1034px
+}
+
+.country.flag-hm {
+    background-position: 0 -1045px
+}
+
+.country.flag-hn {
+    background-position: 0 -1056px
+}
+
+.country.flag-hr {
+    background-position: 0 -1067px
+}
+
+.country.flag-ht {
+    background-position: 0 -1078px
+}
+
+.country.flag-hu {
+    background-position: 0 -1089px
+}
+
+.country.flag-id {
+    background-position: 0 -1100px
+}
+
+.country.flag-ie {
+    background-position: 0 -1111px
+}
+
+.country.flag-il {
+    background-position: 0 -1122px
+}
+
+.country.flag-im {
+    background-position: 0 -1133px
+}
+
+.country.flag-in {
+    background-position: 0 -1144px
+}
+
+.country.flag-io {
+    background-position: 0 -1155px
+}
+
+.country.flag-iq {
+    background-position: 0 -1166px
+}
+
+.country.flag-ir {
+    background-position: 0 -1177px
+}
+
+.country.flag-is {
+    background-position: 0 -1188px
+}
+
+.country.flag-it {
+    background-position: 0 -1199px
+}
+
+.country.flag-je {
+    background-position: 0 -1210px
+}
+
+.country.flag-jm {
+    background-position: 0 -1221px
+}
+
+.country.flag-jo {
+    background-position: 0 -1232px
+}
+
+.country.flag-jp {
+    background-position: 0 -1243px
+}
+
+.country.flag-ke {
+    background-position: 0 -1254px
+}
+
+.country.flag-kg {
+    background-position: 0 -1265px
+}
+
+.country.flag-kh {
+    background-position: 0 -1276px
+}
+
+.country.flag-ki {
+    background-position: 0 -1287px
+}
+
+.country.flag-km {
+    background-position: 0 -1298px
+}
+
+.country.flag-kn {
+    background-position: 0 -1309px
+}
+
+.country.flag-kp {
+    background-position: 0 -1320px
+}
+
+.country.flag-kr {
+    background-position: 0 -1331px
+}
+
+.country.flag-kw {
+    background-position: 0 -1342px
+}
+
+.country.flag-ky {
+    background-position: 0 -1353px
+}
+
+.country.flag-kz {
+    background-position: 0 -1364px
+}
+
+.country.flag-la {
+    background-position: 0 -1375px
+}
+
+.country.flag-lb {
+    background-position: 0 -1386px
+}
+
+.country.flag-lc {
+    background-position: 0 -1397px
+}
+
+.country.flag-li {
+    background-position: 0 -1408px
+}
+
+.country.flag-lk {
+    background-position: 0 -1419px
+}
+
+.country.flag-lr {
+    background-position: 0 -1430px
+}
+
+.country.flag-ls {
+    background-position: 0 -1441px
+}
+
+.country.flag-lt {
+    background-position: 0 -1452px
+}
+
+.country.flag-lu {
+    background-position: 0 -1463px
+}
+
+.country.flag-lv {
+    background-position: 0 -1474px
+}
+
+.country.flag-ly {
+    background-position: 0 -1485px
+}
+
+.country.flag-ma {
+    background-position: 0 -1496px
+}
+
+.country.flag-mc {
+    background-position: 0 -1507px
+}
+
+.country.flag-md {
+    background-position: 0 -1518px
+}
+
+.country.flag-me {
+    background-position: 0 -1529px
+}
+
+.country.flag-mg {
+    background-position: 0 -1540px
+}
+
+.country.flag-mh {
+    background-position: 0 -1551px
+}
+
+.country.flag-mk {
+    background-position: 0 -1562px
+}
+
+.country.flag-ml {
+    background-position: 0 -1573px
+}
+
+.country.flag-mm {
+    background-position: 0 -1584px
+}
+
+.country.flag-mn {
+    background-position: 0 -1595px
+}
+
+.country.flag-mo {
+    background-position: 0 -1606px
+}
+
+.country.flag-mp {
+    background-position: 0 -1617px
+}
+
+.country.flag-mq {
+    background-position: 0 -1628px
+}
+
+.country.flag-mr {
+    background-position: 0 -1639px
+}
+
+.country.flag-ms {
+    background-position: 0 -1650px
+}
+
+.country.flag-mt {
+    background-position: 0 -1661px
+}
+
+.country.flag-mu {
+    background-position: 0 -1672px
+}
+
+.country.flag-mv {
+    background-position: 0 -1683px
+}
+
+.country.flag-mw {
+    background-position: 0 -1694px
+}
+
+.country.flag-mx {
+    background-position: 0 -1705px
+}
+
+.country.flag-my {
+    background-position: 0 -1716px
+}
+
+.country.flag-mz {
+    background-position: 0 -1727px
+}
+
+.country.flag-na {
+    background-position: 0 -1738px
+}
+
+.country.flag-nc {
+    background-position: 0 -1749px
+}
+
+.country.flag-ne {
+    background-position: 0 -1760px
+}
+
+.country.flag-nf {
+    background-position: 0 -1771px
+}
+
+.country.flag-ng {
+    background-position: 0 -1782px
+}
+
+.country.flag-ni {
+    background-position: 0 -1793px
+}
+
+.country.flag-nl {
+    background-position: 0 -1804px
+}
+
+.country.flag-no {
+    background-position: 0 -1815px
+}
+
+.country.flag-np {
+    background-position: 0 -1826px
+}
+
+.country.flag-nr {
+    background-position: 0 -1837px
+}
+
+.country.flag-nu {
+    background-position: 0 -1848px
+}
+
+.country.flag-nz {
+    background-position: 0 -1859px
+}
+
+.country.flag-om {
+    background-position: 0 -1870px
+}
+
+.country.flag-pa {
+    background-position: 0 -1881px
+}
+
+.country.flag-pe {
+    background-position: 0 -1892px
+}
+
+.country.flag-pf {
+    background-position: 0 -1903px
+}
+
+.country.flag-pg {
+    background-position: 0 -1914px
+}
+
+.country.flag-ph {
+    background-position: 0 -1925px
+}
+
+.country.flag-pk {
+    background-position: 0 -1936px
+}
+
+.country.flag-pl {
+    background-position: 0 -1947px
+}
+
+.country.flag-pm {
+    background-position: 0 -1958px
+}
+
+.country.flag-pn {
+    background-position: 0 -1969px
+}
+
+.country.flag-pr {
+    background-position: 0 -1980px
+}
+
+.country.flag-ps {
+    background-position: 0 -1991px
+}
+
+.country.flag-pt {
+    background-position: 0 -2002px
+}
+
+.country.flag-pw {
+    background-position: 0 -2013px
+}
+
+.country.flag-py {
+    background-position: 0 -2024px
+}
+
+.country.flag-qa {
+    background-position: 0 -2035px
+}
+
+.country.flag-re {
+    background-position: 0 -2046px
+}
+
+.country.flag-ro {
+    background-position: 0 -2057px
+}
+
+.country.flag-rs {
+    background-position: 0 -2068px
+}
+
+.country.flag-ru {
+    background-position: 0 -2079px
+}
+
+.country.flag-rw {
+    background-position: 0 -2090px
+}
+
+.country.flag-sa {
+    background-position: 0 -2101px
+}
+
+.country.flag-sb {
+    background-position: 0 -2112px
+}
+
+.country.flag-sc {
+    background-position: 0 -2123px
+}
+
+.country.flag-sd {
+    background-position: 0 -2134px
+}
+
+.country.flag-se {
+    background-position: 0 -2145px
+}
+
+.country.flag-sg {
+    background-position: 0 -2156px
+}
+
+.country.flag-sh {
+    background-position: 0 -2167px
+}
+
+.country.flag-si {
+    background-position: 0 -2178px
+}
+
+.country.flag-sj {
+    background-position: 0 -2189px
+}
+
+.country.flag-sk {
+    background-position: 0 -2200px
+}
+
+.country.flag-sl {
+    background-position: 0 -2211px
+}
+
+.country.flag-sm {
+    background-position: 0 -2222px
+}
+
+.country.flag-sn {
+    background-position: 0 -2233px
+}
+
+.country.flag-so {
+    background-position: 0 -2244px
+}
+
+.country.flag-sr {
+    background-position: 0 -2255px
+}
+
+.country.flag-st {
+    background-position: 0 -2266px
+}
+
+.country.flag-sv {
+    background-position: 0 -2277px
+}
+
+.country.flag-sy {
+    background-position: 0 -2288px
+}
+
+.country.flag-sz {
+    background-position: 0 -2299px
+}
+
+.country.flag-tc {
+    background-position: 0 -2310px
+}
+
+.country.flag-td {
+    background-position: 0 -2321px
+}
+
+.country.flag-tf {
+    background-position: 0 -2332px
+}
+
+.country.flag-tg {
+    background-position: 0 -2343px
+}
+
+.country.flag-th {
+    background-position: 0 -2354px
+}
+
+.country.flag-tj {
+    background-position: 0 -2365px
+}
+
+.country.flag-tk {
+    background-position: 0 -2376px
+}
+
+.country.flag-tl {
+    background-position: 0 -2387px
+}
+
+.country.flag-tm {
+    background-position: 0 -2398px
+}
+
+.country.flag-tn {
+    background-position: 0 -2409px
+}
+
+.country.flag-to {
+    background-position: 0 -2420px
+}
+
+.country.flag-tr {
+    background-position: 0 -2431px
+}
+
+.country.flag-tt {
+    background-position: 0 -2442px
+}
+
+.country.flag-tv {
+    background-position: 0 -2453px
+}
+
+.country.flag-tw {
+    background-position: 0 -2464px
+}
+
+.country.flag-tz {
+    background-position: 0 -2475px
+}
+
+.country.flag-ua {
+    background-position: 0 -2486px
+}
+
+.country.flag-ug {
+    background-position: 0 -2497px
+}
+
+.country.flag-uk {
+    background-position: 0 -2508px
+}
+
+.country.flag-um {
+    background-position: 0 -2519px
+}
+
+.country.flag-us {
+    background-position: 0 -2530px
+}
+
+.country.flag-uy {
+    background-position: 0 -2541px
+}
+
+.country.flag-uz {
+    background-position: 0 -2552px
+}
+
+.country.flag-va {
+    background-position: 0 -2563px
+}
+
+.country.flag-vc {
+    background-position: 0 -2574px
+}
+
+.country.flag-ve {
+    background-position: 0 -2585px
+}
+
+.country.flag-vg {
+    background-position: 0 -2596px
+}
+
+.country.flag-vi {
+    background-position: 0 -2607px
+}
+
+.country.flag-vn {
+    background-position: 0 -2618px
+}
+
+.country.flag-vu {
+    background-position: 0 -2629px
+}
+
+.country.flag-wf {
+    background-position: 0 -2640px
+}
+
+.country.flag-ws {
+    background-position: 0 -2651px
+}
+
+.country.flag-ye {
+    background-position: 0 -2662px
+}
+
+.country.flag-yt {
+    background-position: 0 -2673px
+}
+
+.country.flag-za {
+    background-position: 0 -2684px
+}
+
+.country.flag-zm {
+    background-position: 0 -2695px
+}
+
+.country.flag-zw {
+    background-position: 0 -2706px
+}
+
+.country.flag-en {
+    background-position: 0 -2717px
+}
+
+.country.flag-eu {
+    background-position: 0 -2728px
+}
+
+.country.flag-uk {
+    background-position: 0 -2739px
+}
+
+.country.flag-unknown {
+    background-position: 0 -2750px
+}
diff --git a/shared/css/static/ts/icons.scss b/shared/css/static/ts/icons.scss
index 58c69698..5dafecdc 100644
--- a/shared/css/static/ts/icons.scss
+++ b/shared/css/static/ts/icons.scss
@@ -8,6 +8,9 @@
     width: 16px;
     height: 16px;
 
+    flex-shrink: 0;
+    flex-grow: 0;
+
     background: url('../../../img/client_icon_sprite.svg'), url('../../img/client_icon_sprite.svg') no-repeat;
 }
 
@@ -1028,7 +1031,7 @@
 }
 .icon_x32.client-refresh {
     background-position: calc(-224px * 2) calc(-256px * 2);
-}pe the key you wish
+}
 .icon_x32.client-register {
     background-position: calc(-256px * 2) calc(-256px * 2);
 }
diff --git a/shared/css/static/ts/tab.scss b/shared/css/static/ts/tab.scss
index 0f6c28e9..a312ae96 100644
--- a/shared/css/static/ts/tab.scss
+++ b/shared/css/static/ts/tab.scss
@@ -1,7 +1,4 @@
 x-tab { display:none }
-x-content {
-	width: 100%;
-}
 
 .tab {
     padding: 2px;
@@ -18,15 +15,19 @@ x-content {
 .tab .tab-content {
     min-height: 200px;
 
-    border-color: #6f6f6f;
-    border-radius: 0px 2px 2px 2px;
-    border-style: solid;
-    overflow-y: auto;
+    border-radius: 0 2px 2px 2px;
+    border: solid #6f6f6f;
+    overflow-y: hidden;
     height: 100%;
     padding: 2px;
 
 	display: flex;
 	flex-grow: 1;
+
+    x-content {
+        overflow-y: auto;
+        width: 100%;
+    }
 }
 
 /*
@@ -39,7 +40,7 @@ x-content {
 */
 
 .tab .tab-header {
-    font-family: Arial;
+    font-family: Arial, serif;
     font-size: 12px;
     /*white-space: pre;*/
     line-height: 1;
@@ -64,14 +65,10 @@ x-content {
 .tab .tab-header .entry {
     background: #5f5f5f5f;
     display: inline-block;
-    border: #6f6f6f;
-    border-width: 1px;
-    border-style: solid;
+    border: 1px solid #6f6f6f;
     border-radius: 2px 2px 0px 0px;
     vertical-align: middle;
-    padding: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
+    padding: 2px 5px;
     cursor: pointer;
     flex-grow: 1;
 }
diff --git a/shared/html/index.php b/shared/html/index.php
index 8a0d60c3..b382804f 100644
--- a/shared/html/index.php
+++ b/shared/html/index.php
@@ -37,6 +37,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta name="description" content="TeaSpeak Web Client, connect to any TeaSpeak server without installing anything." />
+        <link rel="icon" href="img/favicon/teacup.png">
 
         <?php
             if(!$WEB_CLIENT) {
@@ -189,9 +190,9 @@
 
     <footer style="<?php echo $footer_style; ?>">
         <div class="container" style="display: flex; flex-direction: row; align-content: space-between;">
-            <div style="align-self: center; position: fixed; left: 5px;">Open source on <a href="https://github.com/TeaSpeak/TeaSpeak-Web" style="display: inline-block; position: relative">github.com</a></div>
-            <div style="align-self: center;">TeaSpeak Web client (<?php echo $version; ?>) by WolverinDEV</div>
-            <div style="align-self: center; position: fixed; right: 5px;"><?php echo $footer_forum; ?></div>
+            <div class="hide-small" style="align-self: center; position: fixed; left: 5px;">Open source on <a href="https://github.com/TeaSpeak/TeaSpeak-Web" style="display: inline-block; position: relative">github.com</a></div>
+            <div style="align-self: center;">TeaSpeak Web (<?php echo $version; ?>) by WolverinDEV</div>
+            <div class="hide-small" style="align-self: center; position: fixed; right: 5px;"><?php echo $footer_forum; ?></div>
         </div>
     </footer>
 </html>
\ No newline at end of file
diff --git a/shared/html/templates.html b/shared/html/templates.html
index 76903b09..d5beca49 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -6,7 +6,6 @@
         <title>TeaSpeak-Web client templates</title>
     </head>
     <body>
-        <!-- main frame TODO tr -->
         <script class="jsrender-template" id="tmpl_main" type="text/html">
             <div class="app-container">
                 <div class="app">
@@ -38,7 +37,7 @@
 
                             <div class="divider"></div>
 
-                            <div class="button-dropdown btn_away" title="{{tr 'Toggle away status' /}}">
+                            <div class="hide-small button-dropdown btn_away" title="{{tr 'Toggle away status' /}}">
                                 <div class="buttons">
                                     <div class="button icon_x32 client-away btn_away_toggle"></div>
                                     <div class="button-dropdown">
@@ -50,15 +49,36 @@
                                     <div class="btn_away_message"><div class="icon client-away"></div><a>{{tr "Set away message" /}}</a></div>
                                 </div>
                             </div>
-                            <div class="button btn_mute_input">
+                            <div class="hide-small button btn_mute_input">
                                 <div class="icon_x32 client-input_muted" title="{{tr 'Mute/unmute microphone' /}}"></div>
                             </div>
-                            <div class="button btn_mute_output">
+                            <div class="hide-small button btn_mute_output">
                                 <div class="icon_x32 client-output_muted" title="{{tr 'Mute/unmute headphones' /}}"></div>
                             </div>
-                            <div class="divider"></div>
 
-                            <div class="button-dropdown btn_token" title="{{tr 'Use token' /}}">
+                            <div class="show-small button-dropdown dropdown-audio" title="{{tr 'Audio settings' /}}">
+                                <div class="buttons">
+                                    <div class="button button-display icon_x32 client-music"></div>
+                                    <div class="button-dropdown">
+                                        <div class="arrow down"></div>
+                                    </div>
+                                </div>
+                                <div class="dropdown">
+                                    <div class="btn_mute_input" title="{{tr 'Mute/unmute microphone' /}}">
+                                        <div class="icon client-input_muted"></div>
+                                        <a>{{tr "Mute/unmute microphone" /}}</a>
+                                    </div>
+                                    <div class="btn_mute_output" title="{{tr 'Mute/unmute headphones' /}}">
+                                        <div class="icon client-output_muted"></div>
+                                        <a>{{tr "Mute/unmute headphones" /}}</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="divider"></div>
+                            <div class="button button-subscribe-mode">
+                                <div class="icon_x32" title="{{tr 'Toggle channel subscribe mode' /}}"></div>
+                            </div>
+                            <div class="hide-small button-dropdown btn_token" title="{{tr 'Use token' /}}">
                                 <div class="buttons">
                                     <div class="button icon_x32 client-token btn_token_use"></div>
                                     <div class="button-dropdown">
@@ -72,13 +92,37 @@
                             </div>
 
                             <div style="width: 100%"></div>
-                            <div class="button button-playlist-manage" title="{{tr 'Playlists' /}}">
-                                <div class="icon-playlist-manage"></div>
+
+                            <div class="show-small button-dropdown dropdown-servertools" title="{{tr 'Server tools' /}}">
+                                <div class="buttons">
+                                    <div class="button button-display icon_x32 client-virtualserver_edit"></div>
+                                    <div class="button-dropdown">
+                                        <div class="arrow down"></div>
+                                    </div>
+                                </div>
+                                <div class="dropdown right">
+                                    <div class="button-playlist-manage" title="{{tr 'Playlists' /}}">
+                                        <div class="icon icon-playlist-manage"></div>
+                                        <a>{{tr "Playlists" /}}</a>
+                                    </div>
+                                    <div class="btn_banlist" title="{{tr 'Banlist' /}}">
+                                        <div class="icon client-ban_list"></div>
+                                        <a>{{tr "Banlist" /}}</a>
+                                    </div>
+                                    <div class="btn_permissions" title="{{tr 'View/edit permissions' /}}">
+                                        <div class="icon client-permission_overview"></div>
+                                        <a>{{tr "View/edit permissions" /}}</a>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="button btn_banlist" title="{{tr 'Banlist' /}}">
+
+                            <div class="hide-small button button-playlist-manage" title="{{tr 'Playlists' /}}">
+                                <div class="icon_x32 icon-playlist-manage"></div>
+                            </div>
+                            <div class="hide-small button btn_banlist" title="{{tr 'Banlist' /}}">
                                 <div class="icon_x32 client-ban_list"></div>
                             </div>
-                            <div class="button btn_permissions" title="{{tr 'View/edit permissions' /}}">
+                            <div class="hide-small button btn_permissions" title="{{tr 'View/edit permissions' /}}">
                                 <div class="icon_x32 client-permission_overview"></div>
                             </div>
 
@@ -133,8 +177,11 @@
                             </div>
                         </div>
                         <div class="container-seperator vertical" seperator-id="seperator-main-info"></div>
-                        <div class="main_container container-info">
-                            <div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
+                        <div id="select_info" class="main_container container-info">
+                            <div class="select_info" style="width: 100%; max-width: 100%">
+                                <button type="button" class="close" aria-label="Close">
+                                    <span aria-hidden="true">×</span>
+                                </button>
                                 <div class="container-banner"></div>
                                 <!-- <div class="container-seperator horizontal" seperator-id="seperator-hostbanner-info"></div> -->
                                 <div class="container-select-info"></div>
@@ -1029,7 +1076,8 @@
 
                             <div class="group_box">
                                 <div class="header">{{tr "Microphone" /}}</div>
-                                <div class="content settings-microphone">
+                                <div class="content settings-microphone {{if !voice_available}}disabled{{/if}}">
+                                    {{if voice_available}}
                                     <div class="form-row settings-device settings-device-microphone">
                                         <div class="form-group settings-device-select">
                                             <label for="select-settings-microphone-device" class="bmd-label-static">{{tr "Device:" /}}</label>
@@ -1088,6 +1136,9 @@
                                             </div>
                                         </div>
                                     </div>
+                                    {{else}}
+                                    <div>{{tr "Voice had been disabled" /}}</div>
+                                    {{/if}}
                                 </div>
                             </div>
                             <div class="group_box">
@@ -2057,7 +2108,10 @@
             <table class="select_info_table">
                 <tr>
                     <td>{{tr "Name:" /}}</td>
-                    <td><node key="client_name"/></td>
+                    <td style="display: flex; flex-direction: row">
+                        <div style="margin-right: 3px" class="country flag-{{*:(data.property_client_country || 'xx').toLowerCase()}}" title="{{*:i18n.country_name(data.property_client_country || 'XX')}}"></div>
+                        <node key="client_name"/>
+                    </td>
                 </tr>
                 {{if property_client_description.length > 0}}
                 <tr>
@@ -2068,7 +2122,14 @@
                 {{if !client_is_query}}
                  <tr>
                     <td>{{tr "Version:"/}}</td>
-                    <td><a title="{{>property_client_version}}">{{*: data.property_client_version.split(" ")[0]; }}</a> on {{>property_client_platform}}</td>
+                    <td>
+                        <a title="{{>property_client_version}}">{{*: data.property_client_version.split(" ")[0]; }}</a>
+                        {{if client_is_web && false}} <!-- we cant show any browser info because every browser claims to be any browser as well -->
+                        <div class="icon client-message_info button-browser-info" title="{{tr 'Browser info' /}}"></div>
+                        {{/if}}
+                        on
+                        <a>{{>property_client_platform}}</a>
+                    </td>
                 </tr>
                 {{/if}}
                 <tr>
@@ -2242,26 +2303,11 @@
         </script>
         <script class="jsrender-template" id="tmpl_selected_hostbanner" type="text/html">
             <div class="hostbanner">
-                <a href="{{:property_virtualserver_hostbanner_url}}" target="_blank" style="display: flex; flex-direction: row; justify-content: center; height: 100%">
-
-                    <div style="
-                        background:center no-repeat url(
-                                    {{:property_virtualserver_hostbanner_gfx_url}}{{:cache_tag}}
-                        );
-
-                        background-position: center;
-                        {{if property_virtualserver_hostbanner_mode == 0}}
-
-                        {{else property_virtualserver_hostbanner_mode == 1}}
-                            width: 100%; height: auto;
-                        {{else property_virtualserver_hostbanner_mode == 2}}
-                            background-size:contain;
-                            width:100%;
-                            height:100%
-                        {{/if}}
-                        "
-
-                         alt="{{tr "Host banner"/}}"
+                <a class="image-container" href="{{:property_virtualserver_hostbanner_url}}" target="_blank">
+                    <div
+                        style="background: center no-repeat url({{:hostbanner_gfx_url}})"
+                        alt="{{tr 'Host banner'/}}"
+                        class="hostbanner-image hostbanner-mode-{{:property_virtualserver_hostbanner_mode}}"
                     ></div>
                 </a>
             </div>
@@ -2312,7 +2358,7 @@
                     </table>
                 </div>
 
-                <button class="button-update btn_update">{{tr "Update info"/}}</button>
+                <button class="button-update btn btn-success">{{tr "Update info"/}}</button>
             </div>
         </script>
         <script class="jsrender-template" id="tmpl_selected_channel" type="text/html">
diff --git a/shared/img/favicon/speaking.png b/shared/img/favicon/speaking.png
new file mode 100644
index 00000000..832c9752
Binary files /dev/null and b/shared/img/favicon/speaking.png differ
diff --git a/shared/img/favicon/teacup.png b/shared/img/favicon/teacup.png
new file mode 100644
index 00000000..4f895bcf
Binary files /dev/null and b/shared/img/favicon/teacup.png differ
diff --git a/shared/img/ts/flags b/shared/img/ts/flags
deleted file mode 100644
index 724b9f48..00000000
Binary files a/shared/img/ts/flags and /dev/null differ
diff --git a/shared/js/FileManager.ts b/shared/js/FileManager.ts
index 1c0ad5e1..262bc2f8 100644
--- a/shared/js/FileManager.ts
+++ b/shared/js/FileManager.ts
@@ -1,6 +1,10 @@
 /// <reference path="client.ts" />
 /// <reference path="connection/ConnectionBase.ts" />
 
+/*
+FIXME:  Dont use item storage with base64! Use the larger cache API and drop IE support!
+        https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage#Browser_compatibility
+*/
 class FileEntry {
     name: string;
     datetime: number;
diff --git a/shared/js/chat.ts b/shared/js/chat.ts
index bf76bf3e..cf43effb 100644
--- a/shared/js/chat.ts
+++ b/shared/js/chat.ts
@@ -1,3 +1,5 @@
+import LogType = log.LogType;
+
 enum ChatType {
     GENERAL,
     SERVER,
@@ -65,12 +67,11 @@ namespace MessageHelper {
             }
 
             if(objects.length < number)
-                console.warn(tr("Message to format contains invalid index (%o)"), number);
+                log.warn(LogCategory.GENERAL, tr("Message to format contains invalid index (%o)"), number);
 
             result.push(...formatElement(objects[number]));
             found = found + 1 + offset;
             begin = found + 1;
-            console.log(tr("Offset: %d Number: %d"), offset, number);
         } while(found++);
 
         return result;
@@ -93,7 +94,7 @@ namespace MessageHelper {
         });
 
         if(result.error) {
-            console.log("BBCode parse error: %o", result.errorQueue);
+            log.error(LogCategory.GENERAL, tr("BBCode parse error: %o"), result.errorQueue);
             return formatElement(message);
         }
 
@@ -104,7 +105,7 @@ namespace MessageHelper {
 class ChatMessage {
     date: Date;
     message: JQuery[];
-    private _htmlTag: JQuery<HTMLElement>;
+    private _html_tag: JQuery<HTMLElement>;
 
     constructor(message: JQuery[]) {
         this.date = new Date();
@@ -117,8 +118,8 @@ class ChatMessage {
         return str;
     }
 
-    get htmlTag() {
-        if(this._htmlTag) return this._htmlTag;
+    get html_tag() {
+        if(this._html_tag) return this._html_tag;
 
         let tag = $.spawn("div");
         tag.addClass("message");
@@ -128,26 +129,30 @@ class ChatMessage {
         dateTag.css("margin-right", "4px");
         dateTag.css("color", "dodgerblue");
 
-        this._htmlTag = tag;
+        this._html_tag = tag;
         tag.append(dateTag);
         this.message.forEach(e => e.appendTo(tag));
-        tag.hide();
         return tag;
     }
 }
 
 class ChatEntry {
-    handle: ChatBox;
+    readonly handle: ChatBox;
     type: ChatType;
     key: string;
     history: ChatMessage[];
 
+    owner_unique_id?: string;
+
     private _name: string;
-    private _htmlTag: any;
-    private _closeable: boolean;
-    private _unread : boolean;
+    private _html_tag: any;
+
+    private _flag_closeable: boolean = true;
+    private _flag_unread : boolean = false;
+    private _flag_offline: boolean = false;
+
     onMessageSend: (text: string) => void;
-    onClose: () => boolean;
+    onClose: () => boolean = () => true;
 
     constructor(handle, type : ChatType, key) {
         this.handle = handle;
@@ -155,8 +160,6 @@ class ChatEntry {
         this.key = key;
         this._name = key;
         this.history = [];
-
-        this.onClose = function () { return true; }
     }
 
     appendError(message: string, ...args) {
@@ -173,7 +176,7 @@ class ChatEntry {
         this.history.push(entry);
         while(this.history.length > 100) {
             let elm = this.history.pop_front();
-            elm.htmlTag.animate({opacity: 0}, 200, function () {
+            elm.html_tag.animate({opacity: 0}, 200, function () {
                 $(this).detach();
             });
         }
@@ -181,66 +184,75 @@ class ChatEntry {
             let box = $(this.handle.htmlTag).find(".messages");
             let mbox = $(this.handle.htmlTag).find(".message_box");
             let bottom : boolean = box.scrollTop() + box.height() + 1 >= mbox.height();
-            mbox.append(entry.htmlTag);
-            entry.htmlTag.show().css("opacity", "0").animate({opacity: 1}, 100);
+            mbox.append(entry.html_tag);
+            entry.html_tag.css("opacity", "0").animate({opacity: 1}, 100);
             if(bottom) box.scrollTop(mbox.height());
         } else {
-            this.unread = true;
+            this.flag_unread = true;
         }
     }
 
     displayHistory() {
-        this.unread = false;
-        let box = $(this.handle.htmlTag).find(".messages");
-        let mbox = $(this.handle.htmlTag).find(".message_box");
+        this.flag_unread = false;
+        let box = this.handle.htmlTag.find(".messages");
+        let mbox = box.find(".message_box").detach(); /* detach the message box to improve performance */
         mbox.empty();
 
         for(let e of this.history) {
-            mbox.append(e.htmlTag);
-            if(e.htmlTag.is(":hidden")) e.htmlTag.show();
+            mbox.append(e.html_tag);
+            /* TODO Is this really totally useless?
+                    Because its at least a performance bottleneck because is(...) recalculates the page style
+                if(e.htmlTag.is(":hidden"))
+                    e.htmlTag.show();
+             */
         }
 
+        mbox.appendTo(box);
         box.scrollTop(mbox.height());
     }
 
-    get htmlTag() {
-        if(this._htmlTag) return this._htmlTag;
+    get html_tag() {
+        if(this._html_tag)
+            return this._html_tag;
 
         let tag = $.spawn("div");
         tag.addClass("chat");
+        if(this._flag_unread)
+            tag.addClass('unread');
+        if(this._flag_offline)
+            tag.addClass('offline');
+        if(this._flag_closeable)
+            tag.addClass('closeable');
 
-        tag.append("<div class=\"chatIcon icon " + this.chatIcon() + "\"></div>");
-        tag.append("<a class='name'>" + this._name + "</a>");
+        tag.append($.spawn("div").addClass("chat-type icon " + this.chat_icon()));
+        tag.append($.spawn("a").addClass("name").text(this._name));
 
-        let closeTag = $.spawn("div");
-        closeTag.addClass("btn_close icon client-tab_close_button");
-        if(!this._closeable) closeTag.hide();
-        tag.append(closeTag);
+        let tag_close = $.spawn("div");
+        tag_close.addClass("btn_close icon client-tab_close_button");
+        if(!this._flag_closeable) tag_close.hide();
+        tag.append(tag_close);
 
-        const _this = this;
-        tag.click(function () {
-            _this.handle.activeChat = _this;
-        });
-        tag.on("contextmenu", function (e) {
+        tag.click(() => { this.handle.activeChat = this; });
+        tag.on("contextmenu", (e) => {
             e.preventDefault();
 
-            let actions = [];
+            let actions: ContextMenuEntry[] = [];
             actions.push({
                 type: MenuEntryType.ENTRY,
                 icon: "",
                 name: tr("Clear"),
                 callback: () => {
-                    _this.history = [];
-                    _this.displayHistory();
+                    this.history = [];
+                    this.displayHistory();
                 }
             });
-            if(_this.closeable) {
+            if(this.flag_closeable) {
                 actions.push({
                     type: MenuEntryType.ENTRY,
                     icon: "client-tab_close_button",
                     name: tr("Close"),
                     callback: () => {
-                        chat.deleteChat(_this);
+                        chat.deleteChat(this);
                     }
                 });
             }
@@ -251,18 +263,20 @@ class ChatEntry {
                 name: tr("Close all private tabs"),
                 callback: () => {
                     //TODO Implement this?
-                }
+                },
+                visible: false
             });
             spawn_context_menu(e.pageX, e.pageY, ...actions);
         });
 
-        closeTag.click(function () {
-            if($.isFunction(_this.onClose) && !_this.onClose()) return;
-            _this.handle.deleteChat(_this);
+        tag_close.click(() => {
+            if($.isFunction(this.onClose) && !this.onClose())
+                return;
+
+            this.handle.deleteChat(this);
         });
 
-        this._htmlTag = tag;
-        return tag;
+        return this._html_tag = tag;
     }
 
     focus() {
@@ -271,33 +285,37 @@ class ChatEntry {
     }
 
     set name(newName : string) {
-        console.log(tr("Change name!"));
         this._name = newName;
-        this.htmlTag.find(".name").text(this._name);
+        this.html_tag.find(".name").text(this._name);
     }
 
-    set closeable(flag : boolean) {
-        if(this._closeable == flag) return;
+    set flag_closeable(flag : boolean) {
+        if(this._flag_closeable == flag) return;
 
-        this._closeable = flag;
-        console.log(tr("Set closeable: ") + this._closeable);
-        if(flag) this.htmlTag.find(".btn_close").show();
-        else this.htmlTag.find(".btn_close").hide();
+        this._flag_closeable = flag;
+
+        this.html_tag.toggleClass('closeable', flag);
     }
 
-    set unread(flag : boolean) {
-        if(this._unread == flag) return;
-        this._unread = flag;
-        this.htmlTag.find(".chatIcon").attr("class", "chatIcon icon " + this.chatIcon());
-        if(flag) {
-            this.htmlTag.find(".name").css("color", "blue");
-        } else {
-            this.htmlTag.find(".name").css("color", "black");
-        }
+    set flag_unread(flag : boolean) {
+        if(this._flag_unread == flag) return;
+        this._flag_unread = flag;
+        this.html_tag.find(".chat-type").attr("class", "chat-type icon " + this.chat_icon());
+        this.html_tag.toggleClass('unread', flag);
     }
 
-    private chatIcon() : string {
-        if(this._unread) {
+    get flag_offline() { return this._flag_offline; }
+
+    set flag_offline(flag: boolean) {
+        if(flag == this._flag_offline)
+            return;
+
+        this._flag_offline = flag;
+        this.html_tag.toggleClass('offline', flag);
+    }
+
+    private chat_icon() : string {
+        if(this._flag_unread) {
             switch (this.type) {
                 case ChatType.CLIENT:
                     return "client-new_chat";
@@ -319,6 +337,10 @@ class ChatEntry {
 
 
 class ChatBox {
+    //https://regex101.com/r/YQbfcX/2
+    //static readonly URL_REGEX = /^(?<hostname>([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]{2,63})(?:\/(?<path>(?:[^\s?]+)?)(?:\?(?<query>\S+))?)?$/gm;
+    static readonly URL_REGEX = /^(([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]{2,63})(?:\/((?:[^\s?]+)?)(?:\?(\S+))?)?$/gm;
+
     htmlTag: JQuery;
     chats: ChatEntry[];
     private _activeChat: ChatEntry;
@@ -359,10 +381,11 @@ class ChatBox {
                     return;
 
                 chat.serverChat().appendMessage(tr("Failed to send text message."));
-                console.error(tr("Failed to send server text message: %o"), error);
+                log.error(LogCategory.GENERAL, tr("Failed to send server text message: %o"), error);
             });
         };
         this.serverChat().name = tr("Server chat");
+        this.serverChat().flag_closeable = false;
 
         this.createChat("chat_channel", ChatType.CHANNEL).onMessageSend = (text: string) => {
             if(!globalClient.serverConnection) {
@@ -372,10 +395,11 @@ class ChatBox {
 
             globalClient.serverConnection.command_helper.sendMessage(text, ChatType.CHANNEL, globalClient.getClient().currentChannel()).catch(error => {
                 chat.channelChat().appendMessage(tr("Failed to send text message."));
-                console.error(tr("Failed to send channel text message: %o"), error);
+                log.error(LogCategory.GENERAL, tr("Failed to send channel text message: %o"), error);
             });
         };
         this.channelChat().name = tr("Channel chat");
+        this.channelChat().flag_closeable = false;
 
         globalClient.permissions.initializedListener.push(flag => {
             if(flag) this.activeChat0(this._activeChat);
@@ -385,11 +409,15 @@ class ChatBox {
     createChat(key, type : ChatType = ChatType.CLIENT) : ChatEntry {
         let chat = new ChatEntry(this, type, key);
         this.chats.push(chat);
-        this.htmlTag.find(".chats").append(chat.htmlTag);
+        this.htmlTag.find(".chats").append(chat.html_tag);
         if(!this._activeChat) this.activeChat = chat;
         return chat;
     }
 
+    open_chats() : ChatEntry[] {
+        return this.chats;
+    }
+
     findChat(key : string) : ChatEntry {
         for(let e of this.chats)
             if(e.key == key) return e;
@@ -398,7 +426,7 @@ class ChatBox {
 
     deleteChat(chat : ChatEntry) {
         this.chats.remove(chat);
-        chat.htmlTag.detach();
+        chat.html_tag.detach();
         if(this._activeChat === chat) {
             if(this.chats.length > 0)
                 this.activeChat = this.chats.last();
@@ -414,8 +442,38 @@ class ChatBox {
         this._input_message.val("");
         this._input_message.trigger("input");
 
+        /* preprocessing text */
+        const words = text.split(/[ \n]/);
+        for(let index = 0; index < words.length; index++) {
+            const flag_escaped = words[index].startsWith('!');
+            const unescaped = flag_escaped ? words[index].substr(1) : words[index];
+
+            _try:
+            try {
+                const url = new URL(unescaped);
+                log.debug(LogCategory.GENERAL, tr("Chat message contains URL: %o"), url);
+                if(url.protocol !== 'http:' && url.protocol !== 'https:')
+                    break _try;
+                if(flag_escaped)
+                    words[index] = unescaped;
+                else {
+                    text = undefined;
+                    words[index] = "[url=" + url.toString() + "]" + url.toString() + "[/url]";
+                }
+            } catch(e) { /* word isn't an url */ }
+
+            if(unescaped.match(ChatBox.URL_REGEX)) {
+                if(flag_escaped)
+                    words[index] = unescaped;
+                else {
+                    text = undefined;
+                    words[index] = "[url=" + unescaped + "]" + unescaped + "[/url]";
+                }
+            }
+        }
+
         if(this._activeChat && $.isFunction(this._activeChat.onMessageSend))
-            this._activeChat.onMessageSend(text);
+            this._activeChat.onMessageSend(text || words.join(" "));
     }
 
     set activeChat(chat : ChatEntry) {
@@ -427,27 +485,27 @@ class ChatBox {
     private activeChat0(chat: ChatEntry) {
         this._activeChat = chat;
         for(let e of this.chats)
-            e.htmlTag.removeClass("active");
+            e.html_tag.removeClass("active");
 
-        let flagAllowSend = false;
+        let disable_input = !chat;
         if(this._activeChat) {
-            this._activeChat.htmlTag.addClass("active");
+            this._activeChat.html_tag.addClass("active");
             this._activeChat.displayHistory();
 
-            if(globalClient && globalClient.permissions && globalClient.permissions.initialized())
+            if(!disable_input && globalClient && globalClient.permissions && globalClient.permissions.initialized())
                 switch (this._activeChat.type) {
                     case ChatType.CLIENT:
-                        flagAllowSend = true;
+                        disable_input = false;
                         break;
                     case ChatType.SERVER:
-                        flagAllowSend = globalClient.permissions.neededPermission(PermissionType.B_CLIENT_SERVER_TEXTMESSAGE_SEND).granted(1);
+                        disable_input = !globalClient.permissions.neededPermission(PermissionType.B_CLIENT_SERVER_TEXTMESSAGE_SEND).granted(1);
                         break;
                     case ChatType.CHANNEL:
-                        flagAllowSend = globalClient.permissions.neededPermission(PermissionType.B_CLIENT_CHANNEL_TEXTMESSAGE_SEND).granted(1);
+                        disable_input = !globalClient.permissions.neededPermission(PermissionType.B_CLIENT_CHANNEL_TEXTMESSAGE_SEND).granted(1);
                         break;
                 }
         }
-        this._input_message.prop("disabled", !flagAllowSend);
+        this._input_message.prop("disabled", disable_input);
     }
 
     get activeChat(){ return this._activeChat; }
diff --git a/shared/js/client.ts b/shared/js/client.ts
index ef02b4a1..89250f16 100644
--- a/shared/js/client.ts
+++ b/shared/js/client.ts
@@ -50,7 +50,7 @@ enum ViewReasonId {
 class TSClient {
     channelTree: ChannelTree;
     serverConnection: connection.ServerConnection;
-    voiceConnection: VoiceConnection;
+    voiceConnection: VoiceConnection | undefined;
     fileManager: FileManager;
     selectInfo: InfoBar;
     permissions: PermissionManager;
@@ -69,10 +69,12 @@ class TSClient {
         this.fileManager = new FileManager(this);
         this.permissions = new PermissionManager(this);
         this.groups = new GroupManager(this);
-        this.voiceConnection = new VoiceConnection(this);
         this._ownEntry = new LocalClientEntry(this);
         this.controlBar = new ControlBar(this, $("#control_bar"));
         this.channelTree.registerClient(this._ownEntry);
+
+        if(!settings.static_global(Settings.KEY_DISABLE_VOICE, false))
+            this.voiceConnection = new VoiceConnection(this);
     }
 
     setup() {
@@ -114,7 +116,7 @@ class TSClient {
 
 
     getClient() : LocalClientEntry { return this._ownEntry; }
-    getClientId() { return this._clientId; } //TODO here
+    getClientId() { return this._clientId; }
 
     set clientId(id: number) {
         this._clientId = id;
@@ -136,11 +138,14 @@ class TSClient {
         this.channelTree.registerClient(this._ownEntry);
         settings.setServer(this.channelTree.server);
         this.permissions.requestPermissionList();
-        this.serverConnection.send_command("channelsubscribeall");
         if(this.groups.serverGroups.length == 0)
             this.groups.requestGroups();
         this.controlBar.updateProperties();
-        if(!this.voiceConnection.current_encoding_supported())
+        if(this.controlBar.channel_subscribe_all)
+            this.channelTree.subscribe_all_channels();
+        else
+            this.channelTree.unsubscribe_all_channels();
+        if(this.voiceConnection && !this.voiceConnection.current_encoding_supported())
             createErrorModal(tr("Codec encode type not supported!"), tr("Codec encode type " + VoiceConnectionType[this.voiceConnection.type] + " not supported by this browser!<br>Choose another one!")).open(); //TODO tr
     }
 
@@ -270,7 +275,8 @@ class TSClient {
         }
 
         this.channelTree.reset();
-        this.voiceConnection.dropSession();
+        if(this.voiceConnection)
+            this.voiceConnection.dropSession();
         if(this.serverConnection) this.serverConnection.disconnect();
         this.controlBar.update_connection_state();
         this.selectInfo.setCurrentSelected(null);
@@ -292,7 +298,7 @@ class TSClient {
             this._reconnect_timer = setTimeout(() => {
                 this._reconnect_timer = undefined;
                 chat.serverChat().appendMessage(tr("Reconnecting..."));
-                console.log(tr("Reconnecting..."));
+                log.info(LogCategory.NETWORKING, tr("Reconnecting..."))
                 this.startConnection(server_address.host + ":" + server_address.port, profile, name, password ? { password: password, hashed: true} : undefined);
                 this._reconnect_attempt = true;
             }, 5000);
diff --git a/shared/js/connection/CommandHandler.ts b/shared/js/connection/CommandHandler.ts
index 5fc46d82..2c3088aa 100644
--- a/shared/js/connection/CommandHandler.ts
+++ b/shared/js/connection/CommandHandler.ts
@@ -1,3 +1,4 @@
+
 namespace connection {
     export class ServerConnectionCommandBoss extends AbstractCommandHandlerBoss {
         constructor(connection: AbstractServerConnection) {
@@ -26,6 +27,7 @@ namespace connection {
             this["notifychannelmoved"] = this.handleNotifyChannelMoved;
             this["notifychanneledited"] = this.handleNotifyChannelEdited;
             this["notifytextmessage"] = this.handleNotifyTextMessage;
+            this["notifyclientchatclosed"] = this.handleNotifyClientChatClosed;
             this["notifyclientupdated"] = this.handleNotifyClientUpdated;
             this["notifyserveredited"] = this.handleNotifyServerEdited;
             this["notifyserverupdated"] = this.handleNotifyServerUpdated;
@@ -37,6 +39,9 @@ namespace connection {
             this["notifyservergroupclientadded"] = this.handleNotifyServerGroupClientAdd;
             this["notifyservergroupclientdeleted"] = this.handleNotifyServerGroupClientRemove;
             this["notifyclientchannelgroupchanged"] = this.handleNotifyClientChannelGroupChanged;
+
+            this["notifychannelsubscribed"] = this.handleNotifyChannelSubscribed;
+            this["notifychannelunsubscribed"] = this.handleNotifyChannelUnsubscribed;
         }
 
         handle_command(command: ServerCommand) : boolean {
@@ -81,8 +86,12 @@ namespace connection {
 
         handleCommandServerInit(json){
             //We could setup the voice channel
-            console.log(tr("Setting up voice"));
-            this.connection.client.voiceConnection.createSession();
+            if( this.connection.client.voiceConnection) {
+                console.log(tr("Setting up voice"));
+                this.connection.client.voiceConnection.createSession();
+            } else {
+                console.log(tr("Skipping voice setup (No voice bridge available)"));
+            }
 
 
             json = json[0]; //Only one bulk
@@ -285,6 +294,26 @@ namespace connection {
 
             client.updateVariables(...updates);
 
+            {
+                let client_chat = client.chat(false);
+                if(!client_chat) {
+                    for(const c of chat.open_chats()) {
+                        if(c.owner_unique_id == client.properties.client_unique_identifier && c.flag_offline) {
+                            client_chat = c;
+                            break;
+                        }
+                    }
+                }
+                if(client_chat) {
+                    client_chat.appendMessage(
+                        "{0}", true,
+                            $.spawn("div")
+                                .addClass("event-message event-partner-connect")
+                                .text(tr("Your chat partner has reconnected"))
+                    );
+                    client_chat.flag_offline = false;
+                }
+            }
             if(client instanceof LocalClientEntry)
                 this.connection.client.controlBar.updateVoice();
         }
@@ -364,6 +393,19 @@ namespace connection {
                 } else {
                     console.error(tr("Unknown client left reason!"));
                 }
+
+                {
+                    const chat = client.chat(false);
+                    if(chat) {
+                        chat.flag_offline = true;
+                        chat.appendMessage(
+                            "{0}", true,
+                            $.spawn("div")
+                                .addClass("event-message event-partner-disconnect")
+                                .text(tr("Your chat partner has disconnected"))
+                        );
+                    }
+                }
             }
 
             tree.deleteClient(client);
@@ -499,7 +541,6 @@ namespace connection {
         handleNotifyTextMessage(json) {
             json = json[0]; //Only one bulk
 
-            //TODO chat format?
             let mode = json["targetmode"];
             if(mode == 1){
                 let invoker = this.connection.client.channelTree.findClient(json["invokerid"]);
@@ -530,6 +571,38 @@ namespace connection {
             }
         }
 
+        handleNotifyClientChatClosed(json) {
+            json = json[0]; //Only one bulk
+
+            //Chat partner has closed the conversation
+
+            //clid: "6"
+            //cluid: "YoWmG+dRGKD+Rxb7SPLAM5+B9tY="
+
+            const client = this.connection.client.channelTree.findClient(json["clid"]);
+            if(!client) {
+                log.warn(LogCategory.GENERAL, tr("Received chat close for unknown client"));
+                return;
+            }
+            if(client.properties.client_unique_identifier !== json["cluid"]) {
+                log.warn(LogCategory.GENERAL, tr("Received chat close for client, but unique ids dosn't match. (expected %o, received %o)"), client.properties.client_unique_identifier, json["cluid"]);
+                return;
+            }
+
+            const chat = client.chat(false);
+            if(!chat) {
+                log.warn(LogCategory.GENERAL, tr("Received chat close for client, but we haven't a chat open."));
+                return;
+            }
+            chat.flag_offline = true;
+            chat.appendMessage(
+                "{0}", true,
+                $.spawn("div")
+                    .addClass("event-message event-partner-closed")
+                    .text(tr("Your chat partner has close the conversation"))
+            );
+        }
+
         handleNotifyClientUpdated(json) {
             json = json[0]; //Only one bulk
 
@@ -645,5 +718,31 @@ namespace connection {
                 sound.play(Sound.GROUP_CHANNEL_CHANGED_SELF);
             }
         }
+
+        handleNotifyChannelSubscribed(json) {
+            for(const entry of json) {
+                const channel = this.connection.client.channelTree.findChannel(entry["cid"]);
+                if(!channel) {
+                    console.warn(tr("Received channel subscribed for not visible channel (cid: %d)"), entry['cid']);
+                    continue;
+                }
+
+                channel.flag_subscribed = true;
+            }
+        }
+
+        handleNotifyChannelUnsubscribed(json) {
+            for(const entry of json) {
+                const channel = this.connection.client.channelTree.findChannel(entry["cid"]);
+                if(!channel) {
+                    console.warn(tr("Received channel unsubscribed for not visible channel (cid: %d)"), entry['cid']);
+                    continue;
+                }
+
+                channel.flag_subscribed = false;
+                for(const client of channel.clients(false))
+                    this.connection.client.channelTree.deleteClient(client);
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/shared/js/connection/ConnectionBase.ts b/shared/js/connection/ConnectionBase.ts
index eb82a4b0..0fab16ca 100644
--- a/shared/js/connection/ConnectionBase.ts
+++ b/shared/js/connection/ConnectionBase.ts
@@ -28,20 +28,37 @@ namespace connection {
         abstract disconnect(reason?: string) : Promise<void>;
 
         abstract support_voice() : boolean;
-        abstract voice_connection() : AbstractVoiceConnection | undefined;
+        abstract voice_connection() : voice.AbstractVoiceConnection | undefined;
 
         abstract command_handler_boss() : AbstractCommandHandlerBoss;
         abstract send_command(command: string, data?: any | any[], options?: CommandOptions) : Promise<CommandResult>;
     }
 
-    export abstract class AbstractVoiceConnection {
-        readonly connection: AbstractServerConnection;
+    export namespace voice {
+        export interface VoiceClient {
+            client_id: number;
 
-        protected constructor(connection: AbstractServerConnection) {
-            this.connection = connection;
+            callback_playback: () => any;
+            callback_timeout: () => any;
+            callback_stopped: () => any;
+
+            get_volume() : number;
+            set_volume(volume: number) : Promise<void>;
         }
 
-        abstract connected() : boolean;
+        export abstract class AbstractVoiceConnection {
+            readonly connection: AbstractServerConnection;
+
+            protected constructor(connection: AbstractServerConnection) {
+                this.connection = connection;
+            }
+
+            abstract connected() : boolean;
+
+            abstract register_client(client_id: number) : VoiceClient;
+            abstract availible_clients() : VoiceClient[];
+            abstract unregister_client(client: VoiceClient) : Promise<void>;
+        }
     }
 
     export class ServerCommand {
diff --git a/shared/js/connection/ServerConnection.ts b/shared/js/connection/ServerConnection.ts
index a28610e9..c3c3d74a 100644
--- a/shared/js/connection/ServerConnection.ts
+++ b/shared/js/connection/ServerConnection.ts
@@ -202,7 +202,12 @@ namespace connection {
                         arguments: json["data"]
                     });
                     group.end();
-                } else if(json["type"] === "WebRTC") this.client.voiceConnection.handleControlPacket(json);
+                } else if(json["type"] === "WebRTC") {
+                    if(this.client.voiceConnection)
+                        this.client.voiceConnection.handleControlPacket(json);
+                    else
+                        console.log(tr("Dropping WebRTC command packet, because we havent a bridge."))
+                }
                 else {
                     console.log(tr("Unknown command type %o"), json["type"]);
                 }
@@ -233,7 +238,7 @@ namespace connection {
         send_command(command: string, data?: any | any[], _options?: CommandOptions) : Promise<CommandResult> {
             if(!this._socket || !this.connected()) {
                 console.warn(tr("Tried to send a command without a valid connection."));
-                return;
+                return Promise.reject(tr("not connected"));
             }
 
             const options: CommandOptions = {};
@@ -241,6 +246,8 @@ namespace connection {
             Object.assign(options, _options);
 
             data = $.isArray(data) ? data : [data || {}];
+            if(data.length == 0) /* we require min one arg to append return_code */
+                data.push({});
 
             const _this = this;
             let result = new Promise<CommandResult>((resolve, failed) => {
@@ -299,7 +306,7 @@ namespace connection {
             return false;
         }
 
-        voice_connection(): connection.AbstractVoiceConnection | undefined {
+        voice_connection(): connection.voice.AbstractVoiceConnection | undefined {
             return undefined;
         }
 
diff --git a/shared/js/contextMenu.ts b/shared/js/contextMenu.ts
index 0688dac7..0df30449 100644
--- a/shared/js/contextMenu.ts
+++ b/shared/js/contextMenu.ts
@@ -52,8 +52,9 @@ interface ContextMenuEntry {
     name:       (() => string) | string;
     icon?:       (() => string) | string | JQuery;
     disabled?:  boolean;
-    invalidPermission?:  boolean;
+    visible?: boolean;
 
+    invalidPermission?:  boolean;
     sub_menu?: ContextMenuEntry[];
 }
 
@@ -96,8 +97,11 @@ function generate_tag(entry: ContextMenuEntry) : JQuery {
         if(entry.disabled || entry.invalidPermission) tag.addClass("disabled");
         else {
             let menu = $.spawn("div").addClass("sub-menu").addClass("context-menu");
-            for(let e of entry.sub_menu)
+            for(const e of entry.sub_menu) {
+                if(typeof(entry.visible) === 'boolean' && !entry.visible)
+                    continue;
                 menu.append(generate_tag(e));
+            }
             menu.appendTo(tag);
         }
         return tag;
@@ -111,7 +115,10 @@ function spawn_context_menu(x, y, ...entries: ContextMenuEntry[]) {
 
     contextMenuCloseFn = undefined;
 
-    for(let entry of entries){
+    for(const entry of entries){
+        if(typeof(entry.visible) === 'boolean' && !entry.visible)
+            continue;
+
         if(entry.type == MenuEntryType.CLOSE) {
             contextMenuCloseFn = entry.callback;
         } else
diff --git a/shared/js/i18n/country.ts b/shared/js/i18n/country.ts
new file mode 100644
index 00000000..7b5f7136
--- /dev/null
+++ b/shared/js/i18n/country.ts
@@ -0,0 +1,1504 @@
+
+namespace i18n {
+    interface CountryInfo {
+        name: string;
+        alpha_2: string;
+        alpha_3: string;
+        un_code: number;
+    }
+    const country_infos: CountryInfo[] = [];
+    const alpha_2_map: {[name: string]:CountryInfo} = {};
+
+    const fill_country_infos = (array: CountryInfo[]) => {
+        array.push({
+            name: "Afghanistan",
+            alpha_2: "AF",
+            alpha_3: "AFG",
+            un_code: 4
+        });
+        array.push({
+            name: "Aland Islands",
+            alpha_2: "AX",
+            alpha_3: "ALA",
+            un_code: 248
+        });
+        array.push({
+            name: "Albania",
+            alpha_2: "AL",
+            alpha_3: "ALB",
+            un_code: 8
+        });
+        array.push({
+            name: "Algeria",
+            alpha_2: "DZ",
+            alpha_3: "DZA",
+            un_code: 12
+        });
+        array.push({
+            name: "American Samoa",
+            alpha_2: "AS",
+            alpha_3: "ASM",
+            un_code: 16
+        });
+        array.push({
+            name: "Andorra",
+            alpha_2: "AD",
+            alpha_3: "AND",
+            un_code: 20
+        });
+        array.push({
+            name: "Angola",
+            alpha_2: "AO",
+            alpha_3: "AGO",
+            un_code: 24
+        });
+        array.push({
+            name: "Anguilla",
+            alpha_2: "AI",
+            alpha_3: "AIA",
+            un_code: 660
+        });
+        array.push({
+            name: "Antarctica",
+            alpha_2: "AQ",
+            alpha_3: "ATA",
+            un_code: 10
+        });
+        array.push({
+            name: "Antigua and Barbuda",
+            alpha_2: "AG",
+            alpha_3: "ATG",
+            un_code: 28
+        });
+        array.push({
+            name: "Argentina",
+            alpha_2: "AR",
+            alpha_3: "ARG",
+            un_code: 32
+        });
+        array.push({
+            name: "Armenia",
+            alpha_2: "AM",
+            alpha_3: "ARM",
+            un_code: 51
+        });
+        array.push({
+            name: "Aruba",
+            alpha_2: "AW",
+            alpha_3: "ABW",
+            un_code: 533
+        });
+        array.push({
+            name: "Australia",
+            alpha_2: "AU",
+            alpha_3: "AUS",
+            un_code: 36
+        });
+        array.push({
+            name: "Austria",
+            alpha_2: "AT",
+            alpha_3: "AUT",
+            un_code: 40
+        });
+        array.push({
+            name: "Azerbaijan",
+            alpha_2: "AZ",
+            alpha_3: "AZE",
+            un_code: 31
+        });
+        array.push({
+            name: "Bahamas",
+            alpha_2: "BS",
+            alpha_3: "BHS",
+            un_code: 44
+        });
+        array.push({
+            name: "Bahrain",
+            alpha_2: "BH",
+            alpha_3: "BHR",
+            un_code: 48
+        });
+        array.push({
+            name: "Bangladesh",
+            alpha_2: "BD",
+            alpha_3: "BGD",
+            un_code: 50
+        });
+        array.push({
+            name: "Barbados",
+            alpha_2: "BB",
+            alpha_3: "BRB",
+            un_code: 52
+        });
+        array.push({
+            name: "Belarus",
+            alpha_2: "BY",
+            alpha_3: "BLR",
+            un_code: 112
+        });
+        array.push({
+            name: "Belgium",
+            alpha_2: "BE",
+            alpha_3: "BEL",
+            un_code: 56
+        });
+        array.push({
+            name: "Belize",
+            alpha_2: "BZ",
+            alpha_3: "BLZ",
+            un_code: 84
+        });
+        array.push({
+            name: "Benin",
+            alpha_2: "BJ",
+            alpha_3: "BEN",
+            un_code: 204
+        });
+        array.push({
+            name: "Bermuda",
+            alpha_2: "BM",
+            alpha_3: "BMU",
+            un_code: 60
+        });
+        array.push({
+            name: "Bhutan",
+            alpha_2: "BT",
+            alpha_3: "BTN",
+            un_code: 64
+        });
+        array.push({
+            name: "Bolivia",
+            alpha_2: "BO",
+            alpha_3: "BOL",
+            un_code: 68
+        });
+        array.push({
+            name: "Bosnia and Herzegovina",
+            alpha_2: "BA",
+            alpha_3: "BIH",
+            un_code: 70
+        });
+        array.push({
+            name: "Botswana",
+            alpha_2: "BW",
+            alpha_3: "BWA",
+            un_code: 72
+        });
+        array.push({
+            name: "Bouvet Island",
+            alpha_2: "BV",
+            alpha_3: "BVT",
+            un_code: 74
+        });
+        array.push({
+            name: "Brazil",
+            alpha_2: "BR",
+            alpha_3: "BRA",
+            un_code: 76
+        });
+        array.push({
+            name: "British Virgin Islands",
+            alpha_2: "VG",
+            alpha_3: "VGB",
+            un_code: 92
+        });
+        array.push({
+            name: "British Indian Ocean Territory",
+            alpha_2: "IO",
+            alpha_3: "IOT",
+            un_code: 86
+        });
+        array.push({
+            name: "Brunei Darussalam",
+            alpha_2: "BN",
+            alpha_3: "BRN",
+            un_code: 96
+        });
+        array.push({
+            name: "Bulgaria",
+            alpha_2: "BG",
+            alpha_3: "BGR",
+            un_code: 100
+        });
+        array.push({
+            name: "Burkina Faso",
+            alpha_2: "BF",
+            alpha_3: "BFA",
+            un_code: 854
+        });
+        array.push({
+            name: "Burundi",
+            alpha_2: "BI",
+            alpha_3: "BDI",
+            un_code: 108
+        });
+        array.push({
+            name: "Cambodia",
+            alpha_2: "KH",
+            alpha_3: "KHM",
+            un_code: 116
+        });
+        array.push({
+            name: "Cameroon",
+            alpha_2: "CM",
+            alpha_3: "CMR",
+            un_code: 120
+        });
+        array.push({
+            name: "Canada",
+            alpha_2: "CA",
+            alpha_3: "CAN",
+            un_code: 124
+        });
+        array.push({
+            name: "Cape Verde",
+            alpha_2: "CV",
+            alpha_3: "CPV",
+            un_code: 132
+        });
+        array.push({
+            name: "Cayman Islands",
+            alpha_2: "KY",
+            alpha_3: "CYM",
+            un_code: 136
+        });
+        array.push({
+            name: "Central African Republic",
+            alpha_2: "CF",
+            alpha_3: "CAF",
+            un_code: 140
+        });
+        array.push({
+            name: "Chad",
+            alpha_2: "TD",
+            alpha_3: "TCD",
+            un_code: 148
+        });
+        array.push({
+            name: "Chile",
+            alpha_2: "CL",
+            alpha_3: "CHL",
+            un_code: 152
+        });
+        array.push({
+            name: "China",
+            alpha_2: "CN",
+            alpha_3: "CHN",
+            un_code: 156
+        });
+        array.push({
+            name: "Hong Kong, SAR China",
+            alpha_2: "HK",
+            alpha_3: "HKG",
+            un_code: 344
+        });
+        array.push({
+            name: "Macao, SAR China",
+            alpha_2: "MO",
+            alpha_3: "MAC",
+            un_code: 446
+        });
+        array.push({
+            name: "Christmas Island",
+            alpha_2: "CX",
+            alpha_3: "CXR",
+            un_code: 162
+        });
+        array.push({
+            name: "Cocos (Keeling) Islands",
+            alpha_2: "CC",
+            alpha_3: "CCK",
+            un_code: 166
+        });
+        array.push({
+            name: "Colombia",
+            alpha_2: "CO",
+            alpha_3: "COL",
+            un_code: 170
+        });
+        array.push({
+            name: "Comoros",
+            alpha_2: "KM",
+            alpha_3: "COM",
+            un_code: 174
+        });
+        array.push({
+            name: "Congo (Brazzaville)",
+            alpha_2: "CG",
+            alpha_3: "COG",
+            un_code: 178
+        });
+        array.push({
+            name: "Congo, (Kinshasa)",
+            alpha_2: "CD",
+            alpha_3: "COD",
+            un_code: 180
+        });
+        array.push({
+            name: "Cook Islands",
+            alpha_2: "CK",
+            alpha_3: "COK",
+            un_code: 184
+        });
+        array.push({
+            name: "Costa Rica",
+            alpha_2: "CR",
+            alpha_3: "CRI",
+            un_code: 188
+        });
+        array.push({
+            name: "Côte d'Ivoire",
+            alpha_2: "CI",
+            alpha_3: "CIV",
+            un_code: 384
+        });
+        array.push({
+            name: "Croatia",
+            alpha_2: "HR",
+            alpha_3: "HRV",
+            un_code: 191
+        });
+        array.push({
+            name: "Cuba",
+            alpha_2: "CU",
+            alpha_3: "CUB",
+            un_code: 192
+        });
+        array.push({
+            name: "Cyprus",
+            alpha_2: "CY",
+            alpha_3: "CYP",
+            un_code: 196
+        });
+        array.push({
+            name: "Czech Republic",
+            alpha_2: "CZ",
+            alpha_3: "CZE",
+            un_code: 203
+        });
+        array.push({
+            name: "Denmark",
+            alpha_2: "DK",
+            alpha_3: "DNK",
+            un_code: 208
+        });
+        array.push({
+            name: "Djibouti",
+            alpha_2: "DJ",
+            alpha_3: "DJI",
+            un_code: 262
+        });
+        array.push({
+            name: "Dominica",
+            alpha_2: "DM",
+            alpha_3: "DMA",
+            un_code: 212
+        });
+        array.push({
+            name: "Dominican Republic",
+            alpha_2: "DO",
+            alpha_3: "DOM",
+            un_code: 214
+        });
+        array.push({
+            name: "Ecuador",
+            alpha_2: "EC",
+            alpha_3: "ECU",
+            un_code: 218
+        });
+        array.push({
+            name: "Egypt",
+            alpha_2: "EG",
+            alpha_3: "EGY",
+            un_code: 818
+        });
+        array.push({
+            name: "El Salvador",
+            alpha_2: "SV",
+            alpha_3: "SLV",
+            un_code: 222
+        });
+        array.push({
+            name: "Equatorial Guinea",
+            alpha_2: "GQ",
+            alpha_3: "GNQ",
+            un_code: 226
+        });
+        array.push({
+            name: "Eritrea",
+            alpha_2: "ER",
+            alpha_3: "ERI",
+            un_code: 232
+        });
+        array.push({
+            name: "Estonia",
+            alpha_2: "EE",
+            alpha_3: "EST",
+            un_code: 233
+        });
+        array.push({
+            name: "Ethiopia",
+            alpha_2: "ET",
+            alpha_3: "ETH",
+            un_code: 231
+        });
+        array.push({
+            name: "Falkland Islands (Malvinas)",
+            alpha_2: "FK",
+            alpha_3: "FLK",
+            un_code: 238
+        });
+        array.push({
+            name: "Faroe Islands",
+            alpha_2: "FO",
+            alpha_3: "FRO",
+            un_code: 234
+        });
+        array.push({
+            name: "Fiji",
+            alpha_2: "FJ",
+            alpha_3: "FJI",
+            un_code: 242
+        });
+        array.push({
+            name: "Finland",
+            alpha_2: "FI",
+            alpha_3: "FIN",
+            un_code: 246
+        });
+        array.push({
+            name: "France",
+            alpha_2: "FR",
+            alpha_3: "FRA",
+            un_code: 250
+        });
+        array.push({
+            name: "French Guiana",
+            alpha_2: "GF",
+            alpha_3: "GUF",
+            un_code: 254
+        });
+        array.push({
+            name: "French Polynesia",
+            alpha_2: "PF",
+            alpha_3: "PYF",
+            un_code: 258
+        });
+        array.push({
+            name: "French Southern Territories",
+            alpha_2: "TF",
+            alpha_3: "ATF",
+            un_code: 260
+        });
+        array.push({
+            name: "Gabon",
+            alpha_2: "GA",
+            alpha_3: "GAB",
+            un_code: 266
+        });
+        array.push({
+            name: "Gambia",
+            alpha_2: "GM",
+            alpha_3: "GMB",
+            un_code: 270
+        });
+        array.push({
+            name: "Georgia",
+            alpha_2: "GE",
+            alpha_3: "GEO",
+            un_code: 268
+        });
+        array.push({
+            name: "Germany",
+            alpha_2: "DE",
+            alpha_3: "DEU",
+            un_code: 276
+        });
+        array.push({
+            name: "Ghana",
+            alpha_2: "GH",
+            alpha_3: "GHA",
+            un_code: 288
+        });
+        array.push({
+            name: "Gibraltar",
+            alpha_2: "GI",
+            alpha_3: "GIB",
+            un_code: 292
+        });
+        array.push({
+            name: "Greece",
+            alpha_2: "GR",
+            alpha_3: "GRC",
+            un_code: 300
+        });
+        array.push({
+            name: "Greenland",
+            alpha_2: "GL",
+            alpha_3: "GRL",
+            un_code: 304
+        });
+        array.push({
+            name: "Grenada",
+            alpha_2: "GD",
+            alpha_3: "GRD",
+            un_code: 308
+        });
+        array.push({
+            name: "Guadeloupe",
+            alpha_2: "GP",
+            alpha_3: "GLP",
+            un_code: 312
+        });
+        array.push({
+            name: "Guam",
+            alpha_2: "GU",
+            alpha_3: "GUM",
+            un_code: 316
+        });
+        array.push({
+            name: "Guatemala",
+            alpha_2: "GT",
+            alpha_3: "GTM",
+            un_code: 320
+        });
+        array.push({
+            name: "Guernsey",
+            alpha_2: "GG",
+            alpha_3: "GGY",
+            un_code: 831
+        });
+        array.push({
+            name: "Guinea",
+            alpha_2: "GN",
+            alpha_3: "GIN",
+            un_code: 324
+        });
+        array.push({
+            name: "Guinea-Bissau",
+            alpha_2: "GW",
+            alpha_3: "GNB",
+            un_code: 624
+        });
+        array.push({
+            name: "Guyana",
+            alpha_2: "GY",
+            alpha_3: "GUY",
+            un_code: 328
+        });
+        array.push({
+            name: "Haiti",
+            alpha_2: "HT",
+            alpha_3: "HTI",
+            un_code: 332
+        });
+        array.push({
+            name: "Heard and Mcdonald Islands",
+            alpha_2: "HM",
+            alpha_3: "HMD",
+            un_code: 334
+        });
+        array.push({
+            name: "Holy See (Vatican City State)",
+            alpha_2: "VA",
+            alpha_3: "VAT",
+            un_code: 336
+        });
+        array.push({
+            name: "Honduras",
+            alpha_2: "HN",
+            alpha_3: "HND",
+            un_code: 340
+        });
+        array.push({
+            name: "Hungary",
+            alpha_2: "HU",
+            alpha_3: "HUN",
+            un_code: 348
+        });
+        array.push({
+            name: "Iceland",
+            alpha_2: "IS",
+            alpha_3: "ISL",
+            un_code: 352
+        });
+        array.push({
+            name: "India",
+            alpha_2: "IN",
+            alpha_3: "IND",
+            un_code: 356
+        });
+        array.push({
+            name: "Indonesia",
+            alpha_2: "ID",
+            alpha_3: "IDN",
+            un_code: 360
+        });
+        array.push({
+            name: "Iran, Islamic Republic of",
+            alpha_2: "IR",
+            alpha_3: "IRN",
+            un_code: 364
+        });
+        array.push({
+            name: "Iraq",
+            alpha_2: "IQ",
+            alpha_3: "IRQ",
+            un_code: 368
+        });
+        array.push({
+            name: "Ireland",
+            alpha_2: "IE",
+            alpha_3: "IRL",
+            un_code: 372
+        });
+        array.push({
+            name: "Isle of Man",
+            alpha_2: "IM",
+            alpha_3: "IMN",
+            un_code: 833
+        });
+        array.push({
+            name: "Israel",
+            alpha_2: "IL",
+            alpha_3: "ISR",
+            un_code: 376
+        });
+        array.push({
+            name: "Italy",
+            alpha_2: "IT",
+            alpha_3: "ITA",
+            un_code: 380
+        });
+        array.push({
+            name: "Jamaica",
+            alpha_2: "JM",
+            alpha_3: "JAM",
+            un_code: 388
+        });
+        array.push({
+            name: "Japan",
+            alpha_2: "JP",
+            alpha_3: "JPN",
+            un_code: 392
+        });
+        array.push({
+            name: "Jersey",
+            alpha_2: "JE",
+            alpha_3: "JEY",
+            un_code: 832
+        });
+        array.push({
+            name: "Jordan",
+            alpha_2: "JO",
+            alpha_3: "JOR",
+            un_code: 400
+        });
+        array.push({
+            name: "Kazakhstan",
+            alpha_2: "KZ",
+            alpha_3: "KAZ",
+            un_code: 398
+        });
+        array.push({
+            name: "Kenya",
+            alpha_2: "KE",
+            alpha_3: "KEN",
+            un_code: 404
+        });
+        array.push({
+            name: "Kiribati",
+            alpha_2: "KI",
+            alpha_3: "KIR",
+            un_code: 296
+        });
+        array.push({
+            name: "Korea (North)",
+            alpha_2: "KP",
+            alpha_3: "PRK",
+            un_code: 408
+        });
+        array.push({
+            name: "Korea (South)",
+            alpha_2: "KR",
+            alpha_3: "KOR",
+            un_code: 410
+        });
+        array.push({
+            name: "Kuwait",
+            alpha_2: "KW",
+            alpha_3: "KWT",
+            un_code: 414
+        });
+        array.push({
+            name: "Kyrgyzstan",
+            alpha_2: "KG",
+            alpha_3: "KGZ",
+            un_code: 417
+        });
+        array.push({
+            name: "Lao PDR",
+            alpha_2: "LA",
+            alpha_3: "LAO",
+            un_code: 418
+        });
+        array.push({
+            name: "Latvia",
+            alpha_2: "LV",
+            alpha_3: "LVA",
+            un_code: 428
+        });
+        array.push({
+            name: "Lebanon",
+            alpha_2: "LB",
+            alpha_3: "LBN",
+            un_code: 422
+        });
+        array.push({
+            name: "Lesotho",
+            alpha_2: "LS",
+            alpha_3: "LSO",
+            un_code: 426
+        });
+        array.push({
+            name: "Liberia",
+            alpha_2: "LR",
+            alpha_3: "LBR",
+            un_code: 430
+        });
+        array.push({
+            name: "Libya",
+            alpha_2: "LY",
+            alpha_3: "LBY",
+            un_code: 434
+        });
+        array.push({
+            name: "Liechtenstein",
+            alpha_2: "LI",
+            alpha_3: "LIE",
+            un_code: 438
+        });
+        array.push({
+            name: "Lithuania",
+            alpha_2: "LT",
+            alpha_3: "LTU",
+            un_code: 440
+        });
+        array.push({
+            name: "Luxembourg",
+            alpha_2: "LU",
+            alpha_3: "LUX",
+            un_code: 442
+        });
+        array.push({
+            name: "Macedonia, Republic of",
+            alpha_2: "MK",
+            alpha_3: "MKD",
+            un_code: 807
+        });
+        array.push({
+            name: "Madagascar",
+            alpha_2: "MG",
+            alpha_3: "MDG",
+            un_code: 450
+        });
+        array.push({
+            name: "Malawi",
+            alpha_2: "MW",
+            alpha_3: "MWI",
+            un_code: 454
+        });
+        array.push({
+            name: "Malaysia",
+            alpha_2: "MY",
+            alpha_3: "MYS",
+            un_code: 458
+        });
+        array.push({
+            name: "Maldives",
+            alpha_2: "MV",
+            alpha_3: "MDV",
+            un_code: 462
+        });
+        array.push({
+            name: "Mali",
+            alpha_2: "ML",
+            alpha_3: "MLI",
+            un_code: 466
+        });
+        array.push({
+            name: "Malta",
+            alpha_2: "MT",
+            alpha_3: "MLT",
+            un_code: 470
+        });
+        array.push({
+            name: "Marshall Islands",
+            alpha_2: "MH",
+            alpha_3: "MHL",
+            un_code: 584
+        });
+        array.push({
+            name: "Martinique",
+            alpha_2: "MQ",
+            alpha_3: "MTQ",
+            un_code: 474
+        });
+        array.push({
+            name: "Mauritania",
+            alpha_2: "MR",
+            alpha_3: "MRT",
+            un_code: 478
+        });
+        array.push({
+            name: "Mauritius",
+            alpha_2: "MU",
+            alpha_3: "MUS",
+            un_code: 480
+        });
+        array.push({
+            name: "Mayotte",
+            alpha_2: "YT",
+            alpha_3: "MYT",
+            un_code: 175
+        });
+        array.push({
+            name: "Mexico",
+            alpha_2: "MX",
+            alpha_3: "MEX",
+            un_code: 484
+        });
+        array.push({
+            name: "Micronesia, Federated States of",
+            alpha_2: "FM",
+            alpha_3: "FSM",
+            un_code: 583
+        });
+        array.push({
+            name: "Moldova",
+            alpha_2: "MD",
+            alpha_3: "MDA",
+            un_code: 498
+        });
+        array.push({
+            name: "Monaco",
+            alpha_2: "MC",
+            alpha_3: "MCO",
+            un_code: 492
+        });
+        array.push({
+            name: "Mongolia",
+            alpha_2: "MN",
+            alpha_3: "MNG",
+            un_code: 496
+        });
+        array.push({
+            name: "Montenegro",
+            alpha_2: "ME",
+            alpha_3: "MNE",
+            un_code: 499
+        });
+        array.push({
+            name: "Montserrat",
+            alpha_2: "MS",
+            alpha_3: "MSR",
+            un_code: 500
+        });
+        array.push({
+            name: "Morocco",
+            alpha_2: "MA",
+            alpha_3: "MAR",
+            un_code: 504
+        });
+        array.push({
+            name: "Mozambique",
+            alpha_2: "MZ",
+            alpha_3: "MOZ",
+            un_code: 508
+        });
+        array.push({
+            name: "Myanmar",
+            alpha_2: "MM",
+            alpha_3: "MMR",
+            un_code: 104
+        });
+        array.push({
+            name: "Namibia",
+            alpha_2: "NA",
+            alpha_3: "NAM",
+            un_code: 516
+        });
+        array.push({
+            name: "Nauru",
+            alpha_2: "NR",
+            alpha_3: "NRU",
+            un_code: 520
+        });
+        array.push({
+            name: "Nepal",
+            alpha_2: "NP",
+            alpha_3: "NPL",
+            un_code: 524
+        });
+        array.push({
+            name: "Netherlands",
+            alpha_2: "NL",
+            alpha_3: "NLD",
+            un_code: 528
+        });
+        array.push({
+            name: "Netherlands Antilles",
+            alpha_2: "AN",
+            alpha_3: "ANT",
+            un_code: 530
+        });
+        array.push({
+            name: "New Caledonia",
+            alpha_2: "NC",
+            alpha_3: "NCL",
+            un_code: 540
+        });
+        array.push({
+            name: "New Zealand",
+            alpha_2: "NZ",
+            alpha_3: "NZL",
+            un_code: 554
+        });
+        array.push({
+            name: "Nicaragua",
+            alpha_2: "NI",
+            alpha_3: "NIC",
+            un_code: 558
+        });
+        array.push({
+            name: "Niger",
+            alpha_2: "NE",
+            alpha_3: "NER",
+            un_code: 562
+        });
+        array.push({
+            name: "Nigeria",
+            alpha_2: "NG",
+            alpha_3: "NGA",
+            un_code: 566
+        });
+        array.push({
+            name: "Niue",
+            alpha_2: "NU",
+            alpha_3: "NIU",
+            un_code: 570
+        });
+        array.push({
+            name: "Norfolk Island",
+            alpha_2: "NF",
+            alpha_3: "NFK",
+            un_code: 574
+        });
+        array.push({
+            name: "Northern Mariana Islands",
+            alpha_2: "MP",
+            alpha_3: "MNP",
+            un_code: 580
+        });
+        array.push({
+            name: "Norway",
+            alpha_2: "NO",
+            alpha_3: "NOR",
+            un_code: 578
+        });
+        array.push({
+            name: "Oman",
+            alpha_2: "OM",
+            alpha_3: "OMN",
+            un_code: 512
+        });
+        array.push({
+            name: "Pakistan",
+            alpha_2: "PK",
+            alpha_3: "PAK",
+            un_code: 586
+        });
+        array.push({
+            name: "Palau",
+            alpha_2: "PW",
+            alpha_3: "PLW",
+            un_code: 585
+        });
+        array.push({
+            name: "Palestinian Territory",
+            alpha_2: "PS",
+            alpha_3: "PSE",
+            un_code: 275
+        });
+        array.push({
+            name: "Panama",
+            alpha_2: "PA",
+            alpha_3: "PAN",
+            un_code: 591
+        });
+        array.push({
+            name: "Papua New Guinea",
+            alpha_2: "PG",
+            alpha_3: "PNG",
+            un_code: 598
+        });
+        array.push({
+            name: "Paraguay",
+            alpha_2: "PY",
+            alpha_3: "PRY",
+            un_code: 600
+        });
+        array.push({
+            name: "Peru",
+            alpha_2: "PE",
+            alpha_3: "PER",
+            un_code: 604
+        });
+        array.push({
+            name: "Philippines",
+            alpha_2: "PH",
+            alpha_3: "PHL",
+            un_code: 608
+        });
+        array.push({
+            name: "Pitcairn",
+            alpha_2: "PN",
+            alpha_3: "PCN",
+            un_code: 612
+        });
+        array.push({
+            name: "Poland",
+            alpha_2: "PL",
+            alpha_3: "POL",
+            un_code: 616
+        });
+        array.push({
+            name: "Portugal",
+            alpha_2: "PT",
+            alpha_3: "PRT",
+            un_code: 620
+        });
+        array.push({
+            name: "Puerto Rico",
+            alpha_2: "PR",
+            alpha_3: "PRI",
+            un_code: 630
+        });
+        array.push({
+            name: "Qatar",
+            alpha_2: "QA",
+            alpha_3: "QAT",
+            un_code: 634
+        });
+        array.push({
+            name: "Réunion",
+            alpha_2: "RE",
+            alpha_3: "REU",
+            un_code: 638
+        });
+        array.push({
+            name: "Romania",
+            alpha_2: "RO",
+            alpha_3: "ROU",
+            un_code: 642
+        });
+        array.push({
+            name: "Russian Federation",
+            alpha_2: "RU",
+            alpha_3: "RUS",
+            un_code: 643
+        });
+        array.push({
+            name: "Rwanda",
+            alpha_2: "RW",
+            alpha_3: "RWA",
+            un_code: 646
+        });
+        array.push({
+            name: "Saint-Barthélemy",
+            alpha_2: "BL",
+            alpha_3: "BLM",
+            un_code: 652
+        });
+        array.push({
+            name: "Saint Helena",
+            alpha_2: "SH",
+            alpha_3: "SHN",
+            un_code: 654
+        });
+        array.push({
+            name: "Saint Kitts and Nevis",
+            alpha_2: "KN",
+            alpha_3: "KNA",
+            un_code: 659
+        });
+        array.push({
+            name: "Saint Lucia",
+            alpha_2: "LC",
+            alpha_3: "LCA",
+            un_code: 662
+        });
+        array.push({
+            name: "Saint-Martin (French part)",
+            alpha_2: "MF",
+            alpha_3: "MAF",
+            un_code: 663
+        });
+        array.push({
+            name: "Saint Pierre and Miquelon",
+            alpha_2: "PM",
+            alpha_3: "SPM",
+            un_code: 666
+        });
+        array.push({
+            name: "Saint Vincent and Grenadines",
+            alpha_2: "VC",
+            alpha_3: "VCT",
+            un_code: 670
+        });
+        array.push({
+            name: "Samoa",
+            alpha_2: "WS",
+            alpha_3: "WSM",
+            un_code: 882
+        });
+        array.push({
+            name: "San Marino",
+            alpha_2: "SM",
+            alpha_3: "SMR",
+            un_code: 674
+        });
+        array.push({
+            name: "Sao Tome and Principe",
+            alpha_2: "ST",
+            alpha_3: "STP",
+            un_code: 678
+        });
+        array.push({
+            name: "Saudi Arabia",
+            alpha_2: "SA",
+            alpha_3: "SAU",
+            un_code: 682
+        });
+        array.push({
+            name: "Senegal",
+            alpha_2: "SN",
+            alpha_3: "SEN",
+            un_code: 686
+        });
+        array.push({
+            name: "Serbia",
+            alpha_2: "RS",
+            alpha_3: "SRB",
+            un_code: 688
+        });
+        array.push({
+            name: "Seychelles",
+            alpha_2: "SC",
+            alpha_3: "SYC",
+            un_code: 690
+        });
+        array.push({
+            name: "Sierra Leone",
+            alpha_2: "SL",
+            alpha_3: "SLE",
+            un_code: 694
+        });
+        array.push({
+            name: "Singapore",
+            alpha_2: "SG",
+            alpha_3: "SGP",
+            un_code: 702
+        });
+        array.push({
+            name: "Slovakia",
+            alpha_2: "SK",
+            alpha_3: "SVK",
+            un_code: 703
+        });
+        array.push({
+            name: "Slovenia",
+            alpha_2: "SI",
+            alpha_3: "SVN",
+            un_code: 705
+        });
+        array.push({
+            name: "Solomon Islands",
+            alpha_2: "SB",
+            alpha_3: "SLB",
+            un_code: 90
+        });
+        array.push({
+            name: "Somalia",
+            alpha_2: "SO",
+            alpha_3: "SOM",
+            un_code: 706
+        });
+        array.push({
+            name: "South Africa",
+            alpha_2: "ZA",
+            alpha_3: "ZAF",
+            un_code: 710
+        });
+        array.push({
+            name: "South Georgia and the South Sandwich Islands",
+            alpha_2: "GS",
+            alpha_3: "SGS",
+            un_code: 239
+        });
+        array.push({
+            name: "South Sudan",
+            alpha_2: "SS",
+            alpha_3: "SSD",
+            un_code: 728
+        });
+        array.push({
+            name: "Spain",
+            alpha_2: "ES",
+            alpha_3: "ESP",
+            un_code: 724
+        });
+        array.push({
+            name: "Sri Lanka",
+            alpha_2: "LK",
+            alpha_3: "LKA",
+            un_code: 144
+        });
+        array.push({
+            name: "Sudan",
+            alpha_2: "SD",
+            alpha_3: "SDN",
+            un_code: 736
+        });
+        array.push({
+            name: "Suriname",
+            alpha_2: "SR",
+            alpha_3: "SUR",
+            un_code: 740
+        });
+        array.push({
+            name: "Svalbard and Jan Mayen Islands",
+            alpha_2: "SJ",
+            alpha_3: "SJM",
+            un_code: 744
+        });
+        array.push({
+            name: "Swaziland",
+            alpha_2: "SZ",
+            alpha_3: "SWZ",
+            un_code: 748
+        });
+        array.push({
+            name: "Sweden",
+            alpha_2: "SE",
+            alpha_3: "SWE",
+            un_code: 752
+        });
+        array.push({
+            name: "Switzerland",
+            alpha_2: "CH",
+            alpha_3: "CHE",
+            un_code: 756
+        });
+        array.push({
+            name: "Syrian Arab Republic (Syria)",
+            alpha_2: "SY",
+            alpha_3: "SYR",
+            un_code: 760
+        });
+        array.push({
+            name: "Taiwan, Republic of China",
+            alpha_2: "TW",
+            alpha_3: "TWN",
+            un_code: 158
+        });
+        array.push({
+            name: "Tajikistan",
+            alpha_2: "TJ",
+            alpha_3: "TJK",
+            un_code: 762
+        });
+        array.push({
+            name: "Tanzania, United Republic of",
+            alpha_2: "TZ",
+            alpha_3: "TZA",
+            un_code: 834
+        });
+        array.push({
+            name: "Thailand",
+            alpha_2: "TH",
+            alpha_3: "THA",
+            un_code: 764
+        });
+        array.push({
+            name: "Timor-Leste",
+            alpha_2: "TL",
+            alpha_3: "TLS",
+            un_code: 626
+        });
+        array.push({
+            name: "Togo",
+            alpha_2: "TG",
+            alpha_3: "TGO",
+            un_code: 768
+        });
+        array.push({
+            name: "Tokelau",
+            alpha_2: "TK",
+            alpha_3: "TKL",
+            un_code: 772
+        });
+        array.push({
+            name: "Tonga",
+            alpha_2: "TO",
+            alpha_3: "TON",
+            un_code: 776
+        });
+        array.push({
+            name: "Trinidad and Tobago",
+            alpha_2: "TT",
+            alpha_3: "TTO",
+            un_code: 780
+        });
+        array.push({
+            name: "Tunisia",
+            alpha_2: "TN",
+            alpha_3: "TUN",
+            un_code: 788
+        });
+        array.push({
+            name: "Turkey",
+            alpha_2: "TR",
+            alpha_3: "TUR",
+            un_code: 792
+        });
+        array.push({
+            name: "Turkmenistan",
+            alpha_2: "TM",
+            alpha_3: "TKM",
+            un_code: 795
+        });
+        array.push({
+            name: "Turks and Caicos Islands",
+            alpha_2: "TC",
+            alpha_3: "TCA",
+            un_code: 796
+        });
+        array.push({
+            name: "Tuvalu",
+            alpha_2: "TV",
+            alpha_3: "TUV",
+            un_code: 798
+        });
+        array.push({
+            name: "Uganda",
+            alpha_2: "UG",
+            alpha_3: "UGA",
+            un_code: 800
+        });
+        array.push({
+            name: "Ukraine",
+            alpha_2: "UA",
+            alpha_3: "UKR",
+            un_code: 804
+        });
+        array.push({
+            name: "United Arab Emirates",
+            alpha_2: "AE",
+            alpha_3: "ARE",
+            un_code: 784
+        });
+        array.push({
+            name: "United Kingdom",
+            alpha_2: "GB",
+            alpha_3: "GBR",
+            un_code: 826
+        });
+        array.push({
+            name: "United States of America",
+            alpha_2: "US",
+            alpha_3: "USA",
+            un_code: 840
+        });
+        array.push({
+            name: "US Minor Outlying Islands",
+            alpha_2: "UM",
+            alpha_3: "UMI",
+            un_code: 581
+        });
+        array.push({
+            name: "Uruguay",
+            alpha_2: "UY",
+            alpha_3: "URY",
+            un_code: 858
+        });
+        array.push({
+            name: "Uzbekistan",
+            alpha_2: "UZ",
+            alpha_3: "UZB",
+            un_code: 860
+        });
+        array.push({
+            name: "Vanuatu",
+            alpha_2: "VU",
+            alpha_3: "VUT",
+            un_code: 548
+        });
+        array.push({
+            name: "Venezuela (Bolivarian Republic)",
+            alpha_2: "VE",
+            alpha_3: "VEN",
+            un_code: 862
+        });
+        array.push({
+            name: "Viet Nam",
+            alpha_2: "VN",
+            alpha_3: "VNM",
+            un_code: 704
+        });
+        array.push({
+            name: "Virgin Islands, US",
+            alpha_2: "VI",
+            alpha_3: "VIR",
+            un_code: 850
+        });
+        array.push({
+            name: "Wallis and Futuna Islands",
+            alpha_2: "WF",
+            alpha_3: "WLF",
+            un_code: 876
+        });
+        array.push({
+            name: "Western Sahara",
+            alpha_2: "EH",
+            alpha_3: "ESH",
+            un_code: 732
+        });
+        array.push({
+            name: "Yemen",
+            alpha_2: "YE",
+            alpha_3: "YEM",
+            un_code: 887
+        });
+        array.push({
+            name: "Zambia",
+            alpha_2: "ZM",
+            alpha_3: "ZMB",
+            un_code: 894
+        });
+        array.push({
+            name: "Zimbabwe",
+            alpha_2: "ZW",
+            alpha_3: "ZWE",
+            un_code: 716
+        });
+    }
+
+    export function country_name(alpha_code: string, fallback?: string) {
+        return (alpha_2_map[alpha_code.toUpperCase()] || {name: fallback || tr("unknown country")}).name;
+    }
+
+    fill_country_infos(country_infos);
+    for(const country of country_infos)
+        alpha_2_map[country.alpha_2] = country;
+}
diff --git a/shared/js/load.ts b/shared/js/load.ts
index 193a706c..fe24b230 100644
--- a/shared/js/load.ts
+++ b/shared/js/load.ts
@@ -53,7 +53,7 @@ namespace loader {
         DONE
     }
 
-    export let allow_cached_files: boolean = false;
+    export let cache_tag: string | undefined;
     let current_stage: Stage = Stage.INITIALIZING;
     const tasks: {[key:number]:Task[]} = {};
 
@@ -206,7 +206,7 @@ namespace loader {
 
                 document.getElementById("scripts").appendChild(tag);
 
-                tag.src = path + (allow_cached_files ? "" : "?_ts=" + Date.now());
+                tag.src = path + (cache_tag || "");
             });
         }
     }
@@ -315,7 +315,7 @@ namespace loader {
                 };
 
                 document.getElementById("style").appendChild(tag);
-                tag.href = path + (allow_cached_files ? "" : "?_ts=" + Date.now());
+                tag.href = path + (cache_tag || "");
             });
         }
     }
@@ -480,6 +480,7 @@ const loader_javascript = {
             //Load general API's
             "js/proto.js",
             "js/i18n/localize.js",
+            "js/i18n/country.js",
             "js/log.js",
 
             "js/sound/Sounds.js",
@@ -631,6 +632,7 @@ const loader_style = {
             "css/static/ts/tab.css",
             "css/static/ts/chat.css",
             "css/static/ts/icons.css",
+            "css/static/ts/country.css",
             "css/static/general.css",
             "css/static/modals.css",
             "css/static/modal-bookmarks.css",
@@ -662,7 +664,7 @@ const loader_style = {
 
 async function load_templates() {
     try {
-        const response = await $.ajax("templates.html" + (loader.allow_cached_files ? "" : "?_ts" + Date.now()));
+        const response = await $.ajax("templates.html" + (loader.cache_tag || ""));
 
         let node = document.createElement("html");
         node.innerHTML = response;
@@ -706,12 +708,11 @@ async function check_updates() {
 
     if(!app_version) {
         /* TODO add warning */
-        loader.allow_cached_files = false;
+        loader.cache_tag = "?_ts=" + Date.now();
         return;
     }
     const cached_version = localStorage.getItem("cached_version");
     if(!cached_version || cached_version != app_version) {
-        loader.allow_cached_files = false;
         loader.register_task(loader.Stage.LOADED, {
             priority: 0,
             name: "cached version updater",
@@ -719,11 +720,8 @@ async function check_updates() {
                 localStorage.setItem("cached_version", app_version);
             }
         });
-        /* loading screen */
-        return;
     }
-
-    loader.allow_cached_files = true;
+    loader.cache_tag = "?_version=" + app_version;
 }
 
 interface Window {
diff --git a/shared/js/log.ts b/shared/js/log.ts
index 3e887810..b3756240 100644
--- a/shared/js/log.ts
+++ b/shared/js/log.ts
@@ -7,7 +7,8 @@ enum LogCategory {
     GENERAL,
     NETWORKING,
     VOICE,
-    I18N
+    I18N,
+    IDENTITIES
 }
 
 namespace log {
@@ -21,14 +22,15 @@ namespace log {
 
     let category_mapping = new Map<number, string>([
         [LogCategory.CHANNEL,                   "Channel    "],
-        [LogCategory.CLIENT,                    "Channel    "],
-        [LogCategory.CHANNEL_PROPERTIES,        "Client     "],
+        [LogCategory.CHANNEL_PROPERTIES,        "Channel    "],
+        [LogCategory.CLIENT,                    "Client     "],
         [LogCategory.SERVER,                    "Server     "],
         [LogCategory.PERMISSIONS,               "Permission "],
         [LogCategory.GENERAL,                   "General    "],
         [LogCategory.NETWORKING,                "Network    "],
         [LogCategory.VOICE,                     "Voice      "],
-        [LogCategory.I18N,                      "I18N       "]
+        [LogCategory.I18N,                      "I18N       "],
+        [LogCategory.IDENTITIES,                "IDENTITIES "]
     ]);
 
     export let enabled_mapping = new Map<number, boolean>([
@@ -40,7 +42,8 @@ namespace log {
         [LogCategory.GENERAL,               true],
         [LogCategory.NETWORKING,            true],
         [LogCategory.VOICE,                 true],
-        [LogCategory.I18N,                  false]
+        [LogCategory.I18N,                  false],
+        [LogCategory.IDENTITIES,            true]
     ]);
 
     loader.register_task(loader.Stage.LOADED, {
@@ -109,10 +112,16 @@ namespace log {
         name = "[%s] " + name;
         optionalParams.unshift(category_mapping.get(category));
 
-        return new Group(level, category, name, optionalParams);
+        return new Group(GroupMode.PREFIX, level, category, name, optionalParams);
+    }
+
+    enum GroupMode {
+        NATIVE,
+        PREFIX
     }
 
     export class Group {
+        readonly mode: GroupMode;
         readonly level: LogType;
         readonly category: LogCategory;
         readonly enabled: boolean;
@@ -123,9 +132,11 @@ namespace log {
         private readonly optionalParams: any[][];
         private _collapsed: boolean = true;
         private initialized = false;
+        private _log_prefix: string;
 
-        constructor(level: LogType, category: LogCategory, name: string, optionalParams: any[][], owner: Group = undefined) {
+        constructor(mode: GroupMode, level: LogType, category: LogCategory, name: string, optionalParams: any[][], owner: Group = undefined) {
             this.level = level;
+            this.mode = mode;
             this.category = category;
             this.name = name;
             this.optionalParams = optionalParams;
@@ -133,7 +144,7 @@ namespace log {
         }
 
         group(level: LogType, name: string, ...optionalParams: any[]) : Group {
-            return new Group(level, this.category, name, optionalParams, this);
+            return new Group(this.mode, level, this.category, name, optionalParams, this);
         }
 
         collapsed(flag: boolean = true) : this {
@@ -146,19 +157,43 @@ namespace log {
                 return this;
 
             if(!this.initialized) {
-                if(this._collapsed && console.groupCollapsed)
-                    console.groupCollapsed(this.name, ...this.optionalParams);
-                else
-                    console.group(this.name, ...this.optionalParams);
+                if(this.mode == GroupMode.NATIVE) {
+                    if(this._collapsed && console.groupCollapsed)
+                        console.groupCollapsed(this.name, ...this.optionalParams);
+                    else
+                        console.group(this.name, ...this.optionalParams);
+                } else {
+                    this._log_prefix = "  ";
+                    let parent = this.owner;
+                    while(parent) {
+                        if(parent.mode == GroupMode.PREFIX)
+                            this._log_prefix = this._log_prefix + parent._log_prefix;
+                        else
+                            break;
+                    }
+                }
                 this.initialized = true;
             }
-            logDirect(this.level, message, ...optionalParams);
+            if(this.mode == GroupMode.NATIVE)
+                logDirect(this.level, message, ...optionalParams);
+            else
+                logDirect(this.level, this._log_prefix + message, ...optionalParams);
             return this;
         }
 
         end() {
-            if(this.initialized)
-                console.groupEnd();
+            if(this.initialized) {
+                if(this.mode == GroupMode.NATIVE)
+                    console.groupEnd();
+            }
+        }
+
+        get prefix() : string {
+            return this._log_prefix;
+        }
+
+        set prefix(prefix: string) {
+            this._log_prefix = prefix;
         }
     }
 }
\ No newline at end of file
diff --git a/shared/js/main.ts b/shared/js/main.ts
index d3d825ad..d1fbda10 100644
--- a/shared/js/main.ts
+++ b/shared/js/main.ts
@@ -238,15 +238,15 @@ function main() {
     chat = new ChatBox($("#chat"));
     globalClient.setup();
 
-    if(settings.static("connect_default", false) && settings.static("connect_address", "")) {
-        const profile_uuid = settings.static("connect_profile") as string;
+    if(settings.static(Settings.KEY_FLAG_CONNECT_DEFAULT, false) && settings.static(Settings.KEY_CONNECT_ADDRESS, "")) {
+        const profile_uuid = settings.static(Settings.KEY_CONNECT_PROFILE, (profiles.default_profile() || {id: 'default'}).id);
         console.log("UUID: %s", profile_uuid);
         const profile = profiles.find_profile(profile_uuid) || profiles.default_profile();
-        const address = settings.static("connect_address", "");
-        const username = settings.static("connect_username", "Another TeaSpeak user");
+        const address = settings.static(Settings.KEY_CONNECT_ADDRESS, "");
+        const username = settings.static(Settings.KEY_CONNECT_USERNAME, "Another TeaSpeak user");
 
-        const password = settings.static("connect_password", "");
-        const password_hashed = settings.static("connect_password_hashed", false);
+        const password = settings.static(Settings.KEY_CONNECT_PASSWORD, "");
+        const password_hashed = settings.static(Settings.KEY_FLAG_CONNECT_PASSWORD, false);
 
         if(profile && profile.valid()) {
             globalClient.startConnection(address, profile, username, password.length > 0 ? {
@@ -270,6 +270,7 @@ function main() {
             clearTimeout(_resize_timeout);
         _resize_timeout = setTimeout(() => {
             globalClient.channelTree.handle_resized();
+            globalClient.selectInfo.handle_resize();
         }, 1000);
     });
 
diff --git a/shared/js/profiles/identities/NameIdentity.ts b/shared/js/profiles/identities/NameIdentity.ts
index 236e1273..26bcd506 100644
--- a/shared/js/profiles/identities/NameIdentity.ts
+++ b/shared/js/profiles/identities/NameIdentity.ts
@@ -20,8 +20,7 @@ namespace profiles.identities {
                 authentication_method: this.identity.type(),
                 client_nickname: this.identity.name()
             }).catch(error => {
-                console.error(tr("Failed to initialize name based handshake. Error: %o"), error);
-
+                log.error(LogCategory.IDENTITIES, tr("Failed to initialize name based handshake. Error: %o"), error);
                 if(error instanceof CommandResult)
                     error = error.extra_message || error.message;
                 this.trigger_fail("failed to execute begin (" + error + ")");
diff --git a/shared/js/profiles/identities/TeaForumIdentity.ts b/shared/js/profiles/identities/TeaForumIdentity.ts
index af0914ca..c7088bfb 100644
--- a/shared/js/profiles/identities/TeaForumIdentity.ts
+++ b/shared/js/profiles/identities/TeaForumIdentity.ts
@@ -19,7 +19,7 @@ namespace profiles.identities {
                 authentication_method: this.identity.type(),
                 data: this.identity.data_json()
             }).catch(error => {
-                console.error(tr("Failed to initialize TeaForum based handshake. Error: %o"), error);
+                log.error(LogCategory.IDENTITIES, tr("Failed to initialize TeaForum based handshake. Error: %o"), error);
 
                 if(error instanceof CommandResult)
                     error = error.extra_message || error.message;
@@ -32,7 +32,7 @@ namespace profiles.identities {
             this.connection.send_command("handshakeindentityproof", {
                 proof: this.identity.data_sign()
             }).catch(error => {
-                console.error(tr("Failed to proof the identity. Error: %o"), error);
+                log.error(LogCategory.IDENTITIES, tr("Failed to proof the identity. Error: %o"), error);
 
                 if(error instanceof CommandResult)
                     error = error.extra_message || error.message;
diff --git a/shared/js/profiles/identities/TeamSpeakIdentity.ts b/shared/js/profiles/identities/TeamSpeakIdentity.ts
index b83f2b1a..2d3559d1 100644
--- a/shared/js/profiles/identities/TeamSpeakIdentity.ts
+++ b/shared/js/profiles/identities/TeamSpeakIdentity.ts
@@ -214,7 +214,7 @@ namespace profiles.identities {
                 authentication_method: this.identity.type(),
                 publicKey: this.identity.public_key
             }).catch(error => {
-                console.error(tr("Failed to initialize TeamSpeak based handshake. Error: %o"), error);
+                log.error(LogCategory.IDENTITIES, tr("Failed to initialize TeamSpeak based handshake. Error: %o"), error);
 
                 if(error instanceof CommandResult)
                     error = error.extra_message || error.message;
@@ -230,7 +230,7 @@ namespace profiles.identities {
 
             this.identity.sign_message(json[0]["message"], json[0]["digest"]).then(proof => {
                 this.connection.send_command("handshakeindentityproof", {proof: proof}).catch(error => {
-                    console.error(tr("Failed to proof the identity. Error: %o"), error);
+                    log.error(LogCategory.IDENTITIES, tr("Failed to proof the identity. Error: %o"), error);
 
                     if(error instanceof CommandResult)
                         error = error.extra_message || error.message;
@@ -281,7 +281,7 @@ namespace profiles.identities {
                     resolve();
                 };
                 this._worker.onerror = event => {
-                    console.error("POW Worker error %o", event);
+                    log.error(LogCategory.IDENTITIES, tr("POW Worker error %o"), event);
                     clearTimeout(timeout_id);
                     reject("Failed to load worker (" + event.message + ")");
                 };
@@ -394,7 +394,7 @@ namespace profiles.identities {
                     };
                 });
             } catch(error) {
-                console.warn("Failed to finalize POW worker! (%o)", error);
+                log.error(LogCategory.IDENTITIES, tr("Failed to finalize POW worker! (%o)"), error);
             }
 
             this._worker.terminate();
@@ -402,7 +402,7 @@ namespace profiles.identities {
         }
 
         private handle_message(message: any) {
-            console.log("Received message: %o", message);
+            log.info(LogCategory.IDENTITIES, tr("Received message: %o"), message);
         }
     }
 
@@ -412,7 +412,7 @@ namespace profiles.identities {
             try {
                 key = await crypto.subtle.generateKey({name:'ECDH', namedCurve: 'P-256'}, true, ["deriveKey"]);
             } catch(e) {
-                console.error(tr("Could not generate a new key: %o"), e);
+                log.error(LogCategory.IDENTITIES, tr("Could not generate a new key: %o"), e);
                 throw "Failed to generate keypair";
             }
             const private_key = await CryptoHelper.export_ecc_key(key.privateKey, false);
@@ -483,7 +483,7 @@ namespace profiles.identities {
 
             if(this.private_key && (typeof(initialize) === "undefined" || initialize)) {
                 this.initialize().catch(error => {
-                    console.error("Failed to initialize TeaSpeakIdentity (%s)", error);
+                    log.error(LogCategory.IDENTITIES, "Failed to initialize TeaSpeakIdentity (%s)", error);
                     this._initialized = false;
                 });
             }
@@ -633,7 +633,7 @@ namespace profiles.identities {
                 try {
                     await Promise.all(initialize_promise);
                 } catch(error) {
-                    console.error(error);
+                    log.error(LogCategory.IDENTITIES, error);
                     throw "failed to initialize";
                 }
             }
@@ -688,7 +688,7 @@ namespace profiles.identities {
                                     if(worker.current_level() > best_level) {
                                         this.hash_number = worker.current_hash();
 
-                                        console.log("Found new best at %s (%d). Old was %d", this.hash_number, worker.current_level(), best_level);
+                                        log.info(LogCategory.IDENTITIES, "Found new best at %s (%d). Old was %d", this.hash_number, worker.current_level(), best_level);
                                         best_level = worker.current_level();
                                         if(callback_level)
                                             callback_level(best_level);
@@ -712,7 +712,7 @@ namespace profiles.identities {
                             }).catch(error => {
                                 worker_promise.remove(p);
 
-                                console.warn("POW worker error %o", error);
+                                log.warn(LogCategory.IDENTITIES, "POW worker error %o", error);
                                 reject(error);
 
                                 return Promise.resolve();
@@ -736,7 +736,7 @@ namespace profiles.identities {
                 try {
                     await Promise.all(finalize_promise);
                 } catch(error) {
-                    console.error(error);
+                    log.error(LogCategory.IDENTITIES, error);
                     throw "failed to finalize";
                 }
             }
@@ -761,14 +761,14 @@ namespace profiles.identities {
             try {
                 this._crypto_key_sign = await crypto.subtle.importKey("jwk", jwk, {name:'ECDSA', namedCurve: 'P-256'}, false, ["sign"]);
             } catch(error) {
-                console.error(error);
+                log.error(LogCategory.IDENTITIES, error);
                 throw "failed to create crypto sign key";
             }
 
             try {
                 this._crypto_key = await crypto.subtle.importKey("jwk", jwk, {name:'ECDH', namedCurve: 'P-256'}, true, ["deriveKey"]);
             } catch(error) {
-                console.error(error);
+                log.error(LogCategory.IDENTITIES, error);
                 throw "failed to create crypto key";
             }
 
@@ -776,7 +776,7 @@ namespace profiles.identities {
                 this.public_key = await CryptoHelper.export_ecc_key(this._crypto_key, true);
                 this._unique_id = base64ArrayBuffer(await sha.sha1(this.public_key));
             } catch(error) {
-                console.error(error);
+                log.error(LogCategory.IDENTITIES, error);
                 throw "failed to calculate unique id";
             }
 
diff --git a/shared/js/settings.ts b/shared/js/settings.ts
index 6d224c36..79f7e2d3 100644
--- a/shared/js/settings.ts
+++ b/shared/js/settings.ts
@@ -12,6 +12,15 @@ if(typeof(customElements) !== "undefined") {
     }
 }
 
+/* T = value type */
+interface SettingsKey<T> {
+    key: string;
+
+    fallback_keys?: string | string[];
+    fallback_imports?: {[key: string]:(value: string) => T};
+    description?: string;
+}
+
 class StaticSettings {
     private static _instance: StaticSettings;
     static get instance() : StaticSettings {
@@ -20,12 +29,14 @@ class StaticSettings {
         return this._instance;
     }
 
-    protected static transformStO?<T>(input?: string, _default?: T) : T {
+    protected static transformStO?<T>(input?: string, _default?: T, default_type?: string) : T {
+        default_type = default_type || typeof _default;
+
         if      (typeof input === "undefined") return _default;
-        if      (typeof _default === "string")     return input as any;
-        else if (typeof _default === "number")     return parseInt(input) as any;
-        else if (typeof _default === "boolean")    return (input == "1" || input == "true") as any;
-        else if (typeof _default === "undefined")   return input as any;
+        if      (default_type === "string")     return input as any;
+        else if (default_type === "number")     return parseInt(input) as any;
+        else if (default_type === "boolean")    return (input == "1" || input == "true") as any;
+        else if (default_type === "undefined")   return input as any;
         return JSON.parse(input) as any;
     }
 
@@ -37,6 +48,35 @@ class StaticSettings {
         return JSON.stringify(input);
     }
 
+    protected static resolveKey<T>(key: SettingsKey<T>, _default: T, resolver: (key: string) => string | boolean, default_type?: string) : T {
+        let value = resolver(key.key);
+        if(!value) {
+            /* trying fallbacks */
+            for(const fallback of key.fallback_keys || []) {
+                value = resolver(fallback);
+                if(typeof(value) === "string") {
+                    /* fallback key succeeded */
+                    const importer = (key.fallback_imports || {})[fallback];
+                    if(importer)
+                        return importer(value);
+                    break;
+                }
+            }
+        }
+        if(typeof(value) !== 'string')
+            return _default;
+
+        return StaticSettings.transformStO(value as string, _default, default_type);
+    }
+
+    protected static keyify<T>(key: string | SettingsKey<T>) : SettingsKey<T> {
+        if(typeof(key) === "string")
+            return {key: key};
+        if(typeof(key) === "object" && key.key)
+            return key;
+        throw "key is not a key";
+    }
+
     protected _handle: StaticSettings;
     protected _staticPropsTag: JQuery;
 
@@ -59,25 +99,98 @@ class StaticSettings {
         });
     }
 
-    static?<T>(key: string, _default?: T) : T {
-        if(this._handle) return this._handle.static<T>(key, _default);
-        let result = this._staticPropsTag.find("[key='" + key + "']");
-        return StaticSettings.transformStO(result.length > 0 ? decodeURIComponent(result.last().attr("value")) : undefined, _default);
+    static?<T>(key: string | SettingsKey<T>, _default?: T, default_type?: string) : T {
+        if(this._handle) return this._handle.static<T>(key, _default, default_type);
+
+        key = StaticSettings.keyify(key);
+        return StaticSettings.resolveKey(key, _default, key => {
+            let result = this._staticPropsTag.find("[key='" + key + "']");
+            if(result.length > 0)
+                return decodeURIComponent(result.last().attr('value'));
+            return false;
+        }, default_type);
     }
 
-    deleteStatic(key: string) {
+    deleteStatic<T>(key: string | SettingsKey<T>) {
         if(this._handle) {
-            this._handle.deleteStatic(key);
+            this._handle.deleteStatic<T>(key);
             return;
         }
-        let result = this._staticPropsTag.find("[key='" + key + "']");
+
+        key = StaticSettings.keyify(key);
+        let result = this._staticPropsTag.find("[key='" + key.key + "']");
         if(result.length != 0) result.detach();
     }
 }
 
 class Settings extends StaticSettings {
-    static readonly KEY_DISABLE_CONTEXT_MENU = "disableContextMenu";
-    static readonly KEY_DISABLE_UNLOAD_DIALOG = "disableUnloadDialog";
+    static readonly KEY_DISABLE_CONTEXT_MENU: SettingsKey<boolean> = {
+        key: 'disableContextMenu',
+        description: 'Disable the context menu for the channel tree which allows to debug the DOM easier'
+    };
+    static readonly KEY_DISABLE_UNLOAD_DIALOG: SettingsKey<boolean> = {
+        key: 'disableUnloadDialog',
+        description: 'Disables the unload popup on side closing'
+    };
+    static readonly KEY_DISABLE_VOICE: SettingsKey<boolean> = {
+        key: 'disableVoice',
+        description: 'Disables the voice bridge. If disabled, the audio and codec workers aren\'t required anymore'
+    };
+
+    /* Control bar */
+    static readonly KEY_CONTROL_MUTE_INPUT: SettingsKey<boolean> = {
+        key: 'mute_input'
+    };
+    static readonly KEY_CONTROL_MUTE_OUTPUT: SettingsKey<boolean> = {
+        key: 'mute_output'
+    };
+    static readonly KEY_CONTROL_SHOW_QUERIES: SettingsKey<boolean> = {
+        key: 'show_server_queries'
+    };
+    static readonly KEY_CONTROL_CHANNEL_SUBSCRIBE_ALL: SettingsKey<boolean> = {
+        key: 'channel_subscribe_all'
+    };
+
+    /* Connect parameters */
+    static readonly KEY_FLAG_CONNECT_DEFAULT: SettingsKey<boolean> = {
+        key: 'connect_default'
+    };
+    static readonly KEY_CONNECT_ADDRESS: SettingsKey<string> = {
+        key: 'connect_address'
+    };
+    static readonly KEY_CONNECT_PROFILE: SettingsKey<string> = {
+        key: 'connect_profile'
+    };
+    static readonly KEY_CONNECT_USERNAME: SettingsKey<string> = {
+        key: 'connect_username'
+    };
+    static readonly KEY_CONNECT_PASSWORD: SettingsKey<string> = {
+        key: 'connect_password'
+    };
+    static readonly KEY_FLAG_CONNECT_PASSWORD: SettingsKey<boolean> = {
+        key: 'connect_password_hashed'
+    };
+
+    static readonly FN_SERVER_CHANNEL_SUBSCRIBE_MODE: (channel: ChannelEntry) => SettingsKey<ChannelSubscribeMode> = channel => {
+        return {
+            key: 'channel_subscribe_mode_' + channel.getChannelId()
+        }
+    };
+
+    static readonly KEYS = (() => {
+        const result = [];
+
+        for(const key in Settings) {
+            if(!key.toUpperCase().startsWith("KEY_"))
+                continue;
+            if(key.toUpperCase() == "KEYS")
+                continue;
+
+            result.push(key);
+        }
+
+        return result;
+    })();
 
     private static readonly UPDATE_DIRECT: boolean = true;
     private cacheGlobal = {};
@@ -96,37 +209,41 @@ class Settings extends StaticSettings {
         }, 5 * 1000);
     }
 
-    static_global?<T>(key: string, _default?: T) : T {
-        let _static = this.static<string>(key);
-        if(_static) return StaticSettings.transformStO(_static, _default);
+    static_global?<T>(key: string | SettingsKey<T>, _default?: T) : T {
+        const default_object = { seed: Math.random() } as any;
+        let _static = this.static(key, default_object, typeof _default);
+        if(_static !== default_object) return StaticSettings.transformStO(_static, _default);
         return this.global<T>(key, _default);
     }
 
-    global?<T>(key: string, _default?: T) : T {
-        let result = this.cacheGlobal[key];
-        return StaticSettings.transformStO(result, _default);
+    global?<T>(key: string | SettingsKey<T>, _default?: T) : T {
+        return StaticSettings.resolveKey(Settings.keyify(key), _default, key => this.cacheGlobal[key]);
     }
 
-    server?<T>(key: string, _default?: T) : T {
-        let result = this.cacheServer[key];
-        return StaticSettings.transformStO(result, _default);
+    server?<T>(key: string | SettingsKey<T>, _default?: T) : T {
+        return StaticSettings.resolveKey(Settings.keyify(key), _default, key => this.cacheServer[key]);
     }
 
-    changeGlobal<T>(key: string, value?: T){
-        if(this.cacheGlobal[key] == value) return;
+    changeGlobal<T>(key: string | SettingsKey<T>, value?: T){
+        key = Settings.keyify(key);
+
+
+        if(this.cacheGlobal[key.key] == value) return;
 
         this.updated = true;
-        this.cacheGlobal[key] = StaticSettings.transformOtS(value);
+        this.cacheGlobal[key.key] = StaticSettings.transformOtS(value);
 
         if(Settings.UPDATE_DIRECT)
             this.save();
     }
 
-    changeServer<T>(key: string, value?: T) {
-        if(this.cacheServer[key] == value) return;
+    changeServer<T>(key: string | SettingsKey<T>, value?: T) {
+        key = Settings.keyify(key);
+
+        if(this.cacheServer[key.key] == value) return;
 
         this.updated = true;
-        this.cacheServer[key] = StaticSettings.transformOtS(value);
+        this.cacheServer[key.key] = StaticSettings.transformOtS(value);
 
         if(Settings.UPDATE_DIRECT)
             this.save();
diff --git a/shared/js/sound/Sounds.ts b/shared/js/sound/Sounds.ts
index ac40f8ca..c37141f5 100644
--- a/shared/js/sound/Sounds.ts
+++ b/shared/js/sound/Sounds.ts
@@ -286,7 +286,7 @@ namespace sound {
                     try {
                         console.log(tr("Decoding data"));
                         context.decodeAudioData(buffer, result => {
-                            console.log(tr("Got decoded data"));
+                            log.info(LogCategory.VOICE, tr("Got decoded data"));
                             file.cached = result;
                             play(sound, options);
                         }, error => {
diff --git a/shared/js/ui/channel.ts b/shared/js/ui/channel.ts
index edf372fd..00b9c768 100644
--- a/shared/js/ui/channel.ts
+++ b/shared/js/ui/channel.ts
@@ -14,6 +14,12 @@ namespace ChannelType {
     }
 }
 
+enum ChannelSubscribeMode {
+    SUBSCRIBED,
+    UNSUBSCRIBED,
+    INHERITED
+}
+
 class ChannelProperties {
     channel_order: number = 0;
     channel_name: string = "";
@@ -71,6 +77,9 @@ class ChannelEntry {
     private _cached_channel_description_promise_resolve: any = undefined;
     private _cached_channel_description_promise_reject: any = undefined;
 
+    private _flag_subscribed: boolean;
+    private _subscribe_mode: ChannelSubscribeMode;
+
     constructor(channelId, channelName, parent = null) {
         this.properties = new ChannelProperties();
         this.channelId = channelId;
@@ -359,17 +368,35 @@ class ChannelEntry {
     }
 
     initializeListener() {
-        const _this = this;
-        this.channelTag().click(function () {
-            _this.channelTree.onSelect(_this);
-        });
-        this.channelTag().dblclick(() => {
+        const tag_channel = this.channelTag();
+        tag_channel.on('click', () => this.channelTree.onSelect(this));
+        tag_channel.on('dblclick', () => {
             if($.isArray(this.channelTree.currently_selected)) { //Multiselect
                 return;
             }
             this.joinChannel()
         });
 
+        let last_touch: number = 0;
+        let touch_start: number = 0;
+        tag_channel.on('touchend', event => {
+            /* if over 250ms then its not a click its more a drag */
+            if(Date.now() - touch_start > 250) {
+                touch_start = 0;
+                return;
+            }
+            if(Date.now() - last_touch > 750) {
+                last_touch = Date.now();
+                return;
+            }
+            last_touch = Date.now();
+            /* double touch */
+            tag_channel.trigger('dblclick');
+        });
+        tag_channel.on('touchstart', event => {
+            touch_start = Date.now();
+        });
+
         if(!settings.static(Settings.KEY_DISABLE_CONTEXT_MENU, false)) {
             this.channelTag().on("contextmenu", (event) => {
                 event.preventDefault();
@@ -378,9 +405,9 @@ class ChannelEntry {
                     return;
                 }
 
-                _this.channelTree.onSelect(_this, true);
-                _this.showContextMenu(event.pageX, event.pageY, () => {
-                    _this.channelTree.onSelect(undefined, true);
+                this.channelTree.onSelect(this, true);
+                this.showContextMenu(event.pageX, event.pageY, () => {
+                    this.channelTree.onSelect(undefined, true);
                 });
             });
         }
@@ -424,13 +451,49 @@ class ChannelEntry {
                 flagDelete = this.channelTree.client.permissions.neededPermission(PermissionType.B_CHANNEL_DELETE_TEMPORARY).granted(1);
         }
 
+        let trigger_close = true;
         spawn_context_menu(x, y, {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show channel info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-channel_switch",
                 name: tr("<b>Switch to channel</b>"),
                 callback: () => this.joinChannel()
             },
             MenuEntry.HR(),
+            {
+                type: MenuEntryType.ENTRY,
+                icon: "client-subscribe_to_channel",
+                name: tr("<b>Subscribe to channel</b>"),
+                callback: () => this.subscribe(),
+                visible: !this.flag_subscribed
+            },
+            {
+                type: MenuEntryType.ENTRY,
+                icon: "client-channel_unsubscribed",
+                name: tr("<b>Unsubscribe from channel</b>"),
+                callback: () => this.unsubscribe(),
+                visible: this.flag_subscribed
+            },
+            {
+                type: MenuEntryType.ENTRY,
+                icon: "client-subscribe_mode",
+                name: tr("<b>Use inherited subscribe mode</b>"),
+                callback: () => this.unsubscribe(true),
+                visible: this.subscribe_mode != ChannelSubscribeMode.INHERITED
+            },
+            MenuEntry.HR(),
             {
                 type: MenuEntryType.ENTRY,
                 icon: "client-channel_edit",
@@ -507,7 +570,7 @@ class ChannelEntry {
                 invalidPermission: !channelCreate,
                 callback: () => this.channelTree.spawnCreateChannel()
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
@@ -621,7 +684,10 @@ class ChannelEntry {
                 }
             } else if(key == "channel_codec") {
                 (this.properties.channel_codec == 5 || this.properties.channel_codec == 3 ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_music"));
-                (this.channelTree.client.voiceConnection.codecSupported(this.properties.channel_codec) ? $.fn.hide : $.fn.show).apply(this.channelTag().find(".icons .icon_no_sound"));
+                this.channelTag().find(".icons .icon_no_sound").toggle(!(
+                    this.channelTree.client.voiceConnection &&
+                    this.channelTree.client.voiceConnection.codecSupported(this.properties.channel_codec)
+                ));
             } else if(key == "channel_flag_default") {
                 (this.properties.channel_flag_default ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_default"));
             } else if(key == "channel_flag_password")
@@ -646,6 +712,7 @@ class ChannelEntry {
         let tag = this.channelTag().find(".channel-type");
         tag.removeAttr('class');
         tag.addClass("show-channel-normal-only channel-type icon");
+
         if(this._channel_name_formatted === undefined)
             tag.addClass("channel-normal");
 
@@ -660,7 +727,7 @@ class ChannelEntry {
         else
             type = "green";
 
-        tag.addClass("client-channel_" + type + "_subscribed");
+        tag.addClass("client-channel_" + type + (this._flag_subscribed ? "_subscribed" : ""));
     }
 
     generate_bbcode() {
@@ -705,6 +772,66 @@ class ChannelEntry {
                 }
             });
     }
+
+    async subscribe() : Promise<void> {
+        if(this.subscribe_mode == ChannelSubscribeMode.SUBSCRIBED)
+            return;
+
+        this.subscribe_mode = ChannelSubscribeMode.SUBSCRIBED;
+
+        const connection = this.channelTree.client.getServerConnection();
+        if(!this.flag_subscribed && connection)
+            await connection.send_command('channelsubscribe', {
+                'cid': this.getChannelId()
+            });
+        else
+            this.flag_subscribed = false;
+    }
+
+    async unsubscribe(inherited_subscription_mode?: boolean) : Promise<void> {
+        const connection = this.channelTree.client.getServerConnection();
+        let unsubscribe: boolean;
+
+        if(inherited_subscription_mode) {
+            this.subscribe_mode = ChannelSubscribeMode.INHERITED;
+            unsubscribe = this.flag_subscribed && !this.channelTree.client.controlBar.channel_subscribe_all;
+        } else {
+            this.subscribe_mode = ChannelSubscribeMode.UNSUBSCRIBED;
+            unsubscribe = this.flag_subscribed;
+        }
+
+        if(unsubscribe) {
+            if(connection)
+                await connection.send_command('channelunsubscribe', {
+                    'cid': this.getChannelId()
+                });
+            else
+                this.flag_subscribed = false;
+        }
+    }
+
+    get flag_subscribed() : boolean {
+        return this._flag_subscribed;
+    }
+    set flag_subscribed(flag: boolean) {
+        if(this._flag_subscribed == flag)
+            return;
+
+        this._flag_subscribed = flag;
+        this.updateChannelTypeIcon();
+    }
+
+    get subscribe_mode() : ChannelSubscribeMode {
+        return typeof(this._subscribe_mode) !== 'undefined' ? this._subscribe_mode : (this._subscribe_mode = settings.server(Settings.FN_SERVER_CHANNEL_SUBSCRIBE_MODE(this), ChannelSubscribeMode.INHERITED));
+    }
+
+    set subscribe_mode(mode: ChannelSubscribeMode) {
+        if(this.subscribe_mode == mode)
+            return;
+
+        this._subscribe_mode = mode;
+        settings.changeServer(Settings.FN_SERVER_CHANNEL_SUBSCRIBE_MODE(this), mode);
+    }
 }
 
 //Global functions
diff --git a/shared/js/ui/client.ts b/shared/js/ui/client.ts
index 43460497..e20b999a 100644
--- a/shared/js/ui/client.ts
+++ b/shared/js/ui/client.ts
@@ -266,28 +266,40 @@ class ClientEntry {
     }
 
     showContextMenu(x: number, y: number, on_close: () => void = undefined) {
-        const _this = this;
-
+        let trigger_close = true;
         spawn_context_menu(x, y,
             {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show client info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-change_nickname",
                 name: tr("<b>Open text chat</b>"),
-                callback: function () {
-                    chat.activeChat = _this.chat(true);
+                callback: () => {
+                    chat.activeChat = this.chat(true);
                     chat.focus();
                 }
             }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-poke",
                 name: tr("Poke client"),
-                callback: function () {
+                callback: () => {
                     createInputModal(tr("Poke client"), tr("Poke message:<br>"), text => true, result => {
                         if(typeof(result) === "string") {
                             //TODO tr
-                            console.log("Poking client " + _this.clientNickName() + " with message " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientpoke", {
-                                clid: _this.clientId(),
+                            console.log("Poking client " + this.clientNickName() + " with message " + result);
+                            this.channelTree.client.serverConnection.send_command("clientpoke", {
+                                clid: this.clientId(),
                                 msg: result
                             });
 
@@ -298,13 +310,13 @@ class ClientEntry {
                 type: MenuEntryType.ENTRY,
                 icon: "client-edit",
                 name: tr("Change description"),
-                callback: function () {
+                callback: () => {
                     createInputModal(tr("Change client description"), tr("New description:<br>"), text => true, result => {
                         if(typeof(result) === "string") {
                             //TODO tr
-                            console.log("Changing " + _this.clientNickName() + "'s description to " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientedit", {
-                                clid: _this.clientId(),
+                            console.log("Changing " + this.clientNickName() + "'s description to " + result);
+                            this.channelTree.client.serverConnection.send_command("clientedit", {
+                                clid: this.clientId(),
                                 client_description: result
                             });
 
@@ -330,11 +342,11 @@ class ClientEntry {
                 name: tr("Kick client from channel"),
                 callback: () => {
                     createInputModal(tr("Kick client from channel"), tr("Kick reason:<br>"), text => true, result => {
-                        if(result) {
+                        if(typeof(result) !== 'boolean' || result) {
                             //TODO tr
-                            console.log("Kicking client " + _this.clientNickName() + " from channel with reason " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientkick", {
-                                clid: _this.clientId(),
+                            console.log("Kicking client " + this.clientNickName() + " from channel with reason " + result);
+                            this.channelTree.client.serverConnection.send_command("clientkick", {
+                                clid: this.clientId(),
                                 reasonid: ViewReasonId.VREASON_CHANNEL_KICK,
                                 reasonmsg: result
                             });
@@ -348,11 +360,11 @@ class ClientEntry {
                 name: tr("Kick client fom server"),
                 callback: () => {
                     createInputModal(tr("Kick client from server"), tr("Kick reason:<br>"), text => true, result => {
-                        if(result) {
+                        if(typeof(result) !== 'boolean' || result) {
                             //TODO tr
-                            console.log("Kicking client " + _this.clientNickName() + " from server with reason " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientkick", {
-                                clid: _this.clientId(),
+                            console.log("Kicking client " + this.clientNickName() + " from server with reason " + result);
+                            this.channelTree.client.serverConnection.send_command("clientkick", {
+                                clid: this.clientId(),
                                 reasonid: ViewReasonId.VREASON_SERVER_KICK,
                                 reasonmsg: result
                             });
@@ -411,7 +423,7 @@ class ClientEntry {
                     });
                 }
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
@@ -661,19 +673,21 @@ class ClientEntry {
     chat(create: boolean = false) : ChatEntry {
         let chatName = "client_" + this.clientUid() + ":" + this.clientId();
         let c = chat.findChat(chatName);
-        if((!c) && create) {
+        if(!c && create) {
             c = chat.createChat(chatName);
-            c.closeable = true;
+            c.flag_closeable = true;
             c.name = this.clientNickName();
+            c.owner_unique_id = this.properties.client_unique_identifier;
 
-            const _this = this;
-            c.onMessageSend = function (text: string) {
-                _this.channelTree.client.serverConnection.command_helper.sendMessage(text, ChatType.CLIENT, _this);
+            c.onMessageSend = text => {
+                this.channelTree.client.serverConnection.command_helper.sendMessage(text, ChatType.CLIENT, this);
             };
 
-            c.onClose = function () : boolean {
-                //TODO check online?
-                _this.channelTree.client.serverConnection.send_command("clientchatclosed", {"clid": _this.clientId()});
+            c.onClose = () => {
+                if(!c.flag_offline)
+                    this.channelTree.client.serverConnection.send_command("clientchatclosed", {"clid": this.clientId()}, {process_result: false}).catch(error => {
+                        log.warn(LogCategory.GENERAL, tr("Failed to notify chat participant (%o) that the chat has been closed. Error: %o"), this, error);
+                    });
                 return true;
             }
         }
@@ -908,8 +922,22 @@ class MusicClientEntry extends ClientEntry {
     }
 
     showContextMenu(x: number, y: number, on_close: () => void = undefined): void {
+        let trigger_close = true;
         spawn_context_menu(x, y,
             {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show bot info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 name: tr("<b>Change bot name</b>"),
                 icon: "client-change_nickname",
                 disabled: false,
@@ -1011,7 +1039,7 @@ class MusicClientEntry extends ClientEntry {
                 name: tr("Kick client from channel"),
                 callback: () => {
                     createInputModal(tr("Kick client from channel"), tr("Kick reason:<br>"), text => true, result => {
-                        if(result) {
+                        if(typeof(result) !== 'boolean' || result) {
                             console.log(tr("Kicking client %o from channel with reason %o"), this.clientNickName(), result);
                             this.channelTree.client.serverConnection.send_command("clientkick", {
                                 clid: this.clientId(),
@@ -1073,7 +1101,7 @@ class MusicClientEntry extends ClientEntry {
                 },
                 type: MenuEntryType.ENTRY
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
diff --git a/shared/js/ui/frames/ControlBar.ts b/shared/js/ui/frames/ControlBar.ts
index 59e5a8a9..4aa51151 100644
--- a/shared/js/ui/frames/ControlBar.ts
+++ b/shared/js/ui/frames/ControlBar.ts
@@ -19,6 +19,7 @@ class ControlBar {
     private _away: boolean;
     private _query_visible: boolean;
     private _awayMessage: string;
+    private _channel_subscribe_all: boolean;
 
     private codec_supported: boolean = false;
     private support_playback: boolean = false;
@@ -40,39 +41,43 @@ class ControlBar {
         this.htmlTag.find(".btn_open_settings").on('click', this.onOpenSettings.bind(this));
         this.htmlTag.find(".btn_permissions").on('click', this.onPermission.bind(this));
         this.htmlTag.find(".btn_banlist").on('click', this.onBanlist.bind(this));
+        this.htmlTag.find(".button-subscribe-mode").on('click', this.on_toggle_channel_subscribe_all.bind(this));
         this.htmlTag.find(".button-playlist-manage").on('click', this.on_playlist_manage.bind(this));
+
+        let dropdownify = (tag: JQuery) => {
+            tag.find(".button-dropdown").on('click', () => {
+                tag.addClass("displayed");
+            }).hover(() => {
+                console.log("Add");
+                tag.addClass("displayed");
+            }, () => {
+                if(tag.find(".dropdown:hover").length > 0)
+                    return;
+                console.log("Removed");
+                tag.removeClass("displayed");
+            });
+            tag.on('mouseleave', () => {
+                tag.removeClass("displayed");
+            });
+        };
         {
             let tokens = this.htmlTag.find(".btn_token");
-            tokens.find(".button-dropdown").on('click', () => {
-                tokens.find(".dropdown").addClass("displayed");
-            });
-            tokens.on('mouseleave', () => {
-                tokens.find(".dropdown").removeClass("displayed");
-            });
+            dropdownify(tokens);
 
             tokens.find(".btn_token_use").on('click', this.on_token_use.bind(this));
             tokens.find(".btn_token_list").on('click', this.on_token_list.bind(this));
         }
         {
             let away = this.htmlTag.find(".btn_away");
-            away.find(".button-dropdown").on('click', () => {
-                away.find(".dropdown").addClass("displayed");
-            });
-            away.on('mouseleave', () => {
-                away.find(".dropdown").removeClass("displayed");
-            });
+            dropdownify(away);
 
             away.find(".btn_away_toggle").on('click', this.on_away_toggle.bind(this));
             away.find(".btn_away_message").on('click', this.on_away_set_message.bind(this));
         }
         {
             let bookmark = this.htmlTag.find(".btn_bookmark");
-            bookmark.find(".button-dropdown").on('click', () => {
-                bookmark.find("> .dropdown").addClass("displayed");
-            });
-            bookmark.on('mouseleave', () => {
-                bookmark.find("> .dropdown").removeClass("displayed");
-            });
+            dropdownify(bookmark);
+
             bookmark.find(".btn_bookmark_list").on('click', this.on_bookmark_manage.bind(this));
             bookmark.find(".btn_bookmark_add").on('click', this.on_bookmark_server_add.bind(this));
 
@@ -81,22 +86,30 @@ class ControlBar {
         }
         {
             let query = this.htmlTag.find(".btn_query");
-            query.find(".button-dropdown").on('click', () => {
-                query.find(".dropdown").addClass("displayed");
-            });
-            query.on('mouseleave', () => {
-                query.find(".dropdown").removeClass("displayed");
-            });
+            dropdownify(query);
 
             query.find(".btn_query_toggle").on('click', this.on_query_visibility_toggle.bind(this));
             query.find(".btn_query_create").on('click', this.on_query_create.bind(this));
             query.find(".btn_query_manage").on('click', this.on_query_manage.bind(this));
         }
 
+        /* Mobile dropdowns */
+        {
+            const dropdown = this.htmlTag.find(".dropdown-audio");
+            dropdownify(dropdown);
+            dropdown.find(".button-display").on('click', () => dropdown.addClass("displayed"));
+        }
+        {
+            const dropdown = this.htmlTag.find(".dropdown-servertools");
+            dropdownify(dropdown);
+            dropdown.find(".button-display").on('click', () => dropdown.addClass("displayed"));
+        }
+
         //Need an initialise
-        this.muteInput = settings.static_global("mute_input", false);
-        this.muteOutput = settings.static_global("mute_output", false);
-        this.query_visible = settings.static_global("show_server_queries", false);
+        this.muteInput = settings.static_global(Settings.KEY_CONTROL_MUTE_INPUT, false);
+        this.muteOutput = settings.static_global(Settings.KEY_CONTROL_MUTE_OUTPUT, false);
+        this.query_visible = settings.static_global(Settings.KEY_CONTROL_SHOW_QUERIES, false);
+        this.channel_subscribe_all = settings.static_global(Settings.KEY_CONTROL_CHANNEL_SUBSCRIBE_ALL, true);
     }
 
 
@@ -125,22 +138,20 @@ class ControlBar {
         this._muteInput = flag;
 
         let tag = this.htmlTag.find(".btn_mute_input");
-        if(flag) {
-            if(!tag.hasClass("activated"))
-                tag.addClass("activated");
-            tag.find(".icon_x32").attr("class", "icon_x32 client-input_muted");
-        } else {
-            if(tag.hasClass("activated"))
-                tag.removeClass("activated");
-            tag.find(".icon_x32").attr("class", "icon_x32 client-capture");
-        }
+        const tag_icon = tag.find(".icon_x32, .icon");
+
+        tag.toggleClass('activated', flag)
+
+        tag_icon
+            .toggleClass('client-input_muted', flag)
+            .toggleClass('client-capture', !flag);
 
 
-        if(this.handle.serverConnection.connected)
+        if(this.handle.serverConnection.connected())
             this.handle.serverConnection.send_command("clientupdate", {
                 client_input_muted: this._muteInput
             });
-        settings.changeGlobal("mute_input", this._muteInput);
+        settings.changeGlobal(Settings.KEY_CONTROL_MUTE_INPUT, this._muteInput);
         this.updateMicrophoneRecordState();
     }
 
@@ -150,22 +161,21 @@ class ControlBar {
         if(this._muteOutput == flag) return;
         this._muteOutput = flag;
 
-        let tag = this.htmlTag.find(".btn_mute_output");
-        if(flag) {
-            if(!tag.hasClass("activated"))
-                tag.addClass("activated");
-            tag.find(".icon_x32").attr("class", "icon_x32 client-output_muted");
-        } else {
-            if(tag.hasClass("activated"))
-                tag.removeClass("activated");
-            tag.find(".icon_x32").attr("class", "icon_x32 client-volume");
-        }
 
-        if(this.handle.serverConnection.connected)
+        let tag = this.htmlTag.find(".btn_mute_output");
+        const tag_icon = tag.find(".icon_x32, .icon");
+
+        tag.toggleClass('activated', flag)
+
+        tag_icon
+            .toggleClass('client-output_muted', flag)
+            .toggleClass('client-volume', !flag);
+
+        if(this.handle.serverConnection.connected())
             this.handle.serverConnection.send_command("clientupdate", {
                 client_output_muted: this._muteOutput
             });
-        settings.changeGlobal("mute_output", this._muteOutput);
+        settings.changeGlobal(Settings.KEY_CONTROL_MUTE_OUTPUT, this._muteOutput);
         this.updateMicrophoneRecordState();
     }
 
@@ -196,7 +206,8 @@ class ControlBar {
 
     private updateMicrophoneRecordState() {
         let enabled = !this._muteInput && !this._muteOutput && !this._away;
-        this.handle.voiceConnection.voiceRecorder.update(enabled);
+        if(this.handle.voiceConnection)
+            this.handle.voiceConnection.voiceRecorder.update(enabled);
     }
 
     updateProperties() {
@@ -212,12 +223,13 @@ class ControlBar {
     }
 
     updateVoice(targetChannel?: ChannelEntry) {
-        if(!targetChannel) targetChannel = this.handle.getClient().currentChannel();
+        if(!targetChannel)
+            targetChannel = this.handle.getClient().currentChannel();
         let client = this.handle.getClient();
 
-        this.codec_supported = targetChannel ? this.handle.voiceConnection.codecSupported(targetChannel.properties.channel_codec) : true;
-        this.support_record = this.handle.voiceConnection.voice_send_support();
-        this.support_playback = this.handle.voiceConnection.voice_playback_support();
+        this.codec_supported = targetChannel ? this.handle.voiceConnection && this.handle.voiceConnection.codecSupported(targetChannel.properties.channel_codec) : true;
+        this.support_record = this.handle.voiceConnection && this.handle.voiceConnection.voice_send_support();
+        this.support_playback = this.handle.voiceConnection && this.handle.voiceConnection.voice_playback_support();
 
         this.htmlTag.find(".btn_mute_input").prop("disabled", !this.codec_supported|| !this.support_playback || !this.support_record);
         this.htmlTag.find(".btn_mute_output").prop("disabled", !this.codec_supported || !this.support_playback);
@@ -421,7 +433,7 @@ class ControlBar {
         if(this._query_visible == flag) return;
 
         this._query_visible = flag;
-        settings.changeGlobal("show_server_queries", flag);
+        settings.changeGlobal(Settings.KEY_CONTROL_SHOW_QUERIES, flag);
         this.update_query_visibility_button();
         this.handle.channelTree.toggle_server_queries(flag);
     }
@@ -432,12 +444,7 @@ class ControlBar {
     }
 
     private update_query_visibility_button() {
-        let tag = this.htmlTag.find(".btn_query_toggle");
-        if(this._query_visible) {
-            tag.addClass("activated");
-        } else {
-            tag.removeClass("activated");
-        }
+        this.htmlTag.find(".btn_query_toggle").toggleClass('activated', this._query_visible);
     }
 
     private on_query_create() {
@@ -464,4 +471,33 @@ class ControlBar {
             createErrorModal(tr("You have to be connected"), tr("You have to be connected to use this function!")).open();
         }
     }
+
+    get channel_subscribe_all() : boolean {
+        return this._channel_subscribe_all;
+    }
+
+    set channel_subscribe_all(flag: boolean) {
+        if(this._channel_subscribe_all == flag)
+            return;
+
+        this._channel_subscribe_all = flag;
+
+        this.htmlTag
+        .find(".button-subscribe-mode")
+            .toggleClass('activated', this._channel_subscribe_all)
+        .find('.icon_x32')
+            .toggleClass('client-unsubscribe_from_all_channels', !this._channel_subscribe_all)
+            .toggleClass('client-subscribe_to_all_channels', this._channel_subscribe_all);
+
+        settings.changeGlobal(Settings.KEY_CONTROL_CHANNEL_SUBSCRIBE_ALL, flag);
+
+        if(flag)
+            this.handle.channelTree.subscribe_all_channels();
+        else
+            this.handle.channelTree.unsubscribe_all_channels();
+    }
+
+    private on_toggle_channel_subscribe_all() {
+        this.channel_subscribe_all = !this.channel_subscribe_all;
+    }
 }
\ No newline at end of file
diff --git a/shared/js/ui/frames/SelectedItemInfo.ts b/shared/js/ui/frames/SelectedItemInfo.ts
index 1cd0f980..c539c730 100644
--- a/shared/js/ui/frames/SelectedItemInfo.ts
+++ b/shared/js/ui/frames/SelectedItemInfo.ts
@@ -53,7 +53,8 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
     readonly handle: TSClient;
 
     private current_selected?: AvailableTypes;
-    private _htmlTag: JQuery<HTMLElement>;
+    private _tag: JQuery<HTMLElement>;
+    private _tag_content: JQuery<HTMLElement>;
     private _tag_info: JQuery<HTMLElement>;
     private _tag_banner: JQuery<HTMLElement>;
 
@@ -63,9 +64,10 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
 
     constructor(client: TSClient, htmlTag: JQuery<HTMLElement>) {
         this.handle = client;
-        this._htmlTag = htmlTag;
-        this._tag_info = htmlTag.find(".container-select-info");
-        this._tag_banner = htmlTag.find(".container-banner");
+        this._tag = htmlTag;
+        this._tag_content = htmlTag.find("> .select_info");
+        this._tag_info = this._tag_content.find(".container-select-info");
+        this._tag_banner = this._tag_content.find(".container-banner");
 
         this.managers.push(new MusicInfoManager());
         this.managers.push(new ClientInfoManager());
@@ -73,10 +75,24 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
         this.managers.push(new ServerInfoManager());
 
         this.banner_manager = new Hostbanner(client, this._tag_banner);
+
+        this._tag.find("button.close").on('click', () => {
+            this._tag.toggleClass('shown', false);
+        });
+    }
+
+    handle_resize() {
+        /* test if the popover isn't a popover anymore */
+        if(this._tag.hasClass('shown')) {
+            this._tag.removeClass('shown');
+            if(this.is_popover())
+                this._tag.addClass('shown');
+        }
     }
 
     setCurrentSelected(entry: AvailableTypes) {
         if(this.current_selected == entry) return;
+
         if(this._current_manager) {
             (this._current_manager as InfoManager<AvailableTypes>).finalizeFrame(this.current_selected, this._tag_info);
             this._current_manager = null;
@@ -112,7 +128,20 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
 
     current_manager() { return this._current_manager; }
 
-    html_tag() { return this._htmlTag; }
+    html_tag() { return this._tag_content; }
+
+    is_popover() : boolean {
+        return !this._tag.is(':visible') || this._tag.hasClass('shown');
+    }
+
+    open_popover() {
+        this._tag.toggleClass('shown', true);
+    }
+}
+
+interface Window {
+    Image: typeof HTMLImageElement;
+    HTMLImageElement: typeof HTMLImageElement;
 }
 
 class Hostbanner {
@@ -136,9 +165,20 @@ class Hostbanner {
 
         if(tag) {
             tag.then(element => {
-                this.html_tag.empty();
+                const children = this.html_tag.children();
                 this.html_tag.append(element).removeClass("disabled");
 
+                /* allow the new image be loaded from cache URL */
+                {
+                    children
+                        .css('z-index', '2')
+                        .css('position', 'absolute')
+                        .css('height', '100%')
+                        .css('width', '100%');
+                    setTimeout(() => {
+                        children.detach();
+                    }, 250);
+                }
             }).catch(error => {
                 console.warn(tr("Failed to load hostbanner: %o"), error);
                 this.html_tag.empty().addClass("disabled");
@@ -159,44 +199,63 @@ class Hostbanner {
         for(let key in server.properties)
             properties["property_" + key] = server.properties[key];
 
+        properties["hostbanner_gfx_url"] = server.properties.virtualserver_hostbanner_gfx_url;
         if(server.properties.virtualserver_hostbanner_gfx_interval > 0) {
-            const update_interval = Math.min(server.properties.virtualserver_hostbanner_gfx_interval, 60);
+            const update_interval = Math.max(server.properties.virtualserver_hostbanner_gfx_interval, 60);
             const update_timestamp = (Math.floor((Date.now() / 1000) / update_interval) * update_interval).toString();
             try {
                 const url = new URL(server.properties.virtualserver_hostbanner_gfx_url);
                 if(url.search.length == 0)
-                    properties["cache_tag"] = "?_ts=" + update_timestamp;
+                    properties["hostbanner_gfx_url"] += "?_ts=" + update_timestamp;
                 else
-                    properties["cache_tag"] = "&_ts=" + update_timestamp;
+                    properties["hostbanner_gfx_url"] += "&_ts=" + update_timestamp;
             } catch(error) {
                 console.warn(tr("Failed to parse banner URL: %o"), error);
-                properties["cache_tag"] = "&_ts=" + update_timestamp;
+                properties["hostbanner_gfx_url"] += "&_ts=" + update_timestamp;
             }
 
             this.updater = setTimeout(() => this.update(), update_interval * 1000);
-        } else {
-            properties["cache_tag"] = "";
         }
 
-
         const rendered = $("#tmpl_selected_hostbanner").renderTag(properties);
-        console.debug(tr("Hostbanner has been loaded"));
-        return Promise.resolve(rendered);
-        /*
-        const image = rendered.find("img");
-        return new Promise<JQuery<HTMLElement>>((resolve, reject) => {
-            const node_image = image[0] as HTMLImageElement;
-            node_image.onload = () => {
-                console.debug(tr("Hostbanner has been loaded"));
-                if(server.properties.virtualserver_hostbanner_gfx_interval > 0)
-                    this.updater = setTimeout(() => this.update(), Math.min(server.properties.virtualserver_hostbanner_gfx_interval, 60) * 1000);
-                resolve(rendered);
-            };
-            node_image.onerror = event => {
-                reject(event);
-            }
-        });
-        */
+
+
+        if(window.fetch) {
+            return (async () => {
+                const start = Date.now();
+
+                const tag_image = rendered.find(".hostbanner-image");
+
+                _fetch:
+                try {
+                    const result = await fetch(properties["hostbanner_gfx_url"]);
+
+                    if(!result.ok) {
+                        if(result.type === 'opaque' || result.type === 'opaqueredirect') {
+                            log.warn(LogCategory.SERVER, tr("Could not load hostbanner because 'Access-Control-Allow-Origin' isnt valid!"));
+                            break _fetch;
+                        }
+                    }
+
+                    const url = URL.createObjectURL(await result.blob());
+                    tag_image.css('background-image', 'url(' + url + ')');
+                    log.debug(LogCategory.SERVER, tr("Fetsched hostbanner successfully (%o, type: %o, url: %o)"), Date.now() - start, result.type, url);
+
+                    if(URL.revokeObjectURL) {
+                        setTimeout(() => {
+                            log.debug(LogCategory.SERVER, tr("Revoked hostbanner url %s"), url);
+                            URL.revokeObjectURL(url);
+                        }, 10000);
+                    }
+                } catch(error) {
+                    log.warn(LogCategory.SERVER, tr("Failed to fetch hostbanner image: %o"), error);
+                }
+                return rendered;
+            })();
+        } else {
+            console.debug(tr("Hostbanner has been loaded"));
+            return Promise.resolve(rendered);
+        }
     }
 }
 
@@ -233,6 +292,7 @@ class ClientInfoManager extends InfoManager<ClientEntry> {
         properties["client_onlinetime"] = formatDate(client.calculateOnlineTime());
         properties["sound_volume"] = client.audioController.volume * 100;
         properties["client_is_query"] = client.properties.client_type == ClientType.CLIENT_QUERY;
+        properties["client_is_web"] = client.properties.client_type_exact == ClientType.CLIENT_WEB;
 
         properties["group_server"] = [];
         for(let groupId of client.assignedServerGroupIds()) {
@@ -299,8 +359,12 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
 
 
         {
-            let requestUpdate = rendered.find(".btn_update");
-            requestUpdate.prop("disabled", !server.shouldUpdateProperties());
+            const disabled = !server.shouldUpdateProperties();
+            let requestUpdate = rendered.find(".button-update");
+            requestUpdate
+                .prop("disabled", disabled)
+                .toggleClass('btn-success', !disabled)
+                .toggleClass('btn-danger', disabled);
 
             requestUpdate.click(() => {
                 server.updateProperties();
@@ -308,7 +372,10 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
             });
 
             this.registerTimer(setTimeout(function () {
-                requestUpdate.prop("disabled", false);
+                requestUpdate
+                    .prop("disabled", false)
+                    .toggleClass('btn-success', true)
+                    .toggleClass('btn-danger', false);
             }, server.nextInfoRequest - Date.now()));
         }
 
diff --git a/shared/js/ui/modal/ModalConnect.ts b/shared/js/ui/modal/ModalConnect.ts
index 0f431020..95b8d513 100644
--- a/shared/js/ui/modal/ModalConnect.ts
+++ b/shared/js/ui/modal/ModalConnect.ts
@@ -31,11 +31,11 @@ namespace Modals {
                     input_nickname.attr("placeholder", "");
 
                 let address = input_address.val().toString();
-                settings.changeGlobal("connect_address", address);
+                settings.changeGlobal(Settings.KEY_CONNECT_ADDRESS, address);
                 let flag_address = !!address.match(Regex.IP_V4) || !!address.match(Regex.DOMAIN);
 
                 let nickname = input_nickname.val().toString();
-                settings.changeGlobal("connect_name", nickname);
+                settings.changeGlobal(Settings.KEY_CONNECT_USERNAME, nickname);
                 let flag_nickname = (nickname.length == 0 && selected_profile && selected_profile.default_username.length > 0) || nickname.length >= 3 && nickname.length <= 32;
 
                 input_address.attr('pattern', flag_address ? null : '^[a]{1000}$').toggleClass('is-invalid', !flag_address);
@@ -48,8 +48,8 @@ namespace Modals {
                 }
             };
 
-            input_nickname.val(settings.static_global("connect_name", undefined));
-            input_address.val(defaultHost.enforce ? defaultHost.url : settings.static_global("connect_address", defaultHost.url));
+            input_nickname.val(settings.static_global(Settings.KEY_CONNECT_USERNAME, undefined));
+            input_address.val(defaultHost.enforce ? defaultHost.url : settings.static_global(Settings.KEY_CONNECT_ADDRESS, defaultHost.url));
             input_address
                 .on("keyup", () => updateFields())
                 .on('keydown', event => {
@@ -150,7 +150,7 @@ namespace Modals {
             },
 
             width: '70%',
-            //closeable: false
+            //flag_closeable: false
         });
         connectModal.open();
     }
diff --git a/shared/js/ui/modal/ModalSettings.ts b/shared/js/ui/modal/ModalSettings.ts
index 12ee7f8c..2e8e5675 100644
--- a/shared/js/ui/modal/ModalSettings.ts
+++ b/shared/js/ui/modal/ModalSettings.ts
@@ -5,7 +5,7 @@
 /// <reference path="../../profiles/Identity.ts" />
 
 namespace Modals {
-    function spawnTeamSpeakIdentityImprove(identity: profiles.identities.TeaSpeakIdentity) : Modal {
+    function spawnTeamSpeakIdentityImprove(identity: profiles.identities.TeaSpeakIdentity): Modal {
         let modal: Modal;
         let elapsed_timer: NodeJS.Timer;
 
@@ -25,10 +25,10 @@ namespace Modals {
                 const input_elapsed = template.find(".time-elapsed input");
 
                 button_close.on('click', event => {
-                    if(active)
+                    if (active)
                         button_start_stop.trigger('click');
 
-                    if(modal.shown)
+                    if (modal.shown)
                         modal.close();
                 });
 
@@ -40,7 +40,7 @@ namespace Modals {
 
                     input_threads.prop("disabled", !active);
                     input_target_level.prop("disabled", !active);
-                    if(active) {
+                    if (active) {
                         input_hash_rate.val(0);
                         clearInterval(elapsed_timer);
                         active = false;
@@ -51,7 +51,7 @@ namespace Modals {
 
                     const threads = parseInt(input_threads.val() as string);
                     const target_level = parseInt(input_target_level.val() as string);
-                    if(target_level == 0) {
+                    if (target_level == 0) {
                         identity.improve_level(-1, threads, () => active, current_level => {
                             input_current_level.val(current_level);
                         }, hash_rate => {
@@ -59,7 +59,7 @@ namespace Modals {
                         }).catch(error => {
                             console.error(error);
                             createErrorModal(tr("Failed to improve identity"), tr("Failed to improve identity.<br>Error:") + error).open();
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         });
                     } else {
@@ -68,7 +68,7 @@ namespace Modals {
                         }, hash_rate => {
                             input_hash_rate.val(hash_rate);
                         }).then(success => {
-                            if(success) {
+                            if (success) {
                                 identity.level().then(level => {
                                     input_current_level.val(level);
                                     createInfoModal(tr("Identity successfully improved"), MessageHelper.formatMessage(tr("Identity successfully improved to level {}"), level)).open();
@@ -76,12 +76,12 @@ namespace Modals {
                                     input_current_level.val("error: " + error);
                                 });
                             }
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         }).catch(error => {
                             console.error(error);
                             createErrorModal(tr("Failed to improve identity"), tr("Failed to improve identity.<br>Error:") + error).open();
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         });
                     }
@@ -92,10 +92,10 @@ namespace Modals {
                         let seconds = Math.floor(time % 60).toString();
                         let minutes = Math.floor(time / 60).toString();
 
-                        if(seconds.length < 2)
+                        if (seconds.length < 2)
                             seconds = "0" + seconds;
 
-                        if(minutes.length < 2)
+                        if (minutes.length < 2)
                             minutes = "0" + minutes;
 
                         input_elapsed.val(minutes + ":" + seconds);
@@ -119,7 +119,7 @@ namespace Modals {
         return modal;
     }
 
-    function spawnTeamSpeakIdentityImport(callback: (identity: profiles.identities.TeaSpeakIdentity) => any) : Modal {
+    function spawnTeamSpeakIdentityImport(callback: (identity: profiles.identities.TeaSpeakIdentity) => any): Modal {
         let modal: Modal;
         let loaded_identity: profiles.identities.TeaSpeakIdentity;
 
@@ -134,7 +134,7 @@ namespace Modals {
                 const button_import = template.find(".button-import");
                 const set_error = message => {
                     template.find(".success").hide();
-                    if(message) {
+                    if (message) {
                         template.find(".error").text(message).show();
                         button_import.prop("disabled", true);
                     } else
@@ -157,7 +157,7 @@ namespace Modals {
                         const element = event.target as HTMLInputElement;
                         const file_reader = new FileReader();
 
-                        file_reader.onload = function() {
+                        file_reader.onload = function () {
                             import_identity(file_reader.result as string, true);
                         };
 
@@ -167,7 +167,7 @@ namespace Modals {
                             return;
                         };
 
-                        if(element.files && element.files.length > 0)
+                        if (element.files && element.files.length > 0)
                             file_reader.readAsText(element.files[0]);
                     });
                 }
@@ -175,7 +175,7 @@ namespace Modals {
                 { /* text input */
                     template.find(".button-load-text").on('click', event => {
                         createInputModal("Import identity from text", "Please paste your idenity bellow<br>", text => text.length > 0 && text.indexOf('V') != -1, result => {
-                            if(result)
+                            if (result)
                                 import_identity(result as string, false);
                         }).open();
                     });
@@ -197,7 +197,7 @@ namespace Modals {
         return modal;
     }
 
-    export function spawnSettingsModal() : Modal {
+    export function spawnSettingsModal(): Modal {
         let modal: Modal;
         modal = createModal({
             header: tr("Settings"),
@@ -206,6 +206,7 @@ namespace Modals {
                     client: native_client,
                     valid_forum_identity: profiles.identities.valid_static_forum_identity(),
                     forum_path: settings.static("forum_path"),
+                    voice_available: !!globalClient.voiceConnection
                 });
 
                 initialiseVoiceListeners(modal, (template = template.tabify()).find(".settings_audio"));
@@ -226,12 +227,12 @@ namespace Modals {
         console.log(tag);
         {/* setup the forum */
             const identity = profiles.identities.static_forum_identity();
-            if(identity && identity.valid()) {
+            if (identity && identity.valid()) {
                 tag.find(".not-connected").hide();
 
                 tag.find(".property.username .value").text(identity.name());
                 const premium_tag = tag.find(".property.premium .value").text("");
-                if(identity.is_stuff() || identity.is_premium())
+                if (identity.is_stuff() || identity.is_premium())
                     premium_tag.append($.spawn("div").addClass("premium").text(tr("yes")));
                 else
                     premium_tag.append($.spawn("div").addClass("non-premium").text(tr("no")));
@@ -250,114 +251,6 @@ namespace Modals {
     function initialiseVoiceListeners(modal: Modal, tag: JQuery) {
         let currentVAD = settings.global("vad_type", "vad");
 
-        { //Initialized voice activation detection
-            const vad_tag = tag.find(".settings-vad-container");
-
-            vad_tag.find('input[type=radio]').on('change', event => {
-                const select = event.currentTarget as HTMLSelectElement;
-                {
-                    vad_tag.find(".settings-vad-impl-entry").hide();
-                    vad_tag.find(".setting-vad-" + select.value).show();
-                }
-                {
-                    settings.changeGlobal("vad_type", select.value);
-                    globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-                }
-
-                switch (select.value) {
-                    case "ppt":
-                        let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                        ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-
-                        vad_tag.find(".vat_ppt_key").text(ppt.key_description(ppt_settings));
-                        vad_tag.find(".ppt-delay input").val(ppt_settings.delay === undefined ? 300 : ppt_settings.delay);
-
-                        break;
-                    case "vad":
-                        let slider = vad_tag.find(".vad_vad_slider");
-                        let vad: VoiceActivityDetectorVAD = globalClient.voiceConnection.voiceRecorder.getVADHandler() as VoiceActivityDetectorVAD;
-                        slider.val(vad.percentageThreshold);
-                        slider.trigger("change");
-                        globalClient.voiceConnection.voiceRecorder.update(true);
-                        vad.percentage_listener = per => {
-                            vad_tag.find(".vad_vad_bar_filler")
-                                .css("width", (100 - per) + "%");
-                        };
-                        break;
-                }
-            });
-
-            { //Initialized push to talk
-                vad_tag.find(".vat_ppt_key").click(function () {
-                    let modal = createModal({
-                        body: "",
-                        header: () => {
-                            let head = $.spawn("div");
-                            head.text(tr("Type the key you wish"));
-                            head.css("background-color", "blue");
-                            return head;
-                        },
-                        footer: ""
-                    });
-
-                    let listener = (event: ppt.KeyEvent) => {
-                        if(event.type == ppt.EventType.KEY_TYPED) {
-                            settings.changeGlobal('vad_ppt_key', undefined); //TODO remove that because its legacy shit
-                            console.log(tr("Got key %o"), event);
-
-                            let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                            ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-                            Object.assign(ppt_settings, event);
-                            settings.changeGlobal('vad_ppt_settings', ppt_settings);
-
-                            globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-
-                            ppt.unregister_key_listener(listener);
-                            modal.close();
-                            vad_tag.find(".vat_ppt_key").text(ppt.key_description(event));
-                        }
-                    };
-                    ppt.register_key_listener(listener);
-                    modal.open();
-                });
-
-                vad_tag.find(".ppt-delay input").on('change', event => {
-                    let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                    ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-                    ppt_settings.delay = (<HTMLInputElement>event.target).valueAsNumber;
-                    settings.changeGlobal('vad_ppt_settings', ppt_settings);
-
-                    globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-                });
-            }
-
-            { //Initialized voice activation detection
-                let slider = vad_tag.find(".vad_vad_slider");
-                slider.on("input change", () => {
-                    settings.changeGlobal("vad_threshold", slider.val().toString());
-                    let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
-                    if(vad instanceof  VoiceActivityDetectorVAD)
-                        vad.percentageThreshold = slider.val() as number;
-                    vad_tag.find(".vad_vad_slider_value").text(slider.val().toString());
-                });
-                modal.properties.registerCloseListener(() => {
-                    let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
-                    if(vad instanceof  VoiceActivityDetectorVAD)
-                        vad.percentage_listener = undefined;
-
-                });
-            }
-
-            let target_tag = vad_tag.find('input[type=radio][name="vad_type"][value="' + currentVAD + '"]');
-            if(target_tag.length == 0) {
-                //TODO tr
-                console.warn("Failed to find tag for " + currentVAD + ". Using latest tag!");
-                target_tag = vad_tag.find('input[type=radio][name="vad_type"]').last();
-            }
-            target_tag.prop("checked", true);
-            setTimeout(() => target_tag.trigger('change'), 0);
-        }
-
         const display_error = (message: string) => {
             const alert = tag.find(".settings-device-error").first();
             alert.clone()
@@ -368,57 +261,167 @@ namespace Modals {
                 .text(message);
         };
 
-        { //Initialize microphone
+        if (globalClient.voiceConnection) {
+            { //Initialized voice activation detection
+                const vad_tag = tag.find(".settings-vad-container");
 
-            const setting_tag = tag.find(".settings-microphone");
-            const tag_select = setting_tag.find(".audio-select-microphone");
-
-            const update_devices = () => { //List devices
-                tag_select.empty();
-
-                $.spawn("option")
-                    .attr("device-id", "")
-                    .attr("device-group", "")
-                    .text(tr("No device"))
-                    .appendTo(tag_select);
-
-                navigator.mediaDevices.enumerateDevices().then(devices => {
-                    const active_device = globalClient.voiceConnection.voiceRecorder.device_id();
-
-                    for(const device of devices) {
-                        console.debug(tr("Got device %s (%s): %s (%o)"), device.deviceId, device.kind, device.label);
-                        if(device.kind !== 'audioinput') continue;
-
-                        $.spawn("option")
-                            .attr("device-id", device.deviceId)
-                            .attr("device-group", device.groupId)
-                            .text(device.label)
-                            .prop("selected", device.deviceId == active_device)
-                            .appendTo(tag_select);
+                vad_tag.find('input[type=radio]').on('change', event => {
+                    const select = event.currentTarget as HTMLSelectElement;
+                    {
+                        vad_tag.find(".settings-vad-impl-entry").hide();
+                        vad_tag.find(".setting-vad-" + select.value).show();
+                    }
+                    {
+                        settings.changeGlobal("vad_type", select.value);
+                        globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+                    }
+
+                    switch (select.value) {
+                        case "ppt":
+                            let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                            ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+
+                            vad_tag.find(".vat_ppt_key").text(ppt.key_description(ppt_settings));
+                            vad_tag.find(".ppt-delay input").val(ppt_settings.delay === undefined ? 300 : ppt_settings.delay);
+
+                            break;
+                        case "vad":
+                            let slider = vad_tag.find(".vad_vad_slider");
+                            let vad: VoiceActivityDetectorVAD = globalClient.voiceConnection.voiceRecorder.getVADHandler() as VoiceActivityDetectorVAD;
+                            slider.val(vad.percentageThreshold);
+                            slider.trigger("change");
+                            globalClient.voiceConnection.voiceRecorder.update(true);
+                            vad.percentage_listener = per => {
+                                vad_tag.find(".vad_vad_bar_filler")
+                                    .css("width", (100 - per) + "%");
+                            };
+                            break;
                     }
-                }).catch(error => {
-                    console.error(tr("Could not enumerate over devices!"));
-                    console.error(error);
-                    display_error(tr("Could not get microphone device list!"));
                 });
 
-                if(tag_select.find("option:selected").length == 0)
-                    tag_select.find("option").prop("selected", true);
+                { //Initialized push to talk
+                    vad_tag.find(".vat_ppt_key").click(function () {
+                        let modal = createModal({
+                            body: "",
+                            header: () => {
+                                let head = $.spawn("div");
+                                head.text(tr("Type the key you wish"));
+                                head.css("background-color", "blue");
+                                return head;
+                            },
+                            footer: ""
+                        });
 
-            };
+                        let listener = (event: ppt.KeyEvent) => {
+                            if (event.type == ppt.EventType.KEY_TYPED) {
+                                settings.changeGlobal('vad_ppt_key', undefined); //TODO remove that because its legacy shit
+                                console.log(tr("Got key %o"), event);
 
-            {
-                tag_select.on('change', event => {
-                    let selected_tag = tag_select.find("option:selected");
-                    let deviceId = selected_tag.attr("device-id");
-                    let groupId = selected_tag.attr("device-group");
-                    console.log(tr("Selected microphone device: id: %o group: %o"), deviceId, groupId);
-                    globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
-                });
+                                let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                                ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+                                Object.assign(ppt_settings, event);
+                                settings.changeGlobal('vad_ppt_settings', ppt_settings);
+
+                                globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+
+                                ppt.unregister_key_listener(listener);
+                                modal.close();
+                                vad_tag.find(".vat_ppt_key").text(ppt.key_description(event));
+                            }
+                        };
+                        ppt.register_key_listener(listener);
+                        modal.open();
+                    });
+
+                    vad_tag.find(".ppt-delay input").on('change', event => {
+                        let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                        ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+                        ppt_settings.delay = (<HTMLInputElement>event.target).valueAsNumber;
+                        settings.changeGlobal('vad_ppt_settings', ppt_settings);
+
+                        globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+                    });
+                }
+
+                { //Initialized voice activation detection
+                    let slider = vad_tag.find(".vad_vad_slider");
+                    slider.on("input change", () => {
+                        settings.changeGlobal("vad_threshold", slider.val().toString());
+                        let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
+                        if (vad instanceof VoiceActivityDetectorVAD)
+                            vad.percentageThreshold = slider.val() as number;
+                        vad_tag.find(".vad_vad_slider_value").text(slider.val().toString());
+                    });
+                    modal.properties.registerCloseListener(() => {
+                        let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
+                        if (vad instanceof VoiceActivityDetectorVAD)
+                            vad.percentage_listener = undefined;
+
+                    });
+                }
+
+                let target_tag = vad_tag.find('input[type=radio][name="vad_type"][value="' + currentVAD + '"]');
+                if (target_tag.length == 0) {
+                    //TODO tr
+                    console.warn("Failed to find tag for " + currentVAD + ". Using latest tag!");
+                    target_tag = vad_tag.find('input[type=radio][name="vad_type"]').last();
+                }
+                target_tag.prop("checked", true);
+                setTimeout(() => target_tag.trigger('change'), 0);
             }
 
-            update_devices();
-            setting_tag.find(".button-device-update").on('click', event => update_devices());
+            { //Initialize microphone
+
+                const setting_tag = tag.find(".settings-microphone");
+                const tag_select = setting_tag.find(".audio-select-microphone");
+
+                const update_devices = () => { //List devices
+                    tag_select.empty();
+
+                    $.spawn("option")
+                        .attr("device-id", "")
+                        .attr("device-group", "")
+                        .text(tr("No device"))
+                        .appendTo(tag_select);
+
+                    navigator.mediaDevices.enumerateDevices().then(devices => {
+                        const active_device = globalClient.voiceConnection.voiceRecorder.device_id();
+
+                        for (const device of devices) {
+                            console.debug(tr("Got device %s (%s): %s (%o)"), device.deviceId, device.kind, device.label);
+                            if (device.kind !== 'audioinput') continue;
+
+                            $.spawn("option")
+                                .attr("device-id", device.deviceId)
+                                .attr("device-group", device.groupId)
+                                .text(device.label)
+                                .prop("selected", device.deviceId == active_device)
+                                .appendTo(tag_select);
+                        }
+                    }).catch(error => {
+                        console.error(tr("Could not enumerate over devices!"));
+                        console.error(error);
+                        display_error(tr("Could not get microphone device list!"));
+                    });
+
+                    if (tag_select.find("option:selected").length == 0)
+                        tag_select.find("option").prop("selected", true);
+
+                };
+
+                {
+                    tag_select.on('change', event => {
+                        let selected_tag = tag_select.find("option:selected");
+                        let deviceId = selected_tag.attr("device-id");
+                        let groupId = selected_tag.attr("device-group");
+                        console.log(tr("Selected microphone device: id: %o group: %o"), deviceId, groupId);
+                        globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
+                    });
+                }
+
+                update_devices();
+                setting_tag.find(".button-device-update").on('click', event => update_devices());
+            }
         }
 
         { //Initialize speaker
@@ -431,7 +434,7 @@ namespace Modals {
 
                 const active_device = audio.player.current_device();
                 audio.player.available_devices().then(devices => {
-                    for(const device of devices) {
+                    for (const device of devices) {
                         $.spawn("option")
                             .attr("device-id", device.device_id)
                             .text(device.name)
@@ -445,7 +448,7 @@ namespace Modals {
                 });
 
 
-                if(tag_select.find("option:selected").length == 0)
+                if (tag_select.find("option:selected").length == 0)
                     tag_select.find("option").prop("selected", true);
             }
 
@@ -498,7 +501,7 @@ namespace Modals {
                 const template_tag = $("#tmpl_settings-sound_entry");
                 const entry_tag = sound_tag.find(".sound-list-entries");
 
-                for(const _sound in Sound) {
+                for (const _sound in Sound) {
                     const sound_name = Sound[_sound];
 
                     console.log(sound.get_sound_volume(sound_name as Sound));
@@ -523,7 +526,7 @@ namespace Modals {
 
                 setTimeout(() => {
                     const entry_container = sound_tag.find(".sound-list-entries-container");
-                    if(entry_container.hasScrollBar())
+                    if (entry_container.hasScrollBar())
                         entry_container.addClass("scrollbar");
                 }, 100);
 
@@ -531,12 +534,12 @@ namespace Modals {
                 const filter_tag = sound_tag.find(".sound-list-filter input");
                 filter_tag.on('change keyup', event => {
                     const filter = ((<HTMLInputElement>event.target).value || "").toLowerCase();
-                    if(!filter)
+                    if (!filter)
                         entry_tag.find(".entry").show();
                     else {
                         entry_tag.find(".entry").each((_, _entry) => {
                             const entry = $(_entry);
-                            if(entry.text().toLowerCase().indexOf(filter) == -1)
+                            if (entry.text().toLowerCase().indexOf(filter) == -1)
                                 entry.hide();
                             else
                                 entry.show();
@@ -547,213 +550,175 @@ namespace Modals {
 
             modal.close_listener.push(sound.save);
         }
-
-        //Initialise microphones
-        /*
-        let select_microphone = tag.find(".voice_microphone_select");
-        let select_error = tag.find(".voice_microphone_select_error");
-
-        navigator.mediaDevices.enumerateDevices().then(devices => {
-            let recoder = globalClient.voiceConnection.voiceRecorder;
-
-            console.log("Got " + devices.length + " devices:");
-            for(let device of devices) {
-                console.log(" - Type: %s Name %s ID: %s Group: %s", device.kind, device.label, device.deviceId, device.groupId);
-                if(device.kind == "audioinput") {
-                    let dtag = $.spawn("option");
-                    dtag.attr("device-id", device.deviceId);
-                    dtag.attr("device-group", device.groupId);
-                    dtag.text(device.label);
-                    select_microphone.append(dtag);
-
-                    if(recoder) dtag.prop("selected", device.deviceId == recoder.device_id());
-                }
-            }
-        }).catch(error => {
-            console.error("Could not enumerate over devices!");
-            console.error(error);
-            select_error.text("Could not get device list!").show();
-        });
-
-        select_microphone.change(event => {
-            let deviceSelected = select_microphone.find("option:selected");
-            let deviceId = deviceSelected.attr("device-id");
-            let groupId = deviceSelected.attr("device-group");
-            console.log("Selected microphone device: id: %o group: %o", deviceId, groupId);
-            globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
-        });
-        */
-        //Initialise speakers
-
-   }
+    }
 
     function initialise_translations(tag: JQuery) {
-    { //Initialize the list
-       const tag_list = tag.find(".setting-list .list");
-       const tag_loading = tag.find(".setting-list .loading");
-       const template = $("#settings-translations-list-entry");
-       const restart_hint = tag.find(".setting-list .restart-note");
-       restart_hint.hide();
+        { //Initialize the list
+            const tag_list = tag.find(".setting-list .list");
+            const tag_loading = tag.find(".setting-list .loading");
+            const template = $("#settings-translations-list-entry");
+            const restart_hint = tag.find(".setting-list .restart-note");
+            restart_hint.hide();
 
-       const update_list = () => {
-           tag_list.empty();
+            const update_list = () => {
+                tag_list.empty();
 
-           const currently_selected = i18n.config.translation_config().current_translation_url;
-           { //Default translation
-               const tag = template.renderTag({
-                   type: "default",
-                   selected: !currently_selected || currently_selected == "default"
-               });
-               tag.on('click', () => {
-                   i18n.select_translation(undefined, undefined);
-                   tag_list.find(".selected").removeClass("selected");
-                   tag.addClass("selected");
-
-                   restart_hint.show();
-               });
-               tag.appendTo(tag_list);
-           }
-
-           {
-                const display_repository_info = (repository: i18n.TranslationRepository) => {
-                    const info_modal = createModal({
-                        header: tr("Repository info"),
-                        body: () => {
-                            return $("#settings-translations-list-entry-info").renderTag({
-                                type: "repository",
-                                name: repository.name,
-                                url: repository.url,
-                                contact: repository.contact,
-                                translations: repository.translations || []
-                            });
-                        },
-                        footer: () => {
-                            let footer = $.spawn("div");
-                            footer.addClass("modal-button-group");
-                            footer.css("margin-top", "5px");
-                            footer.css("margin-bottom", "5px");
-                            footer.css("text-align", "right");
-
-                            let buttonOk = $.spawn("button");
-                            buttonOk.text(tr("Close"));
-                            buttonOk.click(() => info_modal.close());
-                            footer.append(buttonOk);
-
-                            return footer;
-                        }
+                const currently_selected = i18n.config.translation_config().current_translation_url;
+                { //Default translation
+                    const tag = template.renderTag({
+                        type: "default",
+                        selected: !currently_selected || currently_selected == "default"
                     });
-                    info_modal.open()
-                };
-
-               tag_loading.show();
-               i18n.iterate_translations((repo, entry) => {
-                   let repo_tag = tag_list.find("[repository=\"" + repo.unique_id + "\"]");
-                   if(repo_tag.length == 0) {
-                       repo_tag = template.renderTag({
-                           type: "repository",
-                           name: repo.name || repo.url,
-                           id: repo.unique_id
-                       });
-
-                       repo_tag.find(".button-delete").on('click', e => {
-                           e.preventDefault();
-
-                           Modals.spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this repository?"), answer => {
-                                if(answer) {
-                                    i18n.delete_repository(repo);
-                                    update_list();
-                                }
-                           });
-                       });
-                       repo_tag.find(".button-info").on('click', e => {
-                           e.preventDefault();
-
-                           display_repository_info(repo);
-                       });
-
-                       tag_list.append(repo_tag);
-                   }
-
-                   const tag = template.renderTag({
-                       type: "translation",
-                       name: entry.info.name || entry.url,
-                       id: repo.unique_id,
-                       selected: i18n.config.translation_config().current_translation_url == entry.url
-                   });
-                   tag.find(".button-info").on('click', e => {
-                       e.preventDefault();
-
-                       const info_modal = createModal({
-                           header: tr("Translation info"),
-                           body: () => {
-                               const tag = $("#settings-translations-list-entry-info").renderTag({
-                                   type: "translation",
-                                   name: entry.info.name,
-                                   url: entry.url,
-                                   repository_name: repo.name,
-                                   contributors: entry.info.contributors || []
-                               });
-
-                               tag.find(".button-info").on('click', () => display_repository_info(repo));
-
-                               return tag;
-                           },
-                           footer: () => {
-                               let footer = $.spawn("div");
-                               footer.addClass("modal-button-group");
-                               footer.css("margin-top", "5px");
-                               footer.css("margin-bottom", "5px");
-                               footer.css("text-align", "right");
-
-                               let buttonOk = $.spawn("button");
-                               buttonOk.text(tr("Close"));
-                               buttonOk.click(() => info_modal.close());
-                               footer.append(buttonOk);
-
-                               return footer;
-                           }
-                       });
-                       info_modal.open()
-                   });
-                   tag.on('click', e => {
-                        if(e.isDefaultPrevented()) return;
-                        i18n.select_translation(repo, entry);
+                    tag.on('click', () => {
+                        i18n.select_translation(undefined, undefined);
                         tag_list.find(".selected").removeClass("selected");
                         tag.addClass("selected");
 
-                       restart_hint.show();
-                   });
-                   tag.insertAfter(repo_tag)
-               }, () => {
-                   tag_loading.hide();
-               });
-           }
+                        restart_hint.show();
+                    });
+                    tag.appendTo(tag_list);
+                }
 
-       };
+                {
+                    const display_repository_info = (repository: i18n.TranslationRepository) => {
+                        const info_modal = createModal({
+                            header: tr("Repository info"),
+                            body: () => {
+                                return $("#settings-translations-list-entry-info").renderTag({
+                                    type: "repository",
+                                    name: repository.name,
+                                    url: repository.url,
+                                    contact: repository.contact,
+                                    translations: repository.translations || []
+                                });
+                            },
+                            footer: () => {
+                                let footer = $.spawn("div");
+                                footer.addClass("modal-button-group");
+                                footer.css("margin-top", "5px");
+                                footer.css("margin-bottom", "5px");
+                                footer.css("text-align", "right");
 
-       {
-           tag.find(".button-add-repository").on('click', () => {
-               createInputModal("Enter URL", tr("Enter repository URL:<br>"), text => true, url => { //FIXME test valid url
-                   if(!url) return;
+                                let buttonOk = $.spawn("button");
+                                buttonOk.text(tr("Close"));
+                                buttonOk.click(() => info_modal.close());
+                                footer.append(buttonOk);
 
-                   tag_loading.show();
-                   i18n.load_repository(url as string).then(repository => {
-                       i18n.register_repository(repository);
-                       update_list();
-                   }).catch(error => {
-                       tag_loading.hide();
-                       createErrorModal("Failed to load repository", tr("Failed to query repository.<br>Ensure that this repository is valid and reachable.<br>Error: ") + error).open();
-                   })
-               }).open();
-           });
-       }
+                                return footer;
+                            }
+                        });
+                        info_modal.open()
+                    };
 
-       restart_hint.find(".button-reload").on('click', () => {
-           location.reload();
-       });
+                    tag_loading.show();
+                    i18n.iterate_translations((repo, entry) => {
+                        let repo_tag = tag_list.find("[repository=\"" + repo.unique_id + "\"]");
+                        if (repo_tag.length == 0) {
+                            repo_tag = template.renderTag({
+                                type: "repository",
+                                name: repo.name || repo.url,
+                                id: repo.unique_id
+                            });
 
-       update_list();
-    }
+                            repo_tag.find(".button-delete").on('click', e => {
+                                e.preventDefault();
+
+                                Modals.spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this repository?"), answer => {
+                                    if (answer) {
+                                        i18n.delete_repository(repo);
+                                        update_list();
+                                    }
+                                });
+                            });
+                            repo_tag.find(".button-info").on('click', e => {
+                                e.preventDefault();
+
+                                display_repository_info(repo);
+                            });
+
+                            tag_list.append(repo_tag);
+                        }
+
+                        const tag = template.renderTag({
+                            type: "translation",
+                            name: entry.info.name || entry.url,
+                            id: repo.unique_id,
+                            selected: i18n.config.translation_config().current_translation_url == entry.url
+                        });
+                        tag.find(".button-info").on('click', e => {
+                            e.preventDefault();
+
+                            const info_modal = createModal({
+                                header: tr("Translation info"),
+                                body: () => {
+                                    const tag = $("#settings-translations-list-entry-info").renderTag({
+                                        type: "translation",
+                                        name: entry.info.name,
+                                        url: entry.url,
+                                        repository_name: repo.name,
+                                        contributors: entry.info.contributors || []
+                                    });
+
+                                    tag.find(".button-info").on('click', () => display_repository_info(repo));
+
+                                    return tag;
+                                },
+                                footer: () => {
+                                    let footer = $.spawn("div");
+                                    footer.addClass("modal-button-group");
+                                    footer.css("margin-top", "5px");
+                                    footer.css("margin-bottom", "5px");
+                                    footer.css("text-align", "right");
+
+                                    let buttonOk = $.spawn("button");
+                                    buttonOk.text(tr("Close"));
+                                    buttonOk.click(() => info_modal.close());
+                                    footer.append(buttonOk);
+
+                                    return footer;
+                                }
+                            });
+                            info_modal.open()
+                        });
+                        tag.on('click', e => {
+                            if (e.isDefaultPrevented()) return;
+                            i18n.select_translation(repo, entry);
+                            tag_list.find(".selected").removeClass("selected");
+                            tag.addClass("selected");
+
+                            restart_hint.show();
+                        });
+                        tag.insertAfter(repo_tag)
+                    }, () => {
+                        tag_loading.hide();
+                    });
+                }
+
+            };
+
+            {
+                tag.find(".button-add-repository").on('click', () => {
+                    createInputModal("Enter URL", tr("Enter repository URL:<br>"), text => true, url => { //FIXME test valid url
+                        if (!url) return;
+
+                        tag_loading.show();
+                        i18n.load_repository(url as string).then(repository => {
+                            i18n.register_repository(repository);
+                            update_list();
+                        }).catch(error => {
+                            tag_loading.hide();
+                            createErrorModal("Failed to load repository", tr("Failed to query repository.<br>Ensure that this repository is valid and reachable.<br>Error: ") + error).open();
+                        })
+                    }).open();
+                });
+            }
+
+            restart_hint.find(".button-reload").on('click', () => {
+                location.reload();
+            });
+
+            update_list();
+        }
     }
 
     function initialise_profiles(modal: Modal, tag: JQuery) {
@@ -786,30 +751,30 @@ namespace Modals {
                     profiles.mark_need_save();
 
                     let tag: JQuery;
-                    if(selected_type == profiles.identities.IdentitifyType.TEAFORO) {
+                    if (selected_type == profiles.identities.IdentitifyType.TEAFORO) {
                         const forum_tag = tag = settings_tag.find(".identity-settings-teaforo");
 
                         forum_tag.find(".connected, .disconnected").hide();
-                        if(identity && identity.valid()) {
+                        if (identity && identity.valid()) {
                             forum_tag.find(".connected").show();
                         } else {
                             forum_tag.find(".disconnected").show();
                         }
-                    } else if(selected_type == profiles.identities.IdentitifyType.TEAMSPEAK) {
+                    } else if (selected_type == profiles.identities.IdentitifyType.TEAMSPEAK) {
                         console.log("Set: " + identity);
                         const teamspeak_tag = tag = settings_tag.find(".identity-settings-teamspeak");
                         teamspeak_tag.find(".identity_string").val("");
-                        if(identity)
+                        if (identity)
                             (identity as profiles.identities.TeaSpeakIdentity).export_ts().then(e => teamspeak_tag.find(".identity_string").val(e));
-                    } else if(selected_type == profiles.identities.IdentitifyType.NICKNAME) {
+                    } else if (selected_type == profiles.identities.IdentitifyType.NICKNAME) {
                         const name_tag = tag = settings_tag.find(".identity-settings-nickname");
-                        if(identity)
+                        if (identity)
                             name_tag.find("input").val(identity.name());
                         else
                             name_tag.find("input").val("");
                     }
 
-                    if(tag)
+                    if (tag)
                         tag.trigger('show');
                 };
 
@@ -821,7 +786,7 @@ namespace Modals {
         const update_profile_list = () => {
             const profile_list = tag.find(".profile-list .list").empty();
             const profile_template = $("#settings-profile-list-entry");
-            for(const profile of profiles.profiles()) {
+            for (const profile of profiles.profiles()) {
                 const list_tag = profile_template.renderTag({
                     profile_name: profile.profile_name,
                     id: profile.id
@@ -829,7 +794,7 @@ namespace Modals {
 
                 const profile_status_update = () => {
                     list_tag.find(".status").hide();
-                    if(profile.valid())
+                    if (profile.valid())
                         list_tag.find(".status-valid").show();
                     else
                         list_tag.find(".status-invalid").show();
@@ -839,7 +804,7 @@ namespace Modals {
                     profile_list.find(".selected").removeClass("selected");
                     list_tag.addClass("selected");
 
-                    if(profile == selected_profile) return;
+                    if (profile == selected_profile) return;
                     nickname_listener = () => list_tag.find(".name").text(profile.profile_name);
                     status_listener = profile_status_update;
 
@@ -848,14 +813,14 @@ namespace Modals {
 
 
                 profile_list.append(list_tag);
-                if((!selected_profile && profile.id == "default") || selected_profile == profile)
+                if ((!selected_profile && profile.id == "default") || selected_profile == profile)
                     setTimeout(() => list_tag.trigger('click'), 1);
                 profile_status_update();
             }
         };
 
         const display_error = (error?: string) => {
-            if(error){
+            if (error) {
                 settings_tag.find(".settings-profile-error").show().find(".message").html(error);
             } else
                 settings_tag.find(".settings-profile-error").hide();
@@ -881,9 +846,9 @@ namespace Modals {
                         createInfoModal(tr("Identity imported"), tr("Your identity has been successfully imported!")).open();
                     };
 
-                    if(profile && profile.valid()) {
+                    if (profile && profile.valid()) {
                         spawnYesNo(tr("Are you sure"), tr("Do you really want to import a new identity and override the old identity?"), result => {
-                            if(result)
+                            if (result)
                                 spawnTeamSpeakIdentityImport(set_identity);
                         });
                     } else
@@ -891,10 +856,10 @@ namespace Modals {
                 });
                 button_export.on('click', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
-                    if(!profile) return;
+                    if (!profile) return;
 
                     createInputModal(tr("File name"), tr("Please enter the file name"), text => !!text, name => {
-                        if(name) {
+                        if (name) {
                             profile.export_ts(true).then(data => {
                                 const element = $.spawn("a")
                                     .text("donwload")
@@ -925,9 +890,9 @@ namespace Modals {
                         });
                     };
 
-                    if(profile && profile.valid()) {
+                    if (profile && profile.valid()) {
                         spawnYesNo(tr("Are you sure"), tr("Do you really want to generate a new identity and override the old identity?"), result => {
-                            if(result)
+                            if (result)
                                 generate_identity();
                         });
                     } else
@@ -936,7 +901,7 @@ namespace Modals {
 
                 button_improve.on('click', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
-                    if(!profile) return;
+                    if (!profile) return;
 
                     spawnTeamSpeakIdentityImprove(profile).close_listener.push(() => teamspeak_tag.trigger('show'));
                 });
@@ -945,7 +910,7 @@ namespace Modals {
                 teamspeak_tag.on('show', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
 
-                    if(!profile || !profile.valid()) {
+                    if (!profile || !profile.valid()) {
                         identity_info_tag.hide();
                         teamspeak_tag.find(".identity-undefined").show();
                         button_export.prop("disabled", true);
@@ -964,12 +929,12 @@ namespace Modals {
 
             { //The forum
                 const teaforo_tag = settings_tag.find(".identity-settings-teaforo");
-                if(native_client) {
+                if (native_client) {
                     teaforo_tag.find(".native-teaforo-login").on('click', event => {
                         setTimeout(() => {
                             const forum = require("teaforo.js");
                             const call = () => {
-                                if(modal.shown) {
+                                if (modal.shown) {
                                     display_settings(selected_profile);
                                     status_listener();
                                 }
@@ -981,7 +946,8 @@ namespace Modals {
                 }
 
                 teaforo_tag.on('show', event => {
-                    display_error(); /* clear error */
+                    display_error();
+                    /* clear error */
                 });
             }
 
@@ -992,7 +958,7 @@ namespace Modals {
                     selected_profile.set_identity(profiles.identities.IdentitifyType.NICKNAME, new profiles.identities.NameIdentity(name));
                     profiles.mark_need_save();
 
-                    if(name.length < 3) {
+                    if (name.length < 3) {
                         display_error("Name must be at least 3 characters long!");
                         return;
                     }
@@ -1001,9 +967,9 @@ namespace Modals {
 
                 name_tag.on('show', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.NICKNAME);
-                    if(!profile)
+                    if (!profile)
                         display_error("invalid profile");
-                    else if(!profile.valid())
+                    else if (!profile.valid())
                         display_error("Name must be at least 3 characters long!");
                     else
                         display_error();
@@ -1015,9 +981,9 @@ namespace Modals {
         {
             settings_tag.find(".setting-name").on('change', event => {
                 const value = settings_tag.find(".setting-name").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.profile_name = value;
-                    if(nickname_listener)
+                    if (nickname_listener)
                         nickname_listener();
                     profiles.mark_need_save();
                     status_listener();
@@ -1025,7 +991,7 @@ namespace Modals {
             });
             settings_tag.find(".setting-default-nickname").on('change', event => {
                 const value = settings_tag.find(".setting-default-nickname").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.default_username = value;
                     profiles.mark_need_save();
                     status_listener();
@@ -1033,7 +999,7 @@ namespace Modals {
             });
             settings_tag.find(".setting-default-password").on('change', event => {
                 const value = settings_tag.find(".setting-default-password").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.default_username = value;
                     profiles.mark_need_save();
                     status_listener();
@@ -1045,7 +1011,7 @@ namespace Modals {
         {
             tag.find(".button-add-profile").on('click', event => {
                 createInputModal(tr("Please enter a name"), tr("Please enter a name for the new profile:<br>"), text => text.length > 0 && !profiles.find_profile_by_name(text), value => {
-                    if(value) {
+                    if (value) {
                         display_settings(profiles.create_new_profile(value as string));
                         update_profile_list();
                         profiles.mark_need_save();
@@ -1054,7 +1020,7 @@ namespace Modals {
             });
 
             tag.find(".button-set-default").on('click', event => {
-                if(selected_profile && selected_profile.id != 'default') {
+                if (selected_profile && selected_profile.id != 'default') {
                     profiles.set_default_profile(selected_profile);
                     update_profile_list();
                     profiles.mark_need_save();
@@ -1062,10 +1028,10 @@ namespace Modals {
             });
 
             tag.find(".button-delete").on('click', event => {
-                if(selected_profile && selected_profile.id != 'default') {
+                if (selected_profile && selected_profile.id != 'default') {
                     event.preventDefault();
-                    spawnYesNo(tr("Are you sure?"), tr ("Do you really want to delete this profile?"), result => {
-                        if(result) {
+                    spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this profile?"), result => {
+                        if (result) {
                             profiles.delete_profile(selected_profile);
                             update_profile_list();
                         }
@@ -1075,7 +1041,7 @@ namespace Modals {
         }
 
         modal.close_listener.push(() => {
-            if(profiles.requires_save())
+            if (profiles.requires_save())
                 profiles.save();
         });
         update_profile_list();
diff --git a/shared/js/ui/server.ts b/shared/js/ui/server.ts
index cf9d9dac..96ae2dcb 100644
--- a/shared/js/ui/server.ts
+++ b/shared/js/ui/server.ts
@@ -135,7 +135,21 @@ class ServerEntry {
     }
 
     spawnContextMenu(x: number, y: number, on_close: () => void = () => {}) {
+        let trigger_close = true;
         spawn_context_menu(x, y, {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show server info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-virtualserver_edit",
                 name: tr("Edit"),
@@ -162,7 +176,7 @@ class ServerEntry {
                     createInfoModal(tr("Buddy invite URL"), tr("Your buddy invite URL:<br>") + url + tr("<bt>This has been copied to your clipboard.")).open();
                 }
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
diff --git a/shared/js/ui/view.ts b/shared/js/ui/view.ts
index bb74e0b9..cc240fd9 100644
--- a/shared/js/ui/view.ts
+++ b/shared/js/ui/view.ts
@@ -755,4 +755,46 @@ class ChannelTree {
     get_first_channel?() : ChannelEntry {
         return this.channel_first;
     }
+
+    unsubscribe_all_channels(subscribe_specified?: boolean) {
+        if(!this.client.serverConnection || !this.client.serverConnection.connected())
+            return;
+
+        this.client.serverConnection.send_command('channelunsubscribeall').then(() => {
+            const channels: number[] = [];
+            for(const channel of this.channels) {
+                if(channel.subscribe_mode == ChannelSubscribeMode.SUBSCRIBED)
+                    channels.push(channel.getChannelId());
+            }
+
+            if(channels.length > 0) {
+                this.client.serverConnection.send_command('channelsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
+                    console.warn(tr("Failed to subscribe to specific channels (%o)"), channels);
+                });
+            }
+        }).catch(error => {
+            console.warn(tr("Failed to unsubscribe to all channels! (%o)"), error);
+        });
+    }
+
+    subscribe_all_channels() {
+        if(!this.client.serverConnection || !this.client.serverConnection.connected())
+            return;
+
+        this.client.serverConnection.send_command('channelsubscribeall').then(() => {
+            const channels: number[] = [];
+            for(const channel of this.channels) {
+                if(channel.subscribe_mode == ChannelSubscribeMode.UNSUBSCRIBED)
+                    channels.push(channel.getChannelId());
+            }
+
+            if(channels.length > 0) {
+                this.client.serverConnection.send_command('channelunsubscribe', channels.map(e => { return {cid: e}; })).catch(error => {
+                    console.warn(tr("Failed to unsubscribe to specific channels (%o)"), channels);
+                });
+            }
+        }).catch(error => {
+            console.warn(tr("Failed to subscribe to all channels! (%o)"), error);
+        });
+    }
 }
\ No newline at end of file
diff --git a/shared/js/utils/tab.ts b/shared/js/utils/tab.ts
index 4218522d..19ee06fa 100644
--- a/shared/js/utils/tab.ts
+++ b/shared/js/utils/tab.ts
@@ -40,11 +40,14 @@ var TabFunctions = {
         let content = $.spawn("div");
         content.addClass("tab-content");
 
+        content.append($.spawn("div").addClass("height-watcher"));
+
         let silentContent = $.spawn("div");
         silentContent.addClass("tab-content-invisible");
 
         /* add some kind of min height */
         const update_height = () => {
+            const height_watcher = tag.find("> .tab-content .height-watcher");
             const entries: JQuery = tag.find("> .tab-content-invisible x-content, > .tab-content x-content");
             console.error(entries);
             let max_height = 0;
@@ -56,13 +59,7 @@ var TabFunctions = {
                     max_height = height;
             });
 
-            console.error("HIGHT: " + max_height);
-            entries.each((_, _e) => {
-                const entry = $(_e);
-                entry.animate({
-                    'min-height': max_height + "px"
-                }, 250);
-            })
+            height_watcher.css('min-height', max_height + "px");
         };
 
         template.find("x-entry").each( (_, _entry) => {
diff --git a/shared/js/voice/VoiceHandler.ts b/shared/js/voice/VoiceHandler.ts
index 774cb86b..f4d37b82 100644
--- a/shared/js/voice/VoiceHandler.ts
+++ b/shared/js/voice/VoiceHandler.ts
@@ -144,6 +144,7 @@ class VoiceConnection {
     private vpacketId: number = 0;
     private chunkVPacketId: number = 0;
     private send_task: NodeJS.Timer;
+    private _tag_favicon: JQuery;
 
     constructor(client) {
         this.client = client;
@@ -171,6 +172,7 @@ class VoiceConnection {
         });
 
         this.send_task = setInterval(this.sendNextVoicePacket.bind(this), 20);
+        this._tag_favicon = $("head link[rel='icon']");
     }
 
     native_encoding_supported() : boolean {
@@ -463,6 +465,8 @@ class VoiceConnection {
 
         if(this.dataChannel)
             this.sendVoicePacket(new Uint8Array(0), this.current_channel_codec()); //TODO Use channel codec!
+
+        this._tag_favicon.attr('href', "img/favicon/teacup.png");
     }
 
     private handleVoiceStarted() {
@@ -470,5 +474,6 @@ class VoiceConnection {
 
         if(this.client && this.client.getClient())
             this.client.getClient().speaking = true;
+        this._tag_favicon.attr('href', "img/favicon/speaking.png");
     }
 }
\ No newline at end of file
diff --git a/shared/js/workers/pow/POWWorker.ts b/shared/js/workers/pow/POWWorker.ts
index 4800440b..77621dcd 100644
--- a/shared/js/workers/pow/POWWorker.ts
+++ b/shared/js/workers/pow/POWWorker.ts
@@ -1,6 +1,7 @@
 declare namespace WebAssembly {
     export function instantiateStreaming(stream: Promise<Response>, imports?: any) : Promise<ResultObject>;
 }
+declare function postMessage(message: any): void;
 
 const prefix = "[POWWorker] ";
 
diff --git a/vendor/bbcode b/vendor/bbcode
index 9a1c31f2..23f9aca6 160000
--- a/vendor/bbcode
+++ b/vendor/bbcode
@@ -1 +1 @@
-Subproject commit 9a1c31f27fcac129fa3503c2c1d2096c126d3fd2
+Subproject commit 23f9aca6b6dc1ffccd20d6da04953776a1882f2b
diff --git a/vendor/jqueryjquery.min.js b/vendor/jqueryjquery.min.js
new file mode 120000
index 00000000..36dde48f
--- /dev/null
+++ b/vendor/jqueryjquery.min.js
@@ -0,0 +1 @@
+C:/Users/WolverinDEV/TeaSpeak/TeaWeb/vendor/jquery/jquery.min.js
\ No newline at end of file
diff --git a/vendor/jsrender/jsrender.min.js b/vendor/jsrender/jsrender.min.js
index 1c0437c8..8920f58a 100644
--- a/vendor/jsrender/jsrender.min.js
+++ b/vendor/jsrender/jsrender.min.js
@@ -1,4 +1,4 @@
 /*! JsRender v0.9.90 (Beta): http://jsviews.com/#jsrender */
 /*! **VERSION FOR WEB** (For NODE.JS see http://jsviews.com/download/jsrender-node.js) */
-!function(e,t){var n=t.jQuery;"object"==typeof exports?module.exports=n?e(t,n):function(n){if(n&&!n.fn)throw"Provide jQuery or null";return e(t,n)}:"function"==typeof define&&define.amd?define(function(){return e(t)}):e(t,!1)}(function(e,t){"use strict";function n(e,t){return function(){var n,r=this,i=r.base;return r.base=e,n=t.apply(r,arguments),r.base=i,n}}function r(e,t){return ne(t)&&(t=n(e?e._d?e:n(a,e):a,t),t._d=1),t}function i(e,t){var n,i=t.props;for(n in i)!Ee.test(n)||e[n]&&e[n].fix||(e[n]="convert"!==n?r(e.constructor.prototype[n],i[n]):i[n])}function o(e){return e}function a(){return""}function s(e){try{throw console.log("JsRender dbg breakpoint: "+e),"dbg breakpoint"}catch(t){}return this.base?this.baseApply(arguments):e}function d(e){this.name=(t.link?"JsViews":"JsRender")+" Error",this.message=e||this.name}function l(e,t){if(e){for(var n in t)e[n]=t[n];return e}}function u(e,t,n){return e?re(e)?u.apply(ee,e):(le.delimiters=[e,t,he=n?n.charAt(0):he],ce=e.charAt(0),fe=e.charAt(1),ge=t.charAt(0),ve=t.charAt(1),e="\\"+ce+"(\\"+he+")?\\"+fe,t="\\"+ge+"\\"+ve,X="(?:(\\w+(?=[\\/\\s\\"+ge+"]))|(\\w+)?(:)|(>)|(\\*))\\s*((?:[^\\"+ge+"]|\\"+ge+"(?!\\"+ve+"))*?)",de.rTag="(?:"+X+")",X=new RegExp("(?:"+e+X+"(\\/)?|\\"+ce+"(\\"+he+")?\\"+fe+"(?:(?:\\/(\\w+))\\s*|!--[\\s\\S]*?--))"+t,"g"),de.rTmpl=new RegExp("^\\s|\\s$|<.*>|([^\\\\]|^)[{}]|"+e+".*"+t),pe):le.delimiters}function p(e,t){t||e===!0||(t=e,e=void 0);var n,r,i,o,a=this,s=!t||"root"===t;if(e){if(o=t&&a.type===t&&a,!o)if(n=a.views,a._.useKey){for(r in n)if(o=t?n[r].get(e,t):n[r])break}else for(r=0,i=n.length;!o&&r<i;r++)o=t?n[r].get(e,t):n[r]}else if(s)o=a.root;else for(;a&&!o;)o=a.type===t?a:void 0,a=a.parent;return o}function c(){var e=this.get("item");return e?e.index:void 0}function f(){return this.index}function g(t,n,r){var i,o,a,s,d=this,u=!we&&void 0!==n,p=d.ctx;if(t in p||t in(p=ae)){if(a=p&&p[t],"tag"===t||"root"===t||"parentTags"===t||d._.it===t)return a}else p=void 0;if((!a||!ne(a)&&d.linked||d.tagCtx)&&(a&&a._cxp||(p!==ae&&(d=d.tagCtx?d:(d=d.scope||d,!d.isTop&&d.ctx.tag||d),p=d._ocps,a=p&&p[t]||a),a&&a._cxp||!r&&!u||(a=de._crcp(t,a,d,p))),s=a&&a._cxp)){if(u)return de._ucp(t,n,d,s);if(r)return o=a[1]?de._ceo(a[1].deps):[_e],o.unshift(a[0]),o._cxp=s,o;a=a[1]?s.tag&&s.tag.cvtArgs?s.tag.cvtArgs(!0,s.tagElse)[s.ind]:a[1](a[0].data,a[0],de):a[0]._ocp}return a&&ne(a)&&(i=function(){return a.apply(this&&this!==e?this:d,arguments)},l(i,a),i._vw=d),i||a}function v(e){return e&&(e.fn?e:this.getRsc("templates",e)||ie(e))}function h(e,t,n,r){var o,a,s,d,u="number"==typeof n&&t.tmpl.bnds[n-1],p=t.linkCtx;if(void 0===r&&u&&u._lr&&(r=""),void 0!==r?n=r={props:{},args:[r]}:u&&(n=u(t.data,t,de)),u=u._bd&&u,a=n.args[0],e||u){if(o=p&&p.tag,n.view=t,!o){if(o=l(new de._tg,{_:{bnd:u,unlinked:!0},inline:!p,tagName:":",convert:e,flow:!0,tagCtx:n}),s=n.args.length,s>1)for(d=o.bindTo=[];s--;)d.unshift(s);p&&(p.tag=o,o.linkCtx=p),n.ctx=Q(n.ctx,(p?p.view:t).ctx),i(o,n)}o._er=r&&a,o.ctx=n.ctx||o.ctx||{},n.ctx=void 0,a=o.cvtArgs()[0]}return a=u&&t._.onRender?t._.onRender(a,t,o):a,void 0!=a?a:""}function m(e,t){var n,r,i,o,a,s,d,l=this;if(l.tagName?(s=l,l=s.tagCtxs?s.tagCtxs[t||0]:s.tagCtx):s=l.tag,a=s.bindTo,o=l.args,(d=s.convert)&&""+d===d&&(d="true"===d?void 0:l.view.getRsc("converters",d)||I("Unknown converter: '"+d+"'")),e&&e.length)o=e;else if(d&&!e&&(o=o.slice()),a){for(i=[],n=a.length;n--;)r=a[n],i.unshift(w(l,r));e&&(o=i)}if(d)if(a=a||[0],n=a.length,d=d.apply(s,i||o),re(d)&&d.length===n||(d=[d],a=[0],n=1),e)o=d;else for(;n--;)r=a[n],+r===r&&(o[r]=d[n]);return o}function w(e,t){return e=e[+t===t?"args":"props"],e&&e[t]}function x(e){return this.cvtArgs(!0,e)}function _(e,t){var n,r,i=this;if(""+t===t){for(;void 0===n&&i;)r=i.tmpl&&i.tmpl[e],n=r&&r[t],i=i.parent;return n||ee[e][t]}}function b(e,t,n,r,o,a){function s(e){var t;(t=d[e])&&(d[e]=t=re(t)?t:[t],E!==t.length&&I(e+" length not same as bindTo "))}t=t||Y;var d,l,u,p,c,f,g,v,h,m,x,_,b,y,k,C,T,j,A,R,V,$,E,M=0,N="",P=t.linkCtx||0,O=t.ctx,U=n||t.tmpl,q="number"==typeof r&&t.tmpl.bnds[r-1];for("tag"===e._is?(d=e,e=d.tagName,r=d.tagCtxs,u=d.template):(l=t.getRsc("tags",e)||I("Unknown tag: {{"+e+"}} "),u=l.template),void 0===a&&q&&(q._lr=(l.lateRender||q._lr)&&"false"!==q._lr)&&(a=""),void 0!==a?(N+=a,r=a=[{props:{},args:[],params:{}}]):q&&(r=q(t.data,t,de)),g=r.length;M<g;M++)m=r[M],y=m.tmpl,(!P||!P.tag||M&&!P.tag.inline||d._er||y&&+y===y)&&(y&&U.tmpls&&(m.tmpl=m.content=U.tmpls[y-1]),m.index=M,m.render=S,m.view=t,m.ctx=Q(m.ctx,O)),(n=m.props.tmpl)&&(m.tmpl=t.getTmpl(n),m.content=m.content||m.tmpl),d||(d=new l._ctr,k=!!d.init,d.parent=f=O&&O.tag,d.tagCtxs=r,R=d.dataMap,P&&(d.inline=!1,P.tag=d,d.linkCtx=P),(d._.bnd=q||P.fn)?d._.arrVws={}:d.dataBoundOnly&&I(e+" must be data-bound:\n{^{"+e+"}}")),r=d.tagCtxs,R=d.dataMap,m.tag=d,R&&r&&(m.map=r[M].map),d.flow||(x=m.ctx=m.ctx||{},p=d.parents=x.parentTags=O&&Q(x.parentTags,O.parentTags)||{},f&&(p[f.tagName]=f),p[d.tagName]=x.tag=d);if(!(d._er=a)){for(i(d,r[0]),d.rendering={},M=0;M<g;M++){if(m=d.tagCtx=r[M],A=m.props,d.ctx=m.ctx,!M){if(k&&(d.init(m,P,d.ctx),k=void 0),m.args.length||d.argDefault===!1||(m.args=j=[m.view.data],m.params.args=["#data"]),b=d.bindTo,void 0!==b)for(b=d.bindTo=re(b)?b:[b],v=b.length;v--;)$=b[v],isNaN(parseInt($))||($=parseInt($)),b[v]=$;b=d.bindTo||[0],E=b.length,d._.bnd&&(s("linkedElement"),s("linkedCtxParam")),P&&(P.attr=d.attr=P.attr||d.attr),c=d.attr,d._.noVws=c&&c!==Pe}if(j=d.cvtArgs(void 0,M),d.linkedCtxParam)for(v=E;v--;)(_=d.linkedCtxParam[v])&&($=b[v],m.ctx[_]=de._cp(w(m,$),w(m.params,$),m.view,d._.bnd&&{tag:d,ind:v,tagElse:M}));(C=A.dataMap||R)&&(j.length||A.dataMap)&&(T=m.map,T&&T.src===j[0]&&!o||(T&&T.src&&T.unmap(),T=m.map=C.map(j[0],A,void 0,!d._.bnd)),j=[T.tgt]),h=void 0,d.render&&(h=d.render.apply(d,j),t.linked&&h&&!Me.test(h)&&(n={links:[]},n.render=n.fn=function(){return h},h=F(n,t.data,void 0,!0,t,void 0,void 0,d))),j.length||(j=[t]),void 0===h&&(V=j[0],d.contentCtx&&(V=d.contentCtx===!0?t:d.contentCtx(V)),h=m.render(V,!0)||(o?void 0:"")),N=N?N+(h||""):h}d.rendering=void 0}return d.tagCtx=r[0],d.ctx=d.tagCtx.ctx,d._.noVws&&d.inline&&(N="text"===c?oe.html(N):""),q&&t._.onRender?t._.onRender(N,t,d):N}function y(e,t,n,r,i,o,a,s){var d,l,u,p=this,f="array"===t;p.content=s,p.views=f?[]:{},p.data=r,p.tmpl=i,u=p._={key:0,useKey:f?0:1,id:""+Se++,onRender:a,bnds:{}},p.linked=!!a,p.type=t||"top",(p.parent=n)?(p.root=n.root||p,d=n.views,l=n._,p.isTop=l.scp,p.scope=(!e.tag||e.tag===n.ctx.tag)&&!p.isTop&&n.scope||p,l.useKey?(d[u.key="_"+l.useKey++]=p,p.index=qe,p.getIndex=c):d.length===(u.key=p.index=o)?d.push(p):d.splice(o,0,p),p.ctx=e||n.ctx):p.ctx=e||{}}function k(e){var t,n,r;for(t in Le)n=t+"s",e[n]&&(r=e[n],e[n]={},ee[n](r,e))}function C(e,t,n){function i(){var t=this;t._={unlinked:!0},t.inline=!0,t.tagName=e}var o,a,s,d=(t.bindTo,new de._tg);if(ne(t)?t={depends:t.depends,render:t}:""+t===t&&(t={template:t}),a=t.baseTag){t.flow=!!t.flow,t.baseTag=a=""+a===a?n&&n.tags[a]||se[a]:a,d=l(d,a);for(s in t)d[s]=r(a[s],t[s])}else d=l(d,t);return void 0!==(o=d.template)&&(d.template=""+o===o?ie[o]||ie(o):o),(i.prototype=d).constructor=d._ctr=i,n&&(d._parentTmpl=n),d}function T(e){return this.base.apply(this,e)}function j(e,n,r,i){function o(n){var o,s;if(""+n===n||n.nodeType>0&&(a=n)){if(!a)if(/^\.\/[^\\:*?"<>]*$/.test(n))(s=ie[e=e||n])?n=s:a=document.getElementById(n);else if(t.fn&&!de.rTmpl.test(n))try{a=t(n,document)[0]}catch(d){}a&&(i?n=a.innerHTML:(o=a.getAttribute(Oe),o&&(o!==Ue?(n=ie[o],delete ie[o]):t.fn&&(n=t.data(a)[Ue])),o&&n||(e=e||(t.fn?Ue:n),n=j(e,a.innerHTML,r,i)),n.tmplName=e=e||o,e!==Ue&&(ie[e]=n),a.setAttribute(Oe,e),t.fn&&t.data(a,Ue,n))),a=void 0}else n.fn||(n=void 0);return n}var a,s,d=n=n||"";if(de._html=oe.html,0===i&&(i=void 0,d=o(d)),i=i||(n.markup?n:{}),i.tmplName=e,r&&(i._parentTmpl=r),!d&&n.markup&&(d=o(n.markup))&&d.fn&&(d=d.markup),void 0!==d)return d.fn||n.fn?d.fn&&(s=d):(n=$(d,i),U(d.replace(Te,"\\$&"),n)),s||(s=l(function(){return s.render.apply(s,arguments)},n),k(s)),s}function A(e,t){return ne(e)?e.call(t):e}function R(e){for(var t=[],n=0,r=e.length;n<r;n++)t.push(e[n].unmap());return t}function V(e,n){function r(e){u.apply(this,e)}function i(){return new r(arguments)}function o(e,t){for(var n,r,i,o,a=0;a<w;a++)i=c[a],n=void 0,i+""!==i&&(n=i,i=n.getter),void 0===(o=e[i])&&n&&void 0!==(r=n.defaultVal)&&(o=A(r,e)),t(o,n&&p[n.type],i)}function a(t){t=t+""===t?JSON.parse(t):t;var n,r,i=0,a=t,l=[];if(re(t)){for(t=t||[],n=t.length;i<n;i++)l.push(this.map(t[i]));return l._is=e,l.unmap=d,l.merge=s,l}if(t){o(t,function(e,t){t&&(e=t.map(e)),l.push(e)}),a=this.apply(this,l);for(r in t)r===te||_[r]||(a[r]=t[r])}return a}function s(e){e=e+""===e?JSON.parse(e):e;var t,n,r,a,s,d,l,u,p,c=0,f=this;if(re(f)){for(l={},p=[],n=e.length,r=f.length;c<n;c++){for(u=e[c],d=!1,t=0;t<r&&!d;t++)l[t]||(s=f[t],g&&(l[t]=d=g+""===g?u[g]&&(_[g]?s[g]():s[g])===u[g]:g(s,u)));d?(s.merge(u),p.push(s)):p.push(i.map(u))}return void(x?x(f).refresh(p,!0):f.splice.apply(f,[0,f.length].concat(p)))}o(e,function(e,t,n){t?f[n]().merge(e):f[n](e)});for(a in e)a===te||_[a]||(f[a]=e[a])}function d(){var e,t,n,r,i=0,o=this;if(re(o))return R(o);for(e={};i<w;i++)t=c[i],n=void 0,t+""!==t&&(n=t,t=n.getter),r=o[t](),e[t]=n&&r&&p[n.type]?re(r)?R(r):r.unmap():r;for(t in o)"_is"===t||_[t]||t===te||"_"===t.charAt(0)&&_[t.slice(1)]||ne(o[t])||(e[t]=o[t]);return e}var l,u,p=this,c=n.getters,f=n.extend,g=n.id,v=t.extend({_is:e||"unnamed",unmap:d,merge:s},f),h="",m="",w=c?c.length:0,x=t.observable,_={};for(r.prototype=v,l=0;l<w;l++)!function(e){e=e.getter||e,_[e]=l+1;var t="_"+e;h+=(h?",":"")+e,m+="this."+t+" = "+e+";\n",v[e]=v[e]||function(n){return arguments.length?void(x?x(this).setProperty(e,n):this[t]=n):this[t]},x&&(v[e].set=v[e].set||function(e){this[t]=e})}(c[l]);return u=new Function(h,m.slice(0,-1)),u.prototype=v,v.constructor=u,i.map=a,i.getters=c,i.extend=f,i.id=g,i}function $(e,n){var r,i=ue._wm||{},o=l({tmpls:[],links:{},bnds:[],_is:"template",render:S},n);return o.markup=e,n.htmlTag||(r=Re.exec(e),o.htmlTag=r?r[1].toLowerCase():""),r=i[o.htmlTag],r&&r!==i.div&&(o.markup=t.trim(o.markup)),o}function E(e,t){function n(i,o,a){var s,d,l,u=de.onStore[e];if(i&&typeof i===Ie&&!i.nodeType&&!i.markup&&!i.getTgt&&!("viewModel"===e&&i.getters||i.extend)){for(d in i)n(d,i[d],o);return o||ee}return void 0===o&&(o=i,i=void 0),i&&""+i!==i&&(a=o,o=i,i=void 0),l=a?"viewModel"===e?a:a[r]=a[r]||{}:n,s=t.compile,null===o?i&&delete l[i]:(s&&(o=s.call(l,i,o,a,0)||{},o._is=e),i&&(l[i]=o)),u&&u(i,o,a,s),o}var r=e+"s";ee[r]=n}function M(e){pe[e]=function(t){return arguments.length?(le[e]=t,pe):le[e]}}function N(e){function t(t,n){this.tgt=e.getTgt(t,n)}return ne(e)&&(e={getTgt:e}),e.baseMap&&(e=l(l({},e.baseMap),e)),e.map=function(e,n){return new t(e,n)},e}function S(e,t,n,r,i,o){var a,s,d,l,u,p,c,f,g=r,v="";if(t===!0?(n=t,t=void 0):typeof t!==Ie&&(t=void 0),(d=this.tag)?(u=this,g=g||u.view,l=g.getTmpl(d.template||u.tmpl),arguments.length||(e=g)):l=this,l){if(!r&&e&&"view"===e._is&&(g=e),g&&e===g&&(e=g.data),p=!g,we=we||p,g||((t=t||{}).root=e),!we||ue.useViews||l.useViews||g&&g!==Y)v=F(l,e,t,n,g,i,o,d);else{if(g?(c=g.data,f=g.index,g.index=qe):(g=Y,c=g.data,g.data=e,g.ctx=t),re(e)&&!n)for(a=0,s=e.length;a<s;a++)g.index=a,g.data=e[a],v+=l.fn(e[a],g,de);else g.data=e,v+=l.fn(e,g,de);g.data=c,g.index=f}p&&(we=void 0)}return v}function F(e,t,n,r,i,o,a,s){function d(e){_=l({},n),_[x]=e}var u,p,c,f,g,v,h,m,w,x,_,b,k="";if(s&&(w=s.tagName,b=s.tagCtx,n=n?Q(n,s.ctx):s.ctx,e===i.content?h=e!==i.ctx._wrp?i.ctx._wrp:void 0:e!==b.content?e===s.template?(h=b.tmpl,n._wrp=b.content):h=b.content||i.content:h=i.content,b.props.link===!1&&(n=n||{},n.link=!1),(x=b.props.itemVar)&&("~"!==x.charAt(0)&&O("Use itemVar='~myItem'"),x=x.slice(1))),i&&(a=a||i._.onRender,n=Q(n,i.ctx)),o===!0&&(v=!0,o=0),a&&(n&&n.link===!1||s&&s._.noVws)&&(a=void 0),m=a,a===!0&&(m=void 0,a=i._.onRender),n=e.helpers?Q(e.helpers,n):n,_=n,re(t)&&!r)for(c=v?i:void 0!==o&&i||new y(n,"array",i,t,e,o,a,h),i&&i._.useKey&&(c._.bnd=!s||s._.bnd&&s),u=0,p=t.length;u<p;u++)x&&d(t[u]),f=new y(_,"item",c,t[u],e,(o||0)+u,a,c.content),f._.it=x,g=e.fn(t[u],f,de),k+=c._.onRender?c._.onRender(g,f):g;else x&&d(t),c=v?i:new y(_,w||"data",i,t,e,o,a,h),c._.it=x,k+=e.fn(t,c,de);return s&&(c.tag=s,c.tagElse=b.index,b.contentView=c),m?m(k,c):k}function P(e,t,n){var r=void 0!==n?ne(n)?n.call(t.data,e,t):n||"":"{Error: "+(e.message||e)+"}";return le.onError&&void 0!==(n=le.onError.call(t.data,e,n&&r,t))&&(r=n),t&&!t.linkCtx?oe.html(r):r}function I(e){throw new de.Err(e)}function O(e){I("Syntax error\n"+e)}function U(e,t,n,r,i){function o(t){t-=v,t&&m.push(e.substr(v,t).replace(ke,"\\n"))}function a(t,n){t&&(t+="}}",O((n?"{{"+n+"}} block has {{/"+t+" without {{"+t:"Unmatched or missing {{/"+t)+", in template:\n"+e))}function s(s,d,l,c,g,x,_,b,y,k,C,T){(_&&d||y&&!l||b&&":"===b.slice(-1)||k)&&O(s),x&&(g=":",c=Pe),y=y||n&&!i;var j,A=(d||n)&&[[]],R="",V="",$="",E="",M="",N="",S="",F="",P=!y&&!g;l=l||(b=b||"#data",g),o(T),v=T+s.length,_?f&&m.push(["*","\n"+b.replace(/^:/,"ret+= ").replace(Ce,"$1")+";\n"]):l?("else"===l&&(Ae.test(b)&&O('for "{{else if expr}}" use "{{else expr}}"'),A=w[8]&&[[]],w[9]=e.substring(w[9],T),w=h.pop(),m=w[2],P=!0),b&&B(b.replace(ke," "),A,t).replace(je,function(e,t,n,r,i,o,a,s){return r="'"+i+"':",a?(V+=o+",",E+="'"+s+"',"):n?($+=r+"j._cp("+o+',"'+s+'",view),',N+=r+"'"+s+"',"):t?S+=o:("trigger"===i&&(F+=o),"lateRender"===i&&(j=s),R+=r+o+",",M+=r+"'"+s+"',",p=p||Ee.test(i)),""}).slice(0,-1),A&&A[0]&&A.pop(),u=[l,c||!!r||p||"",P&&[],J(E||(":"===l?"'#data',":""),M,N),J(V||(":"===l?"data,":""),R,$),S,F,j,A||0],m.push(u),P&&(h.push(w),w=u,w[9]=v)):C&&(a(C!==w[0]&&"else"!==w[0]&&C,w[0]),w[9]=e.substring(w[9],T),w=h.pop()),a(!w&&C),m=w[2]}var d,l,u,p,c,f=le.allowCode||t&&t.allowCode||pe.allowCode===!0,g=[],v=0,h=[],m=g,w=[,,g];if(f&&t._is&&(t.allowCode=f),n&&(void 0!==r&&(e=e.slice(0,-r.length-2)+ge),e=ce+e+ve),a(h[0]&&h[0][2].pop()[0]),e.replace(X,s),o(e.length),(v=g[g.length-1])&&a(""+v!==v&&+v[9]===v[9]&&v[0]),n){for(l=L(g,e,n),c=[],d=g.length;d--;)c.unshift(g[d][8]);q(l,c)}else l=L(g,t);return l}function q(e,t){var n,r,i=0,o=t.length;for(e.deps=[],e.paths=[];i<o;i++){e.paths.push(r=t[i]);for(n in r)"_jsvto"!==n&&r.hasOwnProperty(n)&&r[n].length&&!r[n].skp&&(e.deps=e.deps.concat(r[n]))}}function J(e,t,n){return[e.slice(0,-1),t.slice(0,-1),n.slice(0,-1)]}function K(e,t){return"\n\t"+(t?t+":{":"")+"args:["+e[0]+"]"+(e[1]||!t?",\n\tprops:{"+e[1]+"}":"")+(e[2]?",\n\tctx:{"+e[2]+"}":"")}function B(e,t,n){function r(r,m,w,x,_,b,y,k,C,T,j,A,R,V,$,E,M,N,S,F){function P(e,n,r,a,s,d,p,c){var f="."===r;if(r&&(_=_.slice(n.length),/^\.?constructor$/.test(c||_)&&O(e),f||(e=(a?'view.ctxPrm("'+a+'")':s?"view":"data")+(c?(d?"."+d:a?"":s?"":"."+r)+(p||""):(c=a?"":s?d||"":r,"")),e+=c?"."+c:"",e=n+("view.data"===e.slice(0,9)?e.slice(5):e)),l)){if(J="linkTo"===i?o=t._jsvto=t._jsvto||[]:u.bd,K=f&&J[J.length-1]){if(K._cpfn){for(;K.sb;)K=K.sb;K.bnd&&(_="^"+_.slice(1)),K.sb=_,K.bnd=K.bnd||"^"===_.charAt(0)}}else J.push(_);h[g]=S+(f?1:0)}return e}x&&!k&&(_=x+_),b=b||"",w=w||m||A,_=_||C,T=T||M||"";var I,q,J,K,B,L=")";if("["===T&&(T="[j._sq(",L=")]"),!y||d||s){if(l&&E&&!d&&!s&&(!i||a||o)&&(I=h[g-1],F.length-1>S-(I||0))){if(I=F.slice(I,S+r.length),q!==!0)if(J=o||p[g-1].bd,K=J[J.length-1],K&&K.prm){for(;K.sb&&K.sb.prm;)K=K.sb;B=K.sb={path:K.sb,bnd:K.bnd}}else J.push(B={path:J.pop()});E=fe+":"+I+" onerror=''"+ge,q=f[E],q||(f[E]=!0,f[E]=q=U(E,n,!0)),q!==!0&&B&&(B._cpfn=q,B.prm=u.bd,B.bnd=B.bnd||B.path&&B.path.indexOf("^")>=0)}return d?(d=!R,d?r:A+'"'):s?(s=!V,s?r:A+'"'):(w?(h[g]=S++,u=p[++g]={bd:[]},w):"")+(N?g?"":(c=F.slice(c,S),(i?(i=a=o=!1,"\b"):"\b,")+c+(c=S+r.length,l&&t.push(u.bd=[]),"\b")):k?(g&&O(e),l&&t.pop(),i=_,a=x,c=S+r.length,l&&(l=u.bd=t[i]=[],l.skp=!x),_+":"):_?_.split("^").join(".").replace(be,P)+(T?(u=p[++g]={bd:[]},v[g]=L,T):b):b?b:$?($=v[g]||$,v[g]=!1,u=p[--g],$+(T?(u=p[++g],v[g]=L,T):"")):j?(v[g]||O(e),","):m?"":(d=R,s=V,'"'))}O(e)}var i,o,a,s,d,l=t&&t[0],u={bd:l},p={0:u},c=0,f=(n?n.links:l&&(l.links=l.links||{}))||Y.tmpl.links,g=0,v={},h={},m=(e+(n?" ":"")).replace(ye,r);return!g&&m||O(e)}function L(e,t,n){var r,i,o,a,s,d,l,u,p,c,f,g,v,h,m,w,x,_,b,y,k,C,T,j,A,R,V,E,M,N,S,F=0,P=ue.useViews||t.useViews||t.tags||t.templates||t.helpers||t.converters,I="",U={},J=e.length;for(""+t===t?(_=n?'data-link="'+t.replace(ke," ").slice(1,-1)+'"':t,t=0):(_=t.tmplName||"unnamed",t.allowCode&&(U.allowCode=!0),t.debug&&(U.debug=!0),f=t.bnds,x=t.tmpls),r=0;r<J;r++)if(i=e[r],""+i===i)I+='\n+"'+i+'"';else if(o=i[0],"*"===o)I+=";\n"+i[1]+"\nret=ret";else{if(a=i[1],k=!n&&i[2],s=K(i[3],"params")+"},"+K(v=i[4]),N=i[6],S=i[7],C=i[9]&&i[9].replace(Ce,"$1"),(A="else"===o)?g&&g.push(i[8]):(E=i[5]||le.debugMode!==!1&&"undefined",f&&(g=i[8])&&(g=[g],F=f.push(1))),P=P||v[1]||v[2]||g||/view.(?!index)/.test(v[0]),(R=":"===o)?a&&(o=a===Pe?">":a+o):(k&&(b=$(C,U),b.tmplName=_+"/"+o,b.useViews=b.useViews||P,L(k,b),P=b.useViews,x.push(b)),A||(y=o,P=P||o&&(!se[o]||!se[o].flow),j=I,I=""),T=e[r+1],T=T&&"else"===T[0]),M=E?";\ntry{\nret+=":"\n+",h="",m="",R&&(g||N||a&&a!==Pe||S)){if(V=new Function("data,view,j,u","// "+_+" "+ ++F+" "+o+"\nreturn {"+s+"};"),V._er=E,V._tag=o,V._bd=!!g,V._lr=S,n)return V;q(V,g),w='c("'+a+'",view,',c=!0,h=w+F+",",m=")"}if(I+=R?(n?(E?"try{\n":"")+"return ":M)+(c?(c=void 0,P=p=!0,w+(V?(f[F-1]=V,F):"{"+s+"}")+")"):">"===o?(l=!0,"h("+v[0]+")"):(u=!0,"((v="+v[0]+")!=null?v:"+(n?"null)":'"")'))):(d=!0,"\n{view:view,tmpl:"+(k?x.length:"0")+","+s+"},"),y&&!T){if(I="["+I.slice(0,-1)+"]",w='t("'+y+'",view,this,',n||g){if(I=new Function("data,view,j,u"," // "+_+" "+F+" "+y+"\nreturn "+I+";"),I._er=E,I._tag=y,g&&q(f[F-1]=I,g),I._lr=S,n)return I;h=w+F+",undefined,",m=")"}I=j+M+w+(I.deps&&F||I)+")",g=0,y=0}E&&!T&&(P=!0,I+=";\n}catch(e){ret"+(n?"urn ":"+=")+h+"j._err(e,view,"+E+")"+m+";}"+(n?"":"ret=ret"))}I="// "+_+"\nvar v"+(d?",t=j._tag":"")+(p?",c=j._cnvt":"")+(l?",h=j._html":"")+(n?";\n":',ret=""\n')+(U.debug?"debugger;":"")+I+(n?"\n":";\nreturn ret;");try{I=new Function("data,view,j,u",I)}catch(B){O("Compiled template code:\n\n"+I+'\n: "'+(B.message||B)+'"')}return t&&(t.fn=I,t.useViews=!!P),I}function Q(e,t){return e&&e!==t?t?l(l({},t),e):e:t&&l({},t)}function H(e){return Fe[e]||(Fe[e]="&#"+e.charCodeAt(0)+";")}function D(e){var t,n,r=[];if(typeof e===Ie)for(t in e)n=e[t],t!==te&&e.hasOwnProperty(t)&&!ne(n)&&r.push({key:t,prop:n});return r}function Z(e,n,r){var i=this.jquery&&(this[0]||I("Unknown template")),o=i.getAttribute(Oe);return S.call(o&&t.data(i)[Ue]||ie(i),e,n,r)}function z(e){return void 0!=e?$e.test(e)&&(""+e).replace(Ne,H)||e:""}var G=t===!1;t=t&&t.fn?t:e.jQuery;var W,X,Y,ee,te,ne,re,ie,oe,ae,se,de,le,ue,pe,ce,fe,ge,ve,he,me,we,xe="v0.9.90",_e="_ocp",be=/^(!*?)(?:null|true|false|\d[\d.]*|([\w$]+|\.|~([\w$]+)|#(view|([\w$]+))?)([\w$.^]*?)(?:[.[^]([\w$]+)\]?)?)$/g,ye=/(\()(?=\s*\()|(?:([([])\s*)?(?:(\^?)(!*?[#~]?[\w$.^]+)?\s*((\+\+|--)|\+|-|&&|\|\||===|!==|==|!=|<=|>=|[<>%*:?\/]|(=))\s*|(!*?[#~]?[\w$.^]+)([([])?)|(,\s*)|(\(?)\\?(?:(')|("))|(?:\s*(([)\]])(?=\s*[.^]|\s*$|[^([])|[)\]])([([]?))|(\s+)/g,ke=/[ \t]*(\r\n|\n|\r)/g,Ce=/\\(['"])/g,Te=/['"\\]/g,je=/(?:\x08|^)(onerror:)?(?:(~?)(([\w$_\.]+):)?([^\x08]+))\x08(,)?([^\x08]+)/gi,Ae=/^if\s/,Re=/<(\w+)[>\s]/,Ve=/[\x00`><"'&=]/g,$e=/[\x00`><\"'&=]/,Ee=/^on[A-Z]|^convert(Back)?$/,Me=/^\#\d+_`[\s\S]*\/\d+_`$/,Ne=Ve,Se=0,Fe={"&":"&amp;","<":"&lt;",">":"&gt;","\0":"&#0;","'":"&#39;",'"':"&#34;","`":"&#96;","=":"&#61;"},Pe="html",Ie="object",Oe="data-jsv-tmpl",Ue="jsvTmpl",qe="For #index in nested block use #getIndex().",Je={},Ke=e.jsrender,Be=Ke&&t&&!t.render,Le={template:{compile:j},tag:{compile:C},viewModel:{compile:V},helper:{},converter:{}};if(ee={jsviews:xe,sub:{View:y,Err:d,tmplFn:U,parse:B,extend:l,extendCtx:Q,syntaxErr:O,onStore:{template:function(e,t){null===t?delete Je[e]:Je[e]=t}},addSetting:M,settings:{allowCode:!1},advSet:a,_ths:i,_gm:r,_tg:function(){},_cnvt:h,_tag:b,_er:I,_err:P,_cp:o,_sq:function(e){return"constructor"===e&&O(""),e}},settings:{delimiters:u,advanced:function(e){return e?(l(ue,e),de.advSet(),pe):ue}},map:N},(d.prototype=new Error).constructor=d,c.depends=function(){return[this.get("item"),"index"]},f.depends="index",y.prototype={get:p,getIndex:f,getRsc:_,getTmpl:v,ctxPrm:g,_is:"view"},de=ee.sub,pe=ee.settings,!(Ke||t&&t.render)){for(W in Le)E(W,Le[W]);oe=ee.converters,ae=ee.helpers,se=ee.tags,de._tg.prototype={baseApply:T,cvtArgs:m,bndArgs:x,ctxPrm:g},Y=de.topView=new y,t?(t.fn.render=Z,te=t.expando,t.observable&&(l(de,t.views.sub),ee.map=t.views.map)):(t={},G&&(e.jsrender=t),t.renderFile=t.__express=t.compile=function(){throw"Node.js: use npm jsrender, or jsrender-node.js"},t.isFunction=function(e){return"function"==typeof e},t.isArray=Array.isArray||function(e){return"[object Array]"==={}.toString.call(e)},de._jq=function(e){e!==t&&(l(e,t),t=e,t.fn.render=Z,delete t.jsrender,te=t.expando)},t.jsrender=xe),le=de.settings,le.allowCode=!1,ne=t.isFunction,t.render=Je,t.views=ee,t.templates=ie=ee.templates;for(me in le)M(me);(pe.debugMode=function(e){return void 0===e?le.debugMode:(le.debugMode=e,le.onError=e+""===e?new Function("","return '"+e+"';"):ne(e)?e:void 0,pe)})(!1),ue=le.advanced={useViews:!1,_jsv:!1},se({"if":{render:function(e){var t=this,n=t.tagCtx,r=t.rendering.done||!e&&(arguments.length||!n.index)?"":(t.rendering.done=!0,void(t.selected=n.index));return r},contentCtx:!0,flow:!0},"for":{render:function(e){var t,n=!arguments.length,r=this,i=r.tagCtx,o="",a=0;return r.rendering.done||(t=n?i.view.data:e,void 0!==t&&(o+=i.render(t,n),a+=re(t)?t.length:1),(r.rendering.done=a)&&(r.selected=i.index)),o},flow:!0},props:{baseTag:"for",dataMap:N(D),flow:!0},include:{flow:!0},"*":{render:o,flow:!0},":*":{render:o,flow:!0},dbg:ae.dbg=oe.dbg=s}),oe({html:z,attr:z,url:function(e){return void 0!=e?encodeURI(""+e):null===e?e:""}})}return le=de.settings,re=(t||Ke).isArray,pe.delimiters("{{","}}","^"),Be&&Ke.views.sub._jq(t),t||Ke},window);
+!function(e,t){var n=t.jQuery;"object"==typeof exports?module.exports=n?e(t,n):function(n){if(n&&!n.fn)throw"Provide jQuery or null";return e(t,n)}:"function"==typeof define&&define.amd?define(function(){return e(t)}):e(t,!1)}(function(e,t){"use strict";function n(e,t){return function(){var n,r=this,i=r.base;return r.base=e,n=t.apply(r,arguments),r.base=i,n}}function r(e,t){return ne(t)&&(t=n(e?e._d?e:n(a,e):a,t),t._d=1),t}function i(e,t){var n,i=t.props;for(n in i)!Ee.test(n)||e[n]&&e[n].fix||(e[n]="convert"!==n?r(e.constructor.prototype[n],i[n]):i[n])}function o(e){return e}function a(){return""}function s(e){try{throw console.log("JsRender dbg breakpoint: "+e),"dbg breakpoint"}catch(t){}return this.base?this.baseApply(arguments):e}function d(e){this.name=(t.link?"JsViews":"JsRender")+" Error",this.message=e||this.name}function l(e,t){if(e){for(var n in t)e[n]=t[n];return e}}function u(e,t,n){return e?re(e)?u.apply(ee,e):(le.delimiters=[e,t,he=n?n.charAt(0):he],ce=e.charAt(0),fe=e.charAt(1),ge=t.charAt(0),ve=t.charAt(1),e="\\"+ce+"(\\"+he+")?\\"+fe,t="\\"+ge+"\\"+ve,X="(?:(\\w+(?=[\\/\\s\\"+ge+"]))|(\\w+)?(:)|(>)|(\\*))\\s*((?:[^\\"+ge+"]|\\"+ge+"(?!\\"+ve+"))*?)",de.rTag="(?:"+X+")",X=new RegExp("(?:"+e+X+"(\\/)?|\\"+ce+"(\\"+he+")?\\"+fe+"(?:(?:\\/(\\w+))\\s*|!--[\\s\\S]*?--))"+t,"g"),de.rTmpl=new RegExp("^\\s|\\s$|<.*>|([^\\\\]|^)[{}]|"+e+".*"+t),pe):le.delimiters}function p(e,t){t||e===!0||(t=e,e=void 0);var n,r,i,o,a=this,s=!t||"root"===t;if(e){if(o=t&&a.type===t&&a,!o)if(n=a.views,a._.useKey){for(r in n)if(o=t?n[r].get(e,t):n[r])break}else for(r=0,i=n.length;!o&&r<i;r++)o=t?n[r].get(e,t):n[r]}else if(s)o=a.root;else for(;a&&!o;)o=a.type===t?a:void 0,a=a.parent;return o}function c(){var e=this.get("item");return e?e.index:void 0}function f(){return this.index}function g(t,n,r){var i,o,a,s,d=this,u=!we&&void 0!==n,p=d.ctx;if(t in p||t in(p=ae)){if(a=p&&p[t],"tag"===t||"root"===t||"parentTags"===t||d._.it===t)return a}else p=void 0;if((!a||!ne(a)&&d.linked||d.tagCtx)&&(a&&a._cxp||(p!==ae&&(d=d.tagCtx?d:(d=d.scope||d,!d.isTop&&d.ctx.tag||d),p=d._ocps,a=p&&p[t]||a),a&&a._cxp||!r&&!u||(a=de._crcp(t,a,d,p))),s=a&&a._cxp)){if(u)return de._ucp(t,n,d,s);if(r)return o=a[1]?de._ceo(a[1].deps):[_e],o.unshift(a[0]),o._cxp=s,o;a=a[1]?s.tag&&s.tag.cvtArgs?s.tag.cvtArgs(!0,s.tagElse)[s.ind]:a[1](a[0].data,a[0],de):a[0]._ocp}return a&&ne(a)&&(i=function(){return a.apply(this&&this!==e?this:d,arguments)},l(i,a),i._vw=d),i||a}function v(e){return e&&(e.fn?e:this.getRsc("templates",e)||ie(e))}function h(e,t,n,r){var o,a,s,d,u="number"==typeof n&&t.tmpl.bnds[n-1],p=t.linkCtx;if(void 0===r&&u&&u._lr&&(r=""),void 0!==r?n=r={props:{},args:[r]}:u&&(n=u(t.data,t,de)),u=u._bd&&u,a=n.args[0],e||u){if(o=p&&p.tag,n.view=t,!o){if(o=l(new de._tg,{_:{bnd:u,unlinked:!0},inline:!p,tagName:":",convert:e,flow:!0,tagCtx:n}),s=n.args.length,s>1)for(d=o.bindTo=[];s--;)d.unshift(s);p&&(p.tag=o,o.linkCtx=p),n.ctx=Q(n.ctx,(p?p.view:t).ctx),i(o,n)}o._er=r&&a,o.ctx=n.ctx||o.ctx||{},n.ctx=void 0,a=o.cvtArgs()[0]}return a=u&&t._.onRender?t._.onRender(a,t,o):a,void 0!=a?a:""}function m(e,t){var n,r,i,o,a,s,d,l=this;if(l.tagName?(s=l,l=s.tagCtxs?s.tagCtxs[t||0]:s.tagCtx):s=l.tag,a=s.bindTo,o=l.args,(d=s.convert)&&""+d===d&&(d="true"===d?void 0:l.view.getRsc("converters",d)||I("Unknown converter: '"+d+"'")),e&&e.length)o=e;else if(d&&!e&&(o=o.slice()),a){for(i=[],n=a.length;n--;)r=a[n],i.unshift(w(l,r));e&&(o=i)}if(d)if(a=a||[0],n=a.length,d=d.apply(s,i||o),re(d)&&d.length===n||(d=[d],a=[0],n=1),e)o=d;else for(;n--;)r=a[n],+r===r&&(o[r]=d[n]);return o}function w(e,t){return e=e[+t===t?"args":"props"],e&&e[t]}function x(e){return this.cvtArgs(!0,e)}function _(e,t){var n,r,i=this;if(""+t===t){for(;void 0===n&&i;)r=i.tmpl&&i.tmpl[e],n=r&&r[t],i=i.parent;return n||ee[e][t]}}function b(e,t,n,r,o,a){function s(e){var t;(t=d[e])&&(d[e]=t=re(t)?t:[t],E!==t.length&&I(e+" length not same as bindTo "))}t=t||Y;var d,l,u,p,c,f,g,v,h,m,x,_,b,y,k,C,T,j,A,R,V,$,E,M=0,N="",P=t.linkCtx||0,O=t.ctx,U=n||t.tmpl,q="number"==typeof r&&t.tmpl.bnds[r-1];for("tag"===e._is?(d=e,e=d.tagName,r=d.tagCtxs,u=d.template):(l=t.getRsc("tags",e)||I("Unknown tag: {{"+e+"}} "),u=l.template),void 0===a&&q&&(q._lr=(l.lateRender||q._lr)&&"false"!==q._lr)&&(a=""),void 0!==a?(N+=a,r=a=[{props:{},args:[],params:{}}]):q&&(r=q(t.data,t,de)),g=r.length;M<g;M++)m=r[M],y=m.tmpl,(!P||!P.tag||M&&!P.tag.inline||d._er||y&&+y===y)&&(y&&U.tmpls&&(m.tmpl=m.content=U.tmpls[y-1]),m.index=M,m.render=S,m.view=t,m.ctx=Q(m.ctx,O)),(n=m.props.tmpl)&&(m.tmpl=t.getTmpl(n),m.content=m.content||m.tmpl),d||(d=new l._ctr,k=!!d.init,d.parent=f=O&&O.tag,d.tagCtxs=r,R=d.dataMap,P&&(d.inline=!1,P.tag=d,d.linkCtx=P),(d._.bnd=q||P.fn)?d._.arrVws={}:d.dataBoundOnly&&I(e+" must be data-bound:\n{^{"+e+"}}")),r=d.tagCtxs,R=d.dataMap,m.tag=d,R&&r&&(m.map=r[M].map),d.flow||(x=m.ctx=m.ctx||{},p=d.parents=x.parentTags=O&&Q(x.parentTags,O.parentTags)||{},f&&(p[f.tagName]=f),p[d.tagName]=x.tag=d);if(!(d._er=a)){for(i(d,r[0]),d.rendering={},M=0;M<g;M++){if(m=d.tagCtx=r[M],A=m.props,d.ctx=m.ctx,!M){if(k&&(d.init(m,P,d.ctx),k=void 0),m.args.length||d.argDefault===!1||(m.args=j=[m.view.data],m.params.args=["#data"]),b=d.bindTo,void 0!==b)for(b=d.bindTo=re(b)?b:[b],v=b.length;v--;)$=b[v],isNaN(parseInt($))||($=parseInt($)),b[v]=$;b=d.bindTo||[0],E=b.length,d._.bnd&&(s("linkedElement"),s("linkedCtxParam")),P&&(P.attr=d.attr=P.attr||d.attr),c=d.attr,d._.noVws=c&&c!==Pe}if(j=d.cvtArgs(void 0,M),d.linkedCtxParam)for(v=E;v--;)(_=d.linkedCtxParam[v])&&($=b[v],m.ctx[_]=de._cp(w(m,$),w(m.params,$),m.view,d._.bnd&&{tag:d,ind:v,tagElse:M}));(C=A.dataMap||R)&&(j.length||A.dataMap)&&(T=m.map,T&&T.src===j[0]&&!o||(T&&T.src&&T.unmap(),T=m.map=C.map(j[0],A,void 0,!d._.bnd)),j=[T.tgt]),h=void 0,d.render&&(h=d.render.apply(d,j),t.linked&&h&&!Me.test(h)&&(n={links:[]},n.render=n.fn=function(){return h},h=F(n,t.data,void 0,!0,t,void 0,void 0,d))),j.length||(j=[t]),void 0===h&&(V=j[0],d.contentCtx&&(V=d.contentCtx===!0?t:d.contentCtx(V)),h=m.render(V,!0)||(o?void 0:"")),N=N?N+(h||""):h}d.rendering=void 0}return d.tagCtx=r[0],d.ctx=d.tagCtx.ctx,d._.noVws&&d.inline&&(N="text"===c?oe.html(N):""),q&&t._.onRender?t._.onRender(N,t,d):N}function y(e,t,n,r,i,o,a,s){var d,l,u,p=this,f="array"===t;p.content=s,p.views=f?[]:{},p.data=r,p.tmpl=i,u=p._={key:0,useKey:f?0:1,id:""+Se++,onRender:a,bnds:{}},p.linked=!!a,p.type=t||"top",(p.parent=n)?(p.root=n.root||p,d=n.views,l=n._,p.isTop=l.scp,p.scope=(!e.tag||e.tag===n.ctx.tag)&&!p.isTop&&n.scope||p,l.useKey?(d[u.key="_"+l.useKey++]=p,p.index=qe,p.getIndex=c):d.length===(u.key=p.index=o)?d.push(p):d.splice(o,0,p),p.ctx=e||n.ctx):p.ctx=e||{}}function k(e){var t,n,r;for(t in Le)n=t+"s",e[n]&&(r=e[n],e[n]={},ee[n](r,e))}function C(e,t,n){function i(){var t=this;t._={unlinked:!0},t.inline=!0,t.tagName=e}var o,a,s,d=(t.bindTo,new de._tg);if(ne(t)?t={depends:t.depends,render:t}:""+t===t&&(t={template:t}),a=t.baseTag){t.flow=!!t.flow,t.baseTag=a=""+a===a?n&&n.tags[a]||se[a]:a,d=l(d,a);for(s in t)d[s]=r(a[s],t[s])}else d=l(d,t);return void 0!==(o=d.template)&&(d.template=""+o===o?ie[o]||ie(o):o),(i.prototype=d).constructor=d._ctr=i,n&&(d._parentTmpl=n),d}function T(e){return this.base.apply(this,e)}function j(e,n,r,i){function o(n){var o,s;if(""+n===n||n.nodeType>0&&(a=n)){if(!a)if(/^\.\/[^\\:*?"<>]*$/.test(n))(s=ie[e=e||n])?n=s:a=document.getElementById(n);else if(t.fn&&!de.rTmpl.test(n))try{a=t(n,document)[0]}catch(d){}a&&(i?n=a.innerHTML:(o=a.getAttribute(Oe),o&&(o!==Ue?(n=ie[o],delete ie[o]):t.fn&&(n=t.data(a)[Ue])),o&&n||(e=e||(t.fn?Ue:n),n=j(e,a.innerHTML,r,i)),n.tmplName=e=e||o,e!==Ue&&(ie[e]=n),a.setAttribute(Oe,e),t.fn&&t.data(a,Ue,n))),a=void 0}else n.fn||(n=void 0);return n}var a,s,d=n=n||"";if(de._html=oe.html,0===i&&(i=void 0,d=o(d)),i=i||(n.markup?n:{}),i.tmplName=e,r&&(i._parentTmpl=r),!d&&n.markup&&(d=o(n.markup))&&d.fn&&(d=d.markup),void 0!==d)return d.fn||n.fn?d.fn&&(s=d):(n=$(d,i),U(d.replace(Te,"\\$&"),n)),s||(s=l(function(){return s.render.apply(s,arguments)},n),k(s)),s}function A(e,t){return ne(e)?e.call(t):e}function R(e){for(var t=[],n=0,r=e.length;n<r;n++)t.push(e[n].unmap());return t}function V(e,n){function r(e){u.apply(this,e)}function i(){return new r(arguments)}function o(e,t){for(var n,r,i,o,a=0;a<w;a++)i=c[a],n=void 0,i+""!==i&&(n=i,i=n.getter),void 0===(o=e[i])&&n&&void 0!==(r=n.defaultVal)&&(o=A(r,e)),t(o,n&&p[n.type],i)}function a(t){t=t+""===t?JSON.parse(t):t;var n,r,i=0,a=t,l=[];if(re(t)){for(t=t||[],n=t.length;i<n;i++)l.push(this.map(t[i]));return l._is=e,l.unmap=d,l.merge=s,l}if(t){o(t,function(e,t){t&&(e=t.map(e)),l.push(e)}),a=this.apply(this,l);for(r in t)r===te||_[r]||(a[r]=t[r])}return a}function s(e){e=e+""===e?JSON.parse(e):e;var t,n,r,a,s,d,l,u,p,c=0,f=this;if(re(f)){for(l={},p=[],n=e.length,r=f.length;c<n;c++){for(u=e[c],d=!1,t=0;t<r&&!d;t++)l[t]||(s=f[t],g&&(l[t]=d=g+""===g?u[g]&&(_[g]?s[g]():s[g])===u[g]:g(s,u)));d?(s.merge(u),p.push(s)):p.push(i.map(u))}return void(x?x(f).refresh(p,!0):f.splice.apply(f,[0,f.length].concat(p)))}o(e,function(e,t,n){t?f[n]().merge(e):f[n](e)});for(a in e)a===te||_[a]||(f[a]=e[a])}function d(){var e,t,n,r,i=0,o=this;if(re(o))return R(o);for(e={};i<w;i++)t=c[i],n=void 0,t+""!==t&&(n=t,t=n.getter),r=o[t](),e[t]=n&&r&&p[n.type]?re(r)?R(r):r.unmap():r;for(t in o)"_is"===t||_[t]||t===te||"_"===t.charAt(0)&&_[t.slice(1)]||ne(o[t])||(e[t]=o[t]);return e}var l,u,p=this,c=n.getters,f=n.extend,g=n.id,v=t.extend({_is:e||"unnamed",unmap:d,merge:s},f),h="",m="",w=c?c.length:0,x=t.observable,_={};for(r.prototype=v,l=0;l<w;l++)!function(e){e=e.getter||e,_[e]=l+1;var t="_"+e;h+=(h?",":"")+e,m+="this."+t+" = "+e+";\n",v[e]=v[e]||function(n){return arguments.length?void(x?x(this).setProperty(e,n):this[t]=n):this[t]},x&&(v[e].set=v[e].set||function(e){this[t]=e})}(c[l]);return u=new Function(h,m.slice(0,-1)),u.prototype=v,v.constructor=u,i.map=a,i.getters=c,i.extend=f,i.id=g,i}function $(e,n){var r,i=ue._wm||{},o=l({tmpls:[],links:{},bnds:[],_is:"template",render:S},n);return o.markup=e,n.html_tag||(r=Re.exec(e),o.htmlTag=r?r[1].toLowerCase():""),r=i[o.htmlTag],r&&r!==i.div&&(o.markup=t.trim(o.markup)),o}function E(e, t){function n(i, o, a){var s,d,l,u=de.onStore[e];if(i&&typeof i===Ie&&!i.nodeType&&!i.markup&&!i.getTgt&&!("viewModel"===e&&i.getters||i.extend)){for(d in i)n(d,i[d],o);return o||ee}return void 0===o&&(o=i,i=void 0),i&&""+i!==i&&(a=o,o=i,i=void 0),l=a?"viewModel"===e?a:a[r]=a[r]||{}:n,s=t.compile,null===o?i&&delete l[i]:(s&&(o=s.call(l,i,o,a,0)||{},o._is=e),i&&(l[i]=o)),u&&u(i,o,a,s),o}var r=e+"s";ee[r]=n}function M(e){pe[e]=function(t){return arguments.length?(le[e]=t,pe):le[e]}}function N(e){function t(t,n){this.tgt=e.getTgt(t,n)}return ne(e)&&(e={getTgt:e}),e.baseMap&&(e=l(l({},e.baseMap),e)),e.map=function(e,n){return new t(e,n)},e}function S(e,t,n,r,i,o){var a,s,d,l,u,p,c,f,g=r,v="";if(t===!0?(n=t,t=void 0):typeof t!==Ie&&(t=void 0),(d=this.tag)?(u=this,g=g||u.view,l=g.getTmpl(d.template||u.tmpl),arguments.length||(e=g)):l=this,l){if(!r&&e&&"view"===e._is&&(g=e),g&&e===g&&(e=g.data),p=!g,we=we||p,g||((t=t||{}).root=e),!we||ue.useViews||l.useViews||g&&g!==Y)v=F(l,e,t,n,g,i,o,d);else{if(g?(c=g.data,f=g.index,g.index=qe):(g=Y,c=g.data,g.data=e,g.ctx=t),re(e)&&!n)for(a=0,s=e.length;a<s;a++)g.index=a,g.data=e[a],v+=l.fn(e[a],g,de);else g.data=e,v+=l.fn(e,g,de);g.data=c,g.index=f}p&&(we=void 0)}return v}function F(e,t,n,r,i,o,a,s){function d(e){_=l({},n),_[x]=e}var u,p,c,f,g,v,h,m,w,x,_,b,k="";if(s&&(w=s.tagName,b=s.tagCtx,n=n?Q(n,s.ctx):s.ctx,e===i.content?h=e!==i.ctx._wrp?i.ctx._wrp:void 0:e!==b.content?e===s.template?(h=b.tmpl,n._wrp=b.content):h=b.content||i.content:h=i.content,b.props.link===!1&&(n=n||{},n.link=!1),(x=b.props.itemVar)&&("~"!==x.charAt(0)&&O("Use itemVar='~myItem'"),x=x.slice(1))),i&&(a=a||i._.onRender,n=Q(n,i.ctx)),o===!0&&(v=!0,o=0),a&&(n&&n.link===!1||s&&s._.noVws)&&(a=void 0),m=a,a===!0&&(m=void 0,a=i._.onRender),n=e.helpers?Q(e.helpers,n):n,_=n,re(t)&&!r)for(c=v?i:void 0!==o&&i||new y(n,"array",i,t,e,o,a,h),i&&i._.useKey&&(c._.bnd=!s||s._.bnd&&s),u=0,p=t.length;u<p;u++)x&&d(t[u]),f=new y(_,"item",c,t[u],e,(o||0)+u,a,c.content),f._.it=x,g=e.fn(t[u],f,de),k+=c._.onRender?c._.onRender(g,f):g;else x&&d(t),c=v?i:new y(_,w||"data",i,t,e,o,a,h),c._.it=x,k+=e.fn(t,c,de);return s&&(c.tag=s,c.tagElse=b.index,b.contentView=c),m?m(k,c):k}function P(e,t,n){var r=void 0!==n?ne(n)?n.call(t.data,e,t):n||"":"{Error: "+(e.message||e)+"}";return le.onError&&void 0!==(n=le.onError.call(t.data,e,n&&r,t))&&(r=n),t&&!t.linkCtx?oe.html(r):r}function I(e){throw new de.Err(e)}function O(e){I("Syntax error\n"+e)}function U(e,t,n,r,i){function o(t){t-=v,t&&m.push(e.substr(v,t).replace(ke,"\\n"))}function a(t,n){t&&(t+="}}",O((n?"{{"+n+"}} block has {{/"+t+" without {{"+t:"Unmatched or missing {{/"+t)+", in template:\n"+e))}function s(s,d,l,c,g,x,_,b,y,k,C,T){(_&&d||y&&!l||b&&":"===b.slice(-1)||k)&&O(s),x&&(g=":",c=Pe),y=y||n&&!i;var j,A=(d||n)&&[[]],R="",V="",$="",E="",M="",N="",S="",F="",P=!y&&!g;l=l||(b=b||"#data",g),o(T),v=T+s.length,_?f&&m.push(["*","\n"+b.replace(/^:/,"ret+= ").replace(Ce,"$1")+";\n"]):l?("else"===l&&(Ae.test(b)&&O('for "{{else if expr}}" use "{{else expr}}"'),A=w[8]&&[[]],w[9]=e.substring(w[9],T),w=h.pop(),m=w[2],P=!0),b&&B(b.replace(ke," "),A,t).replace(je,function(e,t,n,r,i,o,a,s){return r="'"+i+"':",a?(V+=o+",",E+="'"+s+"',"):n?($+=r+"j._cp("+o+',"'+s+'",view),',N+=r+"'"+s+"',"):t?S+=o:("trigger"===i&&(F+=o),"lateRender"===i&&(j=s),R+=r+o+",",M+=r+"'"+s+"',",p=p||Ee.test(i)),""}).slice(0,-1),A&&A[0]&&A.pop(),u=[l,c||!!r||p||"",P&&[],J(E||(":"===l?"'#data',":""),M,N),J(V||(":"===l?"data,":""),R,$),S,F,j,A||0],m.push(u),P&&(h.push(w),w=u,w[9]=v)):C&&(a(C!==w[0]&&"else"!==w[0]&&C,w[0]),w[9]=e.substring(w[9],T),w=h.pop()),a(!w&&C),m=w[2]}var d,l,u,p,c,f=le.allowCode||t&&t.allowCode||pe.allowCode===!0,g=[],v=0,h=[],m=g,w=[,,g];if(f&&t._is&&(t.allowCode=f),n&&(void 0!==r&&(e=e.slice(0,-r.length-2)+ge),e=ce+e+ve),a(h[0]&&h[0][2].pop()[0]),e.replace(X,s),o(e.length),(v=g[g.length-1])&&a(""+v!==v&&+v[9]===v[9]&&v[0]),n){for(l=L(g,e,n),c=[],d=g.length;d--;)c.unshift(g[d][8]);q(l,c)}else l=L(g,t);return l}function q(e,t){var n,r,i=0,o=t.length;for(e.deps=[],e.paths=[];i<o;i++){e.paths.push(r=t[i]);for(n in r)"_jsvto"!==n&&r.hasOwnProperty(n)&&r[n].length&&!r[n].skp&&(e.deps=e.deps.concat(r[n]))}}function J(e,t,n){return[e.slice(0,-1),t.slice(0,-1),n.slice(0,-1)]}function K(e,t){return"\n\t"+(t?t+":{":"")+"args:["+e[0]+"]"+(e[1]||!t?",\n\tprops:{"+e[1]+"}":"")+(e[2]?",\n\tctx:{"+e[2]+"}":"")}function B(e,t,n){function r(r,m,w,x,_,b,y,k,C,T,j,A,R,V,$,E,M,N,S,F){function P(e,n,r,a,s,d,p,c){var f="."===r;if(r&&(_=_.slice(n.length),/^\.?constructor$/.test(c||_)&&O(e),f||(e=(a?'view.ctxPrm("'+a+'")':s?"view":"data")+(c?(d?"."+d:a?"":s?"":"."+r)+(p||""):(c=a?"":s?d||"":r,"")),e+=c?"."+c:"",e=n+("view.data"===e.slice(0,9)?e.slice(5):e)),l)){if(J="linkTo"===i?o=t._jsvto=t._jsvto||[]:u.bd,K=f&&J[J.length-1]){if(K._cpfn){for(;K.sb;)K=K.sb;K.bnd&&(_="^"+_.slice(1)),K.sb=_,K.bnd=K.bnd||"^"===_.charAt(0)}}else J.push(_);h[g]=S+(f?1:0)}return e}x&&!k&&(_=x+_),b=b||"",w=w||m||A,_=_||C,T=T||M||"";var I,q,J,K,B,L=")";if("["===T&&(T="[j._sq(",L=")]"),!y||d||s){if(l&&E&&!d&&!s&&(!i||a||o)&&(I=h[g-1],F.length-1>S-(I||0))){if(I=F.slice(I,S+r.length),q!==!0)if(J=o||p[g-1].bd,K=J[J.length-1],K&&K.prm){for(;K.sb&&K.sb.prm;)K=K.sb;B=K.sb={path:K.sb,bnd:K.bnd}}else J.push(B={path:J.pop()});E=fe+":"+I+" onerror=''"+ge,q=f[E],q||(f[E]=!0,f[E]=q=U(E,n,!0)),q!==!0&&B&&(B._cpfn=q,B.prm=u.bd,B.bnd=B.bnd||B.path&&B.path.indexOf("^")>=0)}return d?(d=!R,d?r:A+'"'):s?(s=!V,s?r:A+'"'):(w?(h[g]=S++,u=p[++g]={bd:[]},w):"")+(N?g?"":(c=F.slice(c,S),(i?(i=a=o=!1,"\b"):"\b,")+c+(c=S+r.length,l&&t.push(u.bd=[]),"\b")):k?(g&&O(e),l&&t.pop(),i=_,a=x,c=S+r.length,l&&(l=u.bd=t[i]=[],l.skp=!x),_+":"):_?_.split("^").join(".").replace(be,P)+(T?(u=p[++g]={bd:[]},v[g]=L,T):b):b?b:$?($=v[g]||$,v[g]=!1,u=p[--g],$+(T?(u=p[++g],v[g]=L,T):"")):j?(v[g]||O(e),","):m?"":(d=R,s=V,'"'))}O(e)}var i,o,a,s,d,l=t&&t[0],u={bd:l},p={0:u},c=0,f=(n?n.links:l&&(l.links=l.links||{}))||Y.tmpl.links,g=0,v={},h={},m=(e+(n?" ":"")).replace(ye,r);return!g&&m||O(e)}function L(e,t,n){var r,i,o,a,s,d,l,u,p,c,f,g,v,h,m,w,x,_,b,y,k,C,T,j,A,R,V,E,M,N,S,F=0,P=ue.useViews||t.useViews||t.tags||t.templates||t.helpers||t.converters,I="",U={},J=e.length;for(""+t===t?(_=n?'data-link="'+t.replace(ke," ").slice(1,-1)+'"':t,t=0):(_=t.tmplName||"unnamed",t.allowCode&&(U.allowCode=!0),t.debug&&(U.debug=!0),f=t.bnds,x=t.tmpls),r=0;r<J;r++)if(i=e[r],""+i===i)I+='\n+"'+i+'"';else if(o=i[0],"*"===o)I+=";\n"+i[1]+"\nret=ret";else{if(a=i[1],k=!n&&i[2],s=K(i[3],"params")+"},"+K(v=i[4]),N=i[6],S=i[7],C=i[9]&&i[9].replace(Ce,"$1"),(A="else"===o)?g&&g.push(i[8]):(E=i[5]||le.debugMode!==!1&&"undefined",f&&(g=i[8])&&(g=[g],F=f.push(1))),P=P||v[1]||v[2]||g||/view.(?!index)/.test(v[0]),(R=":"===o)?a&&(o=a===Pe?">":a+o):(k&&(b=$(C,U),b.tmplName=_+"/"+o,b.useViews=b.useViews||P,L(k,b),P=b.useViews,x.push(b)),A||(y=o,P=P||o&&(!se[o]||!se[o].flow),j=I,I=""),T=e[r+1],T=T&&"else"===T[0]),M=E?";\ntry{\nret+=":"\n+",h="",m="",R&&(g||N||a&&a!==Pe||S)){if(V=new Function("data,view,j,u","// "+_+" "+ ++F+" "+o+"\nreturn {"+s+"};"),V._er=E,V._tag=o,V._bd=!!g,V._lr=S,n)return V;q(V,g),w='c("'+a+'",view,',c=!0,h=w+F+",",m=")"}if(I+=R?(n?(E?"try{\n":"")+"return ":M)+(c?(c=void 0,P=p=!0,w+(V?(f[F-1]=V,F):"{"+s+"}")+")"):">"===o?(l=!0,"h("+v[0]+")"):(u=!0,"((v="+v[0]+")!=null?v:"+(n?"null)":'"")'))):(d=!0,"\n{view:view,tmpl:"+(k?x.length:"0")+","+s+"},"),y&&!T){if(I="["+I.slice(0,-1)+"]",w='t("'+y+'",view,this,',n||g){if(I=new Function("data,view,j,u"," // "+_+" "+F+" "+y+"\nreturn "+I+";"),I._er=E,I._tag=y,g&&q(f[F-1]=I,g),I._lr=S,n)return I;h=w+F+",undefined,",m=")"}I=j+M+w+(I.deps&&F||I)+")",g=0,y=0}E&&!T&&(P=!0,I+=";\n}catch(e){ret"+(n?"urn ":"+=")+h+"j._err(e,view,"+E+")"+m+";}"+(n?"":"ret=ret"))}I="// "+_+"\nvar v"+(d?",t=j._tag":"")+(p?",c=j._cnvt":"")+(l?",h=j._html":"")+(n?";\n":',ret=""\n')+(U.debug?"debugger;":"")+I+(n?"\n":";\nreturn ret;");try{I=new Function("data,view,j,u",I)}catch(B){O("Compiled template code:\n\n"+I+'\n: "'+(B.message||B)+'"')}return t&&(t.fn=I,t.useViews=!!P),I}function Q(e,t){return e&&e!==t?t?l(l({},t),e):e:t&&l({},t)}function H(e){return Fe[e]||(Fe[e]="&#"+e.charCodeAt(0)+";")}function D(e){var t,n,r=[];if(typeof e===Ie)for(t in e)n=e[t],t!==te&&e.hasOwnProperty(t)&&!ne(n)&&r.push({key:t,prop:n});return r}function Z(e,n,r){var i=this.jquery&&(this[0]||I("Unknown template")),o=i.getAttribute(Oe);return S.call(o&&t.data(i)[Ue]||ie(i),e,n,r)}function z(e){return void 0!=e?$e.test(e)&&(""+e).replace(Ne,H)||e:""}var G=t===!1;t=t&&t.fn?t:e.jQuery;var W,X,Y,ee,te,ne,re,ie,oe,ae,se,de,le,ue,pe,ce,fe,ge,ve,he,me,we,xe="v0.9.90",_e="_ocp",be=/^(!*?)(?:null|true|false|\d[\d.]*|([\w$]+|\.|~([\w$]+)|#(view|([\w$]+))?)([\w$.^]*?)(?:[.[^]([\w$]+)\]?)?)$/g,ye=/(\()(?=\s*\()|(?:([([])\s*)?(?:(\^?)(!*?[#~]?[\w$.^]+)?\s*((\+\+|--)|\+|-|&&|\|\||===|!==|==|!=|<=|>=|[<>%*:?\/]|(=))\s*|(!*?[#~]?[\w$.^]+)([([])?)|(,\s*)|(\(?)\\?(?:(')|("))|(?:\s*(([)\]])(?=\s*[.^]|\s*$|[^([])|[)\]])([([]?))|(\s+)/g,ke=/[ \t]*(\r\n|\n|\r)/g,Ce=/\\(['"])/g,Te=/['"\\]/g,je=/(?:\x08|^)(onerror:)?(?:(~?)(([\w$_\.]+):)?([^\x08]+))\x08(,)?([^\x08]+)/gi,Ae=/^if\s/,Re=/<(\w+)[>\s]/,Ve=/[\x00`><"'&=]/g,$e=/[\x00`><\"'&=]/,Ee=/^on[A-Z]|^convert(Back)?$/,Me=/^\#\d+_`[\s\S]*\/\d+_`$/,Ne=Ve,Se=0,Fe={"&":"&amp;","<":"&lt;",">":"&gt;","\0":"&#0;","'":"&#39;",'"':"&#34;","`":"&#96;","=":"&#61;"},Pe="html",Ie="object",Oe="data-jsv-tmpl",Ue="jsvTmpl",qe="For #index in nested block use #getIndex().",Je={},Ke=e.jsrender,Be=Ke&&t&&!t.render,Le={template:{compile:j},tag:{compile:C},viewModel:{compile:V},helper:{},converter:{}};if(ee={jsviews:xe,sub:{View:y,Err:d,tmplFn:U,parse:B,extend:l,extendCtx:Q,syntaxErr:O,onStore:{template:function(e,t){null===t?delete Je[e]:Je[e]=t}},addSetting:M,settings:{allowCode:!1},advSet:a,_ths:i,_gm:r,_tg:function(){},_cnvt:h,_tag:b,_er:I,_err:P,_cp:o,_sq:function(e){return"constructor"===e&&O(""),e}},settings:{delimiters:u,advanced:function(e){return e?(l(ue,e),de.advSet(),pe):ue}},map:N},(d.prototype=new Error).constructor=d,c.depends=function(){return[this.get("item"),"index"]},f.depends="index",y.prototype={get:p,getIndex:f,getRsc:_,getTmpl:v,ctxPrm:g,_is:"view"},de=ee.sub,pe=ee.settings,!(Ke||t&&t.render)){for(W in Le)E(W,Le[W]);oe=ee.converters,ae=ee.helpers,se=ee.tags,de._tg.prototype={baseApply:T,cvtArgs:m,bndArgs:x,ctxPrm:g},Y=de.topView=new y,t?(t.fn.render=Z,te=t.expando,t.observable&&(l(de,t.views.sub),ee.map=t.views.map)):(t={},G&&(e.jsrender=t),t.renderFile=t.__express=t.compile=function(){throw"Node.js: use npm jsrender, or jsrender-node.js"},t.isFunction=function(e){return"function"==typeof e},t.isArray=Array.isArray||function(e){return"[object Array]"==={}.toString.call(e)},de._jq=function(e){e!==t&&(l(e,t),t=e,t.fn.render=Z,delete t.jsrender,te=t.expando)},t.jsrender=xe),le=de.settings,le.allowCode=!1,ne=t.isFunction,t.render=Je,t.views=ee,t.templates=ie=ee.templates;for(me in le)M(me);(pe.debugMode=function(e){return void 0===e?le.debugMode:(le.debugMode=e,le.onError=e+""===e?new Function("","return '"+e+"';"):ne(e)?e:void 0,pe)})(!1),ue=le.advanced={useViews:!1,_jsv:!1},se({"if":{render:function(e){var t=this,n=t.tagCtx,r=t.rendering.done||!e&&(arguments.length||!n.index)?"":(t.rendering.done=!0,void(t.selected=n.index));return r},contentCtx:!0,flow:!0},"for":{render:function(e){var t,n=!arguments.length,r=this,i=r.tagCtx,o="",a=0;return r.rendering.done||(t=n?i.view.data:e,void 0!==t&&(o+=i.render(t,n),a+=re(t)?t.length:1),(r.rendering.done=a)&&(r.selected=i.index)),o},flow:!0},props:{baseTag:"for",dataMap:N(D),flow:!0},include:{flow:!0},"*":{render:o,flow:!0},":*":{render:o,flow:!0},dbg:ae.dbg=oe.dbg=s}),oe({html:z,attr:z,url:function(e){return void 0!=e?encodeURI(""+e):null===e?e:""}})}return le=de.settings,re=(t||Ke).isArray,pe.delimiters("{{","}}","^"),Be&&Ke.views.sub._jq(t),t||Ke},window);
 //# sourceMappingURL=jsrender.min.js.map
diff --git a/web/css/static/main.scss b/web/css/static/main.scss
index 3047fc79..ccb39c19 100644
--- a/web/css/static/main.scss
+++ b/web/css/static/main.scss
@@ -1,17 +1,29 @@
 html, body {
-	height: 100%;
 	overflow-y: hidden;
+
+    height: 100%;
+    width: 100%;
+    position: fixed;
+
+    min-height: 250px;
+    min-width: 250px;
 }
 
 .app-container {
-	width: 100%;
-	height: 100%;
 	display: flex;
 	justify-content: center;
+	position: absolute;
 
+    right: 10px;
+    left: 10px;
+    bottom: 40px;
+    top: 10px;
+
+    transition: all .5s linear;
+    
 	.app {
 		width: 100%;
-		height: calc(100% - 50px);
+		height: 100%;
 		margin: 0;
 
 		display: flex; flex-direction: column; resize: both;