/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

this has of course nothing to do with the menu
*/

function fixpng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
 }
}

/*connect(window, "onload", function () {
	fixpng();
	foldout_init('menu');
})
*/

/*

the menu script requires some styles...

.item .submenu {
 display: none;
 position: relative;
}

.item-active .submenu {
 display:block;
 position:absolute;
 top:85px;
 left:0px;
}

the principle is simple, .submenu-elements inside items are set to display:none, so we set the class name for
the current main navi element to item-active with display:block; 

Obviously that's strictly tied to the markup I found :

<div id="menu">
 <span id="BerlinsSchattenbuch" class="item">
  <div class="submenu">
  <span><a href="/BerlinsSchattenbuch#schattenseiten">Die 7 Schattenseiten</a></span>
  <span><a href="/BerlinsSchattenbuch#schattenbuch">Das Schattenbuch</a></span>
  <span><a href="/BerlinsSchattenbuch#copyleft">Copyleft</a></span>
  <span><a href="/BerlinsSchattenbuch#meinung">Deine Meinung</a></span>
 </div>
 <a href="/BerlinsSchattenbuch">Berlins Schattenbuch</a></span>

 <span id="DasProjekt" class="item"><a href="/DasProjekt">Das Projekt</a></span>
 <span id="Filmprojekte" class="item"><a href="/Filmprojekte">Filmprojekte</a></span>
 <span id="Fotogalerie" class="item"><a href="/Fotogalerie">Fotogalerie</a></span>
 etc

The submenus are nested in the spans of the main menu elements (if this was actually HTML it would be
illegal to nest block elements within inline elements, but if this was actually HTML we would use lists for
navigation anyway).																

*/

/*
 Lets get started
 @param container string the id of the containing element for the menu
*/

function foldout_init(container) {	
  if(!document.getElementById(container)) { return; }  
  c =  document.getElementById(container);
  if(!foldout_findcurrent(c)) { return; }
  /* show the submenu for the current items */
  cur =  foldout_findcurrent(c);
  cur.className = "item-active";
  /* then we attach functions to the rest of the links */
  foldout_attachrollrover(c,cur.id);  
 }
 
/* this attaches functions on rollover elements for the item elements 
 @param c obj - the containing menu element
 @param cur_id string the id of the currently active element
*/ 
function foldout_attachrollrover(c,cur_id) {
  spanAr = c.getElementsByTagName('span');
  for(i=0;i<spanAr.length;i++) {
   if(spanAr[i].className == "item" || spanAr[i].className == "item-active") {
	 spanAr[i].onmouseover = function() {
	  foldout_toggle(this.id,c);	 
	 }
	 /* We don't want this to toggle back, or do we ?
	 spanAr[i].onmouseout = function() {
	   foldout_toggle(cur_id,c);	 
	 }	
	 */
   }
  }
 }

/* hides all, then un-hides the current submenu 
 @param c obj - the containing menu element
 @param id string - id of the element to show
*/
function foldout_toggle(id,c) {
 foldout_hideall(c);
 document.getElementById(id).className = "item-active";
}

/* hides all submenus */
function foldout_hideall(c) {
  spanAr = c.getElementsByTagName('span');
  for(i=0;i<spanAr.length;i++) {
   if(spanAr[i].className == "item-active") {
	  spanAr[i].className = "item";  
   }
  }
}

/* look which is the currently active link, the parent node of the link that is set to selected */
function foldout_findcurrent(c) {
   hrefAr = c.getElementsByTagName('a');
   for(i=0;i<hrefAr.length;i++) {
	 if(hrefAr[i].className == "selected") {
		return hrefAr[i].parentNode;
	 } 
   }
   return false;
 }