/*                                                       ,  ,
                                                        / \/ \
                                                       (/ //_ \_
      .-._                                              \||  .  \
       \  '-._                                    _,:__.-"/---\_ \
  ______/___  '.    .-----------------------------'~-'--.)__( , )\ \
 `'--.___  _\  /    |                                 ,'    \)|\ `\|
      /_.-' _\ \ _:,_  Script name: Simple horizontal menu  " ||   (
    .'__ _.' \'-/,`-~` Version    : 2.0                       |/
        '. ___.> /=,|  By         : Marco Tijs                |
         / .-'/_ )  |  Modified   : 08-04-2006                |
         )'  ( /(/  |                                         |
              \\ "  '-----------------------------------------'
               '=='
*/

/*** Menu setup is located near the bottom of the file. ***/
/*** Layout can be defined in a stylesheet. Do not forget to add a link to this file ***/

/*** Settings ***/

$headerItemWidth    = 105;              //Width of header items in pixels
$headerItemHeight   = 20;               //Height of header items in pixels
$headerLocation     = new Array(134, 29);//Location of the header (coordinates of upper left corner)
$headerMargin       = 0;                //Space between the headers (horizontal)
                                        
$subItemWidth       = 170;              //Width of sub items in pixels
$subItemHeight      = 20;               //Height of sub items in pixels
$subLocation        = new Array(-30, 0);//Location of the header (coordinates of upper left corner)
$subMargin          = 0;                //Space between the subs (vertical)
                                        
$headerFrame        = parent.menu;      //The frame for the header, self can be used if the headers and subs are located in the same frame
$subFrame           = parent.main;      //The frame for the sub items
                                        
$useStyleHover      = 1;                //Whether or not to enable hover styles (onMouseOver)
$useStylePressed    = 1;                //Whether or not to enable pressed styles (onMouseDown)
                                        
$openOnHover        = 1;                //1 opens menus on onMouseOver event, 0 on onClick event
$timeBeforeClose    = 200;              //Time in ms before a menu is closed after onMouseOut event
$menuMovements      = 2;                //Type of movement on opening: 0 for no movement, 1 for constant movement, 2 for slowdown movement
$menuMoveSpeed      = 5;                //The higher the number, the faster the menu opens
$adjustForScrolling = 1;                //1 to correct an offset caused by scrolling when using different frames for headers and subs

/*** End of settings ***/


$mList = new Array();
$headerNr = -1;
$menuTimer = 0;
$loaded = 0;


function headerFramePresent(){
  if(!$headerFrame) return 0;
  return $headerFrame.$loaded;
}


function subFramePresent(){
  if(!$subFrame) return 0;
  return $subFrame.$loaded;
}


function updateTopImages(){
  //vogelvisie only
  
  if(!headerFramePresent()) return;

  for(var $i = 0; $i < $mList.length; $i++){
    if($headerFrame.document.images['m0' + $i].src.indexOf(($headerFrame.$mList[$i].open) + '.gif') == -1){
      $headerFrame.document.images['m0' + $i].src = $headerFrame.document.images['m0' + $i].src.replace((1 - $headerFrame.$mList[$i].open) + '.gif', $headerFrame.$mList[$i].open + '.gif');
      $headerFrame.document.images['m1' + $i].src = $headerFrame.document.images['m1' + $i].src.replace((1 - $headerFrame.$mList[$i].open) + '.gif', $headerFrame.$mList[$i].open + '.gif');
      $headerFrame.document.images['m2' + $i].src = $headerFrame.document.images['m2' + $i].src.replace((1 - $headerFrame.$mList[$i].open) + '.gif', $headerFrame.$mList[$i].open + '.gif');
    }
  }
}


function getItem($id){
  if(document.getElementById){
    return document.getElementById($id).style;
  }else if(document.all){
    return document.all[$id].style;
  }
}


