/* -------------------------------------------------------------------------- */
/* Purpose: Menu creation                                                     */
/*                                                                            */
/* Autor:   (c) Christian Kupnick                                             */
/* Date:    11-Oct-2007                                                       */
/* -------------------------------------------------------------------------- */
/* Mod. date     Who        Description                                       */
/* ========================================================================== */
/* 11-Oct-2007   Kupnick    Initial implementation                            */
/* 20-Nov-2007   Kupnick    Icons added                                       */
/* 24-Nov-2007   Kupnick    Function separation                               */
/* -------------------------------------------------------------------------- */

//------------------------------------------------------------------------------
// Global Variables
//------------------------------------------------------------------------------
var TIMEOUT = 250;     // timeout for menu-close after mouseOut event (in ms)
	
// css properties of the dropdown menu box border (border-color == text color): 
var CSS_MENU_CONTAINER_WIDTH = 150;
var CSS_MENU_CONTAINER_TOP   = 40;
var CSS_MENU_CONTAINER_LEFT  = 0;
var CSS_MENU_CONTAINER_BORDER_WIDTH        = 0;
var CSS_MENU_CONTAINER_BORDER_WIDTH_LEFT   = 0 + CSS_MENU_CONTAINER_BORDER_WIDTH;
var CSS_MENU_CONTAINER_BORDER_WIDTH_TOP    = 0 + CSS_MENU_CONTAINER_BORDER_WIDTH;
var CSS_MENU_CONTAINER_BORDER_WIDTH_BOTTOM = 0 + CSS_MENU_CONTAINER_BORDER_WIDTH;
var CSS_MENU_CONTAINER_BORDER_WIDTH_RIGHT  = 0 + CSS_MENU_CONTAINER_BORDER_WIDTH;
var CSS_MENU_CONTAINER_BORDER_STYLE        = "solid";
var CSS_MENU_CONTAINER_BORDER_COLOR_LEFT   = "#bfbfbf";
var CSS_MENU_CONTAINER_BORDER_COLOR_TOP    = "#bfbfbf";
var CSS_MENU_CONTAINER_BORDER_COLOR_BOTTOM = "#bfbfbf";
var CSS_MENU_CONTAINER_BORDER_COLOR_RIGHT  = "#bfbfbf";

var CSS_MENU_SUBCONTAINER_TOP  = 0;
var CSS_MENU_SUBCONTAINER_LEFT = 0;
var CSS_MENU_SUBCONTAINER_BORDER_WIDTH        = 1;
var CSS_MENU_SUBCONTAINER_BORDER_WIDTH_LEFT   = 0 + CSS_MENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_MENU_SUBCONTAINER_BORDER_WIDTH_TOP    = -1 + CSS_MENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_MENU_SUBCONTAINER_BORDER_WIDTH_BOTTOM = 0 + CSS_MENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_MENU_SUBCONTAINER_BORDER_WIDTH_RIGHT  = 0 + CSS_MENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_MENU_SUBCONTAINER_BORDER_STYLE         = "solid";
var CSS_MENU_SUBCONTAINER_BORDER_COLOR_LEFT   = "#bfbfbf";
var CSS_MENU_SUBCONTAINER_BORDER_COLOR_TOP    = "#bfbfbf";
var CSS_MENU_SUBCONTAINER_BORDER_COLOR_BOTTOM = "#bfbfbf";
var CSS_MENU_SUBCONTAINER_BORDER_COLOR_RIGHT  = "#bfbfbf";
var CSS_MENU_SUBCONTAINER_WIDTH  = CSS_MENU_CONTAINER_WIDTH - CSS_MENU_SUBCONTAINER_BORDER_WIDTH_LEFT - CSS_MENU_SUBCONTAINER_BORDER_WIDTH_RIGHT;

