=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/index.html'
--- src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-09-06 23:47:37 +0000
+++ src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-09-08 16:08:21 +0000
@@ -42,8 +42,6 @@
                'referrer' : '${referrer}',
                'container' : 'cont'
             });
-            
-            document.getElementById("view-log").addEventListener('click', p2j.logger.viewLog, true);
          });
       });
       </script>
@@ -61,9 +59,6 @@
          </audio>
          
       </div>
-      <div style="position:fixed;top:600px;left:600px;visibility:true">
-         <button id="view-log" style="position:relative">View Log Output</button>
-      </div>
       <form name="form" action="javascript:void(0);" method="post">
          <input type="text" name="copy" id="copy" value="" style="opacity:0;position:fixed;top:0px;left:0px;margin-left:-200px"/>
       </form>

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js'
--- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js	2015-09-05 16:09:44 +0000
+++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js	2015-09-08 15:37:34 +0000
@@ -98,11 +98,11 @@
       // init modules (don't change the order here!)
       p2j.logger.init(1024);
       p2j.sound.init(cfg);
+      p2j.fonts.init();
       p2j.screen.init(cfg);
       p2j.socket.init(cfg);
       p2j.keyboard.init();
       p2j.clipboard.init(cfg);
-      p2j.fonts.init();
    };
    
    /**

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-08 10:15:53 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-08 16:30:58 +0000
@@ -734,6 +734,9 @@
                fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1);
 
                setFont(this.ctx, fontId);
+               
+               //sets font for the task bar
+               taskBar.setDefaultFont(fontId);
                break;
             case ops.SET_FONT_STYLE:
                var style = p2j.socket.readInt32BinaryMessage(message, idx + 1);
@@ -1594,6 +1597,7 @@
             sendWindowStateActive,
             [194, 194, 194],
             [128, 128, 128],
+            p2j.fonts,
             p2j.logger);
       taskBar = desktop.getTaskBar();
    };

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-07 21:26:31 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-08 16:43:41 +0000
@@ -52,10 +52,12 @@
  * @param    {Array} fg
  *           The foreground task bar color for task icons. It is represented by the 3-elements array
  *           filled with red, green and blue values from 0 to 255.
+ * @param    {Object} fontsManager
+ *           The p2j fonts manager.
  * @param    {Object} logger
  *           The p2j global application logger.
  */