function adjustOffsets(){
  if($adjustForScrolling){
    if(!isNaN(window.pageXOffset)){
      var $offsetX = window.pageXOffset;
      var $offsetY = window.pageYOffset;
    }else if(document.body){
      if(!isNaN(document.body.scrollTop)){
        var $offsetX = document.body.scrollTop;
        var $offsetY = document.body.scrollLeft;
      }
    }

    if(!isNaN($offsetY)){
      getItem('subsOuter').top = $offsetY + $subLocation[1];
      getItem('subsOuter').left = $offsetX + $subLocation[0];
    }
  }
}

function setVisibility($header, $sub, $which){
  var $id = 'm' + ($sub == -1 ? 'h' : 's') + '#' + $header;
  if($sub != -1)
    $id += '-' + $sub;
  getItem($id.replace('#', 's')).visibility = ($which == 's') ? 'visible' : 'hidden';
  getItem($id.replace('#', 'h')).visibility = ($which == 'h') ? 'visible' : 'hidden';
  getItem($id.replace('#', 'p')).visibility = ($which == 'p') ? 'visible' : 'hidden';
}


function showSubs($header, $open){
  if($mList[$header].timer && $open){ //disable timer for hiding the subs
    clearTimeout($mList[$header].timer);
  }

  updateTopImages();

  var $pos = ($open ? 0 : (-1 * $mList[$header].blockHeight));

  if($open){
    $mList[$header].targetPos = $pos;
    $mList[$header].open = 1;

    //Hide others subs without timeout
    for(var $i = 0; $i < $mList.length; $i++){
      if($i != $header && $mList[$header].open){
        $mList[$i].targetPos = (-1 * $mList[$i].blockHeight);
        $mList[$i].open = 0;
      }
    }
  }else{
    $mList[$header].timer = setTimeout('$mList[' + $header + '].targetPos = ' + $pos + ';$mList[' + $header + '].open = 0;updateTopImages()', $timeBeforeClose);
  }
}


function moveSubs(){
  if(!subFramePresent()) return;
  for(var $i = 0; $i < $mList.length; $i++){
    if($mList[$i].position == $mList[$i].targetPos)
      continue;
    if($menuMovements == 0){ //instant opening
      var $pos = $mList[$i].targetPos;
    }else if($menuMovements == 1){
      var $pos = $mList[$i].position + $menuMoveSpeed * ($mList[$i].targetPos > $mList[$i].position ? 1 : -1);
    }else if($menuMovements == 2){
      var $pos = $mList[$i].position + .1 * ($mList[$i].targetPos - $mList[$i].position) + ($mList[$i].targetPos > $mList[$i].position ? 2 : -2);// / 100;
    }
    $pos = Math.min($pos, 0);
    $pos = Math.max($pos, -1 * $mList[$i].blockHeight);

    $mList[$i].position = $pos;
    $subFrame.getItem('subInner' + $i).top = Math.round($pos);
    $subFrame.getItem('subOuter' + $i).height = $mList[$i].blockHeight + Math.round($pos);
  }
  updateTopImages();
}

function closeAllSubs(){
  if(!headerFramePresent()) return;
  for(var $i = 0; $i < $mList.length; $i++){
    $headerFrame.$mList[$i].position  = -1 * $headerFrame.$mList[$i].blockHeight;
    $headerFrame.$mList[$i].targetPos = -1 * $headerFrame.$mList[$i].blockHeight;
  }
}


function showFromSub($header, $open){
  if(!$openOnHover) return;
  if(!headerFramePresent()) return;

  if($open && $headerFrame.$mList[$header].open && $headerFrame.$mList[$header].timer){
    $headerFrame.clearTimeout($headerFrame.$mList[$header].timer);
  }else if(!$open && $headerFrame.$mList[$header].open){
    $headerFrame.showSubs($header, $open);
  }
}


function menuMouseOver($header, $sub){
  setVisibility($header, $sub, 'h');
  if($openOnHover && $sub == -1) showSubs($header, 1);
}


function menuMouseOut($header, $sub){
  setVisibility($header, $sub, 's');
  if($openOnHover && $sub == -1) showSubs($header, 0);
}


function menuMouseDown($header, $sub){
  setVisibility($header, $sub, 'p');
}

function menuMouseClick($header, $sub){
  if(!$openOnHover && $sub == -1) showSubs($header, 1 - $mList[$header].open);
  var $item = ($sub == -1) ? $mList[$header] : $mList[$header].subs[$sub];

  if($item.action != '')
    eval($item.action);
}

