From: Moritz Bunkus <m.bunkus@linet-services.de>
Date: Fri, 25 Jul 2008 12:19:04 +0000 (+0000)
Subject: Das Javascript-Menü durch eine andere Implementation ersetzt, die auch unter dem... 
X-Git-Tag: release-2.6.0beta1~34
X-Git-Url: http://wagnertech.de/git?a=commitdiff_plain;h=32fa785e63db8d0b0629be988589e89a92986d3e;p=kivitendo-erp.git

Das Javascript-Menü durch eine andere Implementation ersetzt, die auch unter dem Internet Explorer 7 funktioniert.
---

diff --git a/SL/Menu.pm b/SL/Menu.pm
index 7abab0d6a..8ded1dde8 100644
--- a/SL/Menu.pm
+++ b/SL/Menu.pm
@@ -107,6 +107,34 @@ sub menuitem {
   return $str;
 }
 
+sub menuitem_new {
+  $main::lxdebug->enter_sub();
+
+  my ($self, $name, $item) = @_;
+
+  my $form        = $main::form;
+
+  my $module      = $self->{$name}->{module} || $form->{script};
+  my $action      = $self->{$name}->{action};
+
+  $item->{target} = $self->{$name}->{target} || "main_window";
+  $item->{href}   = $self->{$name}->{href}   || "${module}?action=" . $form->escape($action);
+
+  my @vars = qw(module target href);
+  push @vars, $action unless ($self->{$name}->{href});
+
+  map { delete $self->{$name}{$_} } @vars;
+
+  # add other params
+  foreach my $key (keys %{ $self->{$name} }) {
+    my ($value, $conf)  = split(m/=/, $self->{$name}->{$key}, 2);
+    $value              = $myconfig->{$value} . "/$conf" if ($conf);
+    $item->{href}      .= "&" . $form->escape($key) . "=" . $form->escape($value);
+  }
+
+  $main::lxdebug->leave_sub();
+}
+
 sub menuitem_v3 {
   $main::lxdebug->enter_sub();
 
@@ -223,43 +251,6 @@ sub menuitem_XML {
   return $str;
 }
 
-sub menuitemNew {
-  my ($self, $myconfig, $form, $item) = @_;
-
-  my $module = $form->{script};
-  my $action = "section_menu";
-
-  #if ($self->{$item}{module}) {
-  $module = $self->{$item}{module};
-
-  #}
-  if ($self->{$item}{action}) {
-    $action = $self->{$item}{action};
-  }
-
-  my $level = $form->escape($item);
-  my $str   = qq|$module?action=$action&level=$level|;
-  my @vars = qw(module action target href);
-
-  if ($self->{$item}{href}) {
-    $str  = qq|$self->{$item}{href}|;
-    @vars = qw(module target href);
-  }
-
-  map { delete $self->{$item}{$_} } @vars;
-
-  # add other params
-  foreach my $key (keys %{ $self->{$item} }) {
-    $str .= "&" . $form->escape($key, 1) . "=";
-    ($value, $conf) = split(/=/, $self->{$item}{$key}, 2);
-    $value = $myconfig->{$value} . "/$conf" if ($conf);
-    $str .= $form->escape($value, 1);
-  }
-
-  $str .= " ";
-
-}
-
 sub access_control {
   $main::lxdebug->enter_sub(2);
 
diff --git a/bin/mozilla/menunew.pl b/bin/mozilla/menunew.pl
index 80f7335f6..25c499f36 100644
--- a/bin/mozilla/menunew.pl
+++ b/bin/mozilla/menunew.pl
@@ -30,53 +30,33 @@
 #
 # thre frame layout with refractured menu
 #
-# CHANGE LOG:
-#   DS. 2002-03-25  Created
-#  2004-12-14 - New Optik - Marco Welter <mawe@linux-studio.de>
 #######################################################################
 
-$menufile = "menu.ini";
+use English qw(-no_match_vars);
+use List::Util qw(max);
+
 use SL::Menu;
-use CGI::Carp qw(fatalsToBrowser);
 
 1;
 
 # end of main
 
 sub display {
+  $form->header();
 
-  $form->header;
-
-  &clock_line;
-
-  &acc_menu;
-
-  print qq|
-<iframe id="win1" src="login.pl?action=company_logo" width="100%" height="93%" name="main_window" style="position: absolute; border:0px;">
-<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen.
-</p>
-</iframe>
-</body>
-</html>
-
-|;
+#   $form->{force_ul_width} = $ENV{HTTP_USER_AGENT} =~ m/MSIE\s+6\./;
+  $form->{force_ul_width} = $ENV{HTTP_USER_AGENT} !~ m/Opera/;
+#   $form->{force_ul_width} = 1;
+  $form->{date}           = clock_line();
+  $form->{menu_items}     = acc_menu();
 
+  print $form->parse_html_template("menu/menunew");
 }
 
 sub clock_line {
-
-  $fensterlink="menunew.pl?action=display";
-  $fenster = "["."<a href=\"$fensterlink\" target=\"_blank\">neues Fenster</a>]";
-
-  $login = "[Nutzer "
-    . $form->{login}
-    . " - <a href=\"login.pl?action=logout\" target=\"_top\">"
-    . $locale->text('Logout')
-    . "</a>] ";
   my ($Sekunden, $Minuten,   $Stunden,   $Monatstag, $Monat,
       $Jahr,     $Wochentag, $Jahrestag, $Sommerzeit)
     = localtime(time);
-  my $CTIME_String = localtime(time);
   $Monat     += 1;
   $Jahrestag += 1;
   $Monat     = $Monat < 10     ? $Monat     = "0" . $Monat     : $Monat;
@@ -88,344 +68,64 @@ sub clock_line {
                      "April",  "Mai",       "Juni",    "Juli",
                      "August", "September", "Oktober", "November",
                      "Dezember");
-  $datum =
+  return
       $Wochentage[$Wochentag] . ", der "
     . $Monatstag . "."
     . $Monat . "."
     . $Jahr . " - ";
-
-  #$zeit="<div id='Uhr'>".$Stunden.":".$Minuten.":".$Sekunden."</div>";
-  $zeit = "<div id='Uhr'>" . $Stunden . ":" . $Minuten . "</div>";
-  print qq|
-<script type="text/javascript">
-<!--
-function clockon() {
-  var now = new Date();
-  var h = now.getHours();
-  var m = now.getMinutes();
-  document.getElementById('clock_id').innerHTML = (h<10?'0'+h:h)+":"+(m<10?'0'+m:m);
-  var timer=setTimeout("clockon()", 10000);
-}
-window.onload=clockon
-//-->
-</script>
-<table border="0" width="100%" background="image/bg_titel.gif" cellpadding="0" cellspacing="0">
-  <tr>
-    <td style="color:white; font-family:verdana,arial,sans-serif; font-size: 12px;"> &nbsp; $fenster &nbsp; [<a href="JavaScript:top.main_window.print()">drucken</a>]</td>
-    <td align="right" style="vertical-align:middle; color:white; font-family:verdana,arial,sans-serif; font-size: 12px;" nowrap>
-      $login $datum <span id='clock_id' style='position:relative'></span>&nbsp;
-    </td>
-  </tr>
-</table>
-|;
 }
 
 sub acc_menu {
-  $mainlevel = $form->{level};
-  $mainlevel =~ s/\Q$mainlevel\E--//g;
-  my $menu = new Menu "$menufile";
+  $locale = Locale->new($language, "menu");
 
-  $| = 1;
+  my $mainlevel =  $form->{level};
+  $mainlevel    =~ s/\Q$mainlevel\E--//g;
+  my $menu      = Menu->new('menu.ini');
 
-  print qq|
-<style>
-<!--
+  $AUTOFLUSH    =  1;
 
-.itemBorder {
-  border: 1px solid black
-}
+  my $all_items = [];
+  create_menu($menu, $all_items);
 
-.itemText {
-  text-decoration: none;
-  color: #000000;
-  font: 12px Arial, Helvetica
-}
-
-.rootItemText {
-  text-decoration: none;
-  color: #ffffff;
-  font: 12px Arial, Helvetica
-}
-
-.menu {
-  color:#ffffff;
-  background:url(image/bg_css_menu.png) repeat bottom;
-  border:1px solid;
-  border-color:#ccc #888 #555 #bbb;
-}
-
--->
-</style>
-
-<script type="text/javascript">
-<!--
-var isDOM = (document.getElementById ? true : false); 
-var isIE4 = ((document.all && !isDOM) ? true : false);
-var isNS4 = (document.layers ? true : false);
-//var KO = (navigator.appName=="Konqueror" \|\| navigator.appName=="Opera") ;
-var KO = ((navigator.userAgent.indexOf('Opera',0) != -1) \|\| (navigator.userAgent.indexOf('Konqueror',0) != -1));
-function getRef(id) {
-	if (isDOM) return document.getElementById(id);
-	if (isIE4) return document.all[id];
-	if (isNS4) return document.layers[id];
-}
-function getSty(id) {
-	return (isNS4 ? getRef(id) : getRef(id).style);
-} 
-var popTimer = 0;
-var litNow = new Array();
-function popOver(menuNum, itemNum) {
-	if (KO) document.getElementById("win1").style.visibility = "hidden";
-	clearTimeout(popTimer);
-	hideAllBut(menuNum);
-	litNow = getTree(menuNum, itemNum);
-	changeCol(litNow, true);
-	targetNum = menu[menuNum][itemNum].target;
-	if (targetNum > 0) {
-		thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
-		thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
-		with (menu[targetNum][0].ref) {
-			left = parseInt(thisX + menu[targetNum][0].x);
-			top = parseInt(thisY + menu[targetNum][0].y);
-			visibility = 'visible';
-		}
-	}
-}
-function popOut(menuNum, itemNum) {
-	if ((menuNum == 0) && !menu[menuNum][itemNum].target)
-		hideAllBut(0)
-		if (KO) document.getElementById("win1").style.visibility = "visible";
-	else
-		popTimer = setTimeout('hideAllBut(0)', 500);
-}
-function getTree(menuNum, itemNum) {
-	itemArray = new Array(menu.length);
-	while(1) {
-		itemArray[menuNum] = itemNum;
-		if (menuNum == 0) return itemArray;
-		itemNum = menu[menuNum][0].parentItem;
-		menuNum = menu[menuNum][0].parentMenu;
-	}
-}
-function changeCol(changeArray, isOver) {
-	for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
-		if (changeArray[menuCount]) {
-			newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
-			with (menu[menuCount][changeArray[menuCount]].ref) {
-				if (isNS4) bgColor = newCol;
-				else backgroundColor = newCol;
-			}
-		}
-	}
-}
-function hideAllBut(menuNum) {
-	var keepMenus = getTree(menuNum, 1);
-	for (count = 0; count < menu.length; count++)
-		if (!keepMenus[count])
-			menu[count][0].ref.visibility = 'hidden';
-	changeCol(litNow, false);
-}
+  my $item = { 'subitems' => $all_items };
+  calculate_width($item);
 
-function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
-	this.isVert = isVert;
-	this.popInd = popInd
-	this.x = x;
-	this.y = y;
-	this.width = width;
-	this.overCol = overCol;
-	this.backCol = backCol;
-	this.borderClass = borderClass;
-	this.textClass = textClass;
-	this.parentMenu = null;
-	this.parentItem = null;
-	this.ref = null;
-}
-function Item(text, href, frame, length, spacing, target) {
-	this.text = text;
-	this.href = href;
-	this.frame = frame;
-	this.length = length;
-	this.spacing = spacing;
-	this.target = target;
-	this.ref = null;
+  return $all_items;
 }
-function go(link,frame) {
-	tmp=eval("top."+frame);
-	tmp.location=link;
-        //top.main_window.location=link;
-}
-function writeMenus() {
-	if (!isDOM && !isIE4 && !isNS4) return;
-	for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
-		var str = '', itemX = 0, itemY = 0;
-		for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
-			var itemID = 'menu' + currMenu + 'item' + currItem;
-			var w = (isVert ? width : length);
-			var h = (isVert ? length : width);
-			if (isDOM \|\| isIE4) {
-				str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
-				if (backCol) str += 'background: ' + backCol + '; ';
-				str += '" ';
-			}
-			if (isNS4) {
-				str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
-				if (backCol) str += 'bgcolor="' + backCol + '" ';
-			}
-			if (borderClass) str += 'class="' + borderClass + '" "';
-			str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';
-			str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '">';
-			str +='<tr><td class="' + textClass + '" style="cursor:pointer;" align="left" height="' + (h - 7) + '" onClick=\\'go("' + href + '","' + frame + '")\\'>' + text + '</a></td>';
-			if (target > 0) {
-				menu[target][0].parentMenu = currMenu;
-				menu[target][0].parentItem = currItem;
-				if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
-			}
-			str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
-			if (isVert) itemY += length + spacing;
-			else itemX += length + spacing;
-		}
-		if (isDOM) {
-			var newDiv = document.createElement('div');
-			document.getElementsByTagName('body').item(0).appendChild(newDiv);
-			newDiv.innerHTML = str;
-			ref = newDiv.style;
-			ref.position = 'absolute';
-			ref.visibility = 'hidden';
-		}
-		if (isIE4) {
-			document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
-			ref = getSty('menu' + currMenu + 'div');
-		}
-		if (isNS4) {
-			ref = new Layer(0);
-			ref.document.write(str);
-			ref.document.close();
-		}
-		for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
-			itemName = 'menu' + currMenu + 'item' + currItem;
-			if (isDOM \|\| isIE4) menu[currMenu][currItem].ref = getSty(itemName);
-			if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
-		}
-	}
-	with(menu[0][0]) {
-		ref.left = x;
-		ref.top = y;
-		ref.visibility = 'visible';
-   }
-}
-var menu = new Array();
-var defOver = '#cccccc';
-var defBack = '#dddddd';
-var defLength = 22;
-menu[0] = new Array();
-menu[0][0] = new Menu(false, '', 5, 18, 19, '#cccccc', '', '', 'rootItemText');
 
