<!--
/*
The ultimate DHTML drop-down code
Nick Nettleton
www.computerarts.co.uk || www.fluid7.co.uk
--
This must be the single most requested bit of code in the history of Computer Arts, so we've decided to make it user-friendly and adaptable for everyone. Stacks more goodies to come too - head to one of the above sites for regular infoa nd updates.
Works with v4 and v5 browsers - both IE and NS. Update for NS6 coming. Also, be aware there's no way to automatically centre layers in the window - a JS for this coming soon. In the meantime, stick with left-aligned.
Keep an eye out for update for NS6.
--
You can adapt, use and distribute this code under GNU public licence, as long as:
(1) You leave all the comment and credit lines in, including these ones
(2) You don't sell it for profit
--
If you want to tweak the code yourself, use the f7_droplayer to set the names of the dropdowns, and just call f7_showdrop(n) and f7_hdidedrop from onmouseover, onmouseout and other events. Swap n for the number of the layer as in the array.
--
Enjoy!!!
*/

//names of dropdowns stored here
f7_droplayer=new Array()
f7_droplayer[0]="drop1"
f7_droplayer[1]="drop2"
f7_droplayer[2]="drop3"
f7_droplayer[3]="drop4"
f7_droplayer[4]="drop5"

//simple browser check
f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
f7_ie=(document.all && f7_v4)?1:0
f7_ns=(document.layers && f7_v4)?1:0


//code for drops

function getXYcoord ( elm )
  {
  if ( document.layers ) return elm;

  var rd = { x:0 ,y:0 };
  do
    {
    rd.x += parseInt( elm.offsetLeft );
    rd.y += parseInt( elm.offsetTop );
    elm = elm.offsetParent;
    } while ( elm );

  return rd;
  }

function f7_showdrop(thelayer, e)
  {
  f7_keep=thelayer; f7_hideall();

  if (e)
    {
    obj = eval("document.images['"+e+"']");
    pos = getXYcoord(obj);
    if (f7_ns)
      dropwidth = obj.width - eval('document.'+f7_droplayer[thelayer]+'.clip.width');
    else
      dropwidth = obj.width - eval(f7_droplayer[thelayer]+'.scrollWidth');

    if (f7_ns)
      {
      eval('document.'+f7_droplayer[thelayer]+'.left='+(pos.x+dropwidth));
      eval('document.'+f7_droplayer[thelayer]+'.top='+(pos.y+obj.height));
      }

    if (f7_ie)
      {
      eval(f7_droplayer[thelayer]+'.style.left="'+(pos.x+dropwidth)+'px"');
      eval(f7_droplayer[thelayer]+'.style.top="'+(pos.y+obj.height)+'px"');
      }
    }

  f7_showit(thelayer)
  }

function f7_showdropatmouse(thelayer)
  {
  f7_keep=thelayer; f7_hideall();

  if (f7_ns)
    {
    eval('document.'+f7_droplayer[thelayer]+'.left='+(f7_mousex-5));
    eval('document.'+f7_droplayer[thelayer]+'.top='+(f7_mousey-5));
    }

  if (f7_ie)
    {
    eval(f7_droplayer[thelayer]+'.style.left="'+(f7_mousex-5)+'px"');
    eval(f7_droplayer[thelayer]+'.style.top="'+(f7_mousey-5)+'px"');
    }

  f7_showit(thelayer)
  }

function f7_showit(thelayer)
  {
  if (f7_ie) { eval(f7_droplayer[thelayer]+'.style.visibility="visible"'); }
  if (f7_ns) { eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
  }


function f7_hidedrop(thelayer)
  {
  f7_keep=-1; setTimeout('f7_hidelayer('+thelayer+')', 500)
  }

f7_keep=-1

function f7_hidelayer(thelayer)
  {
  if (f7_ie && f7_keep!=thelayer)
    {
    eval(f7_droplayer[thelayer]+'.style.visibility="hidden"');
    }
  if (f7_ns && f7_keep!=thelayer)
    {
    if (f7_checkmousepos(thelayer) == 1)
      eval('document.'+f7_droplayer[thelayer]+'.visibility="hide"');
    else
      setTimeout('f7_hidelayer('+thelayer+')', 500);
    }
  }

function f7_hideall()
  {
  for (i=0;i<f7_droplayer.length;i++)
    {
    if (f7_ie && f7_keep!=i)
      {
      eval(f7_droplayer[i]+'.style.visibility="hidden"');
      }
    if (f7_ns && f7_keep!=i)
      {
      eval('document.'+f7_droplayer[i]+'.visibility="hide"');
      }
    }
  }

function f7_checkmousepos(i)
  {
  f7_hideit=0;

  if(f7_ns)
    {
    f7_x_min = eval('document.'+f7_droplayer[i]+'.left')
    f7_x_max = f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width')
    f7_y_min = eval('document.'+f7_droplayer[i]+'.top')
    f7_y_max = f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height')

    if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max)
      f7_hideit=0;
    else
      f7_hideit=1;
    }
  return f7_hideit
  }

//deal with cursor over layer
document.onmousemove = f7_getmousepos;
if (f7_ns)
  document.captureEvents(Event.MOUSEMOVE);

function f7_getmousepos(e)
  {
  if (f7_ns) { f7_mousex=e.pageX; f7_mousey=e.pageY; }
  if (f7_ie) { f7_mousex=event.clientX; f7_mousey=event.clientY; }
  }

//-->