function menuHeader($content, $action){
  var $item       = new Object();
  var $headerNr   = $mList.length;
  $item.subs      = new Array();
  $item.action    = $action;
  $item.open      = 0;
  $item.position  = 0;
  $item.targetPos = 0;

  $mouseAction    = 'onClick="menuMouseClick(' + $headerNr + ', -1)" ';
  if($useStyleHover)
    $mouseAction  += 'onMouseOver="menuMouseOver(' + $headerNr + ', -1)" ';
  if($useStyleHover || $useStylePressed)
    $mouseAction  += 'onMouseOut="menuMouseOut(' + $headerNr + ', -1)" '
  if($useStylePressed)
    $mouseAction  += 'onMouseDown="menuMouseDown(' + $headerNr + ', -1)" '
                   + 'onMouseUp="menuMouseOver(' + $headerNr + ', -1)" '

  var $tableSize  = 'width="' + $headerItemWidth + '" height="' +$headerItemHeight + '"';
  $item.hidden    = '<div ' + $mouseAction + ' style="position:absolute;left:0px;top:0px;width:' + $headerItemWidth + 'px; height:' + $headerItemHeight + 'px;"><table cellpadding="0" cellspacing="0" ' + $tableSize + '><tr><td></td></tr></table></div>'
  $item.standard  = '<div id="mhs' + $headerNr + '" class="menuHeader"><table cellpadding="0" cellspacing="0"class="menuHeader" ' + $tableSize + '><tr><td class="menuHeader">' + $content + '</td></tr></table></div>';
  $item.hover     = '<div id="mhh' + $headerNr + '" class="menuHeaderHover"><table cellpadding="0" cellspacing="0"class="menuHeaderHover" ' + $tableSize + '><tr><td class="menuHeaderHover">' + $content.replace('m0', 'm1') + '</td></tr></table></div>';
  $item.pressed   = '<div id="mhp' + $headerNr + '" class="menuHeaderPressed"><table cellpadding="0" cellspacing="0"class="menuHeaderPressed" ' + $tableSize + '><tr><td class="menuHeaderPressed">' + $content.replace('m0', 'm2') + '</td></tr></table></div>';

  $mList[$headerNr] = $item;
}

function menuSub($content, $action){
  var $item       = new Object();
  var $headerNr   = $mList.length - 1;
  var $subNr      = $mList[$headerNr].subs.length;
  $item.action    = $action;

  $mouseAction    = 'onClick="menuMouseClick(' + $headerNr + ', ' + $subNr + ')" ';
  if($useStyleHover)
    $mouseAction  += 'onMouseOver="menuMouseOver(' + $headerNr + ', ' + $subNr + ')" ';
  if($useStyleHover || $useStylePressed)
    $mouseAction  += 'onMouseOut="menuMouseOut(' + $headerNr + ', ' + $subNr + ')" '
  if($useStylePressed)
    $mouseAction  += 'onMouseDown="menuMouseDown(' + $headerNr + ', ' + $subNr + ')" '
                   + 'onMouseUp="menuMouseOver(' + $headerNr + ', ' + $subNr + ')" '

  var $tableSize  = 'width="' + ($subItemWidth - 2) + '" height="' + $subItemHeight + '"';
  $item.hidden    = '<div ' + $mouseAction + ' style="z-index:5; position:absolute;left:0px;top:0px;width:' + ($subItemWidth - 2) + '; height:' + $subItemHeight + ';"><table cellpadding="0" cellspacing="0" ' + $tableSize + '><tr><td></td></tr></table></div>'
  $item.standard  = '<div id="mss' + $headerNr + '-' + $subNr + '" class="menuHeader"><table cellpadding="0" cellspacing="0"class="menuSub" ' + $tableSize + '><tr><td class="menuSub">' + $content + '</td></tr></table></div>';
  $item.hover     = '<div id="msh' + $headerNr + '-' + $subNr + '" class="menuHeaderHover"><table cellpadding="0" cellspacing="0"class="menuSubHover" ' + $tableSize + '><tr><td class="menuSubHover">' + $content + '</td></tr></table></div>';
  $item.pressed   = '<div id="msp' + $headerNr + '-' + $subNr + '" class="menuHeaderPressed"><table cellpadding="0" cellspacing="0"class="menuSubPressed" ' + $tableSize + '><tr><td class="menuSubPressed">' + $content + '</td></tr></table></div>';

  $mList[$headerNr].subs[$subNr] = $item;
}

