From 2c757d7db4cb6a7b9655de13206fcc84fb7ce61f Mon Sep 17 00:00:00 2001
From: ivan <ivan>
Date: Sun, 14 May 2006 16:47:31 +0000
Subject: first part of ACL and re-skinning work and some other small stuff

---
 httemplate/elements/checkboxes-table.html       | 110 ++++
 httemplate/elements/cssexpr.js                  |  66 +++
 httemplate/elements/footer.html                 |   3 +
 httemplate/elements/header.html                 | 289 +++++++++-
 httemplate/elements/menubar.html                |   1 +
 httemplate/elements/select-access_group.html    |  15 +
 httemplate/elements/tr-select-access_group.html |  22 +
 httemplate/elements/xmenu.css                   | 185 +++++++
 httemplate/elements/xmenu.js                    | 668 ++++++++++++++++++++++++
 9 files changed, 1347 insertions(+), 12 deletions(-)
 create mode 100644 httemplate/elements/checkboxes-table.html
 create mode 100644 httemplate/elements/cssexpr.js
 create mode 100644 httemplate/elements/select-access_group.html
 create mode 100644 httemplate/elements/tr-select-access_group.html
 create mode 100644 httemplate/elements/xmenu.css
 create mode 100644 httemplate/elements/xmenu.js

(limited to 'httemplate/elements')

diff --git a/httemplate/elements/checkboxes-table.html b/httemplate/elements/checkboxes-table.html
new file mode 100644
index 000000000..d26ebef35
--- /dev/null
+++ b/httemplate/elements/checkboxes-table.html
@@ -0,0 +1,110 @@
+<%
+
+  ##
+  # required
+  ##
+  # 'target_table'    => 'table_name',
+  # 'link_table'      => 'table_name',
+  #
+  # 'name_col' => 'name_column',
+  # #or
+  # 'name_callback' => sub { },
+  #
+  ##
+  # recommended (required?)
+  ##
+  # 'source_obj'   => $obj,
+  # #or?
+  # #'source_table' => 'table_name',
+  # #'sourcenum'    => '4', #current value of primary key in source_table
+  # #                       # (none is okay, just pass it if you have it)
+  ##
+  # optional
+  ##
+  # 'disable-able' => 1,
+
+  my( %opt ) = @_;
+
+  my $target_pkey = dbdef->table($opt{'target_table'})->primary_key;
+
+  my( $source_pkey, $sourcenum, $source_obj );
+  if ( $opt{'source_obj'} ) {
+
+    $source_obj = $opt{'source_obj'};
+    #$source_table = $source_obj->dbdef_table->table;
+    $source_pkey = $source_obj->dbdef_table->primary_key;
+    $sourcenum = $source_obj->$source_pkey();
+
+  } else {
+
+    #$source_obj?
+    $source_pkey = $opt{'source_table'}
+                     ? dbdef->table($opt{'source_table'})->primary_key
+                     : '';
+    $sourcenum = $opt{'sourcenum'};
+  }
+
+  my $hashref = $opt{'hashref'} || {};
+
+  my $extra_sql = '';
+
+  if ( $opt{'disable-able'} ) {
+    $hashref->{'disabled'} = '';
+
+    $extra_sql .= ( $sourcenum && $source_pkey ) 
+                    ? "OR $source_pkey = $sourcenum"
+                    : '';
+  }
+
+%>
+
+<% foreach my $target_obj (
+     qsearch({ 'table'     => $opt{'target_table'},
+               'hashref'   => $hashref,
+               'select'    => $opt{'target_table'}. '.*',
+               'addl_from' => "LEFT JOIN $opt{'link_table'} USING ( $target_pkey )",
+               'extra_sql' => $extra_sql,
+            })
+   ) {
+
+     my $targetnum = $target_obj->$target_pkey();
+%>
+
+  <INPUT TYPE="checkbox" NAME="<%= $target_pkey. $targetnum %>" <%=
+        qsearchs( $opt{'link_table'}, {
+          $source_pkey => $sourcenum,
+          $target_pkey => $targetnum,
+        })
+          ? 'CHECKED '
+          : ''
+  %> VALUE="ON">
+
+  <% if ( $opt{'target_link'} ) { %>
+
+    <A HREF="<%= $opt{'target_link'} %><%= $targetnum %>"><%
+
+  }
+  %><%= $targetnum %>: 
+
+  <% if ( $opt{'name_callback'} ) { %>
+
+    <%= &{ $opt{'name_callback'} }( $target_obj ) %><%= $opt{'target_link'} ? '</A>' : '' %>
+
+  <% } else {
+       my $name_col = $opt{'name_col'};
+  %>
+
+    <%= $target_obj->$name_col() %><%= $opt{'target_link'} ? '</A>' : '' %>
+
+  <% } %>
+
+  <% if ( $opt{'disable-able'} ) { %>
+
+    <%= $target_obj->disabled =~ /^Y/i ? ' (DISABLED)' : '' %>
+
+  <% } %>
+
+  <BR>
+
+<% } %>
+
diff --git a/httemplate/elements/cssexpr.js b/httemplate/elements/cssexpr.js
new file mode 100644
index 000000000..c434d8da0
--- /dev/null
+++ b/httemplate/elements/cssexpr.js
@@ -0,0 +1,66 @@
+function constExpression(x) {
+	return x;
+}
+
+function simplifyCSSExpression() {
+	try {
+		var ss,sl, rs, rl;
+		ss = document.styleSheets;
+		sl = ss.length
+	
+		for (var i = 0; i < sl; i++) {
+			simplifyCSSBlock(ss[i]);
+		}
+	}
+	catch (exc) {
+		//alert("Got an error while processing css. The page should still work but might be a bit slower");
+		throw exc;
+	}
+}
+
+function simplifyCSSBlock(ss) {
+	var rs, rl;
+	
+	for (var i = 0; i < ss.imports.length; i++)
+		simplifyCSSBlock(ss.imports[i]);
+	
+	if (ss.cssText.indexOf("expression(constExpression(") == -1)
+		return;
+
+	rs = ss.rules;
+	rl = rs.length;
+	for (var j = 0; j < rl; j++)
+		simplifyCSSRule(rs[j]);
+	
+}
+
+function simplifyCSSRule(r) {
+	var str = r.style.cssText;
+	var str2 = str;
+	var lastStr;
+	do {
+		lastStr = str2;
+		str2 = simplifyCSSRuleHelper(lastStr);
+	} while (str2 != lastStr)
+
+	if (str2 != str)
+		r.style.cssText = str2;
+}
+
+function simplifyCSSRuleHelper(str) {
+	var i, i2;
+	i = str.indexOf("expression(constExpression(");
+	if (i == -1) return str;
+	i2 = str.indexOf("))", i);
+	var hd = str.substring(0, i);
+	var tl = str.substring(i2 + 2);
+	var exp = str.substring(i + 27, i2);
+	var val = eval(exp)
+	return hd + val + tl;
+}
+
+if (/msie/i.test(navigator.userAgent) && window.attachEvent != null) {
+	window.attachEvent("onload", function () {
+		simplifyCSSExpression();
+	});
+}
diff --git a/httemplate/elements/footer.html b/httemplate/elements/footer.html
index 6029d7637..32d121996 100644
--- a/httemplate/elements/footer.html
+++ b/httemplate/elements/footer.html
@@ -1,2 +1,5 @@
+        </TD>
+      </TR>
+    </TABLE>
   </BODY>
 </HTML>
