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

@@ -7,38 +7,38 @@
  */
 
 function Message() {
-	
+
 	Message.ERROR 			= "error";
 	Message.WARNING 		= "warning";
 	Message.NOTICE 			= "notice";
 	Message.INFO 				= "info";
-	
+
 	this.mode						= "";
-	
+
 	this.$element;
-	
+
 	var self = this;
 	var autoHideDelay = 5000;
 	var autohideTimeout;
-	
+
 	this.init = function($element) {
     this.$element = $element;
  	}
-	this.set = function(text,mode,autoHide,disableEffect) {
+	this.set = function(contents,mode,autoHide,disableEffect) {
-		console.log("Message:set: ",text,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,10 +47,10 @@ function Message() {
 		}
 	}
 	this.clear = function($element) {
-		this.$element.text("");
+		this.$element.html("");
 		this.$element.removeClass(this.mode);
 	}
-	
+
 	this.show = function() {
 		this.$element.fadeIn(200);
 	}

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;
 
@@ -14,7 +15,7 @@
   white-space:nowrap;
 
   //z-index: 5;
-	
+
   display:none;
 
   &.error {

www/index.html

@@ -7,11 +7,11 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
-  
+
   <link rel="icon" type="image/ico" href="./favicon_alt.ico"/>
   <link rel="apple-touch-icon-precomposed" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png"/>
   <link rel="apple-touch-icon-precomposed" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" sizes="144x144" />
-  
+
   <link href="css/styles.min.css" rel="stylesheet" media="screen">
   <link href="css/debug.min.css" rel="stylesheet" media="screen">
 
@@ -39,7 +39,7 @@
 
     <div id="buttonGroupAdd" class="buttonGroup">
       <img id="btnWordArt" class="btn" src="img/buttons/btnWordArt.png" />
-      <img id="btnShape" class="btn" src="img/buttons/btnShape.png" />    
+      <img id="btnShape" class="btn" src="img/buttons/btnShape.png" />
     </div>
 
   </div>
@@ -66,18 +66,16 @@
 
   </div>
 
-  <div id="message"></div>
-
   <!-- center panel -->
   <div id="centerpanel">
-    
+
     <div id="logopanel" class="btn">
       <img id="pencil" src="img/logo/pencil.png"/>
       <img id="logo" src="img/logo/doodle3d.png"/>
     </div>
 
     <div id="drawareacontainer">
-      
+
       <div id="canvasContainers">
         <div id="mycanvasContainer">
           <canvas id="mycanvas"></canvas>
@@ -95,20 +93,20 @@
               <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
             </div>
           </div>
-          <img id="btnToggleVerticalShapes" class="btn" src="img/buttons/btnArrowClose.png" />      
+          <img id="btnToggleVerticalShapes" class="btn" src="img/buttons/btnArrowClose.png" />
         </div>
-      
+
       </div>
       <canvas id="preview_tmp"></canvas>
-      
+
       <div id="buttonGroupEdit" class="buttonGroup">
         <img id="btnMove" class="btn" src="img/buttons/btnMove.png" />
         <img id="btnZoom" class="btn" src="img/buttons/btnZoom.png" />
         <img id="btnRotate" class="btn" src="img/buttons/btnRotate.png" />
       </div>
       <img id="btnToggleEdit" class="btn" src="img/buttons/btnArrowOpen.png" />
-	  
+
-    </div>  
+    </div>
   </div>
 
   <div id="debug_textArea">
@@ -156,6 +154,8 @@
       </div>
     </div>
   </div>
+
+  <div id="message"></div>
 </div>
 
 <div id="portrait">