Javascript Carousel Issue

Hi,
I have created a website at https://www.cressidajade.com/photographs/ for a friend and I used a carousel that worked and then for some strange reason didnt work. The code is as follows:

Theses are the includes:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/sifr.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/sifr-config.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/reflex.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/mediabox72.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/assets/js/swfobject.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/lib/prototype.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/lib/effects.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/dist/carousel.js" type="text/javascript"></script>

HTML Code:

<div id="horizontal_carousel">
  <div class="previous_button"></div>
    <div class="container">
       <ul>
        <li>...</li>
     </ul>
     </div>
      <div class="next_button"></div>
    </div>
<script type="text/javascript">
// <![CDATA[
  function runTest() {
    hCarousel = new UI.Carousel("horizontal_carousel");
  }
  Event.observe(window, "load", runTest);
// ]]>
</script>

CSS Styling:

/* ----------------------------------- */
/*      4. HORIZONTAL CAROUSEL         */
/* ----------------------------------- */
.container {
 position:relative;
	overflow:hidden;   /* causes the clipping */
	visibility:hidden; /* component turns it on when first item is rendered */
}

#horizontal_carousel {
  float: left;
  width: 850px;
  height: 240px;
  margin-bottom:0 auto;
}

#horizontal_carousel .container {
  float: left;
  width: 760px;
  height: 550px;
  overflow: hidden;
}

#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  top: 0;
  left: 0;
  height: 240px;
}                      

#horizontal_carousel ul li {
  width: 400px;
  height: 550px;
  text-align: center;
  list-style:none;
  float:left;
}

#horizontal_carousel .previous_button {
  margin:140px 0 0 0;
		float:left;
  width: 32px;
  height: 32px;
  background: url(assets/images/left.png) no-repeat;
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .previous_button_over {
  background: url(assets/images/left_over.png) no-repeat;
}

#horizontal_carousel .previous_button_disabled {
  background: url(assets/images/left_disabled.png) no-repeat;
  cursor: default;
}

#horizontal_carousel .next_button {
  margin:140px 0 0 20px;
		float:left;
  width: 32px;
  height: 32px;
  background: url(assets/images/right.png) no-repeat;
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .next_button_over {
  background: url(assets/images/right_over.png) no-repeat;
}

#horizontal_carousel .next_button_disabled {
  background: url(assets/images/right_disabled.png) no-repeat;
  cursor: default;
}

It used to work but I can’t remember what I did to make it stop working. I have the following plugins installed which I have disabled one by one and checked:

BM Custom Login 1.3
NextGEN FlashViewer 1.2
NextGEN Gallery 1.0.2
WordPress Database Backup 2.2.2
WP-SimpleViewer

I’m running WordPress 2.7. I have also commented out the javascripts for the sIFR Text replacement but that didn’t work either.

Could anyone shed some light on the issue please, it has had me stumped for a week now.