var CSS_ITEM_BORDER_WIDTH = 0;
var CSS_ITEM_BORDER_STYLE = "solid";
var CSS_ITEM_BORDER_COLOR_LEFT   = "#333333";
var CSS_ITEM_BORDER_COLOR_TOP    = "#333333";
var CSS_ITEM_BORDER_COLOR_BOTTOM = "#333333";
var CSS_ITEM_BORDER_COLOR_RIGHT  = "#333333";
var CSS_ITEM_PADDING_TOP    = 0;
var CSS_ITEM_PADDING_LEFT   = 0;
var CSS_ITEM_PADDING_BOTTOM = 0;
var CSS_ITEM_MARGIN_TOP     = 0;
var CSS_ITEM_MARGIN_LEFT    = 0;
var CSS_ITEM_MARGIN_BOTTOM  = 0;
var CSS_ITEM_WIDTH  = CSS_MENU_SUBCONTAINER_WIDTH - CSS_ITEM_BORDER_WIDTH;
var CSS_ITEM_CLASS = "menu_item";   // css class of the menu items
	
	
//var CSS_SUBMENU_CONTAINER_WIDTH = 180;   // Not used -> defined within menue object
var CSS_SUBMENU_CONTAINER_TOP   = -1;
var CSS_SUBMENU_CONTAINER_LEFT  = CSS_MENU_CONTAINER_WIDTH + CSS_MENU_CONTAINER_BORDER_WIDTH_RIGHT - 1;
var CSS_SUBMENU_CONTAINER_BORDER_WIDTH        = 1;
var CSS_SUBMENU_CONTAINER_BORDER_WIDTH_LEFT   = 0 + CSS_SUBMENU_CONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_CONTAINER_BORDER_WIDTH_TOP    = 0 + CSS_SUBMENU_CONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_CONTAINER_BORDER_WIDTH_BOTTOM = 0 + CSS_SUBMENU_CONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_CONTAINER_BORDER_WIDTH_RIGHT  = 0 + CSS_SUBMENU_CONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_CONTAINER_BORDER_STYLE        = "solid";
var CSS_SUBMENU_CONTAINER_BORDER_COLOR_LEFT   = "#bfbfbf";
var CSS_SUBMENU_CONTAINER_BORDER_COLOR_TOP    = "#bfbfbf";
var CSS_SUBMENU_CONTAINER_BORDER_COLOR_BOTTOM = "#bfbfbf";
var CSS_SUBMENU_CONTAINER_BORDER_COLOR_RIGHT  = "#bfbfbf";

var CSS_SUBMENU_SUBCONTAINER_TOP   = 0;
var CSS_SUBMENU_SUBCONTAINER_LEFT  = 0;
var CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH        = 0;
var CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_LEFT   = 0 + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_TOP    = 0 + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_BOTTOM = 0 + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_RIGHT  = 0 + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH;
var CSS_SUBMENU_SUBCONTAINER_BORDER_STYLE        = "solid";
var CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_LEFT   = "#333333";
var CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_TOP    = "#333333";
var CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_BOTTOM = "#333333";
var CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_RIGHT  = "#333333";

var CSS_SUBITEM_BORDER_WIDTH = 0;
var CSS_SUBITEM_BORDER_STYLE = "solid";
var CSS_SUBITEM_BORDER_COLOR_LEFT   = "#333333";
var CSS_SUBITEM_BORDER_COLOR_TOP    = "#333333";
var CSS_SUBITEM_BORDER_COLOR_BOTTOM = "#333333";
var CSS_SUBITEM_BORDER_COLOR_RIGHT  = "#333333";
var CSS_SUBITEM_PADDING_TOP    = 0;
var CSS_SUBITEM_PADDING_LEFT   = 2;
var CSS_SUBITEM_PADDING_BOTTOM = 0;
var CSS_SUBITEM_CLASS = "menu_item";   // css class of the menu items

var ICON_RIGHT        = "img/nav/arrow.gif";
var ICON_RIGHT_hover  = "img/nav/arrow_hover_yellow.gif";


var isIE = navigator.userAgent.toLowerCase().indexOf("msie")!=-1;
var isSafari = navigator.userAgent.toLowerCase().indexOf("apple")!=-1;


//------------------------------------------------------------------------------
// Functions
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
function update_colors( obj )
//------------------------------------------------------------------------------
// update all color setings ...
//------------------------------------------------------------------------------
{
  for( var i=0; i < obj.items.length; ++i )
  {
    if( !obj.items[i].bgcolor )         obj.items[i].bgcolor = obj.bgcolor;
    if( !obj.items[i].bgcolor_hover )   obj.items[i].bgcolor_hover = obj.bgcolor_hover;
    if( !obj.items[i].fntcolor )        obj.items[i].fntcolor = obj.fntcolor;
    if( !obj.items[i].fntcolor_hover )  obj.items[i].fntcolor_hover = obj.fntcolor_hover;

    for( var si=0; si < obj.items[i].subitems.length; ++si )
    {
      if( !obj.items[i].subitems[si].bgcolor )         obj.items[i].subitems[si].bgcolor = obj.items[i].bgcolor;
      if( !obj.items[i].subitems[si].bgcolor_hover )   obj.items[i].subitems[si].bgcolor_hover = obj.items[i].bgcolor_hover;
      if( !obj.items[i].subitems[si].fntcolor )        obj.items[i].subitems[si].fntcolor = obj.items[i].fntcolor;
      if( !obj.items[i].subitems[si].fntcolor_hover )  obj.items[i].subitems[si].fntcolor_hover = obj.items[i].fntcolor_hover;
    }
  }
}

