I can't figure out how to add javascript to my .ss site. It's easy in a normal HTML page, but i'm confused about where everything goes in Silverstripe. For example this menu: http://www.artviper.eu/mootoolsmenu/ has a javascript file (which i've put in page.php as Requirements::javascript("mysite/javascript/mootools.js");)
It also has javascript within the HTML page itself:

<script language="javascript" type="text/javascript">
window.onload=function(){
$$('#menu a').each(function(el) { 
		el.addEvent('mouseenter',function(){
		p = el.innerHTML.toUpperCase();
		el.innerHTML = p;
		el.setStyle('background','url(bg1.jpg)');
		myEffect = el.effect('margin-left', {duration: 100,transition: Fx.Transitions.linear, wait: true}).start('10','30');
		})
		
		el.addEvent('mouseleave',function(){
		p = el.innerHTML.toLowerCase();
		el.innerHTML = p;
		el.setStyle('background','url(bg.jpg)');
		myEffect = el.effect('margin-left', {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start('30','0');
		})
	
	})
	
	myStretch = document.getElementsByClassName('toggler');
	myStretcher = document.getElementsByClassName('accordion');
	
	// setup the accordion elements by clearing display styles	
	myStretcher.each(function(el){
		el.style.display = '';
	});
	
	
var ac = new Fx.Accordion(myStretch,myStretcher,
 
  {
		onActive: function(tog){
         tog.setStyle('color', '#ACDA4E');
		tog.setStyle('background-color', '#1d1d1d');
		tog.setStyle('cursor', 'help');
		
    },
    onBackground: function(tog){
       
		tog.setStyle('color', '#FFF');
		tog.setStyle('background-color', '#2d2d2d');
		tog.setStyle('cursor', 'help');
		
    },
		alwaysHide: true,
		start : 'all-closed',
	
		height: true,
		opacity : true			
	});
}

st = document.getElementsByClassName('toggler2');
	stc = document.getElementsByClassName('accordion2');
	
	// setup the accordion elements by clearing display styles	
	stc.each(function(el){
		el.style.display = '';
	});
	
var acc = new Fx.Accordion(st,stc,
 
  {
		onActive: function(tog){
         tog.setStyle('color', '#ACDA4E');
		tog.setStyle('background-color', '#1d1d1d');
		tog.setStyle('cursor', 'help');
		
    },
    onBackground: function(tog){
       
		tog.setStyle('color', '#FFF');
		tog.setStyle('background-color', '#2d2d2d');
		tog.setStyle('cursor', 'help');
		
    },
		alwaysHide: true,
		start : 'all-closed',
		opacity : true			
	});
	



</script>

If i put the above code in my page.ss template, the menu doesn't work and instead gives me an error... object doesn't support this property or method. Where should this code go?

Can someone please clarify this for me?

Really appreciated.

You never need to put that much javascript into your HTML. Put it in a separate js file and include below mootools in your requirements.

The template parser is looking at that code and trying to render SS content and hitting errors because it's full of $'s and (), etc. Avoid JS in your document at all costs.

Thanks UncleCheese. It's working perfectly in firefox but not IE. Any ideas? Menu is displaying but javascript is not working. Same error: Object doesn't support this property or method.

Appreciate your help as always. :)