function createHeader(){
  var $d;
  $d = '<div id="headerOuter" style="position:absolute;left: ' + $headerLocation[0] + ';top: ' + $headerLocation[1] + ';height: ' + $headerItemHeight + ';width: ' + ($headerItemWidth) + ';">';
  for(var $i = 0; $i < $mList.length; $i++){
    $mList[$i].blockHeight = ($mList[$i].subs.length) * ($subMargin + $subItemHeight) - $subMargin + 1;
    $mList[$i].position    = ($menuMovements == 0) ? 0 : -1 * $mList[$i].blockHeight;
    $mList[$i].targetPos   = ($menuMovements == 0) ? 0 : -1 * $mList[$i].blockHeight;
    $left = $i * ($headerMargin + $headerItemWidth);
    $d += '<div id="header' + $i + '" style="position:absolute;left: ' + $left + ';top: 0;width: ' + $headerItemWidth + ';height: ' + $headerItemHeight + ';">';
    $d += $mList[$i].standard;
    if($useStyleHover)   $d += $mList[$i].hover;
    if($useStylePressed) $d += $mList[$i].pressed;
    $d += $mList[$i].hidden;
    $d += '</div>';
  }
  $d += '</div>';
  document.write($d);
  $menuTimer = setInterval('moveSubs()', 50);
  $loaded = 1;
  setInterval('updateTopImages()', 500);
}

function createSubs(){
  if(headerFramePresent()){
    if($headerFrame.$mList){
      for(var $i = 0; $i < $headerFrame.$mList.length; $i++)
        $headerFrame.$mList[$i].open = 0;
      $headerFrame.updateTopImages();
    }
  }
  
  var $d = '<div id="subsOuter" style="z-index: 5; position:absolute;left: ' + $subLocation[0] + ';top: ' + $subLocation[1] + ';height: ' + $subItemHeight + ';width: ' + ($subItemWidth) + ';">';
  for(var $i = 0; $i < $mList.length; $i++){
    $mList[$i].blockHeight = ($mList[$i].subs.length) * ($subMargin + $subItemHeight) - $subMargin + 1;
    var $left = $i * ($headerMargin + $headerItemWidth);
    
    //vogelvisie only:
    $pageWidth = 10000;    
    if(self.innerWidth){
		  $pageWidth= self.innerWidth;
    }else if(document.documentElement){
      if(document.documentElement.clientWidth)
        $pageWidth = document.documentElement.clientWidth;
    }else if (document.body){
		  $pageWidth = document.body.clientWidth;
  	}
  	if(!$pageWidth) $pageWidth = 10000;
  	
    $left = Math.min($left, $pageWidth - $subItemWidth - $subLocation[0] - 20); //20 for scrollbars
    //end of vogelvisie only section      
    
    var $innerTop = $mList[$i].position;
    $d += '<div id="subOuter' + $i + '" style="position:absolute;overflow: hidden;top:0px;left:' + $left + 'px; width:' + $subItemWidth + 'px; height:0px;">';
    $d += '<div id="subInner' + $i + '" style="position:absolute;top:' + (-1 * $mList[$i].blockHeight) + 'px;left:0px;width:' + $subItemWidth + 'px; height:' + $mList[$i].blockHeight + 'px;" onMouseOver="showFromSub(' + $i + ', 1);" onMouseOut="showFromSub(' + $i + ', 0);">';
    for(var $j = 0; $j < $mList[$i].subs.length; $j++){
      $top = $j * ($subMargin + $subItemHeight);
      $d += '<div id="sub' + $i + '-' + $j + '" style="position:absolute;left:1px;top: ' + $top + ';width: ' + ($subItemWidth - 2) + ';height: ' + $subItemHeight + ';">';
      $d += $mList[$i].subs[$j].standard;
      if($useStyleHover) $d += $mList[$i].subs[$j].hover;
      if($useStylePressed) $d += $mList[$i].subs[$j].pressed;
      $d += $mList[$i].subs[$j].hidden;
      $d += '</div>';
    }
    $d += '</div>'; //end subInnerX
    $d += '</div>'; //end subOuterX
  }
  $d += '</div>';
  document.write($d);
  if($adjustForScrolling && !$menuTimer)
    $menuTimer = setInterval('adjustOffsets()', 50);
  $loaded = 1;
  document.onunload = closeAllSubs();
}