//------------------------------------------------------------------------------
function build_styles( obj )
//------------------------------------------------------------------------------
// create styles for container and items
//------------------------------------------------------------------------------
{
  var output = "";

  // build css stylesheet code for the menu (#containerName) and the items (#itemName0..n)
  output += "<style type=\"text/css\">";

  output += "#" + obj.containerName + "{";
  output += "position:absolute; overflow:visible; visibility:hidden; z-index:20; ";
  output += "top:"   + CSS_MENU_CONTAINER_TOP  + "px; ";
  if( isSafari )
  { /* do nothing*/ }
  else
  { output += "left:"  + CSS_MENU_CONTAINER_LEFT + "px; "; }
  output += "border-left:"   + CSS_MENU_CONTAINER_BORDER_WIDTH_LEFT   + "px " + CSS_MENU_CONTAINER_BORDER_STYLE + " " + CSS_MENU_CONTAINER_BORDER_COLOR_LEFT + "; ";
  output += "border-top:"    + CSS_MENU_CONTAINER_BORDER_WIDTH_TOP    + "px " + CSS_MENU_CONTAINER_BORDER_STYLE + " " + CSS_MENU_CONTAINER_BORDER_COLOR_TOP + "; ";
  output += "border-right:"  + CSS_MENU_CONTAINER_BORDER_WIDTH_RIGHT  + "px " + CSS_MENU_CONTAINER_BORDER_STYLE + " " + CSS_MENU_CONTAINER_BORDER_COLOR_RIGHT + "; ";
  output += "border-bottom:" + CSS_MENU_CONTAINER_BORDER_WIDTH_BOTTOM + "px " + CSS_MENU_CONTAINER_BORDER_STYLE + " " + CSS_MENU_CONTAINER_BORDER_COLOR_BOTTOM + "; ";
  output += "width:" + CSS_MENU_CONTAINER_WIDTH + "px; }";
  
  output += "#" + obj.containerName + "Items {";
  output += "position:relative; overflow:visible; visibility:hidden; z-index:30; ";
  output += "top:"   + CSS_MENU_SUBCONTAINER_TOP  + "px; ";
  output += "left:"  + CSS_MENU_SUBCONTAINER_LEFT + "px; ";
  output += "border-left:"   + CSS_MENU_SUBCONTAINER_BORDER_WIDTH_LEFT   + "px " + CSS_MENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_MENU_SUBCONTAINER_BORDER_COLOR_LEFT + "; ";
  output += "border-top:"    + CSS_MENU_SUBCONTAINER_BORDER_WIDTH_TOP    + "px " + CSS_MENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_MENU_SUBCONTAINER_BORDER_COLOR_TOP + "; ";
  output += "border-right:"  + CSS_MENU_SUBCONTAINER_BORDER_WIDTH_RIGHT  + "px " + CSS_MENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_MENU_SUBCONTAINER_BORDER_COLOR_RIGHT + "; ";
  output += "border-bottom:" + CSS_MENU_SUBCONTAINER_BORDER_WIDTH_BOTTOM + "px " + CSS_MENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_MENU_SUBCONTAINER_BORDER_COLOR_BOTTOM + "; ";
  output += "width:" + CSS_MENU_SUBCONTAINER_WIDTH + "px; "
  output += "color:" + obj.fntcolor + "; ";

  output += "background-color:" + obj.bgcolor + "; }";
  
  for (var i = 0; i < obj.items.length; ++i)
  {
    // --- Items ---
    output += "#" + obj.itemName + i + "{";
    output += "position:relative; overflow:visible; left:0px; z-index:40; ";
    output += "width:" + CSS_ITEM_WIDTH + "px; ";

    if( obj.bg_image )
    {
      output += "background-image:  url(" + obj.path + obj.bg_image + "); background-repeat:repeat-y; ";
    }
    if( i < obj.items.length-1 )
    { output += "border-top:" + CSS_ITEM_BORDER_WIDTH + "px " + CSS_ITEM_BORDER_STYLE + CSS_ITEM_BORDER_COLOR_TOP + "; "; }
    else
    {
	     output += "border-top:" + CSS_ITEM_BORDER_WIDTH + "px " + CSS_ITEM_BORDER_STYLE + CSS_ITEM_BORDER_COLOR_TOP + "; ";
      output += "border-bottom:" + CSS_ITEM_BORDER_WIDTH + "px " + CSS_ITEM_BORDER_STYLE + CSS_ITEM_BORDER_COLOR_BOTTOM + "; ";
    }
    output += "border-left:"    + CSS_ITEM_BORDER_WIDTH   + "px " + CSS_ITEM_BORDER_STYLE + CSS_ITEM_BORDER_COLOR_LEFT + "; ";
    output += "border-right:"   + CSS_ITEM_BORDER_WIDTH   + "px " + CSS_ITEM_BORDER_STYLE + CSS_ITEM_BORDER_COLOR_RIGHT + "; ";
    output += "padding-top:"    + CSS_ITEM_PADDING_TOP    + "px; ";
    output += "padding-bottom:" + CSS_ITEM_PADDING_BOTTOM + "px; ";
    output += "padding-left:"   + CSS_ITEM_PADDING_LEFT   + "px; ";
    output += "margin-top:"     + CSS_ITEM_MARGIN_TOP    + "px; ";
    output += "margin-bottom:"  + CSS_ITEM_MARGIN_BOTTOM + "px; ";
    output += "margin-left:"    + CSS_ITEM_MARGIN_LEFT   + "px; ";
    output += "vertical-align: middle; ";
    output += "color:" + obj.items[i].fntcolor + "; ";
    output += "background-color:" + obj.items[i].bgcolor + "; ";
	   output += "}";
	
	   // -- Sub Item Container
	   if( obj.items[i].subitems.length > 0)
	   {
	     output += "#" + obj.itemName + i + "Container" + "{";
      output += "position:absolute; overflow:hidden; visibility:hidden; z-index:50; ";
      output += "top:"   + CSS_SUBMENU_CONTAINER_TOP  + "px; ";
      output += "left:"  + CSS_SUBMENU_CONTAINER_LEFT + "px; ";
      output += "border-left:"   + CSS_SUBMENU_CONTAINER_BORDER_WIDTH_LEFT   + "px " + CSS_SUBMENU_CONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_CONTAINER_BORDER_COLOR_LEFT + "; ";
      output += "border-top:"    + CSS_SUBMENU_CONTAINER_BORDER_WIDTH_TOP    + "px " + CSS_SUBMENU_CONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_CONTAINER_BORDER_COLOR_TOP + "; ";
      output += "border-right:"  + CSS_SUBMENU_CONTAINER_BORDER_WIDTH_RIGHT  + "px " + CSS_SUBMENU_CONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_CONTAINER_BORDER_COLOR_RIGHT + "; ";
      output += "border-bottom:" + CSS_SUBMENU_CONTAINER_BORDER_WIDTH_BOTTOM + "px " + CSS_SUBMENU_CONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_CONTAINER_BORDER_COLOR_BOTTOM + "; ";
      output += "width:" + obj.items[i].subitems_width + "px; }";

      output += "#" + obj.itemName + i + "Items {";
      output += "position:relative; overflow:visible; visibility:hidden; z-index:60; ";
      output += "top:"   + CSS_SUBMENU_SUBCONTAINER_TOP  + "px; ";
      output += "left:"  + CSS_SUBMENU_SUBCONTAINER_LEFT + "px; ";
      output += "border-left:"   + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_LEFT   + "px " + CSS_SUBMENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_LEFT + "; ";
      output += "border-top:"    + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_TOP    + "px " + CSS_SUBMENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_TOP + "; ";
      output += "border-right:"  + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_RIGHT  + "px " + CSS_SUBMENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_RIGHT + "; ";
      output += "border-bottom:" + CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_BOTTOM + "px " + CSS_SUBMENU_SUBCONTAINER_BORDER_STYLE + " " + CSS_SUBMENU_SUBCONTAINER_BORDER_COLOR_BOTTOM + "; ";
      output += "width:" + (obj.items[i].subitems_width - (CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_LEFT+CSS_SUBMENU_SUBCONTAINER_BORDER_WIDTH_RIGHT)) + "px; "
      output += "background-color:" + obj.items[i].bgcolor + "; }";
    
      for (var si = 0; si < obj.items[i].subitems.length; ++si)
      {
        // --- Sub Items ---
        output += "#" + obj.itemName + i + "SubItem" + si + "{";
        output += "position:relative; overflow:visible; left:1px; z-index:70; ";
        output += "width:" + (obj.items[i].subitems_width - (CSS_SUBITEM_BORDER_WIDTH + CSS_SUBITEM_PADDING_LEFT)) + "px; ";
   
        if( si < obj.items[i].subitems.length-1 )
        { output += "border-top:" + CSS_SUBITEM_BORDER_WIDTH + "px " + CSS_SUBITEM_BORDER_STYLE + CSS_SUBITEM_BORDER_COLOR_TOP + "; "; }
        else
        {
	         output += "border-top:" + CSS_SUBITEM_BORDER_WIDTH + "px " + CSS_SUBITEM_BORDER_STYLE + CSS_SUBITEM_BORDER_COLOR_TOP + "; ";
          output += "border-bottom:" + CSS_SUBITEM_BORDER_WIDTH + "px " + CSS_SUBITEM_BORDER_STYLE + CSS_SUBITEM_BORDER_COLOR_BOTTOM + "; ";
        }
        output += "border-left:"    + CSS_SUBITEM_BORDER_WIDTH   + "px " + CSS_SUBITEM_BORDER_STYLE + CSS_SUBITEM_BORDER_COLOR_LEFT + "; ";
        output += "border-right:"   + CSS_SUBITEM_BORDER_WIDTH   + "px " + CSS_SUBITEM_BORDER_STYLE + CSS_SUBITEM_BORDER_COLOR_RIGHT + "; ";
        output += "padding-top:"    + CSS_SUBITEM_PADDING_TOP    + "px; ";
        output += "padding-bottom:" + CSS_SUBITEM_PADDING_BOTTOM + "px; ";
        output += "padding-left:"   + CSS_SUBITEM_PADDING_LEFT   + "px; ";
        output += "color:" + obj.items[i].subitems[si].fntcolor + "; ";
        output += "background-color:" + obj.items[i].subitems[si].bgcolor + "; ";
	       output += "}";
      } // END OF for(si)
    } // END OF if(subitems.length)
  } // END OF for(i)

  output += "</style>";

  return output;
}

