add keyboard type selection to console viewer UI

console-proxy/css/ajaxviewer.css

@@ -67,6 +67,41 @@ body {
 	background:url(/resource/images/right.png) no-repeat right center; 
 }
 
+
+#toolbar ul li ul {
+    position: absolute;
+    top:32;
+    display: block none;
+    border-top: 1px solid black;
+    background-image:url(/resource/images/back.gif); 
+    background-repeat:repeat-x repeat-y; 
+}
+
+#toolbar ul li ul li {
+    display: list-item;
+    float:none;
+    padding-left: 20;
+}
+
+#toolbar ul li ul li.current {
+    background: url(/resource/images/cad.gif) no-repeat left center; 
+}
+
+#toolbar ul li ul li a {
+    display:block;
+    padding:0 3px 0 3px; 
+    text-decoration:none;
+    line-height:32px;
+}
+
+#toolbar ul li ul li a:hover {
+    background: url(/resource/images/left.png) no-repeat left center; 
+}
+
+#toolbar ul li ul li a:hover span {
+    background: url(/resource/images/right.png) no-repeat right center; 
+}
+
 span.dark {
 	margin-right:20px;
 	float:right;

console-proxy/js/ajaxviewer.js

@@ -71,6 +71,9 @@ function AjaxViewer(panelId, imageUrl, updateUrl, tileMap, width, height, tileWi
 	this.height = height;
 	this.tileWidth = tileWidth;
 	this.tileHeight = tileHeight;
+	this.maxTileZIndex = 1;
+	
+	this.currentKeyboard = 0;
 	
 	this.timer = 0;
 	this.eventQueue = [];
@@ -84,6 +87,7 @@ function AjaxViewer(panelId, imageUrl, updateUrl, tileMap, width, height, tileWi
 	this.panel = this.generateCanvas(panelId, width, height, tileWidth, tileHeight);
 	
 	this.setupKeyCodeTranslationTable();
+	this.setupUIController();
 }
 
 AjaxViewer.prototype = {
@@ -250,6 +254,47 @@ AjaxViewer.prototype = {
 		this.keyCodeMap['?'.charCodeAt()] = { code : 191, shift : true };
 	},
 	
+	setupUIController : function() {
+		var ajaxViewer = this;
+		var pullDownElement = $("#toolbar").find(".pulldown");
+		pullDownElement.hover(
+			function(e) {
+				var subMenu = pullDownElement.find("ul");
+			
+				$("li.current").removeClass("current");
+				$("li:eq(" + ajaxViewer.currentKeyboard + ")", subMenu).addClass("current");
+				subMenu.css("z-index", "" + ajaxViewer.maxTileZIndex + 1).show();
+				return false;
+			},
+			
+			function(e) {
+				pullDownElement.find("ul").hide();
+				return false;
+			}
+		);
+
+		$("#toolbar").find("a").each(function(i, val) {
+			$(val).click(function(e) {
+				var cmdLink = $(e.target).closest("a");
+				
+				if(cmdLink.attr("cmd")) {
+					var cmd = cmdLink.attr("cmd");
+					ajaxViewer.onCommand(cmd);
+				}
+			});
+		});
+	},
+	
+	onCommand : function(cmd) {
+		if(cmd == "keyboard_jp") {
+			$("#toolbar").find(".pulldown").find("ul").hide();
+			this.currentKeyboard = 1;
+		} else if(cmd == "keyboard_en") {
+			$("#toolbar").find(".pulldown").find("ul").hide();
+			this.currentKeyboard = 0;
+		}
+	},
+	
 	// Firefox on Mac OS X does not generate key-code for following keys 
 	translateZeroKeycode: function() {
 		var len = this.eventQueue.length;
@@ -615,7 +660,9 @@ AjaxViewer.prototype = {
 			div = this.getTile(cell, "tile");
 		}
 		
-		div.css("z-index", parseInt(divPrev.css("z-index")) + 1);
+		var zIndex = parseInt(divPrev.css("z-index")) + 1;
+		this.maxTileZIndex = Math.max(this.maxTileZIndex, zIndex);
+		div.css("z-index", zIndex);
 		div.css("background", bg);
 	},
 	

console-proxy/src/com/cloud/consoleproxy/ConsoleProxyViewer.java

@@ -33,7 +33,6 @@ import java.io.IOException;
 import java.io.OutputStream;
 import java.net.InetSocketAddress;
 import java.net.Socket;
-import java.util.ArrayList;
 import java.util.List;
 import java.util.zip.GZIPOutputStream;
 
@@ -1033,6 +1032,16 @@ public class ConsoleProxyViewer implements java.lang.Runnable, RfbViewer, RfbPro
 						"<span><img align=\"left\" src=\"/resource/images/winlog.png\" alt=\"Ctrl-Esc\" style=\"width:16px;height:16px\"/>Ctrl-Esc</span>",
 					"</a>", 
 				"</li>",
+				
+				"<li class=\"pulldown\">", 
+					"<a href=\"#\">", 
+						"<span><img align=\"left\" src=\"/resource/images/winlog.png\" alt=\"Keyboard\" style=\"width:16px;height:16px\"/>Keyboard</span>",
+					"</a>", 
+					"<ul>",
+		    			"<li class=\"current\"><a href=\"#\" cmd=\"keyboard_en\"><span>English (US)</span></a></li>",
+			    		"<li><a href=\"#\" cmd=\"keyboard_jp\"><span>Japanese&nbsp;&nbsp;&nbsp;</span></a></li>",
+					"</ul>",
+				"</li>",
 			"</ul>",
 			"<span id=\"light\" class=\"dark\"></span>", 
 			"</div>",