JavaScript - Javascript Not Working Correctly In Firefox

df=document.form;
for(var j=0;j< val;j++)
 {				                                                
                                                                         
     if(df['fname'+userArray[j]].value =="")
      {
        df['fname'+userArray[j]].focus();
         break;
      }
      else if(df['lname'+userArray[j]].value =="")
       {
          df['lname'+userArray[j]].focus();break;
        }    
     else if(df['ph'+userArray[j]].value =="")
      {
         df['ph'+userArray[j]].focus();break;
       }      
     else if(df['email'+userArray[j]].value =="")
      {
         df['email'+userArray[j]].focus();break;
       }    							      	 
     else if(df['comp'+userArray[j]].value =="")
      {
        df['comp'+userArray[j]].focus();break;
       }      
     else if(df['addra'+userArray[j]].value =="")
      {
        df['addra'+userArray[j]].focus();break;
       }      
     else if(df['city'+userArray[j]].value =="")
      {
        df['city'+userArray[j]].focus();break;
       }      
      else if(df['state'+userArray[j]].value =="")
      {
        df['state'+userArray[j]].focus();break;
      }      
      else if(df['zip'+userArray[j]].value =="")
      {
        df['zip'+userArray[j]].focus();break;
        }      
     else if(df['country'+userArray[j]].value =="")
       {
       df['country'+userArray[j]].focus();break;
        } 
  }

function premium_calculator()
{
    var val = document.getElementById('user_input').value;	
    var state = document.getElementById('user_state').value;
    var excess=[0.03,0.0285714285714286,0.0257142857142857,0.019047619047619];     // excess rates
    var gst=.10;                                            // GST rate
    var margin=.60;                                     // margin
// state array 
//    var States=["QLD","NSW","ACT","VIC","TAS","SA ","WA ","NT "];  
    var sd=[0.075,0.09,0.1,0.1,0.08,0.11,0.1,0.1];                               // stamp duty rates

     if (val<100000)
     {    
             switch (state) {
               case "QLD": 
                     var n1 = val * excess[0];
                     if (n1 < 75)
                          n1 = 75;
                     var gn1 = n1 * gst;
                     var sd1 = (n1 + gn1) * sd[0];
                     var m1 = n1 * margin;
                     var mx1 = (val/2500)*((12/36)*25);
                     var gm1 = (m1 + mx1) * gst;
                     var r1 = roundNumber((n1+gn1+sd1+m1+mx1+gm1),2);

                     var n2 = val * excess[1];
                     if (n2 < 75)
                          n2 = 75;
                     var gn2 = n2 * gst;
                     var sd2 = (n2 + gn2) * sd[0];
	     var m2 = n2 * margin;
                     var mx2 = (val/2500)*((12/36)*25);
                     var gm2 = (m2 + mx2) * gst;
                     var r2 = roundNumber((n2+gn2+sd2+m2 +mx2+gm2),2);  

                     var n3 = val * excess[2];
                     if (n3 < 75)
                          n3 = 75;
                     var gn3 = n3 * gst;
                     var sd3 = (n3 + gn3) * sd[0];
	     var m3 = n3 * margin;
                     var mx3 = (val/2500)*((12/36)*25);
                     var gm3 = (m3 + mx3) * gst;
                     var r3 = roundNumber((n3+gn3+sd3+m3+mx3+gm3),2);  

                     var n4 = val * excess[3];
                     if (n4 < 75)
                          n4 = 75;
                     var gn4 = n4 * gst;
                     var sd4 = (n4 + gn4) * sd[0];
	     var m4 = n4 * margin;
                     var mx4 = (val/2500)*((12/36)*25);
                     var gm4 = (m4 + mx4) * gst;
                     var r4 = roundNumber((n4+gn4+sd4+m4+mx4+gm4),2); 
                     break;
//this case is repeated for each state with slight differences
             }
     }    
     else
     {    
           alert ("Please contact us for quote");
           r1 = 0;
           r2 = 0;
           r3 = 0;
           r4 = 0; 
     }
     document.getElementById('val_100_1').innerHTML = r1;
     document.getElementById('val_250_1').innerHTML = r2;
     document.getElementById('val_500_1').innerHTML = r3;
     document.getElementById('val_1000_1').innerHTML = r4;

}

function roundNumber(rnum, rlength) { // Arguments: number to round, number of decimal places
  var newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
  return newnumber.toFixed(2); // Output the result to the form field (change for your purposes)
}