//------------------------------------------------------------------------------
function Menu_buildStyleCode( path )
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  var output = "";
  this.path = path;

  // --------- update all color setings ----------
  update_colors( this );

  if( this.hasItems )
    output += build_styles( this );

  return output;
}

//------------------------------------------------------------------------------
function Menu_buildHtmlCode( path )
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  var output = "";
  this.path = path;
  this.image.src = this.path + this.mouseOutImgSrc;

  // --------- update all color setings ----------
  update_colors( this );

  // -------------- build Containers -------------
  // div element containing the whole menu code; necessary for positioning
  output += "<div id=\"parentContainer" + this.containerName + "\" style=\"{position:relative; z-index:10;}\">";
	
  // build html code for the caption image
  output += "<a href=\"" + this.path + this.href + "\"";
  output += "onMouseOver=\"" + this.name + ".mouseOver();\"";
  output += "onMouseOut=\"" + this.name + ".mouseOut();\" ";
  if (this.href == "") output += "onClick=\"return false;\" ";
  output += ">";
  output += "<img border=0 src=\"" + this.image.src + "\" name=\"" + this.image.name + "\" alt=\"\" ";
  // use standard cursor if no link under caption image
  if (this.href == "") output += "style=\"cursor:pointer; \" ";
  output += ">";
  output += "</a>";

  if( this.hasItems )
  {
    // build container and items styles
    //output += build_styles( this );

    // build <div> elements for the menu box (id = containerName) and the items (id = itemName0..n)
    output += "<div id=\"" + this.containerName + "\">";
    output += "<div id=\"" + this.containerName + "Items\">";
    for (var i = 0; i < this.items.length; ++i)
    {
      if( this.items[i].text == "__LINE__" )
      {
        output += "<div class=\"line_container\" ";
        output += "onMouseOver=\"" + this.name + ".show_hr();\" ";
        output += "onMouseOut=\"" + this.name + ".hide_hr();\" ";
        output += ">";
        output += "<center>";
        output += "<div class=\"linie\"></div>";
        output += "</center>";
        output += "</div>";
        continue;
      }

      output += "<div id=\"" + this.itemName + i + "\"";
      output += " class=\"" + CSS_ITEM_CLASS + "\"";
      output += " onMouseOver=\""  + this.name + ".highlightItem(" + i + ");\"";
      output += " onMouseOut=\""   + this.name + ".unhighlightItem(" + i + ");\"";
      output += " onClick=\"" + this.name + ".loadItem(" + i + "); return false;\">";

      output += "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\"><tr>";
      if( this.items[i].icon )
      {
        output += "<td class=\"menu_icon_left\">";
        output += "<img src=\"" + this.path + this.items[i].icon + "\" ";
        output += " class=\"menu_icon_left\" border=\"0px\" alt=\"\" ";
        output += " name=\"" + this.itemName + i + "Img\"";
        output += ">";
        output += "</td>";
      }

      output += "<td id=\"" + this.itemName + i + "txt" + "\" class=\"menu_text\">";
      output += this.items[i].text;
      output += "</td>";

      if( this.items[i].subitems.length && ICON_RIGHT && ICON_RIGHT_hover )
      {
        output += "<td class=\"menu_icon_right\">";
        output += "<img src=\"" + this.path + ICON_RIGHT + "\"";
        output += " class=\"menu_icon_right\" border=\"0px\" alt=\"\" ";
        output += " name=\"" + this.itemName + i + "Img2\"";
        output += ">";
        output += "</td>";
      }
      output += "</tr></table>";

      output += "<div id=\"" + this.itemName + i + "Container" + "\">";
      output += "<div id=\"" + this.itemName + i + "Items" + "\">";
       
      for (var si = 0; si < this.items[i].subitems.length; ++si)
      {
        if( this.items[i].subitems[si].text == "__LINE__" )
        {
          output += "<div class=\"line_container\" ";
          output += "onMouseOver=\"" + this.name + ".show_hr();\" ";
          //output += "onMouseOut=\"" + this.name + ".hide_hr();\" >";
          output += ">";
          output += "<center>";
          output += "<div class=\"linie\"></div>";
          output += "</center>";
          output += "</div>";
          continue;
        }

        output += "<div id=\"" + this.itemName + i + "SubItem" + si + "\"";
        output += " class=\"" + CSS_ITEM_CLASS + "\"";
        output += " onMouseOver=\""  + this.name + ".highlightSubItem(" + i + "," + si + ");\"";
        output += " onMouseOut=\""   + this.name + ".unhighlightSubItem(" + i + "," + si + ");\"";
        output += " onClick=\"" + this.name + ".loadSubItem(this,event," + i + "," + si + ");\">";

        output += "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\"><tr>";
        output += "<td class=\"submenu_icon_left\">";
        if( this.items[i].subitems[si].icon )
        {
          output += "<img src=\"" + this.path + this.items[i].subitems[si].icon + "\"";
          output += " class=\"submenu_icon_left\" border=\"0px\" alt=\"\" ";
          output += " name=\"" + this.itemName + i + "SubItem" + si + "Img\"";
          output += ">";
        }
        output += "</td>";
  
        output += "<td id=\"" + this.itemName + i + "SubItem" + si + "txt" + "\" class=\"menu_text\">";
        output += this.items[i].subitems[si].text;
        output += "</td>";
        output += "</tr></table>";

	       output += "</div>";  // close this.itemName + i
		    } // END OF for(si)

      output += "</div>";  // close this.itemName + i + Items      
      output += "</div>";  // close this.itemName + i + Container

      output += "</div>";  // close this.itemName + i
    } // END OF for(i)

    output += "</div>";  // close this.containerName_Items
    output += "</div>";  // close this.containerName
  } // END OF if(items)

  output += "</div>";  // close parentContainer

  window.document.write(output);
}

