<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">  
 //<![CDATA[
   window.addEvent('domready', function(){
     var data = {
       '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, 
       '2.jpg': { caption: 'A Ceibu tree.' }, 
       '3.jpg': { caption: 'The view from Volcano Maderas.' }, 
       '4.jpg': { caption: 'Beer and ice cream.' }
     };
     var myShow = new Slideshow('show', data, {controller: true, height: 400, hu: 'images/', thumbnails: true, width: 500});
   });
 //]]>
</script>
<script type="text/javascript">
$(document).ready(function()
{
 //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
 $("#firstpane p.menu_head").click(function()
    {
  $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
 //slides the element with class "menu_body" when mouse is over the paragraph
 $("#secondpane p.menu_head").mouseover(function()
    {
      $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
});
</script>

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->