<table>
<CFFORM action="mypage.cfm METHOD="post" name="Login" rel="nofollow" target="_blank" id="go"> 
    
  
  <cfinput type="hidden" name="decrypted" value="#decrypted#">

  <tr>
        <td>
               <a  class="K" HREF="javascript:document.go.submit();">My Page</a>
        </td>
  </tr>
  
  <tr>
        <td >
                <table>
                          <tr>
                                <td>
                                       <a HREF="javascript:document.go.submit();"><img border="0" src="images/icon.PNG"  align="left" /></a> 
                                </td>
                          </tr>
                </table>
        </td>
   </tr>
   
</CFFORM>
</table>

var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
} 
}
}

function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;

function updatePage() {
if (username.value.length>0){
if (	 request.responseText.indexOf("0") == -1	 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

}
if (username.value.length===0)
{	userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername="";	}
}

var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

function redirect(){
	var raw=window.document.location.href;
	if(content_address_start=raw.indexOf("?")!=-1){
		var content_address=raw.split("frame.html?")[1];
		window.document.getElementById('content').src=content_address;
	}
}

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/SSPP1.JPG", "", ""] //plain image syntax
fadeimages[1]=["images/SSPP2.JPG", "", ""] //plain image syntax
fadeimages[2]=["images/SSPP3.JPG", "", ""] //plain image syntax
fadeimages[3]=["images/SSPP4.JPG", "", ""] //plain image syntax
fadeimages[4]=["images/SSPP5.JPG", "", ""] //plain image syntax
fadeimages[5]=["images/SSPP6.JPG", "", ""] //plain image syntax
fadeimages[6]=["images/SSPP7.JPG", "", ""] //plain image syntax
fadeimages[7]=["images/SSPP11.JPG", "", ""] //plain image syntax
fadeimages[8]=["images/SSPP12.JPG", "", ""] //plain image syntax
fadeimages[9]=["images/SSPP13.JPG", "", ""] //plain image syntax
fadeimages[10]=["images/SSPP14.JPG", "", ""] //plain image syntax


 
var fadebgcolor="white"
 
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="nofollow" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
if(document.getElementById('content'))
document.getElementById('content').style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (crossobj.filters&&crossobj.filters[0]){
 
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head>
  
<link href="5A.css" rel="stylesheet" type="text/css" media="screen"/>



<script type="text/javascript">

function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
  var bNum= 1* document.getElementById("txtbNum").value;
  var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
  var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
  var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;

if (Avg <=  60)

         alphaGr="F";

 if (Avg>60 && Avg <= 70)

        alphaGr="D";

 if (Avg>70 && Avg <= 80)
	alphaGr="C";

 if (Avg>80 && Avg <=90)
	alphaGr="B";

 if (Avg>90 && Avg <=100)
	alphaGr="A";}

</script>
</head>
<body>
<div id="wrapper">

  <div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />

Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />

<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />

<hr/>

Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>

Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />

Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />

  </div>
</div>
</body>
</html>

I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>

function flipBox(img) {
	var tmpname;
	if(img.src=="http://www.riddlesforall.com/logic/n.gif") {
		img.src = "http://www.riddlesforall.com/logic/x.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 1;
		document.getElementById(img.name).value = 1;
	} else if(img.src=="http://www.riddlesforall.com/logic/x.gif") {
		var finaltest = checkDoubles(img.name);
		if(finaltest=="false") {
			img.src = "http://www.riddlesforall.com/logic/o.gif";
			tmpname = img.name;
			document.mainform.elements[tmpname].value = 3;
			document.getElementById(img.name).value = 3;		
		} else {
			img.src = "http://www.riddlesforall.com/logic/n.gif";
		}		
	} else if(img.src=="http://www.riddlesforall.com/logic/o.gif") {
		img.src = "http://www.riddlesforall.com/logic/n.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 0;
		document.getElementById(img.name).value = 0;		
	}	
	showVals();
}

<img src="data:image/gif;base64,R0lGODlhGQAZAIAAAP///wAAACH5BAEAAAAALAAAAAAZABkAAAIXhI+py+0Po5y02ouz3rz7D4biSJamWAAAOw==" height=20 width=20 id=1-0-0 name=A1B1 onclick="flipBox(this);" class=gridbox>

<!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine 
Peninsula &amp; The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can 
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
	
																				<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
																				<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
																				<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
																				
															
																				
									<script>
									// initialise the drop-down menus
									runOnLoad(Dropdown.initialise);
									</script>
				
												
</head>
<body>


<div id="wrapper">

	<a href="tel://+61425859742"><div id="mobile_header"></div></a>
	<a href="tel://+61425859742"><div id="phoneBlock"></div></a>

	
	<div id="header"></div>
	
	<div id="nav">
	<ul class="dropdown">
  <li>
    <a href="index.html">Home</a>
		</li>    
		<li>Electrical
    <ul>
      <li>
        <a href="domestic_electrician.html">Domestic</a>
      </li>
      <li>
        <a href="electrical_contractors.html">Commercial/Industrial</a>
      </li>
    </ul>
  </li>    <li>
	<a href="air_conditioner_installation.html">Air Conditioners</a>
	</li>			<li>
	<a href="solar_power_systems.html">Solar</a>
	<ul>
			<li><a href="solar_system_maintenance.html">Maintenance</a>
			</li>
			<li><a href="solar_energy_facts.html">About Solar</a>
			</li>
			</ul>
	</li>    <li>
	<a href="b_type_gas_service.html">Type B Gas</a>
	</li>  <li>
	<a href="formgenerator/forms/contact.html">Contact Us</a>
	</li>
</ul>
	</div>	 					
	
	
	
				<div id="content-2">
				<div class="clear">&nbsp;</div>
						 <div id="top_border"></div>
						 		 <div id="content-2-1">
								 
								 			<span class="blackheading">Watt You Need Electrical - 
											Offering Electrical Services For Geelong, Bellarine Peninsula &amp; The Surf Coast</span>
											
			<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can 
			take that extra bit of time and effort to make sure you get the best service and advice.
			<br /><br />
			If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a 
			split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best 
			quality job at a competitive price.
			<br /><br />
			Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>, 
			we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B 
			Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
			<br /><br />
			<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
			</p>


								</div>
						<div id="bottom_border"></div>
				</div>
	
	<div id="footer">
			 <table class="tableFooter">
			 <tr><td>Watt You Need Electrical Pty. Ltd. &copy; 2014</td></tr>
			 </table>
  </div>
	
</div>

</body>
</html>

/*

Dropdown.js

Creates touch-friendly drop-down menus

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the Dropdown object
var Dropdown = (function(){

  // the delay, in milliseconds
  var DELAY = 250;

  // the list of menus
  var menus = [];

  // Initialises the drop-down menus.
  function initialise(){

    // listen for touch events on the document if appropriate
    if ('createTouch' in document){
      document.body.addEventListener('touchstart', handleTouchStart, false);
    }

    // loop over the menus, converting them
    var menus = document.querySelectorAll('ul.dropdown');
    for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);

  }

  /* Handles a touch start event. The parameter is:
   *
   * e - the event
   */
  function handleTouchStart(e){

    // determine whether any menu is open
    var isOpen = false;
    for (var i = 0; i < menus.length; i ++){
      if (menus[i].isOpen) isOpen = true;
    }

    // return immediately if all menus are closed
    if (!isOpen) return;

    // move up the document tree until we reach the root node
    var node = e.target;
    while (node != null){

      // return immediately if we are inside a drop-down menu
      if (/\bdropdown\b/.test(node.className)) return;

      // move onto the parent node
      node = node.parentNode;

    }

    // close all menus
    close();

  }

  /* Closes all menus except the specified menu. The parameter is:
   *
   * menu - a menu not to close; this parameter is optional
   */
  function close(menu){

    // loop over the menus, closing them
    for (var i = 0; i < menus.length; i ++){
      if (menus[i] != menu) menus[i].close();
    }

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - either the DOM node of the menu or the ID of the node
   */
  function applyTo(node){

    // fetch the DOM node if a string was supplied
    if (typeof node == 'string') node = document.getElementById(node);

    // create and store the new menu
    menus.push(new Menu(node));

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - the DOM node of the menu
   */
  function Menu(node){

    // store the node
    this.node = node;

    // update the class name
    node.className += ' dropdownJavaScript';

    // listen for mouse events
    if ('addEventListener' in node){
      node.addEventListener(
          'mouseover', this.bind(this.handleMouseOver), false);
      node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
      node.addEventListener('click',    this.bind(this.handleClick),    false);
    }else{
      node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
      node.attachEvent('onmouseout',  this.bind(this.handleMouseOut));
      node.attachEvent('onclick',     this.bind(this.handleClick));
    }

    // listen for touch events if appropriate
    if ('createTouch' in document){
      node.addEventListener('touchstart', this.bind(this.handleClick), false);
    }

  }

  // whether the menu is open
  Menu.prototype.isOpen = false;

  // the timeout
  Menu.prototype.timeout = null;

  /* Binds the specified function to the current object. The parameter is:
   *
   * f - the function
   */
  Menu.prototype.bind = function(f){

    // return the bound function
    var thisObject = this;
    return function(){ f.apply(thisObject, arguments); }

  }

  /* Handles a mouse over event. The parameters a 
   *
   * e         - the event
   * immediate - true to open the menu without a delay
   */
  Menu.prototype.handleMouseOver = function(e, immediate){

    // clear the timeout
    this.clearTimeout();

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // if the target is within a list item, set the timeout
    if (item.nodeName == 'LI'){
      this.toOpen  = item;
      this.timeout =
          window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
    }

  }

  // Handles a mouse out event.
  Menu.prototype.handleMouseOut = function(){

    // clear the timeout
    this.clearTimeout();

    // set the timeout
    this.timeout = window.setTimeout(this.bind(this.close), DELAY);

  }

  /* Handles a click event. The parameter is:
   *
   * e - the event
   */
  Menu.prototype.handleClick = function(e){

    // close any other menus
    close(this);

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // check that the target is within a list item
    if (item.nodeName == 'LI'){

      // check whether the item has a closed submenu
      var submenu = this.getChildrenByTagName(item, 'UL');
      if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){

        // open the submenu
        this.handleMouseOver(e, true);

        // prevent the default action
        if ('preventDefault' in e){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }

      }

    }

  }

  // Clears the timeout.
  Menu.prototype.clearTimeout = function(){

    // clear the timeout
    if (this.timeout){
      window.clearTimeout(this.timeout);
      this.timeout = null;
    }

  }

  // Opens the last item hovered over.
  Menu.prototype.open = function(){

    // store that the menu is open
    this.isOpen = true;

    // loop over the list items with the same parent
    var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
    for (var i = 0; i < items.length; i ++){

      // check whether there is a submenu
      var submenu = this.getChildrenByTagName(items[i], 'UL');
      if (submenu.length > 0){

        // check whether the submenu should be opened or closed
        if (items[i] != this.toOpen){

          // close the submenu
          items[i].className =
              items[i].className.replace(/\bdropdownOpen\b/g, '');
          this.close(items[i]);

        }else if (!/\bdropdownOpen\b/.test(items[i].className)){

          // open the submenu
          items[i].className += ' dropdownOpen';

          // determine the location of the edges of the submenu
          var left = 0;
          var node = submenu[0];
          while (node){
            left += node.offsetLeft;
            node = node.offsetParent;
          }
          right = left + submenu[0].offsetWidth;

          // move the submenu to the right of the item if appropriate
          if (left < 0) items[i].className += ' dropdownLeftToRight';

          // move the submenu to the left of the item if appropriate
          if (right > document.body.clientWidth){
            items[i].className += ' dropdownRightToLeft';
          }

        }

      }

    }

  }

  /* Closes the menus within the specified node. The parameter is:
   *
   * node - the node; if omitted, all menus are closed
   */
  Menu.prototype.close = function(node){

    // if no node was specified, close all menus
    if (!node){
      this.isOpen = false;
      node        = this.node;
    }

    // loop over the items, closing their submenus
    var items = node.getElementsByTagName('li');
    for (var i = 0; i < items.length; i ++){
      items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
    }

  }

  /* Returns an array containing the children of the specified node with the
   * specified tag name. The parameters a 
   *
   * node    - the node
   * tagName - the tag name
   */
  Menu.prototype.getChildrenByTagName = function(node, tagName){

    // initialise the list of children
    var result = [];

    // loop over the children, adding those with the right tag name to the list
    for (var i = 0; i < node.childNodes.length; i ++){
      if (node.childNodes[i].nodeName == tagName){
        result.push(node.childNodes[i]);
      }
    }

    // return the children
    return result;

  }

  // return the public API
  return {
    initialise : initialise,
    applyTo    : applyTo
  };

})();