//------------------------------------------------------------------------------
function Menu_mouseOver()
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.show();
  window.clearTimeout(this.timeout);
}

//------------------------------------------------------------------------------
function Menu_mouseOut()
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.timeout = window.setTimeout(this.name + ".hide()", TIMEOUT);
}
	
//------------------------------------------------------------------------------
function Menu_show()
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.image.src = this.path + this.mouseOverImgSrc;
  window.document.getElementsByName(this.image.name)[0].src = this.image.src;
  if (this.hasItems)
  {
    window.document.getElementById(this.containerName).style.visibility = "visible";
    window.document.getElementById( this.containerName + "Items" ).style.visibility = "visible";
  }
}

//------------------------------------------------------------------------------
function Menu_hide()
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.image.src = this.path + this.mouseOutImgSrc;
  window.document.getElementsByName(this.image.name)[0].src = this.image.src;
  
  // hide Subitems and reset icons
  for(var i= 0; i < this.items.length; ++i)
  {
    if( this.items[i].text == "__LINE__" ) continue;

    if( this.items[i].icon )
      window.document.getElementsByName(this.itemName + i + "Img")[0].src = this.path + this.items[i].icon;

    if( this.items[i].subitems.length && ICON_RIGHT && ICON_RIGHT_hover )
      window.document.getElementsByName(this.itemName + i + "Img2")[0].src = this.path + ICON_RIGHT;
    
    window.document.getElementById( this.itemName + i ).style.backgroundColor = this.items[i].bgcolor;
    window.document.getElementById( this.itemName + i ).style.color = this.items[i].fntcolor;
    window.document.getElementById( this.itemName + i + "txt").style.color = this.items[i].fntcolor;

    if( this.items[i].subitems.length > 0 )
    {
    
      for(var si= 0; si < this.items[i].subitems.length; ++si)
      {
        if( this.items[i].subitems[si].text == "__LINE__" ) continue;
        
        if( this.items[i].subitems[si].icon )
        { window.document.getElementsByName(this.itemName + i + "SubItem" + si + "Img")[0].src = this.path + this.items[i].subitems[si].icon; }
      }
      
	    window.document.getElementById( this.itemName + i + "Container" ).style.visibility = "hidden";
      window.document.getElementById( this.itemName + i + "Items" ).style.visibility = "hidden";
    }
  }
  
  // hide items  
  if (this.hasItems)
  {
    window.document.getElementById( this.containerName ).style.visibility = "hidden";
    window.document.getElementById( this.containerName + "Items" ).style.visibility = "hidden";
  }
}