-|;
+sub calculate_width {
+  my $item           = shift;
 
-  &section_menu($menu);
+  $item->{max_width} = max map { length $_->{title} } @{ $item->{subitems} };
 
-  print qq|
-var popOldWidth = window.innerWidth;
-nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');
-if (isNS4) document.captureEvents(Event.CLICK);
-document.onclick = clickHandle;
-function clickHandle(evt) {
-	if (isNS4) document.routeEvent(evt);
-	hideAllBut(0);
-	if (KO) document.getElementById("win1").style.visibility = "visible";
-}
-function moveRoot() {
-	with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
+  foreach my $subitem (@{ $item->{subitems} }) {
+    calculate_width($subitem) if ($subitem->{subitems});
+  }
 }
-//  End -->
-</script>
 
-<BODY scrolling="no" topmargin="0" leftmargin="0"  marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus(); clockon();" onResize="if (isNS4) nsResizeHandler()">
+sub create_menu {
+  my ($menu, $all_items, $parent, $depth) = @_;
+  my $html;
 
+  die if ($depth * 1 > 5);
 
-<table class="menu" width="100%" border="0" cellpadding="0" cellspacing="0">
-<tr><td height="21"><font size="1"> </font></td></tr></table>
+  my @menuorder  = $menu->access_control(\%myconfig, $parent);
+  $parent       .= "--" if ($parent);
 
+  foreach my $name (@menuorder) {
+    substr($name, 0, length($parent), "");
+    next if (($name eq "") || ($name =~ /--/));
 
-|;
+    my $menu_item = $menu->{"${parent}${name}"};
+    my $item      = { 'title' => $locale->text($name) };
+    push @{ $all_items }, $item;
 
-  print qq|
-  
-|;
+    if ($menu_item->{submenu} || !defined($menu_item->{module}) || ($menu_item->{module} eq "menu.pl")) {
+      $item->{subitems} = [];
+      create_menu($menu, $item->{subitems}, "${parent}${name}", $depth * 1 + 1);
 
-}
-
-sub section_menu {
-  my ($menu, $level) = @_;
-
-  # build tiered menus
-  my @menuorder = $menu->access_control(\%myconfig, $level);
-  $main = 0;
-
-  #$pm=0;
-  $shlp=0;
-  while (@menuorder) {
-    $item  = shift @menuorder;
-    $label = $item;
-    $ml    = $item;
-    $label =~ s/\Q$level\E--//g;
-    $ml    =~ s/--.*//;
-    $label = $locale->text($label);
-    $label =~ s/ /&nbsp;/g;
-    $menu->{$item}{target} = "main_window" unless $menu->{$item}{target};
-
-    if ($menu->{$item}{submenu}) {
-      $menu->{$item}{$item} = !$form->{$item};
-
-      # Untermen
-      if ($mlz{"s$ml"} > 1) { 
-		$z++; 
-		$sm = 1; 
-      } else { 
-		$z = $sm; 
-		$mlz{"s$ml"}++; 
-      }
-      print
-        qq|menu[$mlz{$ml}][$z] = new Item('$label', '#', '', defLength, 0, |
-        . ++$pm
-        . qq|);\n|;
-      $sm = 1;
-      print qq|menu[$pm] = new Array();\n|;
-      print
-        qq|menu[$pm][0] = new Menu(true, '', 85, 0, 180, defOver, defBack, 'itemBorder', 'itemText');\n|;
-      map { shift @menuorder } grep /^$item/, @menuorder;
-      &section_menu($menu, $item);
-      map { shift @menuorder } grep /^$item/, @menuorder;
     } else {
-      if ($menu->{$item}{module}) {
-
-        #Untermenüpunkte
-        $target = $menu->{$item}{target};
-        $uri    = $menu->menuitemNew(\%myconfig, \%$form, $item, $level);
-
-        #print qq|<tr><td class="hover" height="13" >$spacer<img src="image/unterpunkt.png"  style="vertical-align:text-top">|.$menu->menuitem(\%myconfig, \%$form, $item, $level).qq|$label</a></td></tr>\n|;
-        print
-          qq|menu[$pm][$sm] = new Item('$label', '$uri', '$target', defLength, 0, 0);\n|;
-        $sm++;
-      } else {    # Hauptmenu
-        my $ml_ = $form->escape($ml);
-        $mm++;
-        $pm++;
-        %mlz   = ($ml, $pm, "s$ml", 1);
-        $shlp = $sm;
-        $sm    = 1;
-        $breit = 15 + length($label) * 6;
-        print
-          qq|menu[0][$mm] = new Item('  $label', '#', '', $breit, 10, $pm);	\n|;
-        print qq|menu[$pm] = new Array();\n|;
-        print
-          qq|menu[$pm][0] = new Menu(true, '>', 0, 20, 180, defOver, defBack, 'itemBorder', 'itemText');\n|;
-
-        #print qq|<tr><td class="bg" height="22" align="left" valign="middle" ><img src="image/$item.png" style="vertical-align:middle">&nbsp;<a href="menu.pl?action=acc_menu&level=$ml_" class="nohover">$label</a>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>\n|;
-        &section_menu($menu, $item);
-
-        #print qq|<br>\n|;
-      }
+      $menu->menuitem_new("${parent}${name}", $item);
     }
   }
 }
diff --git a/css/dhtmlsuite/menu-bar.css b/css/dhtmlsuite/menu-bar.css
new file mode 100644
index 000000000..1b874a26e
--- /dev/null
+++ b/css/dhtmlsuite/menu-bar.css
@@ -0,0 +1,40 @@
+/************************************************************************************************************
+
+	DHTML Suite for Applications
+	(C) www.dhtmlgoodies.com, August 2006
+
+	CSS for the DHTMLsuite_tableWidget class.
+	
+	Terms of use:
+	Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse
+	
+	Thank you!
+	
+	www.dhtmlgoodies.com
+	Alf Magne Kalleland
+
+************************************************************************************************************/
+
+.DHTMLSuite_menuBar_top{	/* The bar that is parent of the menu strip */
+	color:#FFF;
+	height:26px;
+	width:100%;
+	background-repeat:repeat-x;
+	font-family: Arial;
+	font-size:12px;
+	z-index:100000;
+	padding-left:10px;
+/*	background-image:url('../../image/dhtmlsuite/menu_strip_bg.jpg');*/
+	background-image:url('../../image/bg_css_menu.png');
+}
+
+.DHTMLSuite_menuBar_sub{
+	position:absolute;
+	background-color:#FFF;
+	border:1px solid #000;
+	background-image:url('../../image/dhtmlsuite/menu-bar-gradient.jpg');	/* Background image for sub menu items */
+	background-repeat:repeat-y;
+	background-position: left center;
+	display:inline;
+}
+
diff --git a/css/dhtmlsuite/menu-item.css b/css/dhtmlsuite/menu-item.css
new file mode 100644
index 000000000..d017fe32f
--- /dev/null
+++ b/css/dhtmlsuite/menu-item.css
@@ -0,0 +1,184 @@
+/* CSS FOR MENU ITEM OF TYPE "top" */
+
+.DHTMLSuite_menuItem_top_regular,.DHTMLSuite_menuItem_top_over,.DHTMLSuite_menuItem_top_click,.DHTMLSuite_menuItem_top_disabled,.DHTMLSuite_menuItem_top_active{
+	height:19px;
+}
+.DHTMLSuite_menuItem_top_regular div,.DHTMLSuite_menuItem_top_over div,.DHTMLSuite_menuItem_top_click div,.DHTMLSuite_menuItem_top_disabled div,.DHTMLSuite_menuItem_top_active div{
+	padding-top:2px;
+	padding-bottom:2px;
+}
+.DHTMLSuite_menuItem_top_regular{	/* Top level menu item - Regular state */
+	padding-left:4px;
+	padding-right:4px;
+	margin-right:2px;
+	padding-top:1px;
+	padding-bottom:1px;	
+	cursor:pointer;
+	line-height:16px;
+	margin-top:2px;
+}
+
+.DHTMLSuite_menuItem_top_over{ /* Top level menu item - Mouse over state */
+	padding-left:3px;
+	padding-right:3px;
+	margin-right:2px;
+	border:1px solid #000;
+	color:#000;
+	background-color:#FFEEC2;
+	cursor:pointer;
+	line-height:16px;
+	margin-top:2px;
+}
+
+.DHTMLSuite_menuItem_top_active{	/* Top level menu item - Active state - this is typical the state for menu item 1 when a sub group is expanded and the mouse is located over one of the sub menu items */
+	padding-left:3px;
+	padding-right:3px;
+	margin-right:2px;
+	border:1px solid #000;
+	border-bottom:1px solid #FFF;
+	cursor:pointer;
+	line-height:16px;
+	margin-top:2px;
+}
+
+.DHTMLSuite_menuItem_top_click{	/* Top level menu item - Mouse click state */
+	padding-left:3px;
+	padding-right:3px;
+	margin-right:2px;
+	border:1px solid #000;
+	background-color:#FFB25C;
+	cursor:pointer;
+	line-height:16px;
+	margin-top:2px;
+	z-index:20000;
+}
+
+.DHTMLSuite_menuItem_top_disabled{	/* Disabled menu item */
+	padding-left:4px;
+	padding-right:4px;
+	margin-right:2px;
+	padding-top:1px;
+	padding-bottom:1px;
+	cursor:default;
+	line-height:16px;
+	margin-top:2px;	
+}
+
+.DHTMLSuite_menuItem_top_disabled img,.DHTMLSuite_menuItem_top_disabled div{	/* Sub divs of disabled top level items. A menu item is a div with some subdivs(one for the icon, one for text etc.). this is the css for these sub divs */
+	filter:alpha(opacity=40);	/* Transparency */
+	opacity:0.4;	/* Transparency */
+	-moz-opacity:0.4;	/* Transparency */
+	-khtml-opacity:.4;	/* Transparency */
+}
+
+.DHTMLSuite_menuItem_top_disabled div,.DHTMLSuite_menuItem_top_active div, .DHTMLSuite_menuItem_top_click div, .DHTMLSuite_menuItem_top_regular div,.DHTMLSuite_menuItem_top_over div{	/* divs for the text,icon and arrow of a menu item */
+	float:left;
+	padding-left:1px;
+	padding-right:1px;
+}
+
+/* CSS FOR THE SMALL ARROW DIV - WHEN YOU CLICK ON THIS DIV, SUB ELEMENTS WILL SHOW */
+.DHTMLSuite_menuItem_top_arrowShowSub{	/* This is the arrow for top level elements */
+	width:12px;	/* Width of item */
+	background-repeat:no-repeat;	/* No background repeat for the arrow */
+	background-position:center center;	/* Position of the arrow. at the center of this div */
+	background-image: url('../../image/dhtmlsuite/menu_strip_down_arrow.png');	/* Relative path to the arrow */
+	margin:0px;	
+	margin-right:-1px;	/* -1 pixel is added to get the arrow a little bit more to the right. this is because of the right padding of top level items */
+	padding:0px;
+	height:16px;
+	margin-left:2px;
+	float:right;
+}
+
+.DHTMLSuite_menuItem_top_over .DHTMLSuite_menuItem_top_arrowShowSub,
+.DHTMLSuite_menuItem_top_click .DHTMLSuite_menuItem_top_arrowShowSub
+{	/* Sub menu arrows */
+	margin-left:1px;
+	border-left:1px solid #000;
+}
+
+/* CSS FOR SEPARATOR */
+
+.DHTMLSuite_menuItem_separator_top{	/* Separator of type "top" */
+	height:20px;
+	margin-top:3px;
+	margin-bottom:3px;
+	width:4px;
+	padding-left:3px;
+	padding-right:3px;
+	background-repeat:repeat-y;
+	background-image:url('../../image/dhtmlsuite/menu_strip_separator.gif');
+	
+}
+
+
+/* CSS FOR MENU ITEM OF TYPE "sub" */
+
+.DHTMLSuite_menuItem_sub_regular, .DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_click,.DHTMLSuite_menuItem_sub_disabled,.DHTMLSuite_menuItem_sub_active{	/* Commom css for regular, mouse over and mouse click items */
+	clear:both;			
+	line-height:18px;	/* Height of menu item */
+	height:18px;		/* Height of menu item */
+	padding-left:25px;	/* Space inside the menu item - the 25 pixels are used in order to avoid text overlapping menu item icon */
+	padding-right:4px;	/* Space inside the menu item */
+	padding-top:2px;	/* Space inside the menu item */
+	padding-bottom:2px;	 /* Space inside the menu item */
+	cursor:pointer;		/* Mouse cursor set to a "hand" */
+	margin:1px;	/* A little space around the item */
+	background-repeat:no-repeat;	/* No background repeat */
+}
+.DHTMLSuite_menuItem_sub_disabled{	/* Disabled sub menu item */
+	cursor:default;	/* Arrow as cursor instead of hand */
+}
+.DHTMLSuite_menuItem_sub_disabled div,.DHTMLSuite_menuItem_sub_disabled{	/* Disabled sub menu item - Here, we apply the rules on the divs inside the element, i.e. the div for the icon, text and arrow */
+	filter:alpha(opacity=40);	/* Transparency */
+	opacity:0.4;	/* Transparency */
+	-moz-opacity:0.4;	/* Transparency */
+	-khtml-opacity:.4;	/* Transparency */
+}
+.DHTMLSuite_menuItem_sub_regular,.DHTMLSuite_menuItem_sub_disabled{	/* Regular menu item */
+	margin-left:2px;	/* size of margin above + 1 pixel */
+	padding-top:3px;	/* Size of padding-top above + 1 pixel */
+	padding-bottom:3px;	/* Size of padding-bottom above + 1 pixel */
+}
+
+.DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_click,.DHTMLSuite_menuItem_sub_active{
+	border:1px solid #006;	/* Border around mouse over items, click items and active items */
+}
+
+.DHTMLSuite_menuItem_sub_over,.DHTMLSuite_menuItem_sub_active{	/* Mouse over effect */	
+	background-color:#FFEEC2;		/* Background color of mouse over items and active items(Active item = parent elements of the menu item the mouse is currently over */
+}
+
+.DHTMLSuite_menuItem_sub_click{	/* Mouse click effect */
+	background-color:#FFB25C;	/* Background color when the mouse button is pressed down on a menu item */
+}
+
+.DHTMLSuite_menuItem_sub_click div, .DHTMLSuite_menuItem_sub_regular div,.DHTMLSuite_menuItem_sub_over div,.DHTMLSuite_menuItem_sub_active div,.DHTMLSuite_menuItem_sub_disabled div{	/* divs for the text,icon and arrow of a menu item */
+	float:left;		/* To get the icons and text of sub elements side by side */
+	padding-left:1px;
+	padding-right:1px;
+	
+}
+.DHTMLSuite_menuItem_sub_arrowShowSub{	/* Arrow div for sub elements (Right pointing arrow ) */
+	position:absolute;	/* Never change this one */
+	background-image:url('../../image/dhtmlsuite/menu-bar-right-arrow.png');	/* Path relative to the css file */
+	width:18px;
+	height:18px;
+	text-align:right;	
+	right:0px;
+	background-repeat:no-repeat;	/* No background repeat */
+	background-position: center right;	/* Position of arrow */
+}
+
+
+.DHTMLSuite_menuItem_separator_sub{	/* Separator of type "sub" */
+	height:1px;	/* Height of separator */
+	margin-top:1px;	/* Space above the separator */
+	margin-bottom:1px;	/* Space below the separator */
+	margin-left:24px;	/* left margin because we don't want the separator to cover the gradient */
+	padding-right:3px;	/* space at the right of the separator */
+	background-color:#6A8CCB;	/* background color for the separator - blue */
+}
+
+
diff --git a/doc/modules/LICENSE.dhtmlsuite-for-applications b/doc/modules/LICENSE.dhtmlsuite-for-applications
new file mode 100644
index 000000000..e1504da17
--- /dev/null
+++ b/doc/modules/LICENSE.dhtmlsuite-for-applications
@@ -0,0 +1,505 @@
+		  GNU LESSER GENERAL PUBLIC LICENSE
+		       Version 2.1, February 1999
+
+ Copyright (C) 1991, 1999 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the Lesser GPL.  It also counts
+ as the successor of the GNU Library Public License, version 2, hence
+ the version number 2.1.]
+
+			    Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Lesser General Public License, applies to some
+specially designated software packages--typically libraries--of the
+Free Software Foundation and other authors who decide to use it.  You
+can use it too, but we suggest you first think carefully about whether
+this license or the ordinary General Public License is the better
+strategy to use in any particular case, based on the explanations below.
+
+  When we speak of free software, we are referring to freedom of use,
+not price.  Our General Public Licenses are designed to make sure that
+you have the freedom to distribute copies of free software (and charge
+for this service if you wish); that you receive source code or can get
+it if you want it; that you can change the software and use pieces of
+it in new free programs; and that you are informed that you can do
+these things.
+
+  To protect your rights, we need to make restrictions that forbid
+distributors to deny you these rights or to ask you to surrender these
+rights.  These restrictions translate to certain responsibilities for
+you if you distribute copies of the library or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link other code with the library, you must provide
+complete object files to the recipients, so that they can relink them
+with the library after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  We protect your rights with a two-step method: (1) we copyright the
+library, and (2) we offer you this license, which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  To protect each distributor, we want to make it very clear that
+there is no warranty for the free library.  Also, if the library is
+modified by someone else and passed on, the recipients should know
+that what they have is not the original version, so that the original
+author's reputation will not be affected by problems that might be
+introduced by others.
+
+  Finally, software patents pose a constant threat to the existence of
+any free program.  We wish to make sure that a company cannot
+effectively restrict the users of a free program by obtaining a
+restrictive license from a patent holder.  Therefore, we insist that
+any patent license obtained for a version of the library must be
+consistent with the full freedom of use specified in this license.
+
+  Most GNU software, including some libraries, is covered by the
+ordinary GNU General Public License.  This license, the GNU Lesser
+General Public License, applies to certain designated libraries, and
+is quite different from the ordinary General Public License.  We use
+this license for certain libraries in order to permit linking those
+libraries into non-free programs.
+
+  When a program is linked with a library, whether statically or using
+a shared library, the combination of the two is legally speaking a
+combined work, a derivative of the original library.  The ordinary
+General Public License therefore permits such linking only if the
+entire combination fits its criteria of freedom.  The Lesser General
+Public License permits more lax criteria for linking other code with
+the library.
+
+  We call this license the "Lesser" General Public License because it
+does Less to protect the user's freedom than the ordinary General
+Public License.  It also provides other free software developers Less
+of an advantage over competing non-free programs.  These disadvantages
+are the reason we use the ordinary General Public License for many
+libraries.  However, the Lesser license provides advantages in certain
+special circumstances.
+
+  For example, on rare occasions, there may be a special need to
+encourage the widest possible use of a certain library, so that it becomes
+a de-facto standard.  To achieve this, non-free programs must be
+allowed to use the library.  A more frequent case is that a free
+library does the same job as widely used non-free libraries.  In this
+case, there is little to gain by limiting the free library to free
+software only, so we use the Lesser General Public License.
+
+  In other cases, permission to use a particular library in non-free
+programs enables a greater number of people to use a large body of
+free software.  For example, permission to use the GNU C Library in
+non-free programs enables many more people to use the whole GNU
+operating system, as well as its variant, the GNU/Linux operating
+system.
+
+  Although the Lesser General Public License is Less protective of the
+users' freedom, it does ensure that the user of a program that is
+linked with the Library has the freedom and the wherewithal to run
+that program using a modified version of the Library.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, whereas the latter must
+be combined with the library in order to run.
+
+		  GNU LESSER GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library or other
+program which contains a notice placed by the copyright holder or
+other authorized party saying it may be distributed under the terms of
+this Lesser General Public License (also called "this License").
+Each licensee is addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+  
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also combine or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Use a suitable shared library mechanism for linking with the
+    Library.  A suitable mechanism is one that (1) uses at run time a
+    copy of the library already present on the user's computer system,
+    rather than copying library functions into the executable, and (2)
+    will operate properly with a modified version of the library, if
+    the user installs one, as long as the modified version is
+    interface-compatible with the version that the work was made with.
+
+    c) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    d) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    e) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the materials to be distributed need not include anything that is
+normally distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties with
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Lesser General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+			    NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+		     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!
+
+
+
diff --git a/image/dhtmlsuite/menu-bar-gradient.jpg b/image/dhtmlsuite/menu-bar-gradient.jpg
new file mode 100644
index 000000000..39a245f5f
Binary files /dev/null and b/image/dhtmlsuite/menu-bar-gradient.jpg differ
diff --git a/image/dhtmlsuite/menu-bar-right-arrow.gif b/image/dhtmlsuite/menu-bar-right-arrow.gif
new file mode 100644
index 000000000..3c8f55fe2
Binary files /dev/null and b/image/dhtmlsuite/menu-bar-right-arrow.gif differ
diff --git a/image/dhtmlsuite/menu-bar-right-arrow.png b/image/dhtmlsuite/menu-bar-right-arrow.png
new file mode 100644
index 000000000..88af7636f
Binary files /dev/null and b/image/dhtmlsuite/menu-bar-right-arrow.png differ
diff --git a/image/dhtmlsuite/menu_strip_bg.jpg b/image/dhtmlsuite/menu_strip_bg.jpg
new file mode 100644
index 000000000..843d63a60
Binary files /dev/null and b/image/dhtmlsuite/menu_strip_bg.jpg differ
diff --git a/image/dhtmlsuite/menu_strip_down_arrow.gif b/image/dhtmlsuite/menu_strip_down_arrow.gif
new file mode 100644
index 000000000..b06c0eb9a
Binary files /dev/null and b/image/dhtmlsuite/menu_strip_down_arrow.gif differ
diff --git a/image/dhtmlsuite/menu_strip_down_arrow.png b/image/dhtmlsuite/menu_strip_down_arrow.png
new file mode 100644
index 000000000..19c2b3ab9
Binary files /dev/null and b/image/dhtmlsuite/menu_strip_down_arrow.png differ
diff --git a/image/dhtmlsuite/menu_strip_separator.gif b/image/dhtmlsuite/menu_strip_separator.gif
new file mode 100644
index 000000000..2456a47be
Binary files /dev/null and b/image/dhtmlsuite/menu_strip_separator.gif differ
diff --git a/js/dhtmlsuite/menu-for-applications.js b/js/dhtmlsuite/menu-for-applications.js
new file mode 100644
index 000000000..664ee9e5b
--- /dev/null
+++ b/js/dhtmlsuite/menu-for-applications.js
@@ -0,0 +1,2351 @@
+/************************************************************************************************************
+	@fileoverview
+	DHTML Suite for Applications.
+	Copyright (C) 2006  Alf Magne Kalleland(post@dhtmlgoodies.com)<br>
+	<br>
+	This library is free software; you can redistribute it and/or<br>
+	modify it under the terms of the GNU Lesser General Public<br>
+	License as published by the Free Software Foundation; either<br>
+	version 2.1 of the License, or (at your option) any later version.<br>
+	<br>
+	This library is distributed in the hope that it will be useful,<br>
+	but WITHOUT ANY WARRANTY; without even the implied warranty of<br>
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU<br>
+	Lesser General Public License for more details.<br>
+	<br>
+	You should have received a copy of the GNU Lesser General Public<br>
+	License along with this library; if not, write to the Free Software<br>
+	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA<br>
+	<br>
+	<br>
+	www.dhtmlgoodies.com<br>
+	Alf Magne Kalleland<br>
+
+************************************************************************************************************/
+
+
+/**
+ * 
+ * @package DHTMLSuite for applications
+ * @copyright Copyright &copy; 2006, www.dhtmlgoodies.com
+ * @author Alf Magne Kalleland <post@dhtmlgoodies.com>
+ */
+
+
+/************************************************************************************************************
+*
+* Global variables
+*
+************************************************************************************************************/
+
+
+// {{{ DHTMLSuite.createStandardObjects()
+/**
+ * Create objects used by all scripts
+ *
+ * @public
+ */
+
+
+var DHTMLSuite = new Object();
+
+var standardObjectsCreated = false;	// The classes below will check this variable, if it is false, default help objects will be created
+DHTMLSuite.eventElements = new Array();	// Array of elements that has been assigned to an event handler.
+
+DHTMLSuite.createStandardObjects = function()
+{
+	DHTMLSuite.clientInfoObj = new DHTMLSuite.clientInfo();	// Create browser info object
+	DHTMLSuite.clientInfoObj.init();	
+	if(!DHTMLSuite.configObj){	// If this object isn't allready created, create it.
+		DHTMLSuite.configObj = new DHTMLSuite.config();	// Create configuration object.
+		DHTMLSuite.configObj.init();
+	}
+	DHTMLSuite.commonObj = new DHTMLSuite.common();	// Create configuration object.
+	DHTMLSuite.variableStorage = new DHTMLSuite.globalVariableStorage();;	// Create configuration object.
+	DHTMLSuite.commonObj.init();
+	window.onunload = function() { DHTMLSuite.commonObj.__clearGarbage(); }
+	
+	standardObjectsCreated = true;
+
+	
+}
+
+    
+
+
+/************************************************************************************************************
+*	Configuration class used by most of the scripts
+*
+*	Created:			August, 19th, 2006
+* 	Update log:
+*
+************************************************************************************************************/
+
+
+/**
+* @constructor
+* @class Store global variables/configurations used by the classes below. Example: If you want to  
+*		 change the path to the images used by the scripts, change it here. An object of this   
+*		 class will always be available to the other classes. The name of this object is 
+*		"DHTMLSuite.configObj".	<br><br>
+*			
+*		If you want to create an object of this class manually, remember to name it "DHTMLSuite.configObj"
+*		This object should then be created before any other objects. This is nescessary if you want
+*		the other objects to use the values you have put into the object. <br>
+* @version				1.0
+* @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+**/
+DHTMLSuite.config = function()
+{
+	var imagePath;	// Path to images used by the classes. 
+	var cssPath;	// Path to CSS files used by the DHTML suite.		
+}
+
+
+DHTMLSuite.config.prototype = {
+	// {{{ init()
+	/**
+	 *
+	 * @public
+	 */
+	init : function()
+	{
+		this.imagePath = '../images_dhtmlsuite/';	// Path to images		
+		this.cssPath = '../css_dhtmlsuite/';	// Path to images		
+	}	
+	// }}}
+	,
+	// {{{ setCssPath()
+    /**
+     * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.
+     *
+     * @param string newCssPath = New path to css files
+     * @public
+     */
+    	
+	setCssPath : function(newCssPath)
+	{
+		this.cssPath = newCssPath;
+	}
+	// }}}
+	,
+	// {{{ setImagePath()
+    /**
+     * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
+     *
+     * @param string newImagePath = New path to image files
+     * @public
+     */
+	setImagePath : function(newImagePath)
+	{
+		this.imagePath = newImagePath;
+	}
+	// }}}
+}
+
+
+
+DHTMLSuite.globalVariableStorage = function()
+{
+	var menuBar_highlightedItems;	// Array of highlighted menu bar items
+	this.menuBar_highlightedItems = new Array();
+	
+	var arrayOfDhtmlSuiteObjects;	// Array of objects of class menuItem.
+	this.arrayOfDhtmlSuiteObjects = new Array();
+}
+
+DHTMLSuite.globalVariableStorage.prototype = {
+	
+}
+
+
+/************************************************************************************************************
+*	A class with general methods used by most of the scripts
+*
+*	Created:			August, 19th, 2006
+*	Purpose of class:	A class containing common method used by one or more of the gui classes below, 
+* 						example: loadCSS. 
+*						An object("DHTMLSuite.commonObj") of this  class will always be available to the other classes. 
+* 	Update log:
+*
+************************************************************************************************************/
+
+
+/**
+* @constructor
+* @class A class containing common method used by one or more of the gui classes below, example: loadCSS. An object("DHTMLSuite.commonObj") of this  class will always be available to the other classes. 
+* @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+**/
+
+DHTMLSuite.common = function()
+{
+	var loadedCSSFiles;	// Array of loaded CSS files. Prevent same CSS file from being loaded twice.
+	var cssCacheStatus;	// Css cache status
+	var eventElements;
+	
+	this.cssCacheStatus = true;	// Caching of css files = on(Default)
+	this.eventElements = new Array();	
+}
+
+DHTMLSuite.common.prototype = {
+	
+	// {{{ init()
+    /**
+     * This method initializes the DHTMLSuite_common object.
+     *
+     * @public
+     */
+    	
+	init : function()
+	{
+		this.loadedCSSFiles = new Array();
+	}	
+	// }}}
+	,
+	// {{{ loadCSS()
+    /**
+     * This method loads a CSS file(Cascading Style Sheet) dynamically - i.e. an alternative to <link> tag in the document.
+     *
+     * @param string cssFileName = New path to image files
+     * @public
+     */
+	
+	loadCSS : function(cssFileName)
+	{
+		
+		if(!this.loadedCSSFiles[cssFileName]){
+			this.loadedCSSFiles[cssFileName] = true;
+			var linkTag = document.createElement('LINK');
+			if(!this.cssCacheStatus){
+				if(cssFileName.indexOf('?')>=0)cssFileName = cssFileName + '&'; else cssFileName = cssFileName + '?';
+				cssFileName = cssFileName + 'rand='+ Math.random();	// To prevent caching
+			}
+			linkTag.href = DHTMLSuite.configObj.cssPath + cssFileName;
+			linkTag.rel = 'stylesheet';
+			linkTag.media = 'screen';
+			linkTag.type = 'text/css';
+			document.getElementsByTagName('HEAD')[0].appendChild(linkTag);	
+			
+		}
+	}	
+	// }}}
+	,
+	// {{{ getTopPos()
+    /**
+     * This method will return the top coordinate(pixel) of an object
+     *
+     * @param Object inputObj = Reference to HTML element
+     * @public
+     */	
+	getTopPos : function(inputObj)
+	{		
+	  var returnValue = inputObj.offsetTop;
+	  while((inputObj = inputObj.offsetParent) != null){
+	  	if(inputObj.tagName!='HTML'){
+	  		returnValue += (inputObj.offsetTop - inputObj.scrollTop);
+	  		if(document.all)returnValue+=inputObj.clientTop;
+	  	}
+	  } 
+	  return returnValue;
+	}
+	// }}}	
+	,	
+	// {{{ setCssCacheStatus()
+    /**
+     * Specify if css files should be cached or not. 
+     *
+     *	@param Boolean cssCacheStatus = true = cache on, false = cache off
+     *
+     * @public
+     */	
+	setCssCacheStatus : function(cssCacheStatus)
+	{		
+	  this.cssCacheStatus = cssCacheStatus;
+	}
+	// }}}	
+	,
+	// {{{ getLeftPos()
+    /**
+     * This method will return the left coordinate(pixel) of an object
+     *
+     * @param Object inputObj = Reference to HTML element
+     * @public
+     */	
+	getLeftPos : function(inputObj)
+	{	  
+	  var returnValue = inputObj.offsetLeft;
+	  while((inputObj = inputObj.offsetParent) != null){
+	  	if(inputObj.tagName!='HTML'){
+	  		returnValue += inputObj.offsetLeft;
+	  		if(document.all)returnValue+=inputObj.clientLeft;
+	  	}
+	  }
+	  return returnValue;
+	}
+	// }}}
+	,
+	// {{{ cancelEvent()
+    /**
+     *
+     *  This function only returns false. It is used to cancel selections and drag
+     *
+     * 
+     * @public
+     */	
+    	
+	cancelEvent : function()
+	{
+		return false;
+	}
+	// }}}	
+	,
+	// {{{ addEvent()
+    /**
+     *
+     *  This function adds an event listener to an element on the page.
+     *
+     *	@param Object whichObject = Reference to HTML element(Which object to assigne the event)
+     *	@param String eventType = Which type of event, example "mousemove" or "mouseup"
+     *	@param functionName = Name of function to execute. 
+     * 
+     * @public
+     */	
+	addEvent : function(whichObject,eventType,functionName)
+	{ 
+	  if(whichObject.attachEvent){ 
+	    whichObject['e'+eventType+functionName] = functionName; 
+	    whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );} 
+	    whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] ); 
+	  } else 
+	    whichObject.addEventListener(eventType,functionName,false); 	    
+	  this.__addEventElement(whichObject);
+	  delete(whichObject);
+	  // whichObject = null;
+	} 
+	// }}}	
+	,	
+	// {{{ removeEvent()
+    /**
+     *
+     *  This function removes an event listener from an element on the page.
+     *
+     *	@param Object whichObject = Reference to HTML element(Which object to assigne the event)
+     *	@param String eventType = Which type of event, example "mousemove" or "mouseup"
+     *	@param functionName = Name of function to execute. 
+     * 
+     * @public
+     */		
+	removeEvent : function(whichObject,eventType,functionName)
+	{ 
+	  if(whichObject.detachEvent){ 
+	    whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]); 
+	    whichObject[eventType+functionName] = null; 
+	  } else 
+	    whichObject.removeEventListener(eventType,functionName,false); 
+	} 
+	,
+	// {{{ __clearGarbage()
+    /**
+     *
+     *  This function is used for Internet Explorer in order to clear memory when the page unloads.
+     *
+     * 
+     * @private
+     */	
+    __clearGarbage : function()
+    {
+   		/* Example of event which causes memory leakage in IE 
+   		
+   		DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); })
+   		
+   		We got a circular reference.
+   		
+   		*/
+   		
+    	if(!DHTMLSuite.clientInfoObj.isMSIE)return;
+   	
+    	for(var no in DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects){
+    		DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[no] = false;    			
+    	}
+    	
+    	for(var no=0;no<DHTMLSuite.eventElements.length;no++){
+    		DHTMLSuite.eventElements[no].onclick = null;
+    		DHTMLSuite.eventElements[no].onmousedown = null;
+    		DHTMLSuite.eventElements[no].onmousemove = null;
+    		DHTMLSuite.eventElements[no].onmouseout = null;
+    		DHTMLSuite.eventElements[no].onmouseover = null;
+    		DHTMLSuite.eventElements[no].onmouseup = null;
+    		DHTMLSuite.eventElements[no].onfocus = null;
+    		DHTMLSuite.eventElements[no].onblur = null;
+    		DHTMLSuite.eventElements[no].onkeydown = null;
+    		DHTMLSuite.eventElements[no].onkeypress = null;
+    		DHTMLSuite.eventElements[no].onkeyup = null;
+    		DHTMLSuite.eventElements[no].onselectstart = null;
+    		DHTMLSuite.eventElements[no].ondragstart = null;
+    		DHTMLSuite.eventElements[no].oncontextmenu = null;
+    		DHTMLSuite.eventElements[no].onscroll = null;
+    		
+    	}
+    	window.onunload = null;
+    	DHTMLSuite = null;
+
+    }		
+    
+    ,
+	// {{{ __addEventElement()
+    /**
+     *
+     *  Add element to garbage collection array. The script will loop through this array and remove event handlers onload in ie.
+     *
+     * 
+     * @private
+     */	    
+    __addEventElement : function(el)
+    {
+    	DHTMLSuite.eventElements[DHTMLSuite.eventElements.length] = el;    
+    }
+    
+    ,
+	// {{{ getSrcElement()
+    /**
+     *
+     *  Returns a reference to the element which triggered an event.
+     *	@param Event e = Event object
+     *
+     * 
+     * @private
+     */	       
+    getSrcElement : function(e)
+    {
+    	var el;
+		// Dropped on which element
+		if (e.target) el = e.target;
+			else if (e.srcElement) el = e.srcElement;
+			if (el.nodeType == 3) // defeat Safari bug
+				el = el.parentNode;
+		return el;	
+    }		    
+	
+}
+
+
+/************************************************************************************************************
+*	Client info class
+*
+*	Created:			August, 18th, 2006
+* 	Update log:
+*
+************************************************************************************************************/
+
+/**
+* @constructor
+* @class Purpose of class: Provide browser information to the classes below. Instead of checking for
+*		 browser versions and browser types in the classes below, they should check this
+*		 easily by referncing properties in the class below. An object("DHTMLSuite.clientInfoObj") of this 
+*		 class will always be accessible to the other classes. * @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+**/
+
+
+DHTMLSuite.clientInfo = function()
+{
+	var browser;			// Complete user agent information
+	
+	var isOpera;			// Is the browser "Opera"
+	var isMSIE;				// Is the browser "Internet Explorer"	
+	var isFirefox;			// Is the browser "Firefox"
+	var navigatorVersion;	// Browser version
+}
+	
+DHTMLSuite.clientInfo.prototype = {
+	
+	/**
+	* 	Constructor
+	*	Params: 		none:
+	*  	return value: 	none;
+	**/
+	// {{{ init()
+    /**
+     *
+	 *
+     *  This method initializes the script
+     *
+     * 
+     * @public
+     */	
+    	
+	init : function()
+	{
+		this.browser = navigator.userAgent;	
+		this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;
+		this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
+		this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
+		this.isSafari = (this.browser.toLowerCase().indexOf('safari')>=0)?true:false;
+		this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
+	}	
+	// }}}		
+}
+
+/************************************************************************************************************
+*	DHTML menu model item class
+*
+*	Created:						October, 30th, 2006
+*	@class Purpose of class:		Save data about a menu item.
+*			
+*
+*
+* 	Update log:
+*
+************************************************************************************************************/
+
+DHTMLSuite.menuModelItem = function()
+{
+	var id;					// id of this menu item.
+	var itemText;			// Text for this menu item
+	var itemIcon;			// Icon for this menu item.
+	var url;				// url when click on this menu item
+	var parentId;			// id of parent element
+	var separator;			// is this menu item a separator
+	var jsFunction;			// Js function to call onclick
+	var depth;				// Depth of this menu item.
+	var hasSubs;			// Does this menu item have sub items.
+	var type;				// Menu item type - possible values: "top" or "sub". 
+	var helpText;			// Help text for this item - appear when you move your mouse over the item.
+	var state;
+	var submenuWidth;		// Width of sub menu items.
+	var visible;			// Visibility of menu item.
+	var frameTarget;
+	
+	this.state = 'regular';
+}
+
+DHTMLSuite.menuModelItem.prototype = {
+
+	setMenuVars : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget)	
+	{
+		this.id = id;
+		this.itemText = itemText;
+		this.itemIcon = itemIcon;
+		this.url = url;
+		this.parentId = parentId;
+		this.jsFunction = jsFunction;
+		this.separator = false;
+		this.depth = false;
+		this.hasSubs = false;
+		this.helpText = helpText;
+		this.submenuWidth = submenuWidth;
+		this.visible = true;
+		this.frameTarget = frameTarget;
+		if(!type){
+			if(this.parentId)this.type = 'top'; else this.type='sub';
+		}else this.type = type;
+		
+
+	}
+	// }}}	
+	,
+	// {{{ setState()
+    /**
+     *	Update the state attribute of a menu item.
+     *
+     *  @param String newState New state of this item
+     * @public	
+     */		
+	setAsSeparator : function(id,parentId)
+	{
+		this.id = id;
+		this.parentId = parentId;
+		this.separator = true;	
+		this.visible = true;
+		if(this.parentId)this.type = 'top'; else this.type='sub';		
+	}
+	// }}}	
+	,
+	// {{{ setState()
+    /**
+     *	Update the visible attribute of a menu item.
+     *
+     *  @param Boolean visible true = visible, false = hidden.
+     * @public	
+     */		
+	setVisibility : function(visible)
+	{
+		this.visible = visible;
+	}
+	// }}}	
+	,
+	// {{{ getState()
+    /**
+     *	Return the state attribute of a menu item.
+     *
+     * @public	
+     */		
+	getState : function()
+	{
+		return this.state;
+	}
+	// }}}	
+	,
+	// {{{ setState()
+    /**
+     *	Update the state attribute of a menu item.
+     *
+     *  @param String newState New state of this item
+     * @public	
+     */		
+	setState : function(newState)
+	{
+		this.state = newState;
+	}
+	// }}}	
+	,
+	// {{{ setSubMenuWidth()
+    /**
+     *	Specify width of direct subs of this item.
+     *
+     *  @param int newWidth Width of sub menu group(direct sub of this item)
+     * @public	
+     */		
+	setSubMenuWidth : function(newWidth)
+	{
+		this.submenuWidth = newWidth;
+	}
+	// }}}	
+	,
+	// {{{ setIcon()
+    /**
+     *	Specify new menu icon
+     *
+     *  @param String iconPath Path to new menu icon
+     * @public	
+     */		
+	setIcon : function(iconPath)
+	{
+		this.itemIcon = iconPath;
+	}
+	// }}}	
+	,
+	// {{{ setText()
+    /**
+     *	Specify new text for the menu item.
+     *
+     *  @param String newText New text for the menu item.
+     * @public	
+     */		
+	setText : function(newText)
+	{
+		this.itemText = newText;
+	}
+}
+
+/************************************************************************************************************
+*	DHTML menu model class
+*
+*	Created:						October, 30th, 2006
+*	@class Purpose of class:		Saves menu item data
+*			
+*
+*	Demos of this class:			demo-menu-strip.html
+*
+* 	Update log:
+*
+************************************************************************************************************/
+
+
+/**
+* @constructor
+* @class Purpose of class:	Organize menu items for different menu widgets. demos of menus: (<a href="../../demos/demo-menu-strip.html" target="_blank">Demo</a>)
+* @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+*/
+
+
+DHTMLSuite.menuModel = function()
+{
+	var menuItems;					// Array of menuModelItem objects
+	var menuItemsOrder;			// This array is needed in order to preserve the correct order of the array above. the array above is associative
+									// And some browsers will loop through that array in different orders than Firefox and IE.
+	var submenuType;				// Direction of menu items(one item for each depth)
+	var mainMenuGroupWidth;			// Width of menu group - useful if the first group of items are listed below each other
+	this.menuItems = new Array();
+	this.menuItemsOrder = new Array();
+	this.submenuType = new Array();
+	this.submenuType[1] = 'top';
+	for(var no=2;no<20;no++){
+		this.submenuType[no] = 'sub';
+	}		
+	if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	
+}
+
+DHTMLSuite.menuModel.prototype = {
+	// {{{ addItem()
+    /**
+     *	Add separator (special type of menu item)
+     *
+ 	 *
+     *
+     *  @param int id of menu item
+     *  @param string itemText = text of menu item
+     *  @param string itemIcon = file name of menu icon(in front of menu text. Path will be imagePath for the DHTMLSuite + file name)
+     *  @param string url = Url of menu item
+     *  @param int parent id of menu item     
+     *  @param String jsFunction Name of javascript function to execute. It will replace the url param. The function with this name will be called and the element triggering the action will be 
+     *					sent as argument. Name of the element which triggered the menu action may also be sent as a second argument. That depends on the widget. The context menu is an example where
+     *					the element triggering the context menu is sent as second argument to this function.    
+     *
+     * @public	
+     */			
+	addItem : function(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth)
+	{
+		if(!id)id = this.__getUniqueId();	// id not present - create it dynamically.
+		this.menuItems[id] = new DHTMLSuite.menuModelItem();
+		this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth);
+		this.menuItemsOrder[this.menuItemsOrder.length] = id;
+		return this.menuItems[id];
+	}
+	,
+	// {{{ addItemsFromMarkup()
+    /**
+     *	This method creates all the menuModelItem objects by reading it from existing markup on your page.
+     *	Example of HTML markup:
+     *<br>
+		&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id="menuModel">
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="50000" itemIcon="../images/disk.gif">&lt;a href="#" title="Open the file menu">File&lt;/a>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul width="150">
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif">&lt;a href="#" title="Save your work">Save&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500002">&lt;a href="#">Save As&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500004" itemType="separator">&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500003">&lt;a href="#">Open&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="50001">&lt;a href="#">View&lt;/a>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul width="130">
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500011">&lt;a href="#">Source&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500012">&lt;a href="#">Debug info&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="500013">&lt;a href="#">Layout&lt;/a>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul width="150">
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="5000131">&lt;a href="#">CSS&lt;/a>&nbsp;&nbsp;
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="5000132">&lt;a href="#">HTML&lt;/a>&nbsp;&nbsp;
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="5000133">&lt;a href="#">Javascript&lt;/a>&nbsp;&nbsp;
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="50003" itemType="separator">&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id="50002">&lt;a href="#">Tools&lt;/a>&lt;/li>
+		<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul>&nbsp;&nbsp;     
+     *
+     *  @param String ulId = ID of <UL> tag on your page.
+     *
+     * @public	
+     */		
+	addItemsFromMarkup : function(ulId)
+	{
+		if(!document.getElementById(ulId)){
+			alert('<UL> tag with id ' + ulId + ' does not exist');
+			return;
+		}
+		var ulObj = document.getElementById(ulId);
+		var liTags = ulObj.getElementsByTagName('LI');		
+		for(var no=0;no<liTags.length;no++){	// Walking through all <li> tags in the <ul> tree
+			
+			var id = liTags[no].id.replace(/[^0-9]/gi,'');	// Get id of item.
+			if(!id)id = this.__getUniqueId();
+			this.menuItems[id] = new DHTMLSuite.menuModelItem();	// Creating new menuModelItem object
+			this.menuItemsOrder[this.menuItemsOrder.length] = id;
+			// Get the attributes for this new menu item.	
+			
+			var parentId = 0;	// Default parent id
+			if(liTags[no].parentNode!=ulObj)parentId = liTags[no].parentNode.parentNode.id;	// parent node exists, set parentId equal to id of parent <li>.
+						
+			/* Checking type */
+			var type = liTags[no].getAttribute('itemType');			
+			if(!type)type = liTags[no].itemType;
+			if(type=='separator'){	// Menu item of type "separator"
+				this.menuItems[id].setAsSeparator(id,parentId);
+				continue;	
+			}
+			if(parentId)type='sub'; else type = 'top';						
+	
+			var aTag = liTags[no].getElementsByTagName('A')[0];	// Get a reference to sub <a> tag
+			if(!aTag){
+				continue;
+			}			
+			if(aTag)var itemText = aTag.innerHTML;	// Item text is set to the innerHTML of the <a> tag.
+			var itemIcon = liTags[no].getAttribute('itemIcon');	// Item icon is set from the itemIcon attribute of the <li> tag.
+			var url = aTag.href;	// url is set to the href attribute of the <a> tag
+			if(url=='#' || url.substr(url.length-1,1)=='#')url='';	// # = empty url.
+      var frameTarget = aTag.target;
+			
+			var jsFunction = liTags[no].getAttribute('jsFunction');	// jsFunction is set from the jsFunction attribute of the <li> tag.
+
+			var submenuWidth = false;	// Not set from the <li> tag. 
+			var helpText = aTag.getAttribute('title');	
+			if(!helpText)helpText = aTag.title;
+			
+			this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth,frameTarget);			
+		}		
+		var subUls = ulObj.getElementsByTagName('UL');
+		for(var no=0;no<subUls.length;no++){
+			var width = subUls[no].getAttribute('width');
+			if(!width)width = subUls[no].width;	
+			if(width){
+				var id = subUls[no].parentNode.id.replace(/[^0-9]/gi,'');
+				this.setSubMenuWidth(id,width);
+			}
+		}		
+		ulObj.style.display='none';
+		
+	}	
+	// }}}	
+	,
+	// {{{ setSubMenuWidth()
+    /**
+     *	This method specifies the width of a sub menu group. This is a useful method in order to get a correct width in IE6 and prior.
+     *
+     *  @param int id = ID of parent menu item
+     *  @param String newWidth = Width of sub menu items.
+     * @public	
+     */		
+	setSubMenuWidth : function(id,newWidth)
+	{
+		this.menuItems[id].setSubMenuWidth(newWidth);
+	}	
+	,
+	// {{{ setMainMenuGroupWidth()
+    /**
+     *	Add separator (special type of menu item)
+     *
+     *  @param String newWidth = Size of a menu group
+     *  @param int parent id of menu item
+     * @public	
+     */			
+	setMainMenuGroupWidth : function(newWidth)
+	{
+		this.mainMenuGroupWidth = newWidth;
+	}
+	,
+	// {{{ addSeparator()
+    /**
+     *	Add separator (special type of menu item)
+     *
+     *  @param int parent id of menu item
+     * @public	
+     */		
+	addSeparator : function(parentId)
+	{
+		id = this.__getUniqueId();	// Get unique id
+		if(!parentId)parentId = 0;
+		this.menuItems[id] = new DHTMLSuite.menuModelItem();
+		this.menuItems[id].setAsSeparator(id,parentId);
+		this.menuItemsOrder[this.menuItemsOrder.length] = id;
+		return this.menuItems[id];
+	}	
+	,
+	// {{{ init()
+    /**
+     *	Initilizes the menu model. This method should be called when all items has been added to the model.
+     *
+     *
+     * @public	
+     */		
+	init : function()
+	{
+		this.__getDepths();	
+		this.__setHasSubs();	
+		
+	}
+	// }}}	
+	,
+	// {{{ setMenuItemVisibility()
+    /**
+     *	Save visibility of a menu item.
+     * 	
+     *	@param int id = Id of menu item..
+     *	@param Boolean visible = Visibility of menu item.
+     *
+     * @public	
+     */		
+	setMenuItemVisibility : function(id,visible)
+	{
+		this.menuItems[id].setVisibility(visible);		
+	}
+	// }}}
+	,
+	// {{{ setSubMenuType()
+    /**
+     *	Set menu type for a specific menu depth.
+     * 	
+     *	@param int depth = 1 = Top menu, 2 = Sub level 1...
+     *	@param String newType = New menu type(possible values: "top" or "sub")
+     *
+     * @private	
+     */		
+	setSubMenuType : function(depth,newType)
+	{
+		this.submenuType[depth] = newType;	
+		
+	}
+	// }}}		
+	,
+	// {{{ __getDepths()
+    /**
+     *	Create variable for the depth of each menu item.
+     * 	
+     *
+     * @private	
+     */		
+	getItems : function(parentId,returnArray)
+	{
+		if(!parentId)return this.menuItems;
+		if(!returnArray)returnArray = new Array();
+		for(var no=0;no<this.menuItemsOrder.length;no++){
+			var id = this.menuItemsOrder[no];
+			if(!id)continue;
+			if(this.menuItems[id].parentId==parentId){
+				returnArray[returnArray.length] = this.menuItems[id];
+				if(this.menuItems[id].hasSubs)return this.getItems(this.menuItems[id].id,returnArray);
+			}
+		}
+		return returnArray;
+		
+	}
+	// }}}
+	,
+	// {{{ __getUniqueId()
+    /**
+     *	Returns a unique id for a menu item. This method is used by the addSeparator function in case an id isn't sent to the method.
+     * 	
+     *
+     * @private	
+     */	    	
+	__getUniqueId : function()
+	{
+		var num = Math.random() + '';
+		num = num.replace('.','');	
+		num = '99' + num;		
+		num = num /1;		
+		while(this.menuItems[num]){
+			num = Math.random() + '';
+			num = num.replace('.','');	
+			num = num /1;				
+		}
+		return num;
+	}
+	// }}}	
+	,
+	// {{{ __getDepths()
+    /**
+     *	Create variable for the depth of each menu item.
+     * 	
+     *
+     * @private	
+     */	
+    __getDepths : function()
+    {    	
+    	for(var no=0;no<this.menuItemsOrder.length;no++){
+    		var id = this.menuItemsOrder[no];
+    		if(!id)continue;
+    		this.menuItems[id].depth = 1;
+    		if(this.menuItems[id].parentId){
+    			this.menuItems[id].depth = this.menuItems[this.menuItems[id].parentId].depth+1;    
+ 	
+    		}  
+    		this.menuItems[id].type = this.submenuType[this.menuItems[id].depth];	// Save menu direction for this menu item.  		
+    	}    	
+    }	
+    // }}}
+    ,	    
+    // {{{ __setHasSubs()
+    /**
+     *	Create variable for the depth of each menu item.
+     * 	
+     *
+     * @private	
+     */	
+    __setHasSubs : function()
+    {    	
+    	for(var no=0;no<this.menuItemsOrder.length;no++){
+    		var id = this.menuItemsOrder[no];
+    		if(!id)continue;    		
+    		if(this.menuItems[id].parentId){
+    			this.menuItems[this.menuItems[id].parentId].hasSubs = 1;
+    			
+    		}    		
+    	}    	
+    }	
+    // }}}
+    ,
+	// {{{ __hasSubs()
+    /**
+     *	Does a menu item have sub elements ?
+     * 	
+     *
+     * @private	
+     */	
+	// }}}	
+	__hasSubs : function(id)
+	{
+		for(var no=0;no<this.menuItemsOrder.length;no++){
+			var id = this.menuItemsOrder[no];
+			if(!id)continue;
+			if(this.menuItems[id].parentId==id)return true;		
+		}
+		return false;	
+	}
+	// }}}
+	,
+	// {{{ __deleteChildNodes()
+    /**
+     *	Deleting child nodes of a specific parent id
+     * 	
+     *	@param int parentId
+     *
+     * @private	
+     */	
+	// }}}		
+	__deleteChildNodes : function(parentId,recursive)
+	{
+		var itemsToDeleteFromOrderArray = new Array();
+		for(var prop=0;prop<this.menuItemsOrder.length;prop++){
+    		var id = this.menuItemsOrder[prop];
+    		if(!id)continue;    
+    					
+			if(this.menuItems[id].parentId==parentId && parentId){
+				this.menuItems[id] = false;
+				itemsToDeleteFromOrderArray[itemsToDeleteFromOrderArray.length] = id;				
+				this.__deleteChildNodes(id,true);	// Recursive call.
+			}	
+		}	
+		
+		if(!recursive){
+			for(var prop=0;prop<itemsToDeleteFromOrderArray;prop++){
+				if(!itemsToDeleteFromOrderArray[prop])continue;
+				this.__deleteItemFromItemOrderArray(itemsToDeleteFromOrderArray[prop]);
+			}
+		}
+		this.__setHasSubs();
+	}
+	// }}}
+	,
+	// {{{ __deleteANode()
+    /**
+     *	Deleting a specific node from the menu model
+     * 	
+     *	@param int id = Id of node to delete.
+     *
+     * @private	
+     */	
+	// }}}		
+	__deleteANode : function(id)
+	{
+		this.menuItems[id] = false;	
+		this.__deleteItemFromItemOrderArray(id);	
+	}
+	,
+	// {{{ __deleteItemFromItemOrderArray()
+    /**
+     *	Deleting a specific node from the menuItemsOrder array(The array controlling the order of the menu items).
+     * 	
+     *	@param int id = Id of node to delete.
+     *
+     * @private	
+     */	
+	// }}}		
+	__deleteItemFromItemOrderArray : function(id)
+	{
+		for(var no=0;no<this.menuItemsOrder.length;no++){
+			var tmpId = this.menuItemsOrder[no];
+			if(!tmpId)continue;
+			if(this.menuItemsOrder[no]==id){
+				this.menuItemsOrder.splice(no,1);
+				return;
+			}
+		}
+		
+	}
+	// }}}
+	,	
+	// {{{ __appendMenuModel()
+    /**
+     *	Replace the sub items of a menu item with items from a new menuModel.
+     * 	
+     *	@param menuModel newModel = An object of class menuModel - the items of this menu model will be appended to the existing menu items.
+     *	@param Int parentId = Id of parent element of the appended items.
+     *
+     * @private	
+     */	
+	// }}}		
+	__appendMenuModel : function(newModel,parentId)
+	{
+		if(!newModel)return;
+		var items = newModel.getItems();
+		for(var no=0;no<newModel.menuItemsOrder.length;no++){
+			var id = newModel.menuItemsOrder[no];
+			if(!id)continue;
+			if(!items[id].parentId)items[id].parentId = parentId;
+			this.menuItems[id] = items[id];	
+			for(var no2=0;no2<this.menuItemsOrder.length;no2++){	// Check to see if this item allready exists in the menuItemsOrder array, if it does, remove it. 
+				if(!this.menuItemsOrder[no2])continue;
+				if(this.menuItemsOrder[no2]==items[id].id){
+					this.menuItemsOrder.splice(no2,1);
+				}
+			}
+			this.menuItemsOrder[this.menuItemsOrder.length] = items[id].id;		
+		}
+		this.__getDepths();		
+		this.__setHasSubs();		
+	}
+	// }}}
+}
+
+/* Class for menu items - a view */
+
+/************************************************************************************************************
+*	DHTML menu item class
+*
+*	Created:						October, 21st, 2006
+*	@class Purpose of class:		Creates the HTML for a single menu item.
+*			
+*	Css files used by this script:	menu-item.css
+*
+*	Demos of this class:			demo-menu-strip.html
+*
+* 	Update log:
+*
+************************************************************************************************************/
+
+/**
+* @constructor
+* @class Purpose of class:	Creates the div(s) for a menu item. This class is used by the menuBar class. You can 
+*	also create a menu item and add it where you want on your page. the createItem() method will return the div
+*	for the item. You can use the appendChild() method to add it to your page. 
+*
+* @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+*/
+
+
+DHTMLSuite.menuItem = function()
+{
+	var layoutCSS;	
+	var divElement;							// the <div> element created for this menu item
+	var expandElement;						// Reference to the arrow div (expand sub items)
+	var cssPrefix;							// Css prefix for the menu items.
+	var modelItemRef;						// Reference to menuModelItem
+
+	this.layoutCSS = 'menu-item.css';
+	this.cssPrefix = 'DHTMLSuite_';
+	
+	if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	
+		
+	
+	var objectIndex;
+	this.objectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;
+
+	
+}
+
+DHTMLSuite.menuItem.prototype = 
+{
+	
+	/*
+	*	Create a menu item.
+	*
+	*	@param menuModelItem menuModelItemObj = An object of class menuModelItem
+	*/
+	createItem : function(menuModelItemObj)
+	{
+		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);	// Load css
+		
+		DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[this.objectIndex] = this;
+			
+		this.modelItemRef = menuModelItemObj;
+		this.divElement = document.createElement('DIV');	// Create main div
+		this.divElement.id = 'DHTMLSuite_menuItem' + menuModelItemObj.id;	// Giving this menu item it's unque id
+		this.divElement.className = this.cssPrefix + 'menuItem_' + menuModelItemObj.type + '_regular'; 
+		this.divElement.onselectstart = function() { return DHTMLSuite.commonObj.cancelEvent(false,this) };
+		if(menuModelItemObj.helpText){	// Add "title" attribute to the div tag if helpText is defined
+			this.divElement.title = menuModelItemObj.helpText;
+		}
+		
+		// Menu item of type "top"
+		if(menuModelItemObj.type=='top'){			
+			this.__createMenuElementsOfTypeTop(this.divElement);
+		}
+
+		if(menuModelItemObj.type=='sub'){
+			this.__createMenuElementsOfTypeSub(this.divElement);
+		}
+		
+		if(menuModelItemObj.separator){
+			this.divElement.className = this.cssPrefix + 'menuItem_separator_' + menuModelItemObj.type;
+			this.divElement.innerHTML = '<span></span>';
+		}else{		
+			/* Add events */
+			var tmpVar = this.objectIndex/1;
+			this.divElement.onclick = function(e) { DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[tmpVar].__navigate(e); }
+			this.divElement.onmousedown = this.__clickMenuItem;			// on mouse down effect
+			this.divElement.onmouseup = this.__rolloverMenuItem;		// on mouse up effect
+			this.divElement.onmouseover = this.__rolloverMenuItem;		// mouse over effect
+			this.divElement.onmouseout = this.__rolloutMenuItem;		// mouse out effect.
+			DHTMLSuite.commonObj.__addEventElement(this.divElement);
+		}
+		return this.divElement;
+	}
+	// }}}
+	,
+	// {{{ setLayoutCss()
+    /**
+     *	Creates the different parts of a menu item of type "top".
+     *
+     *  @param String newLayoutCss = Name of css file used for the menu items.
+     *
+     * @public	
+     */		
+	setLayoutCss : function(newLayoutCss)
+	{
+		this.layoutCSS = newLayoutCss;
+		
+	}
+	// }}}
+	,
+	// {{{ __createMenuElementsOfTypeTop()
+    /**
+     *	Creates the different parts of a menu item of type "top".
+     *
+     *  @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
+     *  @param Object parentEl = Reference to parent element
+     *
+     * @private	
+     */		
+	__createMenuElementsOfTypeTop : function(parentEl){
+		if(this.modelItemRef.itemIcon){
+			var iconDiv = document.createElement('DIV');
+			iconDiv.innerHTML = '<img src="' + this.modelItemRef.itemIcon + '">';
+			iconDiv.id = 'menuItemIcon' + this.modelItemRef.id
+			parentEl.appendChild(iconDiv);		
+		}
+		if(this.modelItemRef.itemText){
+			var div = document.createElement('DIV');
+			div.innerHTML = this.modelItemRef.itemText;	
+			div.className = this.cssPrefix + 'menuItem_textContent';
+			div.id = 'menuItemText' + this.modelItemRef.id;	
+			parentEl.appendChild(div);
+		}
+		/* Create div for the arrow -> Show sub items */
+		var div = document.createElement('DIV');
+		div.className = this.cssPrefix + 'menuItem_top_arrowShowSub';
+		div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
+		parentEl.appendChild(div);
+		this.expandElement = div;
+		if(!this.modelItemRef.hasSubs)div.style.display='none';
+				
+	}
+	// }}}
+	,	
+	
+	// {{{ __createMenuElementsOfTypeSub()
+    /**
+     *	Creates the different parts of a menu item of type "sub".
+     *
+     *  @param menuModelItem menuModelItemObj = Object of type menuModelItemObj
+     *  @param Object parentEl = Reference to parent element
+     *
+     * @private	
+     */		
+	__createMenuElementsOfTypeSub : function(parentEl){		
+		if(this.modelItemRef.itemIcon){
+			parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')';	
+			parentEl.style.backgroundRepeat = 'no-repeat';
+			parentEl.style.backgroundPosition = 'left center';	
+		}
+		if(this.modelItemRef.itemText){
+			var div = document.createElement('DIV');
+			div.className = 'DHTMLSuite_textContent';
+			div.innerHTML = this.modelItemRef.itemText;	
+			div.className = this.cssPrefix + 'menuItem_textContent';
+			div.id = 'menuItemText' + this.modelItemRef.id;
+			parentEl.appendChild(div);
+		}
+		
+		/* Create div for the arrow -> Show sub items */
+		var div = document.createElement('DIV');
+		div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub';
+		parentEl.appendChild(div);		
+		div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id;
+		this.expandElement = div;
+		
+		if(!this.modelItemRef.hasSubs){
+			div.style.display='none';	
+		}else{
+			div.previousSibling.style.paddingRight = '15px';
+		}	
+	}
+	// }}}
+	,
+	// {{{ setCssPrefix()
+    /**
+     *	Set css prefix for the menu item. default is 'DHTMLSuite_'. This is useful in case you want to have different menus on a page with different layout.
+     *
+     *  @param String cssPrefix = New css prefix. 
+     *
+     * @public	
+     */		
+	setCssPrefix : function(cssPrefix)
+	{
+		this.cssPrefix = cssPrefix;
+	}
+	// }}}
+	,
+	// {{{ setMenuIcon()
+    /**
+     *	Replace menu icon.
+     *
+     *	@param String newPath - Path to new icon (false if no icon);
+     *
+     * @public	
+     */		
+	setIcon : function(newPath)
+	{
+		this.modelItemRef.setIcon(newPath);
+		if(this.modelItemRef.type=='top'){	// Menu item is of type "top"
+			var div = document.getElementById('menuItemIcon' + this.modelItemRef.id);	// Get a reference to the div where the icon is located.
+			var img = div.getElementsByTagName('IMG')[0];	// Find the image
+			if(!img){	// Image doesn't exists ?
+				img = document.createElement('IMG');	// Create new image
+				div.appendChild(img);
+			}
+			img.src = newPath;	// Set image path
+			if(!newPath)img.parentNode.removeChild(img);	// No newPath defined, remove the image.			
+		}
+		if(this.modelItemRef.type=='sub'){	// Menu item is of type "sub"
+			this.divElement.style.backgroundImage = 'url(\'' + newPath + '\')';		// Set backgroundImage for the main div(i.e. menu item div)	
+		}		
+	}
+	// }}}
+	,
+	// {{{ setText()
+    /**
+     *	Replace the text of a menu item
+     *
+     *	@param String newText - New text for the menu item.
+     *
+     * @public	
+     */		
+	setText : function(newText)
+	{
+		this.modelItemRef.setText(newText);
+		document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText;
+		
+		
+	}
+	
+	// }}}
+	,
+	// {{{ __clickMenuItem()
+    /**
+     *	Effect - click on menu item
+     *
+     *
+     * @private	
+     */		
+	__clickMenuItem : function()
+	{
+		this.className = this.className.replace('_regular','_click');
+		this.className = this.className.replace('_over','_click');
+	}
+	// }}}	
+	,	
+	// {{{ __rolloverMenuItem()
+    /**
+     *	Roll over effect
+     *
+     *
+     * @private	
+     */		
+	__rolloverMenuItem : function()
+	{
+		this.className = this.className.replace('_regular','_over');
+		this.className = this.className.replace('_click','_over');
+	}	
+	// }}}
+	,	
+	// {{{ __rolloutMenuItem()
+    /**
+     *	Roll out effect
+     *
+     *
+     * @private	
+     */		
+	__rolloutMenuItem : function()
+	{
+		this.className = this.className.replace('_over','_regular');
+		
+	}
+	// }}}
+	,	
+	// {{{ setState()
+    /**
+     *	Set state of a menu item.
+     *
+     *	@param String newState = New state for the menu item
+     *
+     * @public	
+     */		
+	setState : function(newState)
+	{
+		this.divElement.className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState; 		
+		this.modelItemRef.setState(newState);
+	}
+	// }}}
+	,
+	// {{{ getState()
+    /**
+     *	Return state of a menu item. 
+     *
+     *
+     * @public	
+     */		
+	getState : function()
+	{
+		var state = this.modelItemRef.getState();
+		if(!state){
+			if(this.divElement.className.indexOf('_over')>=0)state = 'over';	
+			if(this.divElement.className.indexOf('_click')>=0)state = 'click';	
+			this.modelItemRef.setState(state);		
+		}
+		return state;
+	}	
+	// }}}
+	,
+	// {{{ __setHasSub()
+    /**
+     *	Update the item, i.e. show/hide the arrow if the element has subs or not. 
+     *
+     *
+     * @private	
+     */	
+    __setHasSub : function(hasSubs)
+    {
+    	this.modelItemRef.hasSubs = hasSubs;
+    	if(!hasSubs){
+    		document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none';    		
+    	}else{
+    		document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block';
+    	}    	
+    }
+    // }}}	
+    ,
+	// {{{ hide()
+    /**
+     *	Hide the menu item.
+     *
+     *
+     * @public	
+     */	    
+    hide : function()
+    {
+    	this.modelItemRef.setVisibility(false);
+    	this.divElement.style.display='none';    	
+    }    
+    ,
+ 	// {{{ show()
+    /**
+     *	Show the menu item.
+     *
+     *
+     * @public	
+     */	     
+    show : function()
+    {
+    	this.modelItemRef.setVisibility(true);
+    	this.divElement.style.display='block';    	
+    }    
+	// }}}
+	,
+	// {{{ __hideGroup()
+    /**
+     *	Hide the group the menu item is a part of. Example: if we're dealing with menu item 2.1, hide the group for all sub items of 2
+     *
+     *
+     * @private	
+     */			
+	__hideGroup : function()
+	{		
+		if(this.modelItemRef.parentId){
+			this.divElement.parentNode.style.visibility='hidden';	
+			if(DHTMLSuite.clientInfoObj.isMSIE){
+				try{
+					var tmpId = this.divElement.parentNode.id.replace(/[^0-9]/gi,'');
+					document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden';
+				}catch(e){
+					// IFRAME hasn't been created.
+				}	
+			}
+		}	
+
+	}
+	// }}}	
+	,
+	// {{{ __navigate()
+    /**
+     *	Navigate after click on a menu item.
+     *
+     *
+     * @private	
+     */		
+	__navigate : function(e)
+	{
+		/* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */
+		if(document.all)e = event;
+		if(e){
+			var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
+			if(srcEl.id.indexOf('arrow')>=0)return;
+		}
+		if(this.modelItemRef.state=='disabled')return;
+		if(this.modelItemRef.url){
+      if (this.modelItemRef.frameTarget == 'main_window')
+        window.main_window.location = this.modelItemRef.url;
+      else if (this.modelItemRef.frameTarget == '_top')
+        window.location = this.modelItemRef.url;
+      else if (this.modelItemRef.frameTarget)
+        window.open(this.modelItemRef.url);
+      else
+        location.href = this.modelItemRef.url;
+		}
+		if(this.modelItemRef.jsFunction){
+			try{
+				eval(this.modelItemRef.jsFunction);
+			}catch(e){
+				alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed');
+			}
+		}
+	}
+}
+
+
+/************************************************************************************************************
+*	DHTML menu bar class
+*
+*	Created:						October, 21st, 2006
+*	@class Purpose of class:		Creates a top bar menu
+*			
+*	Css files used by this script:	menu-bar.css
+*
+*	Demos of this class:			demo-menu-bar.html
+*
+* 	Update log:
+*
+************************************************************************************************************/
+
+
+/**
+* @constructor
+* @class Purpose of class:	Creates a top bar menu strip. Demos: <br>
+*	<ul>
+*	<li>(<a href="../../demos/demo-menu-bar-2.html" target="_blank">A menu with a detailed description on how it is created</a>)</li>
+*	<li>(<a href="../../demos/demo-menu-bar.html" target="_blank">Demo with lots of menus on the same page</a>)</li>
+*	<li>(<a href="../../demos/demo-menu-bar-custom-css.html" target="_blank">Two menus with different layout</a>)</li>
+*	<li>(<a href="../../demos/demo-menu-bar-custom-css-file.html" target="_blank">One menu with custom layout/css.</a>)</li>
+*	</ul>
+*
+*	<a href="../images/menu-bar-1.gif" target="_blank">Image describing the classes</a> <br><br>
+*
+* @version 1.0
+* @author	Alf Magne Kalleland(www.dhtmlgoodies.com)
+*/
+
+DHTMLSuite.menuBar = function()
+{
+	var menuItemObj;
+	var layoutCSS;					// Name of css file
+	var menuBarBackgroundImage;		// Name of background image
+	var menuItem_objects;			// Array of menu items - html elements.
+	var menuBarObj;					// Reference to the main dib
+	var menuBarHeight;
+	var menuItems;					// Reference to objects of class menuModelItem
+	var highlightedItems;			// Array of currently highlighted menu items.
+	var menuBarState;				// Menu bar state - true or false - 1 = expand items on mouse over
+	var activeSubItemsOnMouseOver;	// Activate sub items on mouse over	(instead of onclick)
+	
+
+	var submenuGroups;				// Array of div elements for the sub menus
+	var submenuIframes;				// Array of sub menu iframes used to cover select boxes in old IE browsers.
+	var createIframesForOldIeBrowsers;	// true if we want the script to create iframes in order to cover select boxes in older ie browsers.
+	var targetId;					// Id of element where the menu will be inserted.
+	var menuItemCssPrefix;			// Css prefix of menu items.
+	var cssPrefix;					// Css prefix for the menu bar
+	var menuItemLayoutCss;			// Css path for the menu items of this menu bar
+	var globalObjectIndex;			// Global index of this object - used to refer to the object of this class outside
+	this.cssPrefix = 'DHTMLSuite_';
+	this.menuItemLayoutCss = false;	// false = use default for the menuItem class.
+	this.layoutCSS = 'menu-bar.css';
+	this.menuBarBackgroundImage = 'menu_strip_bg.jpg';
+	this.menuItem_objects = new Array();
+	DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();
+	
+	this.menuBarState = false;
+	
+	this.menuBarObj = false;
+	this.menuBarHeight = 26;
+	this.submenuGroups = new Array();
+	this.submenuIframes = new Array();
+	this.targetId = false;
+	this.activeSubItemsOnMouseOver = false;
+	this.menuItemCssPrefix = false;
+	this.createIframesForOldIeBrowsers = true;
+	if(!standardObjectsCreated)DHTMLSuite.createStandardObjects();	
+	
+	
+}
+
+
+
+
+
+DHTMLSuite.menuBar.prototype = {	
+	
+	// {{{ init()
+    /**
+     *	Initilizes the script
+     *
+     *
+     * @public	
+     */					
+	init : function()
+	{
+		
+		DHTMLSuite.commonObj.loadCSS(this.layoutCSS);	
+		this.__createDivs();	// Create general divs
+		this.__createMenuItems();	// Create menu items
+		this.__setBasicEvents();	// Set basic events.
+		window.refToThismenuBar = this;
+	}
+	// }}}
+	,
+	// {{{ setTarget()
+    /**
+     *	Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar.
+     *
+     *  @param String targetId = Id of element where the menu will be inserted. 
+     *
+     * @public	
+     */		
+	setTarget : function(targetId)
+	{
+		this.targetId = targetId;		
+		
+	}	
+	// }}}	
+	,
+	// {{{ setLayoutCss()
+    /**
+     *	Specify the css file for this menu bar
+     *
+     *  @param String layoutCSS = Name of new css file. 
+     *
+     * @public	
+     */		
+	setLayoutCss : function(layoutCSS)
+	{
+		this.layoutCSS = layoutCSS;		
+		
+	}	
+	// }}}
+	,	
+	// {{{ setMenuItemLayoutCss()
+    /**
+     *	Specify the css file for the menu items
+     *
+     *  @param String layoutCSS = Name of new css file. 
+     *
+     * @public	
+     */		
+	setMenuItemLayoutCss : function(layoutCSS)
+	{
+		this.menuItemLayoutCss = layoutCSS;		
+		
+	}	
+	// }}}
+	,	
+	// {{{ setCreateIframesForOldIeBrowsers()
+    /**
+     *	This method specifies if you want to the script to create iframes behind sub menu groups in order to cover eventual select boxes. This
+     *	can be needed if you have users with older IE browsers(prior to version 7) and when there's a chance that a sub menu could appear on top
+     *	of a select box.
+     *
+     *  @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers.
+     *
+     * @public	
+     */		
+	setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers)
+	{
+		this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers;		
+		
+	}	
+	// }}}
+	,
+	// {{{ addMenuItems()
+    /**
+     *	Add menu items
+     *
+     *  @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data 	
+     *
+     * @public	
+     */			
+	addMenuItems : function(menuItemObj)
+	{
+		this.menuItemObj = menuItemObj;	
+		this.menuItems = menuItemObj.getItems();
+	}
+	// }}}
+	,
+	// {{{ setActiveSubItemsOnMouseOver()
+    /**
+     *	 Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is). 	
+     *
+     *	@param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is).
+     *
+     * @public	
+     */		
+	setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver)
+	{
+		this.activeSubItemsOnMouseOver = activateSubOnMouseOver;	
+	}
+	// }}}
+	,
+	// {{{ setMenuItemState()
+    /**
+     *	This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items.
+     * 	
+     *	@param Number menuItemId - ID of the menu item we want to switch state for
+     * 	@param String state - New state(example: "disabled")
+     *
+     * @public	
+     */			
+	setMenuItemState : function(menuItemId,state)
+	{
+		this.menuItem_objects[menuItemId].setState(state);
+	}
+	// }}}	
+	,
+	// {{{ setMenuItemCssPrefix()
+    /**
+     *	Specify prefix of css classes used for the menu items. Default css prefix is "DHTMLSuite_". If you wish have some custom styling for some of your menus, 
+     *	create a separate css file and replace DHTMLSuite_ for the class names with your new prefix.  This is useful if you want to have two menus on the same page
+     *	with different stylings.
+     * 	
+     *	@param String newCssPrefix - New css prefix for menu items.
+     *
+     * @public	
+     */		
+	setMenuItemCssPrefix : function(newCssPrefix)
+	{
+		this.menuItemCssPrefix = newCssPrefix;
+	}
+	// }}}
+	,	
+	// {{{ setCssPrefix()
+    /**
+     *	Specify prefix of css classes used for the menu bar. Default css prefix is "DHTMLSuite_" and that's the prefix of all css classes inside menu-bar.css(the default css file). 
+     *	If you want some custom menu bars, create and include your own css files, replace DHTMLSuite_ in the class names with your own prefix and set the new prefix by calling
+     *	this method. This is useful if you want to have two menus on the same page with different stylings.
+     * 	
+     *	@param String newCssPrefix - New css prefix for the menu bar classes.
+     *
+     * @public	
+     */		
+	setCssPrefix : function(newCssPrefix)
+	{
+		this.cssPrefix = newCssPrefix;
+	}
+	// }}}
+	,
+	// {{{ replaceSubMenus()
+    /**
+     *	This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as parentId)
+     *
+     * 	
+     *	@param Number parentId - ID of parent element ( 0 if top node) - if set, all sub elements will be deleted and replaced with the new menu model.
+     *	@param menuModel newMenuModel - Reference to object of class menuModel
+     *
+     * @private	
+     */		
+	replaceMenuItems : function(parentId,newMenuModel)
+	{		
+		this.hideSubMenus();	// Hide all sub menus
+		this.__deleteMenuItems(parentId);	// Delete old menu items.
+		this.menuItemObj.__appendMenuModel(newMenuModel,parentId);	// Appending new menu items to the menu model.
+		this.__clearAllMenuItems();
+		this.__createMenuItems();
+	}	
+
+	// }}}	
+	,
+	// {{{ deleteMenuItems()
+    /**
+     *	This method deletes menu items from the menu dynamically
+     * 	
+     *	@param Number parentId - Parent id - where to append the new items.
+     *	@param Boolean includeParent - Should parent element also be deleted, or only sub elements?
+     *
+     * @public	
+     */		
+	deleteMenuItems : function(parentId,includeParent)
+	{
+		this.hideSubMenus();	// Hide all sub menus
+		this.__deleteMenuItems(parentId,includeParent);
+		this.__clearAllMenuItems();
+		this.__createMenuItems();		
+	}
+	// }}}	
+	,
+	// {{{ appendMenuItems()
+    /**
+     *	This method appends menu items to the menu dynamically
+     * 	
+     *	@param Number parentId - Parent id - where to append the new items.
+     *	@param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined parentId
+     *
+     * @public	
+     */		
+	appendMenuItems : function(parentId,newMenuModel)
+	{
+		this.hideSubMenus();	// Hide all sub menus
+		this.menuItemObj.__appendMenuModel(newMenuModel,parentId);	// Appending new menu items to the menu model.
+		this.__clearAllMenuItems();
+		this.__createMenuItems();		
+	}	
+	// }}}	
+	,
+	// {{{ hideMenuItem()
+    /**
+     *	This method doesn't delete menu items. it hides them only.
+     * 	
+     *	@param Number id - Id of the item you want to hide.
+     *
+     * @public	
+     */		
+	hideMenuItem : function(id)
+	{
+		this.menuItem_objects[id].hide();
+
+	}	
+	// }}}	
+	,
+	// {{{ showMenuItem()
+    /**
+     *	This method shows a menu item. If the item isn't hidden, nothing is done.
+     * 	
+     *	@param Number id - Id of the item you want to show
+     *
+     * @public	
+     */		
+	showMenuItem : function(id)
+	{
+		this.menuItem_objects[id].show();
+	}	
+	// }}}
+	,
+	// {{{ setText()
+    /**
+     *	Replace the text for a menu item
+     * 	
+     *	@param Integer id - Id of menu item.
+     *	@param String newText - New text for the menu item.
+     *
+     * @public	
+     */		
+	setText : function(id,newText)
+	{
+		this.menuItem_objects[id].setText(newText);
+	}		
+	// }}}
+	,
+	// {{{ setIcon()
+    /**
+     *	Replace menu icon for a menu item. 
+     * 	
+     *	@param Integer id - Id of menu item.
+     *	@param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item.
+     *
+     * @public	
+     */		
+	setIcon : function(id,newPath)
+	{
+		this.menuItem_objects[id].setIcon(newPath);
+	}	
+	// }}}
+	,
+	// {{{ __clearAllMenuItems()
+    /**
+     *	Delete HTML elements for all menu items.
+     *
+     * @private	
+     */			
+	__clearAllMenuItems : function()
+	{
+		for(var prop=0;prop<this.menuItemObj.menuItemsOrder.length;prop++){
+			var id = this.menuItemObj.menuItemsOrder[prop];
+			if(this.submenuGroups[id]){
+				this.submenuGroups[id].parentNode.removeChild(this.submenuGroups[id]);
+				this.submenuGroups[id] = false;	
+			}
+			if(this.submenuIframes[id]){
+				this.submenuIframes[id].parentNode.removeChild(this.submenuIframes[id]);
+				this.submenuIframes[id] = false;
+			}	
+		}
+		this.menuBarObj.innerHTML = '';		
+	}
+	// }}}
+	,
+	// {{{ __deleteMenuItems()
+    /**
+     *	This method deletes menu items from the menu, i.e. menu model and the div elements for these items.
+     * 	
+     *	@param Number parentId - Parent id - where to start the delete process.
+     *
+     * @private	
+     */		
+	__deleteMenuItems : function(parentId,includeParent)
+	{
+		if(includeParent)this.menuItemObj.__deleteANode(parentId);
+		if(!this.submenuGroups[parentId])return;	// No sub items exists.		
+		this.menuItem_objects[parentId].__setHasSub(false);	// Delete existing sub menu divs.
+		this.menuItemObj.__deleteChildNodes(parentId);	// Delete existing child nodes from menu model
+		var groupBox = this.submenuGroups[parentId];
+		groupBox.parentNode.removeChild(groupBox);	// Delete sub menu group box. 
+		if(this.submenuIframes[parentId]){
+			this.submenuIframes[parentId].parentNode.removeChild(this.submenuIframes[parentId]);
+		}
+		this.submenuGroups.splice(parentId,1);
+		this.submenuIframes.splice(parentId,1);
+	}
+	// }}}	
+	,
+	// {{{ __changeMenuBarState()
+    /**
+     *	This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items.
+     * 	
+     *	@param Object obj - Reference to element triggering the action
+     *
+     * @private	
+     */		
+	__changeMenuBarState : function(){
+		var objectIndex = this.getAttribute('objectRef');
+		var obj = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[objectIndex];
+		var parentId = this.id.replace(/[^0-9]/gi,'');		
+		var state = obj.menuItem_objects[parentId].getState();
+		if(state=='disabled')return;
+		obj.menuBarState = !obj.menuBarState;
+		if(!obj.menuBarState)obj.hideSubMenus();else{
+			obj.hideSubMenus();
+			obj.__expandGroup(parentId);
+		}
+		
+	}
+	// }}}		
+	,
+	// {{{ __createDivs()
+    /**
+     *	Create the main HTML elements for this menu dynamically
+     * 	
+     *
+     * @private	
+     */		
+	__createDivs : function()
+	{
+		window.refTomenuBar = this;	// Reference to menu strip object
+		
+		this.menuBarObj = document.createElement('DIV');	
+		this.menuBarObj.className = this.cssPrefix + 'menuBar_' + this.menuItemObj.submenuType[1];
+		
+		if(!document.getElementById(this.targetId)){
+			alert('No target defined for the menu object');
+			return;
+		}
+		// Appending menu bar object as a sub of defined target element.
+		var target = document.getElementById(this.targetId);
+		target.appendChild(this.menuBarObj);				
+	}
+	,
+	// {{{ hideSubMenus()
+    /**
+     *	Deactivate all sub menus ( collapse and set state back to regular )
+     *	In case you have a menu inside a scrollable container, call this method in an onscroll event for that element
+     *	example document.getElementById('textContent').onscroll = menuBar.__hideSubMenus;
+     * 	
+     *	@param Event e - this variable is present if this method is called from an event. 
+     *
+     * @public	
+     */		
+	hideSubMenus : function(e)
+	{
+		if(this && this.tagName){	/* Method called from event */
+			if(document.all)e = event;
+			var srcEl = DHTMLSuite.commonObj.getSrcElement(e);
+			if(srcEl.tagName.toLowerCase()=='img')srcEl = srcEl.parentNode;
+			if(srcEl.className && srcEl.className.indexOf('arrow')>=0){
+				return;
+			}
+		}
+		for(var no=0;no<DHTMLSuite.variableStorage.menuBar_highlightedItems.length;no++){
+			DHTMLSuite.variableStorage.menuBar_highlightedItems[no].setState('regular');	// Set state back to regular
+			DHTMLSuite.variableStorage.menuBar_highlightedItems[no].__hideGroup();	// Hide eventual sub menus
+		}	
+		DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array();			
+	}
+	
+	,
+	// {{{ __expandGroup()
+    /**
+     *	Expand a group of sub items.
+     * 	@param parentId - Id of parent element
+     *
+     * @private	
+     */			
+	__expandGroup : function(parentId)
+	{
+	
+		var groupRef = this.submenuGroups[parentId];
+		var subDiv = groupRef.getElementsByTagName('DIV')[0];
+		
+		var numericId = subDiv.id.replace(/[^0-9]/g,'');
+		
+		groupRef.style.visibility='visible';	// Show menu group.
+		if(this.submenuIframes[parentId])this.submenuIframes[parentId].style.visibility = 'visible';	// Show iframe if it exists.
+		DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId];
+		this.__positionSubMenu(parentId);
+		
+		if(DHTMLSuite.clientInfoObj.isOpera){	/* Opera fix in order to get correct height of sub menu group */
+			var subDiv = groupRef.getElementsByTagName('DIV')[0];	/* Find first menu item */
+			subDiv.className = subDiv.className.replace('_over','_over');	/* By "touching" the class of the menu item, we are able to fix a layout problem in Opera */
+		}
+	}
+	
+	,
+	// {{{ __activateMenuElements()
+    /**
+     *	Traverse up the menu items and highlight them.
+     * 	
+     *
+     * @private	
+     */			
+	__activateMenuElements : function(inputObj,objectRef,firstIteration)
+	{
+		if(!this.menuBarState && !this.activeSubItemsOnMouseOver)return;	// Menu is not activated and it shouldn't be activated on mouse over.
+		var numericId = inputObj.id.replace(/[^0-9]/g,'');	// Get a numeric reference to current menu item.
+		
+		var state = this.menuItem_objects[numericId].getState();	// Get state of this menu item.
+		if(state=='disabled')return;	// This menu item is disabled - return from function without doing anything.		
+		
+		if(firstIteration && DHTMLSuite.variableStorage.menuBar_highlightedItems.length>0){
+			this.hideSubMenus();	// First iteration of this function=> Hide other sub menus. 
+		}	
+		// What should be the state of this menu item -> If it's the one the mouse is over, state should be "over". If it's a parent element, state should be "active".
+		var newState = 'over';
+		if(!firstIteration)newState = 'active';	// State should be set to 'over' for the menu item the mouse is currently over.
+			
+		this.menuItem_objects[numericId].setState(newState);	// Switch state of menu item.
+		if(this.submenuGroups[numericId]){	// Sub menu group exists. call the __expandGroup method. 
+			this.__expandGroup(numericId);	// Expand sub menu group
+		}
+		DHTMLSuite.variableStorage.menuBar_highlightedItems[DHTMLSuite.variableStorage.menuBar_highlightedItems.length] = this.menuItem_objects[numericId];	// Save this menu item in the array of highlighted elements.
+		if(objectRef.menuItems[numericId].parentId){	// A parent element exists. Call this method over again with parent element as input argument.
+			this.__activateMenuElements(objectRef.menuItem_objects[objectRef.menuItems[numericId].parentId].divElement,objectRef,false);
+		}
+	}
+	// }}}	
+	,
+	// {{{ __createMenuItems()
+    /**
+     *	Creates the HTML elements for the menu items.
+     * 	
+     *
+     * @private	
+     */		
+	__createMenuItems : function()
+	{
+		if(!this.globalObjectIndex)this.globalObjectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;;
+		var index = this.globalObjectIndex;
+		DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index] = this;
+	
+		// Find first child of the body element. trying to insert the element before first child instead of appending it to the <body> tag, ref: problems in ie
+		var firstChild = false;
+		var firstChilds = document.getElementsByTagName('DIV');
+		if(firstChilds.length>0)firstChild = firstChilds[0]
+		
+		for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){	// Looping through menu items		
+			var indexThis = this.menuItemObj.menuItemsOrder[no];				
+			if(!this.menuItems[indexThis].id)continue;		
+			this.menuItem_objects[this.menuItems[indexThis].id] = new DHTMLSuite.menuItem(); 
+			if(this.menuItemCssPrefix)this.menuItem_objects[this.menuItems[indexThis].id].setCssPrefix(this.menuItemCssPrefix);	// Custom css prefix set
+			if(this.menuItemLayoutCss)this.menuItem_objects[this.menuItems[indexThis].id].setLayoutCss(this.menuItemLayoutCss);	// Custom css file name
+			
+			var ref = this.menuItem_objects[this.menuItems[indexThis].id].createItem(this.menuItems[indexThis]); // Create div for this menu item.
+		
+			// Actiave sub elements when someone moves the mouse over the menu item - exception: not on separators.
+			if(!this.menuItems[indexThis].separator)DHTMLSuite.commonObj.addEvent(ref,"mouseover",function(){ DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].__activateMenuElements(this,DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index],true); });	
+			
+			if(this.menuItem_objects[this.menuItems[indexThis].id].expandElement){	/* Small arrow at the right of the menu item exists - expand subs */
+				var expandRef = this.menuItem_objects[this.menuItems[indexThis].id].expandElement;	/* Creating reference to expand div/arrow div */
+				var parentId = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[index].menuItems[indexThis].parentId + '';	// Get parent id.
+				var tmpId = expandRef.id.replace(/[^0-9]/gi,'');
+				expandRef.setAttribute('objectRef',index);	/* saving the index of this object in the DHTMLSuite.variableStorage array as a property of the tag - We need to do this in order to avoid circular references and thus memory leakage in IE */
+				expandRef.objectRef = index;
+				expandRef.onclick = this.__changeMenuBarState;
+			}
+			var target = this.menuBarObj;	// Temporary variable - target of newly created menu item. target can be the main menu object or a sub menu group(see below where target is updated).
+
+			if(this.menuItems[indexThis].depth==1 && this.menuItemObj.submenuType[this.menuItems[indexThis].depth]!='top' && this.menuItemObj.mainMenuGroupWidth){	/* Main menu item group width set */
+				var tmpWidth = this.menuItemObj.mainMenuGroupWidth + '';
+				if(tmpWidth.indexOf('%')==-1)tmpWidth = tmpWidth + 'px';
+				target.style.width = tmpWidth;	
+			}
+		
+			if(this.menuItems[indexThis].depth=='1'){	/* Top level item */
+				if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='top'){	/* Type = "top" - menu items side by side */
+					ref.style.styleFloat = 'left';				
+					ref.style.cssText = 'float:left';						
+				}			
+			}else{
+				if(!this.menuItems[indexThis].depth){
+					alert('Error in menu model(depth not defined for a menu item). Remember to call the init() method for the menuModel object.');
+					return;
+				}
+				if(!this.submenuGroups[this.menuItems[indexThis].parentId]){	// Sub menu div doesn't exist - > Create it.
+					this.submenuGroups[this.menuItems[indexThis].parentId] = document.createElement('DIV');	
+					this.submenuGroups[this.menuItems[indexThis].parentId].style.zIndex = 10000;
+					this.submenuGroups[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarSubGroup' + this.menuItems[indexThis].parentId;
+					this.submenuGroups[this.menuItems[indexThis].parentId].style.visibility = 'hidden';	// Initially hidden.
+					if(this.menuItemObj.submenuType[this.menuItems[indexThis].depth]=='sub')this.submenuGroups[this.menuItems[indexThis].parentId].className = this.cssPrefix + 'menuBar_sub';
+					if(firstChild){
+						firstChild.parentNode.insertBefore(this.submenuGroups[this.menuItems[indexThis].parentId],firstChild);
+					}else{
+						document.body.appendChild(this.submenuGroups[this.menuItems[indexThis].parentId]);
+					}
+					
+					if(DHTMLSuite.clientInfoObj.isMSIE && this.createIframesForOldIeBrowsers){	// Create iframe object in order to conver select boxes in older IE browsers(windows).
+						this.submenuIframes[this.menuItems[indexThis].parentId] = document.createElement('<IFRAME src="about:blank" frameborder=0>');
+						this.submenuIframes[this.menuItems[indexThis].parentId].id = 'DHTMLSuite_menuBarIframe_' + this.menuItems[indexThis].parentId;
+						this.submenuIframes[this.menuItems[indexThis].parentId].style.position = 'absolute';
+						this.submenuIframes[this.menuItems[indexThis].parentId].style.zIndex = 9000;
+						this.submenuIframes[this.menuItems[indexThis].parentId].style.visibility = 'hidden';
+						if(firstChild){
+							firstChild.parentNode.insertBefore(this.submenuIframes[this.menuItems[indexThis].parentId],firstChild);
+						}else{
+							document.body.appendChild(this.submenuIframes[this.menuItems[indexThis].parentId]);
+						}						
+					}
+				}	
+				target = this.submenuGroups[this.menuItems[indexThis].parentId];	// Change target of newly created menu item. It should be appended to the sub menu div("A group box").				
+			}			
+			target.appendChild(ref); // Append menu item to the document.		
+			
+			if(this.menuItems[indexThis].visible == false)this.hideMenuItem(this.menuItems[indexThis].id);	// Menu item hidden, call the hideMenuItem method.
+			if(this.menuItems[indexThis].state != 'regular')this.menuItem_objects[this.menuItems[indexThis].id].setState(this.menuItems[indexThis].state);	// Menu item hidden, call the hideMenuItem method.
+
+		}	
+		
+
+		this.__setSizeOfAllSubMenus();	// Set size of all sub menu groups
+		this.__positionAllSubMenus();	// Position all sub menu groups.
+		if(DHTMLSuite.clientInfoObj.isOpera)this.__fixLayoutOpera();	// Call a function which fixes some layout issues in Opera.		
+	}
+	// }}}
+	,
+	// {{{ __fixLayoutOpera()
+    /**
+     *	A method used to fix the menu layout in Opera. 
+     *
+     *
+     * @private	
+     */		
+	__fixLayoutOpera : function()
+	{
+		for(var no=0;no<this.menuItemObj.menuItemsOrder.length;no++){
+			var id = this.menuItemObj.menuItemsOrder[no];
+			if(!id)continue;
+			this.menuItem_objects[id].divElement.className = this.menuItem_objects[id].divElement.className.replace('_regular','_regular');	// Nothing is done but by "touching" the class of the menu items in Opera, we make them appear correctly
+		}		
+	}
+	
+	// }}}	
+	,
+	// {{{ __setSizeOfAllSubMenus()
+    /**
+     *	*	Walk through all sub menu groups and call the positioning method for each one of them.
+     *
+     *
+     * @private	
+     */		
+	__setSizeOfAllSubMenus : function()
+	{		
+		for(var prop in this.submenuGroups){
+			this.__setSizeOfSubMenus(prop);
+		}			
+	}	
+	// }}}	
+	,	
+	// {{{ __positionAllSubMenus()
+    /**
+     *	Walk through all sub menu groups and call the positioning method for each one of them.
+     *
+     *
+     * @private	
+     */		
+	__positionAllSubMenus : function()
+	{
+		for(var prop in this.submenuGroups){
+			this.__positionSubMenu(prop);
+		}	
+		
+	}
+	// }}}	
+	,
+	// {{{ __positionSubMenu(parentId)
+    /**
+     *	Position a sub menu group
+     *
+     *	@param parentId  	
+     *
+     * @private	
+     */		
+	__positionSubMenu : function(parentId)
+	{
+		try{
+			var shortRef = this.submenuGroups[parentId];	
+			
+			var depth = this.menuItems[parentId].depth;
+			var dir = this.menuItemObj.submenuType[depth];
+			if(dir=='top'){			
+				shortRef.style.left = DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + 'px';
+				shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetHeight) + 'px';
+			}else{
+				shortRef.style.left = (DHTMLSuite.commonObj.getLeftPos(this.menuItem_objects[parentId].divElement) + this.menuItem_objects[parentId].divElement.offsetWidth) + 'px';
+				shortRef.style.top = (DHTMLSuite.commonObj.getTopPos(this.menuItem_objects[parentId].divElement)) + 'px';		
+			}	
+			
+			if(DHTMLSuite.clientInfoObj.isMSIE){
+				var iframeRef = this.submenuIframes[parentId]
+				iframeRef.style.left = shortRef.style.left;
+				iframeRef.style.top = shortRef.style.top;
+				iframeRef.style.width = shortRef.clientWidth + 'px';
+				iframeRef.style.height = shortRef.clientHeight + 'px';
+			}
+									
+		}catch(e){
+			
+		}		
+	}
+	// }}}	
+	,
+	// {{{ __setSizeOfSubMenus(parentId)
+    /**
+     *	Set size of a sub menu group
+     *
+     *	@param parentId  	
+     *
+     * @private	
+     */		
+	__setSizeOfSubMenus : function(parentId)
+	{
+		try{
+			var shortRef = this.submenuGroups[parentId];			
+			var subWidth = Math.max(shortRef.offsetWidth,this.menuItem_objects[parentId].divElement.offsetWidth);
+			if(this.menuItems[parentId].submenuWidth)subWidth = this.menuItems[parentId].submenuWidth;
+			subWidth = subWidth + '';
+			if(subWidth.indexOf('%')==-1)subWidth = subWidth + 'px';
+			shortRef.style.width = subWidth;	
+			
+			if(DHTMLSuite.clientInfoObj.isMSIE){
+				this.submenuIframes[parentId].style.width = shortRef.style.width;
+				this.submenuIFrames[parentId].style.height = shortRef.style.height;
+			}
+		}catch(e){
+			
+		}
+		
+	}
+	// }}}	
+	,
+	// {{{ __repositionMenu()
+    /**
+     *	Position menu items.
+     * 	
+     *
+     * @private	
+     */		
+	__repositionMenu : function(inputObj)
+	{
+		// self.status = this;
+		inputObj.menuBarObj.style.top = document.documentElement.scrollTop + 'px';
+		
+	}
+	
+	// }}}	
+	,
+	// {{{ __menuItemRollOver()
+    /**
+     *	Position menu items.
+     * 	
+     *
+     * @private	
+     */	
+	__menuItemRollOver : function(inputObj)
+	{
+		var numericId = inputObj.id.replace(/[^0-9]/g,'');
+		inputObj.className = 'DHTMLSuite_menuBar_menuItem_over_' + this.menuItems[numericId]['depth'];		
+	}
+	// }}}	
+	,	
+	// {{{ __menuItemRollOut()
+    /**
+     *	Position menu items.
+     * 	
+     *
+     * @private	
+     */	
+	__menuItemRollOut : function(inputObj)
+	{		
+		var numericId = inputObj.id.replace(/[^0-9]/g,'');
+		inputObj.className = 'DHTMLSuite_menuBar_menuItem_' + this.menuItems[numericId]['depth'];		
+	}
+	// }}}	
+	,
+	// {{{ __menuNavigate()
+    /**
+     *	Navigate by click on a menu item
+     * 	
+     *
+     * @private	
+     */	
+	__menuNavigate : function(inputObj)
+	{
+		var numericIndex = inputObj.id.replace(/[^0-9]/g,'');
+		var url = this.menuItems[numericIndex]['url'];
+		if(!url)return;
+		alert(this.menuItems[numericIndex]['url']);
+		
+	}
+	// }}}	
+	,
+	// {{{ __setBasicEvents()
+    /**
+     *	Set basic events for the menu widget.
+     * 	
+     *
+     * @private	
+     */	
+	__setBasicEvents : function()
+	{
+		DHTMLSuite.commonObj.addEvent(document.documentElement,"click",this.hideSubMenus);		
+	}
+}
+
+
diff --git a/locale/de/all b/locale/de/all
index 935a69070..086120f65 100644
--- a/locale/de/all
+++ b/locale/de/all
@@ -1103,7 +1103,7 @@ $self->{texts} = {
   'Prior to Lx-Office v2.4.0 the user had to chose the accounts for each part and service.' => 'Vor Lx-Office 2.4.0 musste der Benutzer die Konten bei jeder Ware und jeder Dienstleistung einzeln ausw&auml;hlen.',
   'Private E-mail'              => 'Private eMail',
   'Private Phone'               => 'Privates Tel.',
-  'Productivity'                => 'Produktivit&auml;t',
+  'Productivity'                => 'Produktivität',
   'Profit Center'               => 'Erfolgsbereich',
   'Proforma Invoice'            => 'Proformarechnung',
   'Programm'                    => 'Programm',
diff --git a/locale/de/menu b/locale/de/menu
index 2f9227aec..79c935783 100644
--- a/locale/de/menu
+++ b/locale/de/menu
@@ -136,7 +136,7 @@ $self->{texts} = {
   'Price Factors'               => 'Preisfaktoren',
   'Pricegroups'                 => 'Preisgruppen',
   'Printer'                     => 'Drucker',
-  'Productivity'                => 'Produktivit&auml;t',
+  'Productivity'                => 'Produktivität',
   'Programm'                    => 'Programm',
   'Projects'                    => 'Projekte',
   'Projecttransactions'         => 'Projektbuchungen',
diff --git a/locale/de/menunew b/locale/de/menunew
index aebe64d93..6246eac54 100644
--- a/locale/de/menunew
+++ b/locale/de/menunew
@@ -135,7 +135,7 @@ $self->{texts} = {
   'Price Factors'               => 'Preisfaktoren',
   'Pricegroups'                 => 'Preisgruppen',
   'Printer'                     => 'Drucker',
-  'Productivity'                => 'Produktivit&auml;t',
+  'Productivity'                => 'Produktivität',
   'Programm'                    => 'Programm',
   'Projects'                    => 'Projekte',
   'Projecttransactions'         => 'Projektbuchungen',
@@ -196,9 +196,10 @@ $self->{texts} = {
 
 $self->{subs} = {
   'acc_menu'                    => 'acc_menu',
+  'calculate_width'             => 'calculate_width',
   'clock_line'                  => 'clock_line',
+  'create_menu'                 => 'create_menu',
   'display'                     => 'display',
-  'section_menu'                => 'section_menu',
   'weiter'                      => 'continue',
 };
 
diff --git a/templates/webpages/menu/menunew_de.html b/templates/webpages/menu/menunew_de.html
new file mode 100644
index 000000000..9d5240340
--- /dev/null
+++ b/templates/webpages/menu/menunew_de.html
@@ -0,0 +1,102 @@
+[% USE HTML %]<body style="padding:0px; margin:0px;">
+
+ <script type="text/javascript">
+<!--
+function clockon() {
+  var now = new Date();
+  var h = now.getHours();
+  var m = now.getMinutes();
+  document.getElementById('clock_id').innerHTML = (h<10?'0'+h:h)+":"+(m<10?'0'+m:m);
+  var timer=setTimeout("clockon()", 10000);
+}
+window.onload=clockon
+//-->
+ </script>
+
+ <script type="text/javascript" src="js/dhtmlsuite/menu-for-applications.js"></script>
+
+ <table border="0" width="100%" background="image/bg_titel.gif" cellpadding="0" cellspacing="0">
+  <tr>
+   <td style="color:white; font-family:verdana,arial,sans-serif; font-size: 12px;">
+    &nbsp;
+    [<a href="menuv3.pl?action=display" target="_blank">neues Fenster</a>]
+    &nbsp;
+    [<a href="JavaScript:top.main_window.print()">drucken</a>]
+   </td>
+   <td align="right" style="vertical-align:middle; color:white; font-family:verdana,arial,sans-serif; font-size: 12px;" nowrap>
+    [Benutzer: [% HTML.escape(login) %] -
+    <a href="login.pl?action=logout" target="_top">abmelden</a>]
+    [% date %] <span id='clock_id' style='position:relative'></span>&nbsp;
+   </td>
+  </tr>
+ </table>
+
+ <div id="main_menu_div"></div>
+
+ [%- SET main_id = '100' %]
+ <ul id="main_menu_model">
+ [%- FOREACH mainitem = menu_items %]
+  [%- SET main_id = main_id + 1 %]
+  <li id="[% main_id %]">
+   <a href="[% IF mainitem.href %][% mainitem.href %][% ELSE %]#[% END %]"[% IF mainitem.target %] target="[% mainitem.target %]"[% END %]>
+    [%- HTML.escape(mainitem.title) %]
+   </a>
+   [%- IF mainitem.subitems %]
+    <ul[%- IF force_ul_width %] width="[% mainitem.max_width * 12 %]"[% END %]>
+     [%- SET sub1_id = main_id * 100 %]
+     [%- FOREACH sub1item = mainitem.subitems %]
+      [%- SET sub1_id = sub1_id + 1 %]
+      <li id="[% sub1_id %]">
+       <a href="[% IF sub1item.href %][% sub1item.href %][% ELSE %]#[% END %]"[% IF sub1item.target %] target="[% sub1item.target %]"[% END %]>
+        [%- HTML.escape(sub1item.title) %]
+       </a>
+       [%- IF sub1item.subitems %]
+        <ul[%- IF force_ul_width %] width="[% sub1item.max_width * 12 %]"[% END %]>
+         [%- SET sub2_id = sub1_id * 100 %]
+         [%- FOREACH sub2item = sub1item.subitems %]
+          [%- SET sub2_id = sub2_id + 1 %]
+          <li id="[% sub2_id %]">
+           <a href="[% IF sub2item.href %][% sub2item.href %][% ELSE %]#[% END %]"[% IF sub2item.target %] target="[% sub2item.target %]"[% END %]>
+            [%- HTML.escape(sub2item.title) %]
+           </a>
+          </li>
+         [%- END %]
+        </ul>
+       [%- END %]
+      </li>
+     [%- END %]
+    </ul>
+   [%- END %]
+  </li>
+ [%- END %]
+ </ul>
+
+ <script type="text/javascript">
+  <!--
+
+DHTMLSuite.createStandardObjects();
+
+DHTMLSuite.configObj.setCssPath('css/dhtmlsuite/');
+DHTMLSuite.configObj.setImagePath('image/dhtmlsuite/');
+
+var menu_model = new DHTMLSuite.menuModel();
+menu_model.addItemsFromMarkup('main_menu_model');
+menu_model.init();
+
+var menu_bar = new DHTMLSuite.menuBar();
+menu_bar.addMenuItems(menu_model);
+menu_bar.setTarget('main_menu_div');
+menu_bar.init();
+
+function open_url(url, target) {
+
+}
+
+    -->
+ </script>
+
+ <iframe id="win1" src="login.pl?action=company_logo" width="100%" height="94%" name="main_window" style="position: absolute; border: 0px; z-index: 99; ">
+  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen. Bitte w&auml;hlen Sie ein anderes Men&uuml; in der Benutzerkonfiguration im Administrationsmen&uuml; aus.</p>
+ </iframe>
+</body>
+</html>
diff --git a/templates/webpages/menu/menunew_master.html b/templates/webpages/menu/menunew_master.html
new file mode 100644
index 000000000..c21c6529a
--- /dev/null
+++ b/templates/webpages/menu/menunew_master.html
@@ -0,0 +1,102 @@
+[% USE HTML %]<body style="padding:0px; margin:0px;">
+
+ <script type="text/javascript">
+<!--
+function clockon() {
+  var now = new Date();
+  var h = now.getHours();
+  var m = now.getMinutes();
+  document.getElementById('clock_id').innerHTML = (h<10?'0'+h:h)+":"+(m<10?'0'+m:m);
+  var timer=setTimeout("clockon()", 10000);
+}
+window.onload=clockon
+//-->
+ </script>
+
+ <script type="text/javascript" src="js/dhtmlsuite/menu-for-applications.js"></script>
+
+ <table border="0" width="100%" background="image/bg_titel.gif" cellpadding="0" cellspacing="0">
+  <tr>
+   <td style="color:white; font-family:verdana,arial,sans-serif; font-size: 12px;">
+    &nbsp;
+    [<a href="menuv3.pl?action=display" target="_blank"><translate>new Window</translate></a>]
+    &nbsp;
+    [<a href="JavaScript:top.main_window.print()"><translate>print</translate></a>]
+   </td>
+   <td align="right" style="vertical-align:middle; color:white; font-family:verdana,arial,sans-serif; font-size: 12px;" nowrap>
+    [<translate>User</translate>: [% HTML.escape(login) %] -
+    <a href="login.pl?action=logout" target="_top"><translate>logout</translate></a>]
+    [% date %] <span id='clock_id' style='position:relative'></span>&nbsp;
+   </td>
+  </tr>
+ </table>
+
+ <div id="main_menu_div"></div>
+
+ [%- SET main_id = '100' %]
+ <ul id="main_menu_model">
+ [%- FOREACH mainitem = menu_items %]
+  [%- SET main_id = main_id + 1 %]
+  <li id="[% main_id %]">
+   <a href="[% IF mainitem.href %][% mainitem.href %][% ELSE %]#[% END %]"[% IF mainitem.target %] target="[% mainitem.target %]"[% END %]>
+    [%- HTML.escape(mainitem.title) %]
+   </a>
+   [%- IF mainitem.subitems %]
+    <ul[%- IF force_ul_width %] width="[% mainitem.max_width * 12 %]"[% END %]>
+     [%- SET sub1_id = main_id * 100 %]
+     [%- FOREACH sub1item = mainitem.subitems %]
+      [%- SET sub1_id = sub1_id + 1 %]
+      <li id="[% sub1_id %]">
+       <a href="[% IF sub1item.href %][% sub1item.href %][% ELSE %]#[% END %]"[% IF sub1item.target %] target="[% sub1item.target %]"[% END %]>
+        [%- HTML.escape(sub1item.title) %]
+       </a>
+       [%- IF sub1item.subitems %]
+        <ul[%- IF force_ul_width %] width="[% sub1item.max_width * 12 %]"[% END %]>
+         [%- SET sub2_id = sub1_id * 100 %]
+         [%- FOREACH sub2item = sub1item.subitems %]
+          [%- SET sub2_id = sub2_id + 1 %]
+          <li id="[% sub2_id %]">
+           <a href="[% IF sub2item.href %][% sub2item.href %][% ELSE %]#[% END %]"[% IF sub2item.target %] target="[% sub2item.target %]"[% END %]>
+            [%- HTML.escape(sub2item.title) %]
+           </a>
+          </li>
+         [%- END %]
+        </ul>
+       [%- END %]
+      </li>
+     [%- END %]
+    </ul>
+   [%- END %]
+  </li>
+ [%- END %]
+ </ul>
+
+ <script type="text/javascript">
+  <!--
+
+DHTMLSuite.createStandardObjects();
+
+DHTMLSuite.configObj.setCssPath('css/dhtmlsuite/');
+DHTMLSuite.configObj.setImagePath('image/dhtmlsuite/');
+
+var menu_model = new DHTMLSuite.menuModel();
+menu_model.addItemsFromMarkup('main_menu_model');
+menu_model.init();
+
+var menu_bar = new DHTMLSuite.menuBar();
+menu_bar.addMenuItems(menu_model);
+menu_bar.setTarget('main_menu_div');
+menu_bar.init();
+
+function open_url(url, target) {
+
+}
+
+    -->
+ </script>
+
+ <iframe id="win1" src="login.pl?action=company_logo" width="100%" height="94%" name="main_window" style="position: absolute; border: 0px; z-index: 99; ">
+  <p><translate>MSG_BROWSER_DOES_NOT_SUPPORT_IFRAMES</translate></p>
+ </iframe>
+</body>
+</html>