diff --git a/httemplate/elements/header.html b/httemplate/elements/header.html
index 10e4e40f1..49814577e 100644
--- a/httemplate/elements/header.html
+++ b/httemplate/elements/header.html
@@ -2,20 +2,285 @@
   my($title, $menubar) = ( shift, shift );
   my $etc = @_ ? shift : ''; #$etc is for things like onLoad= etc.
   my $head = @_ ? shift : ''; #$head is for things that go in the <HEAD> section
+  my $conf = new FS::Conf;
 %>
-    <HTML>
-      <HEAD>
-        <TITLE>
-          <%= $title %>
-        </TITLE>
-        <META HTTP-Equiv="Cache-Control" Content="no-cache">
-        <META HTTP-Equiv="Pragma" Content="no-cache">
-        <META HTTP-Equiv="Expires" Content="0"> 
-        <%= $head %>
-      </HEAD>
-      <BODY BGCOLOR="#e8e8e8"<%= $etc %>>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+  <HEAD>
+    <TITLE>
+      <%= $title %>
+    </TITLE>
+    <META HTTP-Equiv="Cache-Control" Content="no-cache">
+    <META HTTP-Equiv="Pragma" Content="no-cache">
+    <META HTTP-Equiv="Expires" Content="0"> 
+    <script type="text/javascript" src="<%=$fsurl%>elements/cssexpr.js"></script>
+    <script type="text/javascript" src="<%=$fsurl%>elements/xmenu.js"></script>
+    <link href="<%=$fsurl%>elements/xmenu.css" type="text/css" rel="stylesheet">
+    <%
+
+      tie my %report_menu, 'Tie::IxHash',
+        'Report one' => [ 'there', 'theretip' ],
+        'Report too' => [ 'here',  'heretip'  ],
+      ;
+
+      tie my %config_employees, 'Tie::IxHash',
+        'View/Edit employees' => [ $fsurl.'browse/access_user.html', 'Setup internal users' ],
+        'View/Edit employee groups' => [ $fsurl.'browse/access_group.html', 'Employee groups allow you to control access to the backend' ],
+      ;
+
+      tie my %config_export_svc_pkg, 'Tie::IxHash',
+        'View/Edit exports'             => [ $fsurl.'browse/part_export.cgi', 'Provisioning services to external machines, databases and APIs' ],
+        'View/Edit service definitions' => [ $fsurl.'browse/part_svc.cgi', 'Services are items you offer to your customers' ],
+        'View/Edit package definitions' => [ $fsurl.'browse/part_pkg.cgi', 'One or more services are grouped together into a package and given pricing information. Customers purchase packages, not services' ],
+        'View/Edit package classes'     => [ $fsurl.'browse/pkg_class.html', 'Package classes define groups of packages, for reporting and convenience purposes.' ],
+      ;
+
+      tie my %config_agent, 'Tie::IxHash',
+        'View/Edit agent types' => [ $fsurl.'browse/agent_type.cgi', 'Agent types define groups of package definitions that you can then assign to particular agents' ],
+        'View/Edit agents'      => [ $fsurl.'browse/agent.cgi', 'Agents are resellers of your service. Agents may be limited to a subset of your full offerings (via their type)' ],
+      ;
+
+      tie my %config_billing, 'Tie::IxHash',
+        'View/Edit payment gateways'         => [ $fsurl.'browse/payment_gateway.html', 'Credit card and electronic check processors' ],
+        'View/Edit invoice events'           => [ $fsurl.'browse/part_bill_event.cgi', 'Actions for overdue invoices' ],
+        'View/Edit prepaid cards'            => [ $fsurl.'browse/prepay_credit.html', 'View outstanding cards, generate new cards' ],
+        'View/Edit call rates and regions'   => [ $fsurl.'browse/rate.cgi', 'Manage rate plans, regions and prefixes for VoIP and call billing' ],
+        'View/Edit locales and tax rates'    => [ $fsurl.'browse/cust_main_county.cgi', 'Change tax rates, or break down a country into states, or a state into counties and assign different tax rates to each' ],
+      ;
+
+      tie my %config_dialup, 'Tie::IxHash',
+        'View/Edit access numbers' => [ $fsurl.'browse/svc_acct_pop.cgi', 'Points of Presence' ],
+      ;
+
+      tie my %config_broadband, 'Tie::IxHash',
+        'View/Edit routers'        => [ $fsurl.'browse/router.cgi', 'Broadband access routers' ],
+        'View/Edit address blocks' => [ $fsurl.'browse/addr_block.cgi', 'Manage address blocks and block assignments to broadband routers' ],
+      ;
+
+      tie my %config_misc, 'Tie::IxHash',
+        'View/Edit advertising sources' => [ $fsurl.'browse/part_referral.cgi', 'Where a customer heard about your service.  Tracked for informational purposes' ],
+        'View/Edit virtual fields' => [ $fsurl.'browse/part_virtual_field.cgi', 'Locally defined fields', ],
+        'View/Edit message catalog' => [ $fsurl.'browse/msgcat.cgi', 'Change error messages and other customizable labels' ],
+        'View/Edit inventory classes and inventory' => [ $fsurl.'browse/inventory_class.html', 'Setup inventory classes and stock inventory' ],
+      ;
+
+      tie my %config_menu, 'Tie::IxHash',
+        'Settings'      => [ $fsurl.'config/config-view.cgi', 'XXXconfigittip' ],
+        'separator'     => '', #its a separator!
+        'Employees'     => [ \%config_employees, 'XXXtooltip' ],
+        'Provisioning, services and packages'
+                        => [ \%config_export_svc_pkg, 'XXXtootip'    ],
+        'Resellers'     => [ \%config_agent, 'XXXtootip'    ],
+        'Billing'       => [ \%config_billing, 'XXXtootip'    ],
+        'Dialup'        => [ \%config_dialup, 'XXXtootip'    ],
+        'Fixed (username-less) broadband'
+                        => [ \%config_broadband, 'XXXtootip'    ],
+        'Miscellaneous' => [ \%config_misc, 'XXXtootip'    ],
+      ;
+
+      tie my %menu, 'Tie::IxHash',
+        'Home'          => [ $fsurl, 'hometip', ],
+        'Top item one'  => [ 'nowhere_yet', 'nowheretip', ],
+        'Top item too'  => [ 'nowhere_yet_either', 'eithertip', ],
+        'Reports'       => [ \%report_menu, 'reportmenutip' ],
+        'Configuration' => [ \%config_menu, 'configmenutip' ],
+      ;
+
+      use vars qw($gmenunum);
+      $gmenunum = 0;
+
+      sub submenu {
+        my($submenu, $title) = @_;
+        my $menunum = $gmenunum++;
+
+        #return two args: html, menuname
+
+        "var myMenu$menunum = new WebFXMenu;\n".
+        #"myMenu$menunum.useAutoPosition = true;\n".
+        "myMenu$menunum.emptyText = '$title';\n".
+
+        (
+          join("\n", map {
+  
+            if ( !ref( $submenu->{$_} ) ) {
+  
+              "myMenu$menunum.add(new WebFXMenuSeparator());";
+  
+            } else {
+  
+              my($url_or_submenu, $tooltip ) = @{ $submenu->{$_} };
+              if ( ref($url_or_submenu) ) {
+  
+                my($subhtml, $submenuname ) = submenu($url_or_submenu, $_); #mmm, recursion
+  
+                "$subhtml\n".
+                "myMenu$menunum.add(new WebFXMenuItem(\"$_\", null, \"$tooltip\", $submenuname ));";
+  
+              } else {
+  
+                "myMenu$menunum.add(new WebFXMenuItem(\"$_\", \"$url_or_submenu\", \"$tooltip\" ));";
+  
+              }
+  
+            }
+  
+          } keys %$submenu )
+        ). "\n".
+        "myMenu$menunum.width = 224\n",
+
+        "myMenu$menunum";
+
+      }
+
+    %>
+    <SCRIPT TYPE="text/javascript">
+
+      webfxMenuImagePath      = "<%=$fsurl%>images/";
+      webfxMenuUseHover       = 1;
+      webfxMenuShowTime       = 300;
+      webfxMenuHideTime       = 500;
+
+      var myBar = new WebFXMenuBar;
+
+      <% foreach my $item ( keys %menu ) {
+
+           my( $url_or_submenu, $tooltip ) = @{ $menu{$item} };
+
+           if ( ref($url_or_submenu) ) {
+
+             warn $item;
+
+             my( $subhtml, $submenuname ) = submenu($url_or_submenu, $item);
+
+      %>
+
+             <%= $subhtml %>
+             myBar.add(new WebFXMenuButton("<%= $item %>", null, "<%= $tooltip %>", <%= $submenuname %> ));
+
+      <%   } else { %>
+        
+             myBar.add(new WebFXMenuButton("<%= $item %>", "<%= $url_or_submenu %>", "<%= $tooltip %>" ));
+
+      <%   }
+
+        }
+      %>
+
+      myBar.show( null, 'vertical' );
+      //myBar.show( null, 'horizontal' );
+
+      //var myMenu = new WebFXMenu;
+      //myMenu.add(new WebFXMenuItem("Menu Item 1", "http://www.domain.com", "Tool tip to show"));
+      //myMenu.add(new WebFXMenuSeparator());
+      //myMenu.add(new WebFXMenuItem("Menu Item 2", "http://www.domain.com", "Tool tip to show"));
+      
+      //var mySubMenu = new WebFXMenu;
+      //mySubMenu.add(new WebFXMenuItem("Menu Item 3", "http://www.domain.com", "Tool tip to show"));
+      //myMenu.add(new WebFXMenuItem("Menu Item 4 with sub menu", null, "Tool tip to show", mySubMenu));
+
+      myBar.width = 154;
+
+    </SCRIPT>
+
+    <SCRIPT TYPE="text/javascript">
+      function clearhint_search_cust () {
+        alert(this);
+        if ( this.value='(cust #, name or company)' )
+          this.value = '';
+      }
+    </SCRIPT>
+
+    <%= $head %>
+
+  </HEAD>
+  <BODY BACKGROUND="<%=$fsurl%>images/background-cheat.png" <%= $etc %> STYLE="margin-top:0; margin-bottom:0; margin-left:0; margin-right:0">
+    <table width="100%" CELLPADDING=0 CELLSPACING=0 STYLE="padding-left:0; padding-right:4">
+      <tr>
+        <td rowspan=2 BGCOLOR="#ffffff">
+          <IMG BORDER=0 ALT="freeside" SRC="<%=$fsurl%>images/small-logo.png">
+        </td>
+        <td align=left rowspan=2 BGCOLOR="#ffffff"> <!-- valign="top" -->
+          <font size=6><%= $conf->config('company_name') %> Billing</font>
+        </td>
+        <td align=right valign=top BGCOLOR="#ffffff">Logged in as <b><%= getotaker %>&nbsp</b><br><FONT SIZE="-2"><a href="<%=$fsurl%>pref/XXXwritethis">Preferences</a>&nbsp;<BR><BR></FONT>
+        </td>
+      </tr>
+      <tr>
+        <td align=right valign=bottom BGCOLOR="#ffffff">
+  
+          <table>
+            <tr>
+              <td align=right BGCOLOR="#ffffff">
+                <FONT SIZE="-2">
+                 <A HREF="http://www.sisd.com/freeside">Freeside</A>&nbsp;v<%= $FS::VERSION %><BR>
+                 <A HREF="<%= $fsurl %>docs/">Documentation</A><BR>
+                </FONT>
+              </td>
+              <% if ( $conf->config('ticket_system') eq 'RT_Internal' ) { %>
+              <% eval "use RT;"; %>
+                <td bgcolor=#000000></td>
+                <td align=left>
+                  <FONT SIZE="-2">
+                   <A HREF="http://www.bestpractical.com/rt">RT<A>&nbsp;v<%= $RT::VERSION %><BR>
+                   <A HREF="http://wiki.bestpractical.com/">Documentation</A><BR>
+                  </FONT>
+                </td>
+              <% } %>
+  
+            </tr>
+          </table>
+  
+        </td>
+      </tr>
+    </table>
+
+    <TABLE WIDTH="100%" CELLSPACING=0 CELLPADDING=4>
+      <TR>
+        <TD COLSPAN=4 WIDTH="100%" STYLE="padding:0"><IMG BORDER=0 ALT="" SRC="<%=$fsurl%>images/black-gradient.png" HEIGHT="13" WIDTH="100%"></TD>
+      </TR>
+      <TR>
+        <TD COLSPAN=1 BGCOLOR="#000000" WIDTH="154">
+        </TD>
+        <TD COLSPAN=1 BGCOLOR="#000000" ALIGN="right">
+          <FORM ACTION="<%=$fsurl%>edit/cust_main.cgi" METHOD="GET" STYLE="margin:0">
+            <INPUT TYPE="submit" VALUE="New customer">
+          </FORM>
+        </TD>
+        <TD COLSPAN=1 BGCOLOR="#000000" ALIGN="right">
+          <FORM ACTION="<%=$fsurl%>search/cust_main.cgi" METHOD="GET" STYLE="margin:0">
+            <INPUT NAME="search_cust" TYPE="text" VALUE="(cust #, name or company)" SIZE="23" onFocus="clearhint_search_cust" onClick="clearhint_search_cust">
+            <INPUT TYPE="submit" VALUE="Search customers">
+          </FORM>
+        </TD>
+        <TD COLSPAN=1 BGCOLOR="#000000" ALIGN="right">
+          <FORM ACTION="<%=$fsurl%>rt/index.html" METHOD="GET" STYLE="margin:0">
+            <INPUT NAME="q" TYPE="text" VALUE="" onFocus="clearhint_search_ticket" onClick="clearhint_search_ticket">
+            <INPUT TYPE="submit" VALUE="Search tickets">
+          </FORM>
+        </TD>
+      </TR>
+    </TABLE>
+    <TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING=0 CELLPADDING=4>
+      <TR>
+        <TD BGCOLOR="#000000" STYLE="padding:0" WIDTH="154"></TD>
+        <TD STYLE="padding:0" WIDTH="13"><IMG BORDER=0 ALT="" SRC="<%=$fsurl%>images/black-gray-corner.png"></TD>
+        <TD STYLE="padding:0"><IMG BORDER=0 ALT="" SRC="<%=$fsurl%>images/black-gray-top.png" HEIGHT="13" WIDTH="100%"></TD>
+      </TR>
+      <TR HEIGHT="100%">
+        <TD BGCOLOR="#000000" ALIGN="left" HEIGHT="100%" WIDTH="154" VALIGN="top" ALIGN="right">
+          <SCRIPT TYPE="text/javascript">
+            document.write(myBar);
+          </SCRIPT>
+          <BR>
+          <IMG SRC="<%=$fsurl%>images/32clear.gif" HEIGHT="1" WIDTH="154">
+
+        </TD>
+        <TD STYLE="padding:0" HEIGHT="100%" WIDTH=13 VALIGN="top"><IMG WIDTH="13" HEIGHT="100%" BORDER=0 ALT="" SRC="<%=$fsurl%>images/black-gray-side.png"></TD>
+        <TD BGCOLOR="#e8e8e8" HEIGHT="100%"> <!-- WIDTH="100%"> -->
+
           <FONT SIZE=6>
             <%= $title %>
           </FONT>