//------------------------------------------------------------------------------
function show_hr()
//------------------------------------------------------------------------------
{
  window.clearTimeout(this.timeout);
}

//------------------------------------------------------------------------------
function hide_hr()
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.timeout = window.setTimeout(this.name + ".hide()", TIMEOUT);
}

//------------------------------------------------------------------------------
function Menu_highlightItem(i)
//------------------------------------------------------------------------------
{
  if( this.items[i].text == "__LINE__" ) return;

  for( var k= 0; k < this.items.length; ++k )
  {
    if( this.items[k].text == "__LINE__" ) continue;

    if( this.items[k].icon )
      window.document.getElementsByName(this.itemName + k + "Img")[0].src = this.path + this.items[k].icon;

    if( this.items[k].subitems.length && ICON_RIGHT && ICON_RIGHT_hover )
      window.document.getElementsByName(this.itemName + k + "Img2")[0].src = this.path + ICON_RIGHT;

    window.document.getElementById( this.itemName + k ).style.backgroundColor = this.items[k].bgcolor;
	   window.document.getElementById( this.itemName + k ).style.color =  this.items[k].fntcolor;
    window.document.getElementById( this.itemName + k + "txt").style.color = this.items[k].fntcolor;
	  
	   if( this.items[k].subitems.length > 0 )
    {
	     window.document.getElementById( this.itemName + k + "Container" ).style.visibility = "hidden";
      window.document.getElementById( this.itemName + k + "Items" ).style.visibility = "hidden";
    }
  }

  if( this.items[i].icon_hover )
    window.document.getElementsByName(this.itemName + i + "Img")[0].src = this.path + this.items[i].icon_hover;
  if( this.items[i].subitems.length && ICON_RIGHT && ICON_RIGHT_hover )
    window.document.getElementsByName(this.itemName + i + "Img2")[0].src = this.path + ICON_RIGHT_hover;

  window.document.getElementById( this.itemName + i ).style.backgroundColor = this.items[i].bgcolor_hover;
  window.document.getElementById( this.itemName + i ).style.color = this.items[i].fntcolor_hover;
  window.document.getElementById( this.itemName + i + "txt").style.color = this.items[i].fntcolor_hover;
  
  if( this.items[i].url && ( this.items[i].url != "#" ))
    window.document.getElementById( this.itemName + i ).style.cursor = "pointer";
  else
    window.document.getElementById( this.itemName + i ).style.cursor = "default";
    
  window.document.getElementById( this.itemName + i + "Container" ).style.visibility = "visible";
  window.document.getElementById( this.itemName + i + "Items" ).style.visibility = "visible";
   
  window.clearTimeout(this.timeout);
}

