So, I'm trying to add more then one Slideitmoo to my site (I'm really hoping for four). The first one is prefect, no issues. However, the second one the thumbnail images are formatted correctly (displaying 5 in a vertical row) but no slider. I've tried changing the "class" added another parameter..nothing
heres the script that I have:

<script language="javascript" type="text/javascript" src="mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 3,
duration: 200,
itemsSelector: '.SlideItMoo_element',
itemWidth: 140,
showControls:1});


new SlideItMoo({
overallContainer: 'SlideItMooc_outer',
elementScrolled: 'SlideItMooc_inner',
thumbsContainer: 'SlideItMooc_items',
itemsVisible: 5,
elemsSlide: 3,
duration: 200,
itemsSelector: '.SlideItMooc_element',
itemWidth: 140,
showControls:1});
},


});

</script>

Here's the HTML: <ul id="gallery">
<div id="SlideItMoo_outer">
<div id="SlideItMoo_inner">
<div id="SlideItMoo_items">
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc1.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc2.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc3.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc4.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc5.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc6.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMoo_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc7.png" width="110" height="108" alt="" border="0">></a>
</div>


</div>
</div>
</div>
</div> <!-- end of latest_content_gallery -->

<div class="cleaner"></div>


<div id="main">
<ul id="gallery">
<div id="SlideItMooc_outer">
<div id="SlideItMooc_inner">
<div id="SlideItMooc_items">
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc1.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc2.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc3.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc4.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc5.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc6.png" width="110" height="108" alt="" border="0"></a>

</div>
<div class="SlideItMooc_element">
<a href="#">
<img src="Beauty Images/ecommerce/FeaProduc7.png" width="110" height="108" alt="" border="0">></a>
</div>

</div>
</div>
</div>
</div>
</div>

I hope someone can help me figure this out. Thank you!