+
           <BR><BR>
-          <%= $menubar ? "$menubar<BR><BR>" : '' %>
+          <%= $menubar !~ /^\s*$/ ? "$menubar<BR><BR>" : '' %>
diff --git a/httemplate/elements/menubar.html b/httemplate/elements/menubar.html
index 87a50312c..29facb6b6 100644
--- a/httemplate/elements/menubar.html
+++ b/httemplate/elements/menubar.html
@@ -2,6 +2,7 @@
   my($item, $url, @html);
   while (@_) {
     ($item, $url) = splice(@_,0,2);
+    next if $item =~ /^\s*Main\s+Menu\s*$/i;
     push @html, qq!<A HREF="$url">$item</A>!;
   }
 %>
diff --git a/httemplate/elements/select-access_group.html b/httemplate/elements/select-access_group.html
new file mode 100644
index 000000000..b05f565ea
--- /dev/null
+++ b/httemplate/elements/select-access_group.html
@@ -0,0 +1,15 @@
+<% 
+  my( $groupnum, %opt ) = @_;
+
+  %opt{'records'} = delete $opt{'access_group'}
+    if $opt{'access_group'};
+
+%><%= include( '/elements/select-table.html',
+                 'table'       => 'access_group',
+                 'name_col'    => 'groupname',
+                 'value'       => $groupnum,
+                 'empty_label' => '(none)',
+                 #'hashref'     => { 'disabled' => '' },
+                 %opt,
+             )
+%>
diff --git a/httemplate/elements/tr-select-access_group.html b/httemplate/elements/tr-select-access_group.html
new file mode 100644
index 000000000..0beec0842
--- /dev/null
+++ b/httemplate/elements/tr-select-access_group.html
@@ -0,0 +1,22 @@
+<%
+  my( $groupnum, %opt ) = @_;
+
+  $opt{'access_group'} ||= [ qsearch( 'access_group', {} ) ]; # { disabled=>'' } )
+
+  #warn "***** tr-select-access_group: \n". Dumper(%opt);
+%>
+
+<% if ( scalar(@{ $opt{'access_group'} }) == 0 ) { %>
+
+  <INPUT TYPE="hidden" NAME="groupnum" VALUE="">
+
+<% } else { %>
+
+  <TR>
+    <TD ALIGN="right"><%= $opt{'label'} || 'Access group' %></TD>
+    <TD>
+      <%= include( '/elements/select-access_group.html', $groupnum, %opt ) %>
+    </TD>
+  </TR>
+
+<% } %>
diff --git a/httemplate/elements/xmenu.css b/httemplate/elements/xmenu.css
new file mode 100644
index 000000000..5bb8a0deb
--- /dev/null
+++ b/httemplate/elements/xmenu.css
@@ -0,0 +1,185 @@
+
+.webfx-menu, .webfx-menu * {
+	/*
+	Set the box sizing to content box
+	in the future when IE6 supports box-sizing
+	there will be an issue to fix the sizes
+
+	There is probably an issue with IE5 mac now
+	because IE5 uses content-box but the script
+	assumes all versions of IE uses border-box.
+
+	At the time of this writing mozilla did not support
+	box-sizing for absolute positioned element.
+
+	Opera only supports content-box
+	*/
+	box-sizing:			content-box;
+	-moz-box-sizing:	content-box;
+}
+
+.webfx-menu {
+	position:		absolute;
+	z-index:		100;
+	visibility:		hidden;
+	width:			154px;
+	border:			1px solid black;
+	padding:		1px;
+	background:		white;
+	filter:			progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=4)
+				alpha(Opacity=95);
+	-moz-opacity:		0.95;
+	/* a drop shadow would be nice in moz/others too... */
+}
+
+.webfx-menu-empty {
+	display:		block;
+	border:			1px solid white;
+	padding:		2px 5px 2px 5px;
+	font-size:		11px;
+	/* font-family:		Tahoma, Verdan, Helvetica, Sans-Serif; */
+	color:			black;
+}
+
+.webfx-menu a {
+	display:		block;
+	width:			expression(constExpression(ieBox ? "100%": "auto"));	/* should be ignored by mz and op */
+	height:			expression(constExpression("1px"));
+	overflow:		visible;	
+	padding:		2px 0px 2px 5px;
+	font-size:		11px;
+	font-family:		Tahoma, Verdan, Helvetica, Sans-Serif;
+	text-decoration:	none;
+	vertical-align:		center;
+	color:			black;
+	border:			1px solid white;
+}	
+
+.webfx-menu a:visited,
+.webfx-menu a:visited:hover {
+	color:			black;
+}
+
+.webfx-menu a:hover {
+	color:			black;
+	/* background:		#faf7fa; #f5ebf4; #efdfef; white; #BC79B8; */
+	/* background:		#ffe6fe; */
+	/* background:		#ffc2fe; */
+	background:		#fff2fe;
+	border:			1px solid #7e0079; /*rgb(120,172,255);#ff8800;*/
+}	
+
+.webfx-menu a .arrow {
+	float:			right;
+	border:			0;
+	width:			3px;
+	margin-right:	3px;
+	margin-top:		4px;
+}
+
+/* separtor */
+.webfx-menu div {
+	height:			0;
+	height:			expression(constExpression(ieBox ? "2px" : "0"));
+	border-top:		1px solid #7e0079; /* rgb(120,172,255); */
+	border-bottom:	1px solid rgb(234,242,255);
+	overflow:		hidden;
+	margin:			2px 0px 2px 0px;
+	font-size:		0mm;
+}
+
+.webfx-menu-bar {
+        /* i want a vertical bar */
+        display:                        block;
+
+	/* background:		rgb(120,172,255);/*rgb(255,128,0);*/
+	/* background:		 #a097ed; */
+	background:		 #000000;
+	/* border:			1px solid #7E0079; */
+	/* border:			1px solid #000000; */
+	/* border: none */
+
+	padding:		2px;
+	
+	font-family:	Verdana, Helvetica, Sans-Serif;
+	font-size:		11px;
+	
+	/* IE5.0 has the wierdest box model for inline elements */
+	padding:		expression(constExpression(ie50 ? "0px" : "2px"));
+}
+
+.webfx-menu-bar a,
+.webfx-menu-bar a:visited {
+        /* i want a vertical bar */
+        display:                        block;
+
+	/* border:				1px solid black; /*rgb(0,0,0);/*rgb(255,128,0);*/
+	/* border: 1px solid black; /* #ffffff; */
+	/* border-bottom: 1px solid black; */
+	border-bottom: 1px solid white;
+	/* border-bottom:	1px solid rgb(0,66,174);
+	/* border-bottom: 1px solid black;
+	border-bottom: 1px solid black;
+	border-bottom: 1px solid black; */
+
+	padding:			1px 5px 1px 5px;
+
+	/* color:				black; */
+	color:				white;
+	text-decoration:	none;
+
+	/* IE5.0 Does not paint borders and padding on inline elements without a height/width */
+	height:		expression(constExpression(ie50 ? "17px" : "auto"));
+}
+
+.webfx-menu-bar a:hover {
+	/* color:			black; */
+	color:			white;
+	/* background:		rgb(120,172,255);	 */
+	/* background:		#BC79B8; */
+	background:		#7E0079;
+	/* border-left:	1px solid rgb(234,242,255);
+	border-right:	1px solid rgb(0,66,174);
+	border-top:		1px solid rgb(234,242,255);
+	border-bottom:	1px solid rgb(0,66,174); */
+}
+
+.webfx-menu-bar a .arrow {
+	border:			0;
+	float:			right;
+/*	vertical-align:		top; */
+	width:			3px;
+	margin-right:	3px;
+	margin-top:		4px;
+}
+
+.webfx-menu-bar a:active, .webfx-menu-bar a:focus {
+	-moz-outline:	none;
+	outline:		none;
+	/*
+		ie does not support outline but ie55 can hide the outline using
+		a proprietary property on HTMLElement. Did I say that IE sucks at CSS?
+	*/
+	ie-dummy:		expression(this.hideFocus=true);
+
+	border-left:	1px solid rgb(0,66,174);
+	border-right:	1px solid rgb(234,242,255);
+	border-top:		1px solid rgb(0,66,174);
+	border-bottom:	1px solid rgb(234,242,255);
+}
+
+.webfx-menu-title  {
+	color:			black;
+	/* background:		#faf7fa; #f5ebf4; #efdfef; white; #BC79B8; */
+	background:		#7e0079;
+/*	border:			1px solid #7e0079; /*rgb(120,172,255);#ff8800;*/
+	padding:		3px 1px 3px 6px;
+	display:		block;
+	font-size:		13px;
+	font-family:		Tahoma, Verdan, Helvetica, Sans-Serif;
+	text-decoration:	none;
+	color:			white;
+/*	border:			1px solid white; */
+	border-bottom:		1px solid white;
+}	
+
diff --git a/httemplate/elements/xmenu.js b/httemplate/elements/xmenu.js
new file mode 100644
index 000000000..134265f53
--- /dev/null
+++ b/httemplate/elements/xmenu.js
@@ -0,0 +1,668 @@
+//<script>
+/*
+ * This script was created by Erik Arvidsson (erik@eae.net)
+ * for WebFX (http://webfx.eae.net)
+ * Copyright 2001
+ * 
+ * For usage see license at http://webfx.eae.net/license.html	
+ *
+ * Created:		2001-01-12
+ * Updates:		2001-11-20	Added hover mode support and removed Opera focus hacks
+ *				2001-12-20	Added auto positioning and some properties to support this
+ *				2002-08-13	toString used ' for attributes. Changed to " to allow in args
+ */
+ 
+// check browsers
+var ua = navigator.userAgent;
+var opera = /opera [56789]|opera\/[56789]/i.test(ua);
+var ie = !opera && /MSIE/.test(ua);
+var ie50 = ie && /MSIE 5\.[01234]/.test(ua);
+var ie6 = ie && /MSIE [6789]/.test(ua);
+var ieBox = ie && (document.compatMode == null || document.compatMode != "CSS1Compat");
+var moz = !opera && /gecko/i.test(ua);
+var nn6 = !opera && /netscape.*6\./i.test(ua);
+var khtml = /KHTML/i.test(ua);
+
+// define the default values
+
+webfxMenuDefaultWidth			= 154;
+
+webfxMenuDefaultBorderLeft		= 1;
+webfxMenuDefaultBorderRight		= 1;
+webfxMenuDefaultBorderTop		= 1;
+webfxMenuDefaultBorderBottom	= 1;
+
+webfxMenuDefaultPaddingLeft		= 1;
+webfxMenuDefaultPaddingRight	= 1;
+webfxMenuDefaultPaddingTop		= 1;
+webfxMenuDefaultPaddingBottom	= 1;
+
+webfxMenuDefaultShadowLeft		= 0;
+webfxMenuDefaultShadowRight		= ie && !ie50 && /win32/i.test(navigator.platform) ? 4 :0;
+webfxMenuDefaultShadowTop		= 0;
+webfxMenuDefaultShadowBottom	= ie && !ie50 && /win32/i.test(navigator.platform) ? 4 : 0;
+
+
+webfxMenuItemDefaultHeight		= 18;
+webfxMenuItemDefaultText		= "Untitled";
+webfxMenuItemDefaultHref		= "javascript:void(0)";
+
+webfxMenuSeparatorDefaultHeight	= 6;
+
+webfxMenuDefaultEmptyText		= "Empty";
+
+webfxMenuDefaultUseAutoPosition	= nn6 ? false : true;
+
+
+
+// other global constants
+
+webfxMenuImagePath				= "";
+
+webfxMenuUseHover				= opera ? true : false;
+webfxMenuHideTime				= 500;
+webfxMenuShowTime				= 200;
+
+
+
+var webFXMenuHandler = {
+	idCounter		:	0,
+	idPrefix		:	"webfx-menu-object-",
+	all				:	{},
+	getId			:	function () { return this.idPrefix + this.idCounter++; },
+	overMenuItem	:	function (oItem) {
+		if (this.showTimeout != null)
+			window.clearTimeout(this.showTimeout);
+		if (this.hideTimeout != null)
+			window.clearTimeout(this.hideTimeout);
+		var jsItem = this.all[oItem.id];
+		if (webfxMenuShowTime <= 0)
+			this._over(jsItem);
+		else if ( jsItem )
+			//this.showTimeout = window.setTimeout(function () { webFXMenuHandler._over(jsItem) ; }, webfxMenuShowTime);
+			// I hate IE5.0 because the piece of shit crashes when using setTimeout with a function object
+			this.showTimeout = window.setTimeout("webFXMenuHandler._over(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuShowTime);
+	},
+	outMenuItem	:	function (oItem) {
+		if (this.showTimeout != null)
+			window.clearTimeout(this.showTimeout);
+		if (this.hideTimeout != null)
+			window.clearTimeout(this.hideTimeout);
+		var jsItem = this.all[oItem.id];
+		if (webfxMenuHideTime <= 0)
+			this._out(jsItem);
+		else if ( jsItem ) 
+			//this.hideTimeout = window.setTimeout(function () { webFXMenuHandler._out(jsItem) ; }, webfxMenuHideTime);
+			this.hideTimeout = window.setTimeout("webFXMenuHandler._out(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuHideTime);
+	},
+	blurMenu		:	function (oMenuItem) {
+		window.setTimeout("webFXMenuHandler.all[\"" + oMenuItem.id + "\"].subMenu.hide();", webfxMenuHideTime);
+	},
+	_over	:	function (jsItem) {
+		if (jsItem.subMenu) {
+			jsItem.parentMenu.hideAllSubs();
+			jsItem.subMenu.show();
+		}
+		else
+			jsItem.parentMenu.hideAllSubs();
+	},
+	_out	:	function (jsItem) {
+		// find top most menu
+		var root = jsItem;
+		var m;
+		if (root instanceof WebFXMenuButton)
+			m = root.subMenu;
+		else {
+			m = jsItem.parentMenu;
+			while (m.parentMenu != null && !(m.parentMenu instanceof WebFXMenuBar))
+				m = m.parentMenu;
+		}
+		if (m != null)	
+			m.hide();	
+	},
+	hideMenu	:	function (menu) {
+		if (this.showTimeout != null)
+			window.clearTimeout(this.showTimeout);
+		if (this.hideTimeout != null)
+			window.clearTimeout(this.hideTimeout);
+
+		this.hideTimeout = window.setTimeout("webFXMenuHandler.all['" + menu.id + "'].hide()", webfxMenuHideTime);
+	},
+	showMenu	:	function (menu, src, dir) {
+		if (this.showTimeout != null)
+			window.clearTimeout(this.showTimeout);
+		if (this.hideTimeout != null)
+			window.clearTimeout(this.hideTimeout);
+
+		if (arguments.length < 3)
+			dir = "vertical";
+		
+		menu.show(src, dir);
+	}
+};
+
+function WebFXMenu() {
+	this._menuItems	= [];
+	this._subMenus	= [];
+	this.id			= webFXMenuHandler.getId();
+	this.top		= 0;
+	this.left		= 0;
+	this.shown		= false;
+	this.parentMenu	= null;
+	webFXMenuHandler.all[this.id] = this;
+}
+
+WebFXMenu.prototype.width			= webfxMenuDefaultWidth;
+WebFXMenu.prototype.emptyText		= webfxMenuDefaultEmptyText;
+WebFXMenu.prototype.useAutoPosition	= webfxMenuDefaultUseAutoPosition;
+
+WebFXMenu.prototype.borderLeft		= webfxMenuDefaultBorderLeft;
+WebFXMenu.prototype.borderRight		= webfxMenuDefaultBorderRight;
+WebFXMenu.prototype.borderTop		= webfxMenuDefaultBorderTop;
+WebFXMenu.prototype.borderBottom	= webfxMenuDefaultBorderBottom;
+
+WebFXMenu.prototype.paddingLeft		= webfxMenuDefaultPaddingLeft;
+WebFXMenu.prototype.paddingRight	= webfxMenuDefaultPaddingRight;
+WebFXMenu.prototype.paddingTop		= webfxMenuDefaultPaddingTop;
+WebFXMenu.prototype.paddingBottom	= webfxMenuDefaultPaddingBottom;
+
+WebFXMenu.prototype.shadowLeft		= webfxMenuDefaultShadowLeft;
+WebFXMenu.prototype.shadowRight		= webfxMenuDefaultShadowRight;
+WebFXMenu.prototype.shadowTop		= webfxMenuDefaultShadowTop;
+WebFXMenu.prototype.shadowBottom	= webfxMenuDefaultShadowBottom;
+
+
+
+WebFXMenu.prototype.add = function (menuItem) {
+	this._menuItems[this._menuItems.length] = menuItem;
+	if (menuItem.subMenu) {
+		this._subMenus[this._subMenus.length] = menuItem.subMenu;
+		menuItem.subMenu.parentMenu = this;
+	}
+	
+	menuItem.parentMenu = this;
+};
+
+WebFXMenu.prototype.show = function (relObj, sDir) {
+	if (this.useAutoPosition)
+		this.position(relObj, sDir);
+
+	var divElement = document.getElementById(this.id);
+	if ( divElement ) {
+
+	  divElement.style.left = opera ? this.left : this.left + "px";
+	  divElement.style.top = opera ? this.top : this.top + "px";
+	  divElement.style.visibility = "visible";
+
+	  if ( ie ) {
+	    var shimElement = document.getElementById(this.id + "Shim");
+	    if ( shimElement ) {
+	      shimElement.style.width = divElement.offsetWidth;
+	      shimElement.style.height = divElement.offsetHeight;
+	      shimElement.style.top = divElement.style.top;
+	      shimElement.style.left = divElement.style.left;
+	      /*shimElement.style.zIndex = divElement.style.zIndex - 1; */
+	      shimElement.style.display = "block";
+	      shimElement.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
+	    }
+	  }
+
+	}
+
+	this.shown = true;
+
+	if (this.parentMenu)
+		this.parentMenu.show();
+};
+
+WebFXMenu.prototype.hide = function () {
+	this.hideAllSubs();
+	var divElement = document.getElementById(this.id);
+	if ( divElement ) {
+	  divElement.style.visibility = "hidden";
+	  if ( ie ) {
+	    var shimElement = document.getElementById(this.id + "Shim");
+	    if ( shimElement ) {
+	      shimElement.style.display = "none";
+	    }
+	  }
+	}
+
+	this.shown = false;
+};
+
+WebFXMenu.prototype.hideAllSubs = function () {
+	for (var i = 0; i < this._subMenus.length; i++) {
+		if (this._subMenus[i].shown)
+			this._subMenus[i].hide();
+	}
+};
+
+WebFXMenu.prototype.toString = function () {
+	var top = this.top + this.borderTop + this.paddingTop;
+	var str = "<div id='" + this.id + "' class='webfx-menu' style='" + 
+	"width:" + (!ieBox  ?
+		this.width - this.borderLeft - this.paddingLeft - this.borderRight - this.paddingRight  : 
+		this.width) + "px;" +
+	(this.useAutoPosition ?
+		"left:" + this.left + "px;" + "top:" + this.top + "px;" :
+		"") +
+	(ie50 ? "filter: none;" : "") +
+	"'>";
+
+	if (this._menuItems.length == 0) {
+		str +=	"<span class='webfx-menu-empty'>" + this.emptyText + "</span>";
+	}
+	else {	
+		str += '<span class="webfx-menu-title" onmouseover="webFXMenuHandler.overMenuItem(this)"' +
+			(webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
+			 '>' + this.emptyText + '</span>';
+        	// str += '<div id="' + this.id + '-title">' + this.emptyText + '</div>';
+		// loop through all menuItems
+		for (var i = 0; i < this._menuItems.length; i++) {
+			var mi = this._menuItems[i];
+			str += mi;
+			if (!this.useAutoPosition) {
+				if (mi.subMenu && !mi.subMenu.useAutoPosition)
+					mi.subMenu.top = top - mi.subMenu.borderTop - mi.subMenu.paddingTop;
+				top += mi.height;
+			}
+		}
+
+	}
+	
+	str += "</div>";
+
+	if ( ie ) {
+          str += "<iframe id='" + this.id + "Shim' src='javascript:false;' scrolling='no' frameBorder='0' style='position:absolute; top:0px; left: 0px; display:none;'></iframe>";
+	}
+	
+	for (var i = 0; i < this._subMenus.length; i++) {
+		this._subMenus[i].left = this.left + this.width - this._subMenus[i].borderLeft;
+		str += this._subMenus[i];
+	}
+	
+	return str;
+};
+// WebFXMenu.prototype.position defined later
+
+function WebFXMenuItem(sText, sHref, sToolTip, oSubMenu) {
+	this.text = sText || webfxMenuItemDefaultText;
+	this.href = (sHref == null || sHref == "") ? webfxMenuItemDefaultHref : sHref;
+	this.subMenu = oSubMenu;
+	if (oSubMenu)
+		oSubMenu.parentMenuItem = this;
+	this.toolTip = sToolTip;
+	this.id = webFXMenuHandler.getId();
+	webFXMenuHandler.all[this.id] = this;
+};
+WebFXMenuItem.prototype.height = webfxMenuItemDefaultHeight;
+WebFXMenuItem.prototype.toString = function () {
+	return	"<a" +
+			" id='" + this.id + "'" +
+			" href=\"" + this.href + "\"" +
+			(this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
+			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
+			(webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
+			(this.subMenu ? " unselectable='on' tabindex='-1'" : "") +
+			">" +
+			(this.subMenu ? "<img class='arrow' src=\"" + webfxMenuImagePath + "arrow.right.black.png\">" : "") +
+			this.text + 
+			"</a>";
+};
+
+
+function WebFXMenuSeparator() {
+	this.id = webFXMenuHandler.getId();
+	webFXMenuHandler.all[this.id] = this;
+};
+WebFXMenuSeparator.prototype.height = webfxMenuSeparatorDefaultHeight;
+WebFXMenuSeparator.prototype.toString = function () {
+	return	"<div" +
+			" id='" + this.id + "'" +
+			(webfxMenuUseHover ? 
+			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
+			" onmouseout='webFXMenuHandler.outMenuItem(this)'"
+			:
+			"") +
+			"></div>"
+};
+
+function WebFXMenuBar() {
+	this._parentConstructor = WebFXMenu;
+	this._parentConstructor();
+}
+WebFXMenuBar.prototype = new WebFXMenu;
+WebFXMenuBar.prototype.toString = function () {
+	var str = "<div id='" + this.id + "' class='webfx-menu-bar'>";
+	
+	// loop through all menuButtons
+	for (var i = 0; i < this._menuItems.length; i++)
+		str += this._menuItems[i];
+	
+	str += "</div>";
+
+	for (var i = 0; i < this._subMenus.length; i++)
+		str += this._subMenus[i];
+	
+	return str;
+};
+
+function WebFXMenuButton(sText, sHref, sToolTip, oSubMenu) {
+	this._parentConstructor = WebFXMenuItem;
+	this._parentConstructor(sText, sHref, sToolTip, oSubMenu);
+}
+WebFXMenuButton.prototype = new WebFXMenuItem;
+WebFXMenuButton.prototype.toString = function () {
+	return	"<a" +
+			" id='" + this.id + "'" +
+			" href='" + this.href + "'" +
+			(this.toolTip ? " title='" + this.toolTip + "'" : "") +
+			(webfxMenuUseHover ?
+				(" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
+				" onmouseout='webFXMenuHandler.outMenuItem(this)'") :
+				(
+					" onfocus='webFXMenuHandler.overMenuItem(this)'" +
+					(this.subMenu ?
+						" onblur='webFXMenuHandler.blurMenu(this)'" :
+						""
+					)
+				)) +
+			">" +
+			(this.subMenu ? "<img class='arrow' src='" + webfxMenuImagePath + "arrow.right.png'>" : "") +				
+			this.text + 
+			"</a>";
+};
+
+
+
+
+
+/* Position functions */
+
+
+function getInnerLeft(el) {
+
+	if (el == null) return 0;
+
+	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
+
+	return parseInt( getLeft(el) + parseInt(getBorderLeft(el)) );
+
+}
+
+
+
+function getLeft(el, debug) {
+
+	if (el == null) return 0;
+
+        //if ( debug )
+	//  alert ( el.offsetLeft + ' - ' + getInnerLeft(el.offsetParent) );
+
+	return parseInt( el.offsetLeft + parseInt(getInnerLeft(el.offsetParent)) );
+
+}
+
+
+
+function getInnerTop(el) {
+
+	if (el == null) return 0;
+
+	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
+
+	return parseInt( getTop(el) + parseInt(getBorderTop(el)) );
+
+}
+
+
+
+function getTop(el) {
+
+	if (el == null) return 0;
+
+	return parseInt( el.offsetTop + parseInt(getInnerTop(el.offsetParent)) );
+
+}
+
+
+
+function getBorderLeft(el) {
+
+	return ie ?
+
+		el.clientLeft :
+
+		( khtml 
+		    ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
+		    : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-left-width")) 
+		);
+
+}
+
+
+
+function getBorderTop(el) {
+
+	return ie ?
+
+		el.clientTop :
+
+		( khtml 
+		    ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
+		    : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-top-width"))
+		);
+
+}
+
+
+
+function opera_getLeft(el) {
+
+	if (el == null) return 0;
+
+	return el.offsetLeft + opera_getLeft(el.offsetParent);
+
+}
+
+
+
+function opera_getTop(el) {
+
+	if (el == null) return 0;
+
+	return el.offsetTop + opera_getTop(el.offsetParent);
+
+}
+
+
+
+function getOuterRect(el, debug) {
+
+	return {
+
+		left:	(opera ? opera_getLeft(el) : getLeft(el, debug)),
+
+		top:	(opera ? opera_getTop(el) : getTop(el)),
+
+		width:	el.offsetWidth,
+
+		height:	el.offsetHeight
+
+	};
+
+}
+
+
+
+// mozilla bug! scrollbars not included in innerWidth/height
+
+function getDocumentRect(el) {
+
+	return {
+
+		left:	0,
+
+		top:	0,
+
+		width:	(ie ?
+
+					(ieBox ? document.body.clientWidth : document.documentElement.clientWidth) :
+
+					window.innerWidth
+
+				),
+
+		height:	(ie ?
+
+					(ieBox ? document.body.clientHeight : document.documentElement.clientHeight) :
+
+					window.innerHeight
+
+				)
+
+	};
+
+}
+
+
+
+function getScrollPos(el) {
+
+	return {
+
+		left:	(ie ?
+
+					(ieBox ? document.body.scrollLeft : document.documentElement.scrollLeft) :
+
+					window.pageXOffset
+
+				),
+
+		top:	(ie ?
+
+					(ieBox ? document.body.scrollTop : document.documentElement.scrollTop) :
+
+					window.pageYOffset
+
+				)
+
+	};
+
+}
+
+
+/* end position functions */
+
+WebFXMenu.prototype.position = function (relEl, sDir) {
+	var dir = sDir;
+	// find parent item rectangle, piRect
+	var piRect;
+	if (!relEl) {
+		var pi = this.parentMenuItem;
+		if (!this.parentMenuItem)
+			return;
+		
+		relEl = document.getElementById(pi.id);
+		if (dir == null)
+			dir = pi instanceof WebFXMenuButton ? "vertical" : "horizontal";
+		//alert('created RelEl from parent: ' + pi.id);
+		piRect = getOuterRect(relEl, 1);
+	}
+	else if (relEl.left != null && relEl.top != null && relEl.width != null && relEl.height != null) {	// got a rect
+		//alert('passed a Rect as RelEl: ' + typeof(relEl));
+
+		piRect = relEl;
+	}
+	else {
+		//alert('passed an element as RelEl: ' + typeof(relEl));
+		piRect = getOuterRect(relEl);
+	}
+
+	var menuEl = document.getElementById(this.id);
+	var menuRect = getOuterRect(menuEl);
+	var docRect = getDocumentRect();
+	var scrollPos = getScrollPos();
+	var pMenu = this.parentMenu;
+	
+	if (dir == "vertical") {
+		if (piRect.left + menuRect.width - scrollPos.left <= docRect.width) {
+			//alert('piRect.left: ' + piRect.left);
+			this.left = piRect.left;
+			if ( ! ie )
+			  this.left = this.left + 138;
+		} else if (docRect.width >= menuRect.width) {
+			//konq (not safari though) winds up here by accident and positions the menus all weird
+			//alert('docRect.width + scrollPos.left - menuRect.width');
+
+			this.left = docRect.width + scrollPos.left - menuRect.width;
+		} else {
+			//alert('scrollPos.left: ' + scrollPos.left);
+			this.left = scrollPos.left;
+		}
+			
+		if (piRect.top + piRect.height + menuRect.height <= docRect.height + scrollPos.top)
+
+			this.top = piRect.top + piRect.height;
+
+		else if (piRect.top - menuRect.height >= scrollPos.top)
+
+			this.top = piRect.top - menuRect.height;
+
+		else if (docRect.height >= menuRect.height)
+
+			this.top = docRect.height + scrollPos.top - menuRect.height;
+
+		else
+
+			this.top = scrollPos.top;
+	}
+	else {
+		if (piRect.top + menuRect.height - this.borderTop - this.paddingTop <= docRect.height + scrollPos.top)
+
+			this.top = piRect.top - this.borderTop - this.paddingTop;
+
+		else if (piRect.top + piRect.height - menuRect.height + this.borderTop + this.paddingTop >= 0)
+
+			this.top = piRect.top + piRect.height - menuRect.height + this.borderBottom + this.paddingBottom + this.shadowBottom;
+
+		else if (docRect.height >= menuRect.height)
+
+			this.top = docRect.height + scrollPos.top - menuRect.height;
+
+		else
+
+			this.top = scrollPos.top;
+
+
+
+		var pMenuPaddingLeft = pMenu ? pMenu.paddingLeft : 0;
+
+		var pMenuBorderLeft = pMenu ? pMenu.borderLeft : 0;
+
+		var pMenuPaddingRight = pMenu ? pMenu.paddingRight : 0;
+
+		var pMenuBorderRight = pMenu ? pMenu.borderRight : 0;
+
+		
+
+		if (piRect.left + piRect.width + menuRect.width + pMenuPaddingRight +
+
+			pMenuBorderRight - this.borderLeft + this.shadowRight <= docRect.width + scrollPos.left)
+
+			this.left = piRect.left + piRect.width + pMenuPaddingRight + pMenuBorderRight - this.borderLeft;
+
+		else if (piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight >= 0)
+
+			this.left = piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight;
+
+		else if (docRect.width >= menuRect.width)
+
+			this.left = docRect.width  + scrollPos.left - menuRect.width;
+
+		else
+
+			this.left = scrollPos.left;
+	}
+};
-- 
cgit v1.2.1