//------------------------------------------------------------------------------
function Menu_unhighlightItem(i)
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  this.timeout = window.setTimeout(this.name + ".hide()", TIMEOUT);
}

//------------------------------------------------------------------------------
function Menu_loadItem(i)
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{ 
  if( this.items[i].url && ( this.items[i].url != "#" ))
  {
    window.location.href = this.path + this.items[i].url;
  }
}

//------------------------------------------------------------------------------
function Menu_highlightSubItem(i,si)
//------------------------------------------------------------------------------
{
  if( this.items[i].subitems[si].text == "__LINE__" ) return;

  if( this.items[i].subitems.length > 0 )
  {
    if( this.items[i].subitems[si].icon_hover )
    {
    	window.document.getElementsByName(this.itemName + i + "SubItem" + si + "Img")[0].src = this.path + this.items[i].subitems[si].icon_hover;
    }
    window.document.getElementById( this.itemName + i + "SubItem" + si ).style.backgroundColor =  this.items[i].subitems[si].bgcolor_hover;
    window.document.getElementById( this.itemName + i + "SubItem" + si ).style.color = this.items[i].subitems[si].fntcolor_hover;
    window.document.getElementById( this.itemName + i + "SubItem" + si + "txt" ).style.color = this.items[i].subitems[si].fntcolor_hover;
    
    if( this.items[i].subitems[si].url && ( this.items[i].subitems[si].url != "#" ))
      window.document.getElementById( this.itemName + i + "SubItem" + si ).style.cursor = "pointer";
    else
      window.document.getElementById( this.itemName + i + "SubItem" + si ).style.cursor = "default";
  }
    
  window.clearTimeout(this.timeout);
}

//------------------------------------------------------------------------------
function Menu_unhighlightSubItem(i,si)
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{
  if( this.items[i].subitems[si].text == "__LINE__" ) return;

  if( this.items[i].subitems[si].icon )
 { window.document.getElementsByName(this.itemName + i + "SubItem" + si + "Img")[0].src = this.path + this.items[i].subitems[si].icon; }
  window.document.getElementById( this.itemName + i + "SubItem" + si ).style.backgroundColor = this.items[i].subitems[si].bgcolor;
  window.document.getElementById( this.itemName + i + "SubItem" + si ).style.color = this.items[i].subitems[si].fntcolor;
  window.document.getElementById( this.itemName + i + "SubItem" + si + "txt").style.color = this.items[i].subitems[si].fntcolor;
}

//------------------------------------------------------------------------------
function Menu_loadSubItem(obj,evt,i,si)
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
{ 
  var e=(evt)?evt:window.event;
  if(window.event)
	{ e.cancelBubble=true; }
	else
	{ e.stopPropagation(); }
	
  if( this.items[i].subitems[si].url && ( this.items[i].subitems[si].url != "#" ))
  {
    window.location.href = this.path + this.items[i].subitems[si].url;
  }
}

//------------------------------------------------------------------------------
function MenuSubItem(text, url, icon, icon_hover, bgcolor, bgcolor_hover, fntcolor, fntcolor_hover )
//------------------------------------------------------------------------------
// Menu item container
//------------------------------------------------------------------------------
{
  this.text = text;
  this.url  = url;
  this.icon            = icon;
  this.icon_hover      = icon_hover;
  this.bgcolor         = bgcolor;
  this.bgcolor_hover   = bgcolor_hover;
  this.fntcolor        = fntcolor;
  this.fntcolor_hover  = fntcolor_hover;
}

