Hi.

I`m new here, i know html & css but i`m a total stranger to javascript & its libraries.

BUt i found once a very cute thing on an old Joomla Bamboo template for joomla, and because i got the "tadaam - cool!" reaction from ppl i shown it to, i want to be able to replicate it in an normal html website.

I was able to replicate it on a joomla site a while ago, just for testing, but now i`m unable to do so and i`m stuck.

the effect should look like this:

http://joomla-love.com/j-m-charm/

if you click on the red juice image, a pannel drops down bouncing. yey!

i`ve put together a little html page, where i tried to make it again, here:

http://joomla-love.com/j-m-bounce/slidepanel.html

and nothing happens

the javascript code used is :

Code:
	<script type="text/javascript">
 
	var mySlide = new Fx.Slide('panou', {
		duration: 2000, 
		transition: Fx.Transitions.bounceOut
	}).hide();
 
	$('carligu').addEvent('click', function(e){
		e = new Event(e);
		document.getElementById("panou").style.display="block";
		mySlide.toggle();
 
		e.stop();
	});
	
   </script>
i added this libraries:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>

and i believe any of you can see the html & css used. but if needed, i`ll paste it too.

Help, pretty please!
What am i doing wrong?