//Create headers and subs as: ("content", "javascript action")
//Here "content" can be all HTML code

menuHeader("<img name=\"m00\" src=\"images/start0.gif\" width=\"105\" height=\"20\">", "$headerFrame.loadPage(\'href=vogels.php\')");
menuHeader("<img name=\"m01\" src=\"images/overzicht0.gif\" width=\"105\" height=\"20\">", "");
   menuSub("Nederlandse naam" , "$headerFrame.loadPage(\'href=overzicht_nederlands.php\')");
   menuSub("Wetenschappelijke naam" , "$headerFrame.loadPage(\'href=overzicht_wetenschappelijk.php\')");
   menuSub("Per familie" , "$headerFrame.loadPage(\'href=overzicht.php\')");
   menuSub("Meest voorkomende soorten" , "$headerFrame.loadPage(\'href=top50.php\')");
   menuSub("Rode lijst" , "$headerFrame.loadPage(\'href=rode_lijst.php\')");
menuHeader("<img name=\"m02\" src=\"images/zoeken0.gif\" width=\"105\" height=\"20\">", "");
   menuSub("Zoek een vogel" , "$headerFrame.loadPage(\'href=zoeken.php\')");
   menuSub("Uitgebreid zoeken" , "$headerFrame.loadPage(\'href=adv_zoeken.php\')");
   menuSub("Vogelvinder" , "$headerFrame.loadPage(\'href=vogelvinder.php\')");
menuHeader("<img name=\"m03\" src=\"images/quiz0.gif\" width=\"105\" height=\"20\">", "");
//   menuSub("Vogelfoto's" , "$headerFrame.loadPage(\'href=quiz2.php?quiznr=1\')");
//   menuSub("Vogelgeluiden" , "$headerFrame.loadPage(\'href=quiz2.php?quiznr=2\')");
//   menuSub("Detailfoto's" , "$headerFrame.loadPage(\'href=quiz2.php?quiznr=3\')");
   menuSub("Standaard quiz" , "$headerFrame.loadPage(\'href=quiz_beginner.php\')");
   menuSub("Moeilijke quiz" , "$headerFrame.loadPage(\'href=quiz_gevorderd.php\')");
   menuSub("Geluiden quiz" , "$headerFrame.loadPage(\'href=quiz_geluiden.php\')");
   menuSub("Beste resultaten", "$headerFrame.loadPage(\'href=quiz_scores.php\')");
   
menuHeader("<img name=\"m04\" src=\"images/forum0.gif\" width=\"105\" height=\"20\">", "$headerFrame.loadPage(\'href=forum/forum.php\')");
menuHeader("<img name=\"m05\" src=\"images/overig0.gif\" width=\"105\" height=\"20\">", "");
//   menuSub("Locatie zoeker" , "");
   menuSub("Soortnaam vertalen", "$headerFrame.loadPage(\'href=translate.php\')");
   menuSub("Handleiding" , "$headerFrame.loadPage(\'href=handleiding.php\')");
   menuSub("Bronvermelding" , "$headerFrame.loadPage(\'href=copyright.php\')");
//   menuSub("Links" , "$headerFrame.loadPage(\'href=links.php\')");
   menuSub("Firefox plugin" , "$headerFrame.loadPage(\'href=firefox_plugin.php\')");
   menuSub("Schuifpuzzels"  , "$headerFrame.loadPage(\'href=schuifpuzzels.php\')");