From 3d57165a1508fffd98c5b63eb81d71071847b85c Mon Sep 17 00:00:00 2001
From: AurelioAHeckert <AurelioAHeckert@3f533792-8f58-4932-b0fe-aaf55b0a4547>
Date: Thu, 14 Feb 2008 00:41:48 +0000
Subject: [PATCH] ActionItem152: Automatic Live Help!

---
 app/views/layouts/application.rhtml                |  35 ++++++++++++++++++++++++++++++-----
 public/designs/icons/default/help-off-32x32-HC.gif | Bin 0 -> 254 bytes
 public/designs/icons/default/help-on-32x32-HC.gif  | Bin 0 -> 273 bytes
 public/designs/icons/default/style.css             |  70 ++++++++++++++++++++++++++++++++++++----------------------------------
 public/designs/themes/default/style.css            |  74 +++++++++++++++++++++++++++++++++++---------------------------------------
 public/images/help-avatar.gif                      | Bin 0 -> 2489 bytes
 public/img-source/help-avatar.svg                  | 327 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 public/img-source/help.xcf                         | Bin 0 -> 4134 bytes
 public/javascripts/noosfero-show-help.js           |  30 ++++++++++++++++++++++++++++++
 public/javascripts/show-mouse-help.js              | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 public/stylesheets/common.css                      |   5 +++--
 public/stylesheets/help.css                        |  57 +++++++++++++++++++++++++++++++++++++++++++++++----------
 public/stylesheets/lightbox.css                    |   4 ++--
 public/stylesheets/menu.css                        |   2 +-
 14 files changed, 707 insertions(+), 93 deletions(-)
 create mode 100644 public/designs/icons/default/help-off-32x32-HC.gif
 create mode 100644 public/designs/icons/default/help-on-32x32-HC.gif
 create mode 100644 public/images/help-avatar.gif
 create mode 100644 public/img-source/help-avatar.svg
 create mode 100644 public/img-source/help.xcf
 create mode 100644 public/javascripts/noosfero-show-help.js
 create mode 100644 public/javascripts/show-mouse-help.js

diff --git a/app/views/layouts/application.rhtml b/app/views/layouts/application.rhtml
index 1cfe2c0..fcce586 100644
--- a/app/views/layouts/application.rhtml
+++ b/app/views/layouts/application.rhtml
@@ -39,7 +39,8 @@
     # Identify the current controller and action for the CSS:
     " controller_"+ @controller.controller_name() +
     " action_"+ @controller.controller_name() +"_"+ @controller.action_name()
