Change message.set() to set html instead of text.

Move message div to appear on top of logo and dialog overlays.
Minor text modifications.

js/Message.js

@@ -24,21 +24,21 @@ function Message() {
 	this.init = function($element) {
     this.$element = $element;
  	}
-	this.set = function(text,mode,autoHide,disableEffect) {
-		console.log("Message:set: ",text,mode,autoHide,disableEffect);
+	this.set = function(contents,mode,autoHide,disableEffect) {
+		console.log("Message:set: ",contents,mode,autoHide,disableEffect);
 		if(disableEffect) {
-			self.fill(text,mode,autoHide)
+			self.fill(contents,mode,autoHide)
 		} else{
 			self.hide(function() {
 				self.show();
-				self.fill(text,mode,autoHide)
+				self.fill(contents,mode,autoHide)
 			});
 		}
 	}
-	this.fill = function(text,mode,autoHide) {
+	this.fill = function(contents,mode,autoHide) {
 		//console.log("Message:fill: ",text,mode,autoHide);
 		self.clear();
-		self.$element.text(text);
+		self.$element.html(contents);
 		self.$element.addClass(mode);
 		self.mode = mode;
 		clearTimeout(autohideTimeout);
@@ -47,7 +47,7 @@ function Message() {
 		}
 	}
 	this.clear = function($element) {
-		this.$element.text("");
+		this.$element.html("");
 		this.$element.removeClass(this.mode);
 	}
 

js/buttonbehaviors.js

@@ -431,11 +431,11 @@ function setState(newState,newHasControl) {
 	} else if(newState == Printer.DISCONNECTED_STATE) {
 		message.set("Printer disconnected",Message.WARNING,true);
 	} else if(newState == Printer.CONNECTING_STATE) {
-		message.set("Printer connecting",Message.INFO,false);
+		message.set("Printer connecting...",Message.INFO,false);
 		if (prevState != Printer.CONNECTING_STATE) { //enable 'watchdog' if we entered from a different state
 			clearTimeout(connectingHintDelay);
 			connectingHintDelay = setTimeout(function() {
-				message.set("Printer still not connected, did you select the correct type?", Message.WARNING, false);
+				message.set("Printer still not connected, did you<br/>select the correct printer type?", Message.WARNING, false);
 				connectingHintDelay = null;
 			}, connectingHintDelayTime);
 		}

less/message.less

@@ -1,5 +1,6 @@
 #message {
   position: absolute;
+  text-align: right;
   top: 0;
   right: 0;
 

www/index.html

@@ -66,8 +66,6 @@
 
   </div>
 
-  <div id="message"></div>
-
   <!-- center panel -->
   <div id="centerpanel">
 
@@ -156,6 +154,8 @@
       </div>
     </div>
   </div>
+
+  <div id="message"></div>
 </div>
 
 <div id="portrait">