//<!-- ***** EXAMPLE 2: DIV MENU (v4+ browsers) ***** -->
//<script type="text/javascript">
//<![CDATA[

// This menu does 'work' in v4+ browsers, but I recommend the above UL/LI menu system
// as it simpler, cleaner and more elegant.

// With this divMenu object, 'false' means the menu elements are not nested.
var divMenu = new FSMenu('divMenu', false, 'visibility', 'visible', 'hidden');
divMenu.cssLitClass = 'highlighted';

// The other optional settings and animation functions will work here too.

//]]>
//</script>
//-- ***** END OF EXAMPLE 2: DIV MENU ***** -->




// Now the fun part... animation! This script supports animation plugins you can add to each
// menu object you create. Here's two to get you started. To enable animation, add one or
// more functions to the menuObject.animations array, and set menuObject.animSpeed to the
// desired percentage of animation to be completed per frame.
// Animation functions are called with a reference to the menu element being animated,
// and a counter variable that changes from 0 to 100 depending on the animation progress.

function animClipDown(ref, counter)
{
 var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);
 ref.style.clip = (counter==100 ?
  ((window.opera || navigator.userAgent.indexOf('KHTML') > -1) ? '':
   'rect(auto, auto, auto, auto)') :
    'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');
};

function animFade(ref, counter)
{
 var f = ref.filters, done = (counter==100);
 if (f)
 {
  if (!done && ref.style.filter.indexOf("alpha") == -1)
   ref.style.filter += ' alpha(opacity=' + counter + ')';
  else if (f.length && f.alpha) with (f.alpha)
  {
   if (done) enabled = false;
   else { opacity = counter; enabled=true }
  }
 }
 else ref.style.opacity = ref.style.MozOpacity = counter/100.1;
};

// I'm applying them both to this menu and setting the speed to 20%. Delete this to disable.
divMenu.animations[divMenu.animations.length] = animFade;
divMenu.animations[divMenu.animations.length] = animClipDown;
divMenu.animSpeed = 10;