-    %>' onload='noosfero_init();'>
+    %>' onload='noosfero_init();'
+    help="Passe o mouse sobre os elementos da página para ver a ajuda.">
     <script type="text/javascript">
       /* Adds a class to "msie" to the body element if a Microsoft browser is
        * detected. This is needed to workaround several of their limitations.
@@ -57,11 +58,11 @@
       </div>
     <% end %>
 
-    <div id='accessibility_menu'>
-      <a href='#content' id='link_go_content'><span><%= _('Go to content') %></span></a>
+    <div id="accessibility_menu">
+      <a href="#content" id="link_go_content"><span><%= _('Go to content') %></span></a>
     </div><!-- accessibility_menu -->
 
-    <div id='path_category'>
+    <div id="path_category">
       <% if @category -%>
         <%= @category.full_name(" &rarr; ") %>
       <% end -%>
@@ -72,7 +73,18 @@
 
       <div id="beta-tag"><span>BETA</span></div>
 
-      <div id='noosfero_bar' style='position: absolute;'>
+      <div id="noosfero_bar" help="#noosfero_bar_help">
+        <div id="noosfero_bar_help" style="display:none">
+          Esta é a <b>barra de atalhos do <%= @environment.name() %></b>.
+          Atravêz dela você acessa as principais funcionalidades do ambiente
+          e encontra mais rapidamente as informações do seu interesse.
+          <p/>
+          Essa barra te ajuda a encontrar informações por dois caminhos
+          ou <b><i>dimensões</i></b>. A primeira dimensão são as <i>categorias</i>
+          que você encontra nas abas coloridas da barra. A segunda dimensão
+          são os <i>tipos de conteúdo</i> que você encontra na aba animada
+          da direita.
+        </div>
 
         <div id='navigation_bar'>
           <%= render :file => 'shared/categories_menu' %>
@@ -89,6 +101,10 @@
           %>
         </div><!-- id='user_box' -->
 
+        <a href="#" id="btShowHelp" class="icon-help32on"
+           title="<%= _('Turn help on/off') %>"
+           onclick="mouseHelpOnOff()"><span><%= _('Help') %></span></a>
+
       </div><!-- id="noosfero_bar" -->
 
       <div id='frame'><!-- Frame que envolve toda pagina de um usuario -->
@@ -125,6 +141,15 @@
       <%= footer %>
     </div><!-- id="footer" -->
 
+    <div id="helpBox" style="display:none">
+      <div id="helpBoxBody">
+        <div id="helpAvatar"></div>
+        <div id="helpBoxContent"></div>
+      </div>
+    </div>
+    <%= javascript_include_tag 'show-mouse-help' %>
+    <%= javascript_include_tag 'noosfero-show-help' %>
+
     <div id="better-browser-promotion" style="display:none">
       <h3><%=
       _('Hey! Your web browser is really old!') +'</h3><p/>'+
diff --git a/public/designs/icons/default/help-off-32x32-HC.gif b/public/designs/icons/default/help-off-32x32-HC.gif
new file mode 100644
index 0000000..c621877
Binary files /dev/null and b/public/designs/icons/default/help-off-32x32-HC.gif differ
diff --git a/public/designs/icons/default/help-on-32x32-HC.gif b/public/designs/icons/default/help-on-32x32-HC.gif
new file mode 100644
index 0000000..f43059b
Binary files /dev/null and b/public/designs/icons/default/help-on-32x32-HC.gif differ
diff --git a/public/designs/icons/default/style.css b/public/designs/icons/default/style.css
index fc32629..9980158 100644
--- a/public/designs/icons/default/style.css
+++ b/public/designs/icons/default/style.css
@@ -1,35 +1,37 @@
-.icon-edit    { background-image: url(gtk-edit.png);           }
-.icon-home    { background-image: url(gnome-home.png);         }
-.icon-new     { background-image: url(gtk-new.png);            }
-.icon-close   { background-image: url(cancel-HC.gif);          }
-.icon-open    { background-image: url(gtk-open.png);           }
-.icon-cms     { background-image: url(abiword_48.png)          }
-.icon-save    { background-image: url(gtk-save.png);           }
-.icon-up      { background-image: url(gtk-go-up.png);          }
-.icon-cancel  { background-image: url(cancel-HC.gif);          }
-.icon-person  { background-image: url(user_icon.png);          }
-.icon-product { background-image: url(gnome-other.png);        }
-.icon-delete  { background-image: url(gtk-delete.png);         }
-.icon-find    { background-image: url(noosfero-find.png);      }
-.icon-back    { background-image: url(gtk-go-back-ltr.png);    }
-.icon-next    { background-image: url(gtk-media-next-ltr.png); }
-.icon-add     { background-image: url(gtk-add.png);            }
-.icon-up      { background-image: url(gtk-go-up.png);          }
-.icon-down    { background-image: url(gtk-go-down.png);        }
-.icon-search  { background-image: url(gnome-search.png);       }
-.icon-ok      { background-image: url(gtk-ok.png);             }
-.icon-login   { background-image: url(key-HC.gif);             }
-.icon-help    { background-image: url(help.gif);               }
-.icon-firefox { background-image: url(firefox-24x24.gif);      }
+.icon-edit      { background-image: url(gtk-edit.png)            }
+.icon-home      { background-image: url(gnome-home.png)          }
+.icon-new       { background-image: url(gtk-new.png)             }
+.icon-close     { background-image: url(cancel-HC.gif)           }
+.icon-open      { background-image: url(gtk-open.png)            }
+.icon-cms       { background-image: url(abiword_48.png)          }
+.icon-save      { background-image: url(gtk-save.png)            }
+.icon-up        { background-image: url(gtk-go-up.png)           }
+.icon-cancel    { background-image: url(cancel-HC.gif)           }
+.icon-person    { background-image: url(user_icon.png)           }
+.icon-product   { background-image: url(gnome-other.png)         }
+.icon-delete    { background-image: url(gtk-delete.png)          }
+.icon-find      { background-image: url(noosfero-find.png)       }
+.icon-back      { background-image: url(gtk-go-back-ltr.png)     }
+.icon-next      { background-image: url(gtk-media-next-ltr.png)  }
+.icon-add       { background-image: url(gtk-add.png)             }
+.icon-up        { background-image: url(gtk-go-up.png)           }
+.icon-down      { background-image: url(gtk-go-down.png)         }
+.icon-search    { background-image: url(gnome-search.png)        }
+.icon-ok        { background-image: url(gtk-ok.png)              }
+.icon-login     { background-image: url(key-HC.gif)              }
+.icon-help      { background-image: url(help.gif)                }
+.icon-firefox   { background-image: url(firefox-24x24.gif)       }
+.icon-help32on  { background-image: url(help-on-32x32-HC.gif)    }
+.icon-help32off { background-image: url(help-off-32x32-HC.gif)   }
 .icon-menu-           { background-image: url(menu-without-ico-HC.gif) }
-.icon-menu-blog       { background-image: url(blog-HC.gif);            }
-.icon-menu-album      { background-image: url(album-HC.gif);           }
-.icon-menu-product    { background-image: url(product-HC.gif);         }
-.icon-menu-enterprise { background-image: url(enterprise-HC.gif);      }
-.icon-menu-community  { background-image: url(community-HC.gif);       }
-.icon-menu-edit       { background-image: url(edit-HC.gif);            }
-.icon-menu-ctrl-panel { background-image: url(control-HC.gif);         }
-.icon-menu-login      { background-image: url(enter-HC.gif);           }
-.icon-menu-logout     { background-image: url(exit-HC.gif);            }
-.icon-menu-search     { background-image: url(search-HC.gif);          }
-.icon-menu-ed-design  { background-image: url(edit-design-HC.gif);     }
+.icon-menu-blog       { background-image: url(blog-HC.gif)             }
+.icon-menu-album      { background-image: url(album-HC.gif)            }
+.icon-menu-product    { background-image: url(product-HC.gif)          }
+.icon-menu-enterprise { background-image: url(enterprise-HC.gif)       }
+.icon-menu-community  { background-image: url(community-HC.gif)        }
+.icon-menu-edit       { background-image: url(edit-HC.gif)             }
+.icon-menu-ctrl-panel { background-image: url(control-HC.gif)          }
+.icon-menu-login      { background-image: url(enter-HC.gif)            }
+.icon-menu-logout     { background-image: url(exit-HC.gif)             }
+.icon-menu-search     { background-image: url(search-HC.gif)           }
+.icon-menu-ed-design  { background-image: url(edit-design-HC.gif)      }
diff --git a/public/designs/themes/default/style.css b/public/designs/themes/default/style.css
index 7a62561..e814fef 100644
--- a/public/designs/themes/default/style.css
+++ b/public/designs/themes/default/style.css
@@ -1,26 +1,23 @@
 /* Default Plain Theme for Blocks */
 
