I am a digital design student working on a final year project that requires me to build a website that utilises both MooTools and LightBox.

For MooTools I have used a hacked acordion script from a tutorial by David Walsh [http://davidwalsh.name/simple-mootools-accordion]. This works near perfectly.
For the LightBox I have used LightBox 2 [http://www.huddletogether.com/projects/lightbox2/]. This also works near perfectly.

However, when I try to combine both libraries into the same HTML document either one or the other will work but not both together. Depending on what order I put the JS links in my header I will have either one or the other scripts working. :confused:

I have very little experience with Javascript and cannot for the life of me work out where I've gone wrong. The LightBox website says this:

Code:
It doesn't work at all. The image opens up in a new page. What's wrong?
This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
I cannot find any onload attributes (maybe I'm looking in the wrong place?) or maybe that's not the issue at all.

I'll include my HTML below.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Jak</title>
  
<link rel="stylesheet" type="text/css" href="style/style.css" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script type="text/javascript" src="js/mootools.svn.84.HACKED.js"></script>
 
<script language="javascript"> 
/////////////////////////////////////////////////////////
//
// START OF CHRIS ESLER FUNCTIONS
//
/////////////////////////////////////////////////////////
//
// QUICK TOGGLE FUNCTION
// objClass is the target flag className
//
function toggleDisplay(objClass){
 
		$S('.'+objClass).each(function(el){
		
			if (el.className.indexOf("Hide") != -1) el.className = el.className.replace("Hide","Show");
			else el.className = el.className.replace("Show","Hide");
 
		});
		
}
 
/////////////////////////////////////////////////////////
//
// SETUP KEYPRESS CONTROL VARS
//
var control = false;
var nextKey = false;
 
/////////////////////////////////////////////////////////
//
// DETERMINE WHICH KEYPRESS FUNCTIONS TO  
// USE BY BROWSER TYPE
//
if (!/MSIE (5\.5|6|7\.)/.test(navigator.userAgent)) { 
/////////////////////////////////////////////////////////
//
// MOZILLA-STYLE PROPAGATE DOWN EVENT ARCHITECTURE
//
// Much better than IE's. Actually captures key combo's
// and doesn't affect other key combo's
 
	function detectspecialkeys(e){
		var evtobj= e
		var keyCode = e.which;
		if (evtobj.ctrlKey){
			toggleAccordion(keyCode);
		}
	}
	document.onkeypress=detectspecialkeys;
	
}else{
//
/////////////////////////////////////////////////////////
//
// MICROSOFT-STYLE BUBBLE UP EVENT ARCHITECTURE
//
// retarded IE requires this funky capture system
// checks if control key pressed, then marks true
// then captures next key, then marks it true
// if control key true and next key true, then it does
// conditional statement
 
	document.onkeydown = function () {
		
		var keyCode=event.keyCode
		
		// if its control key, mark it true 
		// and reset nextKey
		if(keyCode == 17){ 
		
			control = true;
			nextKey = false;
			
		// if control is true, then flag nextKey
		}else{
			nextKey = true;
		}
	
		// if both control and next key, then do our conditional statements
		if (control && nextKey) {
			
			if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
				//alert ('control key pressed + '+keyCode);
				toggleAccordion(keyCode);
			}
			
			// reset control vars
			control = false;
			nextKey = false;
			
			// this is here last, so it nullifies IE beviours for these buttons
			// otherwise we don't want it to nullify other bbuttons such as Control-P (for print), etc
			if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
				return false;
			}
				
		} else {
		
		  return true;
		  
		}
	}
//
/////////////////////////////////////////////////////////
}
 
/////////////////////////////////////////////////////////
//
// SETUP ACCORDION ASSOCIATIVE ARRAY
// maps key presses to the accordion toggle
// 49 = number 1 key, 50 = number 2 key, and so on
//
var accArray = [0, 1, 2, 3, 4]; 
var keyArray = [49, 50, 51, 52, 53]; 
var newAccArray = accArray.associate(keyArray);
var currentArrow = 0;
 
/////////////////////////////////////////////////////////
//
// FUNCTION TO TOGGLE ACCORDION BASED ON KEYPRESS COMBO
// control key + number 1 key opens accordion[0]
//
function toggleAccordion(obj) {
 
	// check if the 1-5 keys are pressed in conjunction with the control key
	if(obj == 49 || obj == 50 || obj == 51 || obj == 52 || obj == 53) {
		
		// get the associated accordion to the key pressed
		var newAccObj = newAccArray[obj];
 
		// grab our accordion object
		var newArrow = $('arrow'+newAccArray[obj]);
		
		// set the new current Arrow
		currentArrow = newAccArray[obj];
 
		// toggle the accordion
		//myAccordion.showThisHideOpen(newAccArray[obj]);
		myAccordion.showThisHideOpen(newAccArray[obj]);
 
	}
 
}
 
/////////////////////////////////////////////////////////
//
// FUNCTIONS TO TOGGLE THE PILL IMAGE AND SET CURRENT TOGGLE
//
// change pill to ON
function toggleAccordionImageShow(el) {
 
	// grab our pill image
	var obj = el.getLast().getFirst();
	
	// get our arrow id / accordion id
	var newArrowId = obj.id.replace(/arrow/g,'');
 
	// set current Arrow
	currentArrow = newArrowId;
 
	// set the new source
	if(!obj.src.test('Lite')){
		obj.setProperty('src',obj.src.replace(/.gif/g,'Lite.gif'));
	}
 
}
 
// change pill to off
function toggleAccordionImageHide(el) {
 
	// grab our pill image
	var obj = el.getLast().getFirst();
	
	// set the new source
	obj.setProperty('src',obj.src.replace(/Lite/g,''));
 
}
 
 
/////////////////////////////////////////////////////////
//
// ACCORDION VARS SETUP
// 
var myAccordion;
var myStretch;
var myStretcher;
 
/////////////////////////////////////////////////////////
//
// WINDOW ONLOAD STUFF - onDomReady from Moottools
//
Window.onDomReady(function() {
	
	// get accordion elements
	myStretch = document.getElementsByClassName('toggler');
	myStretcher = document.getElementsByClassName('accordion');
	
	// setup the accordion elements by clearing display styles	
	myStretcher.each(function(el){
		el.style.display = '';
	});
	
	// Create the accordion
	myAccordion = new fx.Accordion(myStretch, myStretcher, 
		{
			/*fixedHeight: 125,*/
			opacity : true,
			openClose : true,
			onActive : function(el){toggleAccordionImageShow(el)},
			onBackground : function(el){toggleAccordionImageHide(el)},
			itemsOpen : [0],
			start : 'first-open'
		});
	/////////////////////////////////////////////////////////
	//
	// SETUP THE TOOLTIPS
	//
	
	// tooltip array
	var as = [];
	
	// grab all images that are supposed to have a tooltip
	$S('img.hasTooltip').each(function(a){ if (a.getAttribute('title')) as.push(a); });
	
	// create tooltip instance
	new Tips(as, {maxOpacity: 0.9, maxTitleChars: 300});	
	
 
});
 
//--->
</script> 
</head> 
<body>
<h1>Jak</h1>
<div>
 <!--### START ACCORDION ###--> 
 <div class="wrap"> 
 	 <div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';"> 
		<div><img src="images/icons/arrow_right.png" id="arrow0" alt="" align="middle" class="hasTooltip" title="Toggle One :: Click this row or press Control+1 to open this section" /> <span>Hello, world!</span></div> 
	 </div> 
	 <div class="accordion"> 
 
	 	<div> 
			<div align="center"><p>
				Some Text
				</P>
			</div> 
			<div class="bottomMargin"> </div> 
		</div> 
	 </div> 
	 <div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';"> 
		<div><img src="images/icons/arrow_right.png" id="arrow1" alt="" align="middle" class="hasTooltip" title="Toggle Two :: Click this row or press Control+2 to open this section" /> <span>Toggle Section Two</span> </div> 
	 </div> 
	 <div class="accordion"> 
	 	<div> 
 
			<div> 
				More variable length content
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br />
				<a href="images/butterfly.gif" rel="lightbox" title="Love me long time">Butterfly</a>
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				END.
			</div> 
			<div class="bottomMargin"> </div> 
		</div> 
	 </div> 
	 <div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';"> 
 
		<div><img src="images/icons/arrow_right.png" id="arrow2" alt="" align="middle" class="hasTooltip" title="Toggle Two :: Click this row or press Control+3 to open this section" /> <span>Toggle Secion Three</span> </div> 
	 </div> 
	 <div class="accordion"> 
	 	<div> 
			<div> 
				More variable length content
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				END.
			</div> 
			<div class="bottomMargin"> </div> 
		 </div>	
	 </div> 
 
	 <div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';"> 
		<div><img src="images/icons/arrow_right.png" id="arrow3" alt="" align="middle" class="hasTooltip" title="Toggle Four :: Click this row or press Control+4 to open this section" /> <span>Toggle Section Four</span> </div> 
	 </div> 
	 <div class="accordion" style="overflow: hidden; height: 0px; visibility: hidden; opacity: 0;"> 
	 	<div> 
 
			<div> 
				This one is not in the open first array. More variable Content.
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				END.
			</div> 
			<div class="bottomMargin"> </div> 
		 </div> 
	 </div> 
	 <div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';"> 
 
		<div><img src="images/icons/arrow_right.png" id="arrow4" alt="" align="middle" class="hasTooltip" title="Toggle Five :: Click this row or press Control+5 to open this section" /> <span>Toggle Section Five</span> </div> 
	 </div> 
	 <div class="accordion" style="overflow: hidden; height: 0px; visibility: hidden; opacity: 0;"> 
	 	<div> 
			<div> 
				This one is not in the open first array. More variable Content.
				<br /> 
				<br /> 
				<br /> 
				<br /> 
				END.
			</div> 
			<div class="bottomMargin"> </div> 
		 </div>		 
	 </div> 
   </div>
   <br />
<h3>Footer
<br />
Oooters
</h3>
</body>
</html>
Please, if you have ANY idea where I'm going wrong I'm in desperate need of your help! If there are any other files (such as the JS libraries themselves, or the CSS) please let me know and I'll post them up pronto.
I'm working to a very tight deadline and I'll be waiting here, in front of my computer with baited breath for your answer!

Thank you in advance :)

Jak