-function VirtualDesktop(taskIconOnClickCallback, bg, fg, logger)
+function VirtualDesktop(taskIconOnClickCallback, bg, fg, fontsManager, logger)
 {
    /** task bar id*/
    var TASK_BAR_ID = "taskBar";
@@ -65,7 +67,12 @@
    
    /** task bar side */
    var TASK_BAR_WIDTH  = 42;
-   
+
+   /** z-index is assigned to the drop zone to which the task bar is attached. */
+   var MAX_Z_INDEX = 1000;
+   /** z-index is assigned to all others drop zones */
+   var MIN_Z_INDEX = 1;
+
    /** the parent element for the virtual desktop */
    var desktop = document.createElement("div");
    
@@ -83,7 +90,7 @@
    desktop.appendChild(bottom);
    desktop.appendChild(createRightDropZone(DOCK_CLASS_NAME, TASK_BAR_WIDTH));
    
-   var taskBar = new TaskBar(taskBarPeer, bg, fg, logger);
+   var taskBar = new TaskBar(taskBarPeer, bg, fg, fontsManager, logger);
 
    /**
     * Creates the bottom drop zone.
@@ -107,6 +114,8 @@
       
       bottom.style["height"] = height + "px";
       bottom.style["width"]  = "100%";
+
+      bottom.style.zIndex = MAX_Z_INDEX;
       return bottom;
    };
    
@@ -132,6 +141,8 @@
       
       right.style["height"] = "100%";
       right.style["width"]  = width + "px";
+
+      right.style.zIndex = MIN_Z_INDEX;
       return right;
    };
    
@@ -148,10 +159,14 @@
    {
       var peer = document.createElement("div");
       peer.id = id;
+      peer.tabIndex = 1;
       peer.style["position"] = "relative";
       
       peer.style["height"] = "100%";
       peer.style["width"]  = "100%";
+      
+      peer.style.zIndex = MAX_Z_INDEX;
+      
       peer.draggable = true;
       return peer;
    };
@@ -179,38 +194,46 @@
     * @param    {Array} fg
     *           The foreground task bar color for task icons. It is represented by the 3-elements array
     *           filled with red, green and blue values from 0 to 255.
+    * @param    {Object} fontsManager
+    *           The p2j fonts manager.
     * @param    {Object} logger
     *           The p2j global application logger.
     */
-   function TaskBar(peer, bg, fg, logger)
+   function TaskBar(peer, bg, fg, fontsManager, logger)
    {
       var DRAGGED_OPACITY = 0.3;
       var TOP_PADDING  = 2;
       var LEFT_PADDING = 2;
       var TASK_BAR_TITLE = "Task Bar"; 
       var TASK_ICON_WIDTH  = 40; 
-      var TASK_ICON_HEIGHT = 32; 
-      
+      var TASK_ICON_HEIGHT = 32;
       var SHIFT = 2;
       
+      var TASK_BAR_FONT_ID = createDefaultFont();
+      
+      
       var dragged;
       var canvas = document.createElement('canvas');
       canvas.className="canvas";
       canvas.style["height"] = "100%";
       canvas.style["width"]  = "100%";
+      canvas.style.zIndex = MAX_Z_INDEX;
       
       peer.appendChild(canvas);
       var ctx = canvas.getContext('2d', {alpha : true});
 //      console.log("peer width = " + peer.offsetWidth);
 //      console.log("peer height = " + peer.offsetHeight);
       var strokesManager = new LineStrokes();
-      var canvasRenderer = new CanvasRenderer(canvas, ctx, strokesManager, logger);
+      var canvasRenderer = new CanvasRenderer(canvas, ctx, strokesManager, fontsManager, logger);
       
       var taskIcons = [];
 
+      var viewLogButton = createViewLogButton(logger);
+
       var foreground  = fg;
       var background  = bg;
-      
+
+
       if (peer)
       {
          /** events fired on the draggable target */
@@ -221,13 +244,86 @@
       }
       
       /**
+       * Creates the default font for the task bar.
+       * It is added for the standalone test.
+       */
+      function createDefaultFont()
+      {
+         var font = 1;
+         var name = "sans-serif";
+         var size = 8;
+         var style = 1;
+         var b64Font = "";
+         return fontsManager.createFont(font, name, size, style, b64Font);
+      };
+      
+      /**
        * The default task bar tooltip.
        */
       function setDefaultTooltip()
       {
          peer.title = TASK_BAR_TITLE;
       }
-
+      /**
+       * The special use case: view log.
+       * 
+       * @param    {Object} logger
+       *           The application logger.
+       * @return   {TaskIcon}
+       *           The view log button.
+       */
+      function createViewLogButton(logger)
+      {
+         var taskIcon = new TaskIcon(
+               {title : "View Log Output"},
+               null, 3 * TASK_ICON_WIDTH, TASK_ICON_HEIGHT, fg);
+         taskIcon.setActive(false);
+         /**
+          * Opens new log window.
+          */
+         taskIcon.doClick = function()
+         {
+            logger.viewLog();
+            /**
+             * Change the view log button to inactive after 500 ms.
+             */
+            window.setTimeout(
+                  function()
+                  {
+                     taskIcon.setActive(false);
+                     taskIcon.draw();
+                  }, 500);
+         }
+         return taskIcon;
+      }
+      
+      /**
+       * Layouts the view log button on the task bar.
+       * 
+       * @param    {Boolean} horizontalLayout
+       *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,
+       *           it is along a vertical line.
+       */
+      function doViewLogButtonLayout(width, height, horizontalLayout)
+      {
+         var x;
+         var y;
+         if (horizontalLayout)
+         {
+            x = width - viewLogButton.width - LEFT_PADDING;
+            // to place on the centered horizontal line of the task bar.
+            y = (height - viewLogButton.height) / 2;
+         }
+         else
+         {
+            // to place on the centered vertical line of the task bar.
+            x = (width - viewLogButton.width) / 2;
+            y = height - viewLogButton.height - TOP_PADDING;
+         }
+         viewLogButton.setLocation(x, y);
+         viewLogButton.draw();
+      }
+      
       /**
        * Layouts task icons according to the current task bar position:
        * the horizontal or the vertical.
@@ -245,6 +341,11 @@
 //         console.log("canvas height = " + canvas.height);
          
          canvasRenderer.draw3DRect(ctx, 0, 0, width, height, background, true, true);
+         //check taskIcons is not empty
+         if (taskIcons.length === 0)
+         {
+            return;
+         }
          
          var horizontalLayout;
          
@@ -256,7 +357,6 @@
          {
             horizontalLayout = false;
          }
-         
          var x;
          var y;
          
@@ -264,12 +364,12 @@
          {
             x = LEFT_PADDING;
             // to place on the centered horizontal line of the task bar.
-            y = (height - TASK_ICON_HEIGHT) / 2;
+            y = (height - taskIcons[0].height) / 2;
          }
          else
          {
             // to place on the centered vertical line of the task bar.
-            x = (width - TASK_ICON_WIDTH) / 2;
+            x = (width - taskIcons[0].width) / 2;
             y = TOP_PADDING;
          }
          
@@ -287,6 +387,7 @@
                y += (SHIFT + taskIcon.height);
             }
          }
+         doViewLogButtonLayout(width, height, horizontalLayout);
       }
       
       /**
@@ -349,6 +450,15 @@
       
       this.addTaskIcon    = addTaskIcon;
       this.setIconForTask = setIconForTask;
+      this.setDefaultFont = setDefaultFont;
+      
+      /**
+       * Sets the default font to be used by the task bar.
+       */
+      function setDefaultFont(fontId)
+      {
+         TASK_BAR_FONT_ID = fontId;
+      };
 
       /**
        * Find the window task that represents the target window.
@@ -361,16 +471,15 @@
        */
       function findTaskIcon(windowId)
       {
-         var taskIcon;
          for (var i = 0; i < taskIcons.length; i++)
          {
             var taskIcon = taskIcons[i];
             if (taskIcon.win.id === windowId)
             {
-               break;
+               return taskIcon;
             }
          }
-         return taskIcon;
+         return null;
       };
       
       /**
@@ -382,7 +491,7 @@
       this.iconify = function(windowId)
       {
          var taskIcon = findTaskIcon(windowId);
-         if (taskIcon === undefined)
+         if (taskIcon === null)
          {
             return;
          }
@@ -400,7 +509,7 @@
       this.deiconify = function(windowId)
       {
          var taskIcon = findTaskIcon(windowId);
-         if (taskIcon === undefined)
+         if (taskIcon === null)
          {
             return;
          }
@@ -447,6 +556,9 @@
       /* events fired on the drop targets */
       document.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
 
+      /**
+       * The dragged task panel enters the drop zone
+       */
       document.addEventListener("dragenter", function( event )
       {
          var cls = event.target.className;
@@ -455,7 +567,10 @@
              event.target.style["background"] = getTransparentColor(background, 0.5);
           }
       }, false);
-
+      
+      /**
+       * The dragged task panel leaves the drop zone
+       */
       document.addEventListener("dragleave", function( event )
       {
          var cls = event.target.className;
@@ -466,6 +581,9 @@
          }
       }, false);
 