-.design_block
-{
+.design_block {
 	background: #FFFFFF;
 	border: 3px solid #000000;
 	margin-bottom: 10px;
 }
 
 .design_editor ul, .design_box ul {
-list-style: none;
-margin: 0px;
-padding: 0px;
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
 }
 
-.design_block ul
-{
+.design_block ul {
 	list-style: none;
 	margin-left: 15px;
 }
 
-.design_block h3
-{
+.design_block h3 {
 	color: #FFFFFF;
 	background: #545454;
 	font-family: Sans-serif;
@@ -34,28 +31,28 @@ padding: 0px;
 }
 
 #design_editor h3.design_block_header {
- padding-left: 30px;
- cursor: move;
+  padding-left: 30px;
+  cursor: move;
 }
 
 a.design_button_block span {
-display: none;
-padding: 1px;
-color: #000;
-background: #dfdfdf;
-font-family: Sans-serif;
-font-size: 10px;
-font-weight: normal;
-border: 1px inset #545454;
+  display: none;
+  padding: 1px;
+  color: #000;
+  background: #dfdfdf;
+  font-family: Sans-serif;
+  font-size: 10px;
+  font-weight: normal;
+  border: 1px inset #545454;
 }
 
 a.design_button_block:hover span {
-display: block;
-position: relative;
-margin-top: -20px;
-margin-left: -10px;
-z-index: 100;
-float: left;
+  display: block;
+  position: relative;
+  margin-top: -20px;
+  margin-left: -10px;
+  z-index: 100;
+  float: left;
 }
 
 .design_block a.design_button_block {
@@ -69,28 +66,27 @@ float: left;
 }
 
 .design_block a.button_block_hide {
-background: url('icons.png') no-repeat;
-background-position: -60px 0px;
+  background: url('icons.png') no-repeat;
+  background-position: -60px 0px;
 }
 .design_block a.button_block_remove {
-background: red url('icons.png') no-repeat;
-background-position: -80px 0px;
+  background: red url('icons.png') no-repeat;
+  background-position: -80px 0px;
 }
 .design_block a.button_block_options {
-background: blue url('icons.png') no-repeat;
-background-position: 0px 0px;
+  background: blue url('icons.png') no-repeat;
+  background-position: 0px 0px;
 }
 .design_block a.button_block_item_options {
-background: url('icons.png') no-repeat;
-background-position: -40px 0px;
+  background: url('icons.png') no-repeat;
+  background-position: -40px 0px;
 }
 
 .design_block a:hover.design_button_block {
   opacity: 1.0;
 }
 
-.design_block_content 
-{
+.design_block_content {
 	padding: 5px;
 }
 
@@ -106,11 +102,11 @@ background-position: -40px 0px;
 }
 
 .button_block_options {
-position: absolute;
-left: 5px;
+  position: absolute;
+  left: 5px;
 }
 
 .button_block_options:hover div#design_block_control_options_11 {
-display: block;
-border: 3px solid red;
+  display: block;
+  border: 3px solid red;
 }
diff --git a/public/images/help-avatar.gif b/public/images/help-avatar.gif
new file mode 100644
index 0000000..32712f7
Binary files /dev/null and b/public/images/help-avatar.gif differ
diff --git a/public/img-source/help-avatar.svg b/public/img-source/help-avatar.svg
new file mode 100644
index 0000000..4d200a1
--- /dev/null
+++ b/public/img-source/help-avatar.svg
@@ -0,0 +1,327 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.45+devel"
+   version="1.0"
+   sodipodi:docname="help-avatar.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/aurium/noosfero/public/img-source/help-avatar.png"
+   inkscape:export-xdpi="221.25"
+   inkscape:export-ydpi="221.25">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2996">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop2998" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.39215687;"
+         offset="1"
+         id="stop3000" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       id="perspective32"
+       inkscape:vp_x="-50 : 600 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="700 : 600 : 1"
+       inkscape:persp3d-origin="300 : 400 : 1" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3380">
+      <stop
+         style="stop-color:#73d216;stop-opacity:1;"
+         offset="0"
+         id="stop3382" />
+      <stop
+         style="stop-color:#4e9a06;stop-opacity:1"
+         offset="1"
+         id="stop3384" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3339">
+      <stop
+         style="stop-color:#73d216;stop-opacity:0"
+         offset="0"
+         id="stop3341" />
+      <stop
+         style="stop-color:#4e9a06;stop-opacity:1"
+         offset="1"
+         id="stop3343" />
+    </linearGradient>
+    <inkscape:perspective
+       inkscape:persp3d-origin="118.07566 : 146.93033 : 1"
+       inkscape:vp_z="105.54717 : 55.106282 : 1"
+       inkscape:vp_y="-191.15564 : 348.80969 : 0"
+       inkscape:vp_x="-18.125245 : -26.355463 : 1"
+       id="perspective3288"
+       sodipodi:type="inkscape:persp3d" />
+    <linearGradient
+       id="linearGradient3018">
+      <stop
+         style="stop-color:#edd400;stop-opacity:0"
+         offset="0"
+         id="stop3020" />
+      <stop
+         style="stop-color:#c17d11;stop-opacity:1"
+         offset="1"
+         id="stop3022" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       id="perspective10"
+       inkscape:vp_x="-160.76941 : 182.51388 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="210.32279 : 212.68901 : 1"
+       inkscape:persp3d-origin="348.89133 : 400 : 1" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3018"
+       id="radialGradient3409"
+       gradientUnits="userSpaceOnUse"
+       cx="21.432123"
+       cy="21.432123"
+       fx="15.140556"
+       fy="13.38717"
+       r="23.309734" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3339"
+       id="radialGradient3413"
+       gradientUnits="userSpaceOnUse"
+       cx="22.323353"
+       cy="25.485029"
+       fx="20.982035"
+       fy="24.335329"
+       r="5.5778441" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3380"
+       id="linearGradient2978"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(14,0)"
+       x1="5.7485027"
+       y1="5.4589195"
+       x2="13.221557"
+       y2="15.404183" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2996"
+       id="linearGradient3002"
+       x1="17.461113"
+       y1="2.027601"
+       x2="27.59375"
+       y2="14.28125"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="10.4375"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1024"
+     inkscape:window-height="712"
+     inkscape:window-x="0"
+     inkscape:window-y="26" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+        <dc:date></dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title></dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title></dc:title>
+          </cc:Agent>
+        </dc:rights>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title></dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:identifier></dc:identifier>
+        <dc:source></dc:source>
+        <dc:relation></dc:relation>
+        <dc:language></dc:language>
+        <dc:subject>
+          <rdf:Bag />
+        </dc:subject>
+        <dc:coverage></dc:coverage>
+        <dc:description></dc:description>
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title></dc:title>
+          </cc:Agent>
+        </dc:contributor>
+        <cc:license
+           rdf:resource="" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3403"
+       transform="translate(19.137689,0)">
+      <path
+         sodipodi:nodetypes="ccsccc"
+         id="path3284"
+         d="M 15.983695,0.61245879 L 19.617147,14.904183 C 20.891542,14.56271 21.530647,14.531897 22.170564,14.531679 C 22.810482,14.531461 23.451213,14.561839 24.728859,14.904183 L 28.362311,0.61245879 L 15.983695,0.61245879 z"
+         style="fill:url(#linearGradient2978);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         inkscape:box3dsidetype="14" />
+      <path
+         sodipodi:type="arc"
+         style="fill:#8ae234;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path3337"
+         sodipodi:cx="22.323353"
+         sodipodi:cy="25.485029"
+         sodipodi:rx="5.0778441"
+         sodipodi:ry="5.0778441"
+         d="M 27.401197,25.485029 A 5.0778441,5.0778441 0 1 1 17.245509,25.485029 A 5.0778441,5.0778441 0 1 1 27.401197,25.485029 z"
+         transform="matrix(1.1886793,0,0,1.1886793,-4.362305,-8.257598)" />
+      <path
+         d="M 27.401197,25.485029 A 5.0778441,5.0778441 0 1 1 17.245509,25.485029 A 5.0778441,5.0778441 0 1 1 27.401197,25.485029 z"
+         sodipodi:ry="5.0778441"
+         sodipodi:rx="5.0778441"
+         sodipodi:cy="25.485029"
+         sodipodi:cx="22.323353"
+         id="path3335"
+         style="fill:url(#radialGradient3413);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.84126985px;stroke-linecap:butt;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="arc"
+         transform="matrix(1.1886793,0,0,1.1886793,-4.362305,-8.257598)" />
+      <path
+         transform="matrix(0.9897517,0,0,0.9897517,7.8426665e-2,-3.1879217)"
+         sodipodi:type="arc"
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.01035440000000021px;stroke-linecap:butt;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.7"
+         id="path2393"
+         sodipodi:cx="22.323353"
+         sodipodi:cy="25.485029"
+         sodipodi:rx="5.0778441"
+         sodipodi:ry="5.0778441"
+         d="M 27.401197,25.485029 A 5.0778441,5.0778441 0 1 1 17.245509,25.485029 A 5.0778441,5.0778441 0 1 1 27.401197,25.485029 z" />
+      <path
+         sodipodi:type="inkscape:offset"
+         inkscape:radius="-0.99102211"
+         inkscape:original="M 15.96875 0.625 L 19.625 14.90625 C 20.899395 14.564777 21.516333 14.531468 22.15625 14.53125 C 22.796167 14.531032 23.441104 14.563906 24.71875 14.90625 L 28.375 0.625 L 15.96875 0.625 z "
+         xlink:href="#path3284"
+         style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient3002);stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;opacity:0.9"
+         id="path2976"
+         inkscape:href="#path3284"
+         d="M 17.25,1.625 L 20.375,13.78125 C 21.010263,13.672512 21.724883,13.531397 22.15625,13.53125 C 22.59026,13.531102 23.318356,13.67071 23.96875,13.78125 L 27.09375,1.625 L 17.25,1.625 z"
+         transform="translate(0,-1.5625e-2)" />
+    </g>
+    <g
+       id="g3396"
+       transform="translate(-7.4999986,-0.5)">
+      <path
+         sodipodi:type="arc"
+         style="opacity:1;fill:#edd400;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.19537103;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path3323"
+         sodipodi:cx="23.41593"
+         sodipodi:cy="23.41593"
+         sodipodi:rx="23.309734"
+         sodipodi:ry="23.309734"
+         d="M 46.725664,23.41593 A 23.309734,23.309734 0 1 1 0.10619545,23.41593 A 23.309734,23.309734 0 1 1 46.725664,23.41593 z"
+         transform="matrix(0.8365604,0,0,0.8365604,8.41116,8.4111597)" />
+      <path
+         transform="matrix(0.8365604,0,0,0.8365604,8.4111597,8.4111597)"
+         d="M 46.725664,23.41593 A 23.309734,23.309734 0 1 1 0.10619545,23.41593 A 23.309734,23.309734 0 1 1 46.725664,23.41593 z"
+         sodipodi:ry="23.309734"
+         sodipodi:rx="23.309734"
+         sodipodi:cy="23.41593"
+         sodipodi:cx="23.41593"
+         id="path2363"
+         style="opacity:1;fill:url(#radialGradient3409);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2.39074183;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="arc" />
+      <path
+         transform="matrix(0.6006074,0,0,0.6006074,13.936217,13.93622)"
+         d="M 33.139175,44.600882 A 23.309734,23.309734 0 0 1 0.20209021,21.303735"
+         sodipodi:ry="23.309734"
+         sodipodi:rx="23.309734"
+         sodipodi:cy="23.41593"
+         sodipodi:cx="23.41593"
+         id="path2994"
+         style="opacity:0.5;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:6.65992451;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="arc"
+         sodipodi:start="1.1405085"
+         sodipodi:end="3.2323314"
+         sodipodi:open="true" />
+      <path
+         id="path2992"
+         d="M 29.499999,33 C 34.198818,24.555563 33.594098,18.871841 33.594098,18.871841"
+         style="opacity:0.5;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:0.5"
+         d="M 36.49509,35.5 C 41.193909,27.055562 40.589189,21.371841 40.589189,21.371841"
+         id="path2990" />
+      <path
+         sodipodi:type="arc"
+         style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.17222595;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path3327"
+         sodipodi:cx="23.41593"
+         sodipodi:cy="23.41593"
+         sodipodi:rx="23.309734"
+         sodipodi:ry="23.309734"
+         d="M 32.029707,45.075721 A 23.309734,23.309734 0 0 1 0.44828222,19.437126"
+         transform="matrix(0.5577069,0,0,0.5577069,14.940773,14.940775)"
+         sodipodi:start="1.1922871"
+         sodipodi:end="3.3131254"
+         sodipodi:open="true" />
+      <path
+         sodipodi:type="arc"
+         style="opacity:0.6;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.29498505999999991;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path2980"
+         sodipodi:cx="23.41593"
+         sodipodi:cy="23.41593"
+         sodipodi:rx="23.309734"
+         sodipodi:ry="23.309734"
+         d="M 46.725664,23.41593 A 23.309734,23.309734 0 1 1 0.10619545,23.41593 A 23.309734,23.309734 0 1 1 46.725664,23.41593 z"
+         transform="matrix(0.7722096,0,0,0.7722096,9.9179934,9.9179948)" />
+      <path
+         id="path3028"
+         d="M 35.49509,34.5 C 40.193909,26.055562 39.589189,20.371841 39.589189,20.371841"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 28.499999,32 C 33.198818,23.555563 32.594098,17.871841 32.594098,17.871841"
+         id="path3030" />
+    </g>
+  </g>
+</svg>
diff --git a/public/img-source/help.xcf b/public/img-source/help.xcf
new file mode 100644
index 0000000..c661839
Binary files /dev/null and b/public/img-source/help.xcf differ
diff --git a/public/javascripts/noosfero-show-help.js b/public/javascripts/noosfero-show-help.js
new file mode 100644
index 0000000..17b199b
--- /dev/null
+++ b/public/javascripts/noosfero-show-help.js
@@ -0,0 +1,30 @@
+
+function mouseHelpOnOff() {
+  if ( pageHelp.info.updateBox ) {
+    showMouseHelpOff()
+    $("btShowHelp").className = "icon-help32on";
+  } else {
+    showMouseHelpOn()
+    $("btShowHelp").className = "icon-help32off";
+  }
+  var date = new Date();
+  date.setTime( date.getTime() + ( 60*24*60*60*1000 ) );
+  var expires = "; expires=" + date.toGMTString();
+  document.cookie = "mouseHelpTurnOn="+ pageHelp.info.updateBox + expires +"; path=/";
+}
+
+if ( document.cookie.indexOf("mouseHelpTurnOn=") > -1 ) {
+  if ( document.cookie.indexOf("mouseHelpTurnOn=true") > -1 ) {
+    mouseHelpOnOff();
+  }
+} else {
+  var date = new Date();
+  date.setTime( date.getTime() + ( 60*24*60*60*1000 ) );
+  var expires = "; expires=" + date.toGMTString();
+  document.cookie = "mouseHelpTurnOn=false" + expires +"; path=/";
+  if ( confirm("Olá, você gostaria de ativar o modo de ajuda automática do Noosfero?") ) { 
+    mouseHelpOnOff();
+  } else {
+    alert("Caso precise, basta clicar no icone de ajuda no canto superior direito da página.")
+  }
+}
diff --git a/public/javascripts/show-mouse-help.js b/public/javascripts/show-mouse-help.js
new file mode 100644
index 0000000..c01eced
--- /dev/null
+++ b/public/javascripts/show-mouse-help.js
@@ -0,0 +1,196 @@
+/*
+** : : : : : :  How to use the Show Help  : : : : : :
+** For each interesting page element you can put the
+** attribute help. The help attribute can be any string
+** text (scaped to not distroy the html) or some html id.
+** The help for each element will be showed automaticaly
+** when the mouse is over that. Yeah... we can turn on
+** this help system calling the function showMouseHelpOn()
+** and turn off calling the function showMouseHelpOff().
+**
+** Examples:
+**
+** <a href="..." help="this is a link">my link</a>
+**
+** <form help="#myLongHelp"> ... </form>
+** <div id="myLongHelp" style="display:none">
+**   This is a <b>loooong</b> help. <p/>
+**   You can put <code>HTML</code> here too!
+** </div>
+**
+** You need to put the style="display:none" on the long
+** help container to it's text do not noise the web page.
+**
+** If the mouse pointed element do not have a help,
+** each one of this parents will be visited to find
+** the help. If no one has a help the help box turn
+** to non visible.
+*/
+
+/*
+** This script can be loaded by the page and it's iFrames,
+** as in the Noofero - community network system. Some of
+** this code will enable the iFrame => parent information.
+*/
+
+/*
+** pageHelp has informations for this page/frame
+** to not conflict with other frames.
+*/
+var pageHelp = {};
+if ( navigator.userAgent.indexOf('MSIE') != -1 ) {
+  pageHelp.isIE = ( navigator.userAgent.indexOf('Opera') == -1 )
+}
+// If i'm in a iFrame, get the iFrame reference:
+if ( window.parent == window ) {
+  pageHelp.myFrame = false;
+} else {
+  var randTit = "iframe"+ Math.random();
+  window.frameHelpId = randTit;
+  var frames = window.parent.document.getElementsByTagName("iframe");
+  var f;
+  for ( var i=0; f=frames[i]; i++ ) {
+    if ( f.contentWindow && ( f.contentWindow.frameHelpId == randTit ) ) {
+      pageHelp.myFrame = f;
+    }
+  }
+}
+
+/*
+** pageHelp.info is a reference for a cetral help information.
+** All frames will update the information here.
+*/
+if ( !window.parent.pageHelpInfo ) window.parent.pageHelpInfo = {};
+pageHelp.info = window.parent.pageHelpInfo;
+pageHelp.info.incPos = { x:20, y:20 };
+pageHelp.info.myDoc = window.parent.document;
+
+mouseBli = 0;
+function getHelp( ev ) {
+  var helpInfo = pageHelp.info;
+  if ( helpInfo.updateBox ) {
+    if ( window.event ) {
+      ev = window.event;
+      var el = ev.srcElement;
+    } else {
+      var el = ev.target;
+    }
+    var mX = 0;
+  	var mY = 0;
+    if ( ev.pageX || ev.pageY)	{
+      mX = ev.pageX;
+      mY = ev.pageY;
+    }
+    else if (ev.clientX || ev.clientY) {
+      mX = ev.clientX;
+      mY = ev.clientY;
+      if ( pageHelp.isIE ) {
+        mX += helpInfo.myDoc.body.scrollLeft;
+        mY += helpInfo.myDoc.body.scrollTop;
+      }
+    }
+    if ( pageHelp.myFrame ) {
+      var fPos = pageHelp.getPos( pageHelp.myFrame );
+      mX += fPos.x;
+      mY += fPos.y;
+    }
+    var box = helpInfo.helpBox;
+    helpInfo.mX = mX;
+    helpInfo.mY = mY;
+    if ( mX > ( helpInfo.myDoc.body.clientWidth / 1.8 ) ) {
+      movePageHelpToTheLeftMouseSide()
+    } else {
+      movePageHelpToTheRightMouseSide()
+    }
+    if ( ( mY + box.clientHeight + 40 ) >
+         ( helpInfo.myDoc.body.clientHeight + helpInfo.myDoc.body.scrollTop )
+       ) {
+      mY = helpInfo.myDoc.body.clientHeight + helpInfo.myDoc.body.scrollTop
+           - box.clientHeight - 40;
+    }
+    if ( box ) {
+      debug = mouseBli++ +" "+ el.nodeName;
+      while ( el.parentNode.getAttribute && ! el.getAttribute("help") ) { el = el.parentNode }
+      debug += " :: "+ el.nodeName +" "+ el.getAttribute("help");
+      debug += "<br>"+ pageHelp.myFrame.src +" x:"+ mX +" y:"+ mY;
+      var txt = el.getAttribute("help");
+      if ( txt ) {
+        box.style.display = "block";
+        if ( txt != "FALSE" ) {
+          if ( /^#.+/.test( txt ) ) {
+            var txtEl = el.ownerDocument.getElementById( txt.replace(/#/,"") );
+            if ( txtEl ) txt = txtEl.innerHTML;
+          }
+          box.content.innerHTML = '<p/>'+ txt +
+                                  '<br style="clear:both" />'+
+                                  '<div class="help-force-clear-ieworkarroundbug"'+
+                                  ' style="height:1px; overflow:hidden"></div>';
+        }
+      } else {
+        box.style.display = "none";
+      }
+      box.style.left = ( mX + helpInfo.incPos.x ) +"px";
+      box.style.top  = ( mY + helpInfo.incPos.y ) +"px";
+    }
+  }
+}
+
+pageHelp.getPos = function (obj) {
+  var x = y = 0;
+  if (obj.offsetParent) {
+    do {
+      x += obj.offsetLeft;
+      y += obj.offsetTop;
+    } while (obj = obj.offsetParent);
+  }
+  return { x:x, y:y };
+}
+
+function movePageHelpToTheLeftMouseSide() {
+  clearTimeout( movePageHelpToTheRightMouseSide.timeout )
+  clearTimeout( movePageHelpToTheLeftMouseSide.timeout )
+  if ( pageHelp.info.incPos.x > -( pageHelp.info.helpBox.clientWidth + 20 ) ) {
+    pageHelp.info.incPos.x -= 10;
+    if ( ( pageHelp.info.mX + pageHelp.info.incPos.x + pageHelp.info.helpBox.clientWidth ) >
+         pageHelp.info.myDoc.body.clientWidth ) {
+      pageHelp.info.incPos.x =
+        pageHelp.info.myDoc.body.clientWidth - pageHelp.info.helpBox.clientWidth - pageHelp.info.mX - 10;
+    }
+    pageHelp.info.helpBox.style.left = ( pageHelp.info.mX + pageHelp.info.incPos.x ) +"px";
+    movePageHelpToTheLeftMouseSide.timeout =
+    setTimeout( "movePageHelpToTheLeftMouseSide()", 20 );
+  }
+}
+
+function movePageHelpToTheRightMouseSide() {
+  clearTimeout( movePageHelpToTheRightMouseSide.timeout )
+  clearTimeout( movePageHelpToTheLeftMouseSide.timeout )
+  if ( pageHelp.info.incPos.x < 20 ) {
+    pageHelp.info.incPos.x += 10;
+    pageHelp.info.helpBox.style.left = ( pageHelp.info.mX + pageHelp.info.incPos.x ) +"px";
+    movePageHelpToTheRightMouseSide.timeout =
+    setTimeout( "movePageHelpToTheRightMouseSide()", 20 );
+  }
+}
+
+if( window.addEventListener ) { // Standard
+  document.body.addEventListener( "mousemove", getHelp, false );
+}
+if( window.attachEvent ) { // IE
+  document.body.attachEvent( "onmousemove", getHelp );
+}
+
+function showMouseHelpOn() {
+  pageHelp.info.helpBox = document.getElementById("helpBox");
+  pageHelp.info.helpBox.content = document.getElementById("helpBoxContent");
+  pageHelp.info.helpBox.setAttribute( "help", "FALSE" ); 
+  pageHelp.info.updateBox = true;
+  pageHelp.info.myDoc.body.style.cursor = "help";
+}
+
+function showMouseHelpOff() {
+  pageHelp.info.helpBox.style.display = "none";
+  pageHelp.info.updateBox = false;
+  pageHelp.info.myDoc.body.style.cursor = "default";
+}
+
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index e6e26b8..62129bf 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -268,7 +268,7 @@ div.file-manager-button a:hover {
 
 
 #spinner {
-  z-index: 1000;
+  z-index: 10;
   position: absolute;
   left: 50%;
   margin-left: -16px;
@@ -292,7 +292,7 @@ clear: both;
 /* Notice */ 
 
 div#notice {
-  z-index: 4000;
+  z-index: 20;
   position: absolute;
   top: 100px;
   left: 50%;
@@ -403,3 +403,4 @@ body.category4 #content h4, body.category4 #content h5, body.category4 #content 
   margin-bottom: 1em;
   text-align: center;
 }
+
diff --git a/public/stylesheets/help.css b/public/stylesheets/help.css
index f55fb44..3469092 100644
--- a/public/stylesheets/help.css
+++ b/public/stylesheets/help.css
@@ -1,16 +1,53 @@
 
-div.help_message {
-  z-index: 10000;
-  width: 600;
+#btShowHelp {
   position: absolute;
-  top: 50%
-  height: 400px;
-  margin-top: -200px;
+  top: 2px;
+  right: 2px;
+  display: block;
+  width: 32px;
+  height: 32px;
+  opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+#btShowHelp:hover {
+  opacity: 1;
+	filter: alpha(opacity=100);
+}
+#btShowHelp span {
+  display: none;
+}
+
+#helpBox {
+  position: absolute;
+  top: 350px;
+  border: 2px solid #26A;
+  background: #A0B8D0;
+  width: 35%;
+  z-index: 2000;
+}
 
