// <!--

// configuration variables
var timeout   = 250; // milliseconds
var fadeSpeed = 500;  // milliseconds
var useFade   = true;

// timers array
var timers = new Array();

// state array -- by id, value = active, false = inactive
var state = new Array();

// lastOpacity: used to prevent multiple timers from making the fade flicker
var lastOpacity = new Array();

// MSIE has its own way of setting opacity, so we have to detect it
// all the other major browsers support the standard DOM opacity property
var msie = false;
if( navigator.appName == "Microsoft Internet Explorer" ) msie = true;

// entry point: set element to visible and clear its timers
function setMenu( id )
{
    var e = document.getElementById(id);
    e.style.visibility = "visible";
    state[id] = true;
    setOpacity( id, 1 );
    if(timers[id]) {
        clearTimeout(timers[id]);
        timers[id] = undefined;
     }
}

// set element to hidden and reset its opacity
// typically called by a timer
// may be used as an entry point to bypass timers and fades
function hideMenu( id )
{
    var e = document.getElementById(id);
    state[id] = false;
    e.style.visibility = "hidden";
    if(useFade) setOpacity( id, 1 );
}

// entry point: hide the menu using fade (if enabled)
function clearMenu( id )
{
    if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
    else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
}

// set the opacity
// special support for MSIE
function setOpacity( id, value )
{
    var e = document.getElementById(id);

    if(state[id]) value = 1;    // menu fade was interrupted
    else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id];  // prevents flicker if multiple timers set
    
    if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
    else e.style.opacity = (value);     // Everyone else (standard DOM)

    if( value == 0 ) hideMenu( id );    // when all faded, reset the menu state
    lastOpacity[id] = value;
}

// fade a menu
// typically called by a timer
function fadeMenu ( id )
{
    var start = 0;
    var end = 0;
    var s = Math.round( fadeSpeed / 25 );   // fade in 25ms increments
    var timer = 0;
    var i;

    state[id] = false;

    for( i = s; i >= 0 ; i-- ) {
        setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
    }
}
// -->

document.write('<div id="menuTop">');
document.write('<ul id="menuOne" class="menuHoriz">');
document.write('<li><a href="index.html">Home</a></li>');
document.write('<li><a href="about.html"     onMouseOver="setMenu(\'menuSubTwo\')" onMouseOut="clearMenu(\'menuSubTwo\')">About Us</a></li>');
document.write('<li><a href="services.html"  onMouseOver="setMenu(\'menuSubThree\')" onMouseOut="clearMenu(\'menuSubThree\')">Services &amp; Fees</a></li>');
//document.write('<li><a href="holistics.html" onMouseOver="setMenu(\'menuSubFour\')"  onMouseOut="clearMenu(\'menuSubFour\')">About Holistics</a></li>');
document.write('<li><a href="clients.html"   onMouseOver="setMenu(\'menuSubFive\')"  onMouseOut="clearMenu(\'menuSubFive\')">Clients</a></li>');
document.write('<li><a href="gallery1.html"  onMouseOver="setMenu(\'menuSubSix\')"   onMouseOut="clearMenu(\'menuSubSix\')">Photos 1</a></li>');
document.write('</ul>');

document.write('<div id="submenu">');

document.write('<ul id="menuSubOne" class="menuVert" onMouseOver="setMenu(\'menuSubOne\')" onMouseOut="clearMenu(\'menuSubOne\')">');
document.write('<li><a href="index.html">Home</a></li>');
document.write('<li><a href="about.html">About Us</a></li>');
document.write('</ul>');

document.write('<ul id="menuSubTwo" class="menuVert" onMouseOver="setMenu(\'menuSubTwo\')" onMouseOut="clearMenu(\'menuSubTwo\')">');
document.write('<li><a href="about.html#contact">Contact Information</a></li>');
document.write('</ul>');

document.write('<ul id="menuSubThree" class="menuVert" onMouseOver="setMenu(\'menuSubThree\')" onMouseOut="clearMenu(\'menuSubThree\')">');
document.write('<li><a href="services.html#equine">Equine Services</a></li>');
document.write('<li><a href="services.html#canine">Canine Services</a></li>');
document.write('</ul>');

//document.write('<ul id="menuSubFour" class="menuVert" onMouseOver="setMenu(\'menuSubFour\')" onMouseOut="clearMenu(\'menuSubFour\')">');
//document.write('<li><a href="holistics.html#chiro">Equine Chiropractic</a></li>');
//document.write('<li><a href="holistics.html#acup">Equine Acupuncture</a></li>');
//document.write('<li><a href="holistics.html#trad">Traditional Chinese Medicine</a></li>');
//document.write('<li><a href="holistics.html#holistic">About Holistic Medicine</a></li>');
//document.write('</ul>');

document.write('<ul id="menuSubFive" class="menuVert" onMouseOver="setMenu(\'menuSubFive\')" onMouseOut="clearMenu(\'menuSubFive\')">');
document.write('<li><a href="clients.html#recent">Recent Clients</a></li>');
document.write('<li><a href="clients.html#pro">Professional References</a></li>');
document.write('</ul>');

document.write('<ul id="menuSubSix" class="menuVert" onMouseOver="setMenu(\'menuSubSix\')" onMouseOut="clearMenu(\'menuSubSix\')">');
document.write('<li><a href="gallery3.html">Photos 2</a></li>');
document.write('<li><a href="gallery2.html">Dogs & More</a></li>');
document.write('</ul>');

document.write('</div>'); // submenu
document.write('</div>'); // menuTop