+      /**
+       * The dragged task panel is attached to new drop zone
+       */
       document.addEventListener("drop", function( event )
       {
          var cls = event.target.className;
@@ -476,6 +594,7 @@
             try
             {
                event.target.appendChild(dragged);
+               event.target.style.zIndex = MAX_Z_INDEX;
                parent.style["background"] = getTransparentColor(background, 0.0);
             }
             catch(e)
@@ -488,6 +607,70 @@
       }, false);
 
       /**
+       * Adds the "on click" task bar action. If a task icon widget gets the mouse pointer,
+       * then this icon widget sets the active state and sends the request to server in order
+       * to change the state of the window represented by this widget.
+       */
+      canvas.addEventListener("click", function(event)
+      {
+         //special view log use case.
+         if (viewLogButton.testMousePointerInside(event) && !viewLogButton.isActive())
+         {
+            viewLogButton.setActive(true);
+            viewLogButton.doClick();
+            viewLogButton.draw();
+            return;
+         }
+         for (var i = 0; i < taskIcons.length; i++)
+         {
+            var taskIcon = taskIcons[i];
+            if (taskIcon.testMousePointerInside(event) && !taskIcon.isActive())
+            {
+               taskIcon.setActive(true);
+               if (taskIconOnClickCallback)
+               {
+                  taskIconOnClickCallback(taskIcon.win.id);
+               }
+               taskIcon.draw();
+               break;
+            }
+            
+         }
+      });
+
+      /**
+       * Changes the tooltip for the task bar peer if the mouse pointer is over the task widget.
+       * 
+       * @param    {MouseEvent} event
+       *           Describes the current mouse pointer.
+       */
+      function changeTooltipOverWidget(event)
+      {
+         //special view log use case.
+         if (viewLogButton.testMousePointerInside(event))
+         {
+            peer.title = viewLogButton.win.title;
+            return;
+         }
+         
+         for (var i = 0; i < taskIcons.length; i++)
+         {
+            var taskIcon = taskIcons[i];
+            if (taskIcon.testMousePointerInside(event))
+            {
+               peer.title = (taskIcon.win.title !== null && taskIcon.win.title !== undefined)
+                                 ? taskIcon.win.title : " ";
+               break;
+            }
+            
+         }
+      }
+
+      canvas.addEventListener("mousemove", changeTooltipOverWidget);
+      canvas.addEventListener("mouseover", changeTooltipOverWidget);
+      canvas.addEventListener("mouseleave", function(event) { setDefaultTooltip(); });
+
+      /**
        * Returns rgba(r,g,b,a) string representation for the target color
        * with the target transparency.
        * 
@@ -539,6 +722,7 @@
          this.setActive = setActive;
          this.isActive  = isActive;
          this.draw = draw;
+         this.testMousePointerInside = testMousePointerInside;
 
          /**
           * Sets the widget location.
@@ -587,6 +771,18 @@
                canvasRenderer.drawImage(ctx, that.x, that.y + (that.height - iconHeight) / 2,
                      iconWidth, iconHeight, that.iconData, 0);
             }
+            else
+            {
+               var text = that.win.title;
+               if (TASK_BAR_FONT_ID !== undefined)
+               {
+                  var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, text);
+                  var textHeight = fontsManager.getTextHeight(TASK_BAR_FONT_ID, text);
+                  ctx.font = fontsManager.getFontName(TASK_BAR_FONT_ID);
+                  canvasRenderer.drawText(that.win.title, that.x + (that.width - textWidth) / 2,
+                        that.y + (that.height + textHeight) / 2, false);
+               }
+            }
          };
          
          /**
@@ -613,41 +809,6 @@
             return true;
          };
          
-         /**
-          * Adds the "on click" widget action. If window is inactive, sets the active state and
-          * sends the request to server in order to change the window state.
-          */
-         peer.addEventListener("click", function(event)
-         {
-            if (testMousePointerInside(event) && !that.isActive())
-            {
-               that.setActive(true);
-               if (taskIconOnClickCallback)
-               {
-                  taskIconOnClickCallback(that.win.id);
-               }
-               that.draw();
-            }
-         });
-         
-         /**
-          * Changes the tooltip for the task bar peer if the mouse pointer is over the task widget.
-          * 
-          * @param    {MouseEvent} event
-          *           Describes the current mouse pointer.
-          */
-         function changeTooltipOverWidget(event)
-         {
-            if (testMousePointerInside(event))
-            {
-               peer.title = (that.win.title !== null && that.win.title !== undefined)
-                                 ? that.win.title : " ";
-            }
-         }
-
-         peer.addEventListener("mousemove", changeTooltipOverWidget);
-         peer.addEventListener("mouseover", changeTooltipOverWidget);
-         peer.addEventListener("mouseleave", function(event) { setDefaultTooltip(); });
       }
    }
 }