-  left: 50%;
-  margin-left: -300px;
-  background: yellow;
+#helpBoxBody {
+  border: 1px solid #E8F0F8;
+  padding: 0px 5px 0px 10px;
+}
+
+#helpAvatar {
+  float: left;
+  margin: 5px 10px 5px -5px;
+  width: 48px;
+  height: 48px;
+  background: url("/images/help-avatar.gif");
+}
+.msie6 #helpAvatar {
+  margin: 5px 8px 5px -2px;
+}
+
+#helpBoxBody p {
+  margin: 0px;
+  padding: 8px 0px 0px 0px;
+}
 
-  overflow: auto;
+.help-force-clear-ieworkarroundbug {
+  margin-top: -2px;
 }
 
diff --git a/public/stylesheets/lightbox.css b/public/stylesheets/lightbox.css
index 59cd598..f3812d9 100644
--- a/public/stylesheets/lightbox.css
+++ b/public/stylesheets/lightbox.css
@@ -14,7 +14,7 @@ Modified : February 1, 2006
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	z-index: 9999;
+	z-index: 300;
 	width: 500px;
 	margin: -200px 0 0 -250px;
 	border: 10px solid #000;
@@ -33,7 +33,7 @@ Modified : February 1, 2006
 	left:0;
 	width:100%;
 	height:100%;
-	z-index:5000;
+	z-index:200;
 	background-color:#000;
 	-moz-opacity: 0.5;
 	opacity:.50;
diff --git a/public/stylesheets/menu.css b/public/stylesheets/menu.css
index ab3a3b4..1069b6c 100644
--- a/public/stylesheets/menu.css
+++ b/public/stylesheets/menu.css
@@ -10,7 +10,7 @@
   left: 3px;
   right: 3px;
   height: 22px;
-  z-index: 4500;
+  z-index: 100;
   background-color: #3465A4;
   font-size: 11px;
   letter-spacing: -1px;
--
libgit2 0.21.2