//------------------------------------------------------------------------------
function MenuItem(text, url, subitems, subitems_width, icon, icon_hover, bgcolor, bgcolor_hover, fntcolor, fntcolor_hover )
//------------------------------------------------------------------------------
// Menu item container
//------------------------------------------------------------------------------
{
  this.text = text;
  this.url  = url;
  this.subitems        = subitems;
  this.subitems_width  = subitems_width;
  this.icon            = icon;
  this.icon_hover      = icon_hover;
  this.bgcolor         = bgcolor;
  this.bgcolor_hover   = bgcolor_hover;
  this.fntcolor        = fntcolor;
  this.fntcolor_hover  = fntcolor_hover;
}

//------------------------------------------------------------------------------
function Menu(name, href, mouseOverImgSrc, mouseOutImgSrc, items, bgcolor, bgcolor_hover, fntcolor, fntcolor_hover,bg_image)
//------------------------------------------------------------------------------
// Data container
//------------------------------------------------------------------------------
{
  this.name = name;
  this.href = href;
  this.path = "";
  this.mouseOverImgSrc = mouseOverImgSrc;
  this.mouseOutImgSrc  = mouseOutImgSrc;
  this.items           = items;
  this.hasItems        = (this.items.length > 0);
  this.bgcolor         = bgcolor;
  this.bgcolor_hover   = bgcolor_hover;
  this.fntcolor        = fntcolor;
  this.fntcolor_hover  = fntcolor_hover;
  this.image           = new Image();
  this.image.name      = this.name + "Img";
  this.image.src       = this.mouseOutImgSrc;
  this.containerName   = this.name + "Container";
  this.itemName        = this.name + "Item";
  this.buildHtmlCode   = Menu_buildHtmlCode;
  this.buildStyleCode  = Menu_buildStyleCode;
  this.mouseOver       = Menu_mouseOver;
  this.mouseOut        = Menu_mouseOut;
  this.show            = Menu_show;
  this.hide            = Menu_hide;
  this.highlightItem   = Menu_highlightItem;
  this.unhighlightItem = Menu_unhighlightItem;
  this.loadItem        = Menu_loadItem;
  this.highlightSubItem   = Menu_highlightSubItem;
  this.unhighlightSubItem = Menu_unhighlightSubItem;
  this.loadSubItem        = Menu_loadSubItem;
  this.show_hr       = show_hr;
  this.hide_hr       = hide_hr;
  this.bg_image        = bg_image;
}

//------------------------------------------------------------------------------
function CreateNavigationStyle( path )
//------------------------------------------------------------------------------
// Add navigation style between <head> and </head>
//------------------------------------------------------------------------------
{
  var output = "";

  output += menu_oeffnungszeiten.buildStyleCode( path );
  output += menu_wegbeschreibung.buildStyleCode( path );
  output += menu_kontakt.buildStyleCode( path );
  output += menu_events.buildStyleCode( path );

  window.document.write(output);
}

//------------------------------------------------------------------------------
function  CreateNavigation( path )
//------------------------------------------------------------------------------
// Add objects between <body> and </body>
//------------------------------------------------------------------------------
{
 var output = "";
 
 output += "<td width=\"210px\">&nbsp;</td>";
 output += "<td width=\"128px\"><script type=\"text/javascript\">menu_oeffnungszeiten.buildHtmlCode(\"" + path + "\");</script></td>";
 output += "<td width=\"2px\">|</td>";
 output += "<td width=\"142px\"><script type=\"text/javascript\">menu_wegbeschreibung.buildHtmlCode(\"" + path + "\");</script></td>";
 output += "<td width=\"2px\">|</td>";
 output += "<td width=\"72px\"><script type=\"text/javascript\">menu_events.buildHtmlCode(\"" + path + "\");</script></td>";
 output += "<td width=\"2px\">|</td>";
 output += "<td width=\"105px\"><script type=\"text/javascript\">menu_sparverein.buildHtmlCode(\"" + path + "\");</script></td>";
 output += "<td width=\"2px\">|</td>";
 output += "<td width=\"78px\"><script type=\"text/javascript\">menu_kontakt.buildHtmlCode(\"" + path + "\");</script></td>";
 output += "<td width=\"107px\">&nbsp;</td>";
 
 window.document.write(output);
}

//------------------------------------------------------------------------------
function ShowHideNavigation(toshow,tohide)
//------------------------------------------------------------------------------
// Toggle Navigation-Bar visibility
//------------------------------------------------------------------------------
{
 var window_h = document.body.clientHeight;
 var toshow_h = 0;
 var tohide_h = 0;

 if( toshow.style.display=="none" )
 {
	 tohide.style.display="none";
   toshow.style.display="";

   if( isIE )
   {
     toshow_h =  toshow.offsetHeight;
     tohide_h =  tohide.offsetHeight;
   }
   else
   {
     toshow_h =  toshow.clientHeight;
     tohide_h =  tohide.clientHeight;
   }

   //alert( "Window=" + window_h + "  ToShow=" + toshow_h + "  ToHide=" + tohide_h );
   document.getElementById('data_area').style.height =    window_h - toshow_h - 1;
   
   if( document.getElementById('inner_frame') )
   document.getElementById('inner_frame').style.height =   window_h - toshow_h - 1;
 }
}

// ----- EOF -----