What i am trying to do is attach a link or make "clickable to another URL" an image when it briefly comes across the screen that points to the SITE. every time i try to link more than two URL's using the <a> tag to the images and or the menu (unordered list) the script breaks. its giving me the blues.Every time it works when I link the first two images and list items but on the third it breaks every freakin' time. I just don't get it.I have successfully managed to change other aspects of the script but this has me stumped.


The second thing I am trying to effect is I want to flip the slideshow so that the second slide is on the right and underneath the first. The top slide represents major contributors our partners. the 2nd is for those links associated with our missions and lend support. I tried on my own but have had a rough go at this too.

Its an old slideshow but I really like it for what im trying to do.
The slideshow also uses a applet (i guess that's what it is) called MOO TOOLS. It seems not to work without it. I've installed the latest update for this app.

I'm not looking for anyone to do my work but to tell me why it continues to break and where and why. I may encounter these issues on some other occasion. I really want to learn. Show me the how to effectively write this script. I will learn.

the site: gogreencomputerservice.com/PandAs.html

the css
Code:
#slideshow * { margin: 0; padding: 0; }
#slideshow { background: url('http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/bg_shadow.gif') no-repeat top; position: relative; padding: 14px 0 15px; width: 603px; height: 306px; }
#slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
#slideshow #loading { background: url('http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; }
#slideshow #pictures { background: url('http://dummyimage.com/437x277&text=Start+Poster+(437x277)'); width: 437px; height: 277px; left: 0; overflow: hidden; }
#slideshow #pictures li { display: block; position: absolute; top: 0; width: 437px; }
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }
#slideshow #menu { background: url('http://dummyimage.com/166x257/111111/eeee00&text=+++++++menu+bg (166x257)'); list-style-type: none; width: 166px; height: 257px; right: 0; padding-top: 20px; }
#slideshow #menu li { display: block; z-index: 1000; position: relative; zoom: 1; }
#slideshow #menu li a { display: block; font: 11px "Lucida Grande", "Verdana"; text-decoration: none; padding: 7px 0 7px 28px; z-index: 1000; color: #ccc; line-height: 14px; vertical-align: middle; zoom: 1; }
#slideshow #menu li a:focus { outline: 0; }
#slideshow #menu li a:hover { color: #fff; }
#slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; }
#slideshow #menu li.background { background: url('http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Source/images/arrow.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 4px; z-index: 5; }
the html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>GoGreen PandAs</title>
    
    <link rel="stylesheet" href="BarackSlideshow/Source/BarackSlideshow.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
		<link rel="stylesheet" href="css/demo.css" type="text/css" media="all" title="Stylesheet" charset="utf-8" />
		<link href="BarackSlideshow/Source/BarackSlideshow.js.css" rel="stylesheet" type="text/css" />
		<link href="BarackSlideshow/Demo/css/demo.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
		a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
        </style>
	<script type="text/javascript" charset="utf-8" src="mootools-1.2.1-core-yc.js"></script>
    <script type="text/javascript" charset="utf-8" src="mootools-1.2.5.1-more"></script>    
    <script type="text/javascript" charset="utf-8" src="Fx.MorphList.js"></script>
  <script type="text/javascript" charset="utf-8" src="BarackSlideshow/Source/BarackSlideshowWithMorphlist"></script>    
  <script type="text/javascript" charset="utf-8" src="demo.js"></script>
  </head>
  <body id="demo">    
    
    <h1>GoGreen Computer Services Partners</h1>
    
    <p>It takes so much to bring about the results we hope to achieve:</p>
    <p> sustaining our environment  by extending the life of our computers just that much longer.</p>
   <div id="slideshow">    
      <span id="loading">Loading</span>
    
      <ul id="pictures">
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg" alt="gogreencomputerservicessas" title="gogreencomputerservicessas" /></li>
        
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg" alt="gogreencomputerservicesbnm" title="gogreencomputerservicesbnm" /></li>
       
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg" alt="gogreencomputerservicessbhorizonsnorthpointe" title="gogreencomputerservicessbhorizonsnorthpointe" /></li>
        
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg" alt="gogreencomputerservicesfinestofsantabarbara.jpg" title="gogreencomputerservicesfinestofsantabarbara.jpg" /></li>
       
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg" alt="gogreencomputerservicesprosurferdude" title="gogreencomputerservicesprosurferdude" /></a></li>
       
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg" alt="gogreencomputerservicessm3" title="gogreencomputerservicessm3" /></li>
        
        <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg" alt="gogreencomputerservicesgogreencomputerservices" title="gogreencomputerservicesgogreencomputerservices" /></a></li>        
      </ul>
      
      <ul id="menu" name="menu">
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg">Sewing Another Seed</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg">BabiesNMovies</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg">SBHorizons/NorthPointe</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg">Finest of Santa Barbara</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg">ProSurferDude</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg">Solution:M3</a></li>
        <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg">GoGreen Computer Services</a></li>
      </ul>
    </div>
  <p>&nbsp; </p>
  <p align="right">Many assist us on our mission to get to our goal and are soon to be partners,  not just assists</p>
  <p align="right">We Thank all of our assistant for getting us there. </p>
  <p align="right">Join us and be listed as one who really takes an active stance to really sustain our environment  </p>
  <p><img src="Untitled-1.jpg" alt="" width="615" height="318" align="right" /></p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <div align="right"><a href="index.html">Home</a>/<a href="RepairServiceRates.html">Repair &amp; Service</a>/<a href="E-Recycling.html">E-Recycling</a></div>
   <p>&nbsp;</p>
    
  </body>  
</html>
the .js
Code:
Fx.MorphList.js
	Animates lists of objects with a morphing background.

	License:
		MIT-style license.

	Authors:
		Guillermo Rauch
*/

Fx.MorphList = new Class({   
	
	Implements: [Events, Options],
	
	options: {/*             
		onClick: $empty,
		onMorph: $empty,*/
		bg: {'class': 'background', html: '<div class="inner"></div>', morph: {link: 'cancel'}}		
	},
	
	initialize: function(element, options){
		var self = this;
		this.setOptions(options);
		this.element = $(element);		
		this.items = this.element.getChildren().addEvents({
			mouseenter: function(){ self.morphTo(this); },
			mouseleave: function(){ self.morphTo(self.current); },
			click: function(ev){ self.onClick(ev, this); }
		});       
		this.bg = new Element('li', this.options.bg).inject(this.element).fade('hide');
		this.setCurrent(this.element.getElement('.current'));
	},

	onClick: function(ev, item){
		this.setCurrent(item, true).fireEvent('click', [ev, item]);
	},
	
	setCurrent: function(el, effect){  
		if (el && !this.current){
			this.bg.set('styles', el.getCoordinates(this.element));
			(effect) ? this.bg.fade('in') : this.bg.fade('show');
		}
		if (this.current) this.current.removeClass('current');
		if (el) this.current = el.addClass('current');    
		return this;
	},         
         
	morphTo: function(to){
		if (to){
			var c = to.getCoordinates(this.element);
			delete c['right']; delete c['bottom'];
			this.bg.morph(c);
			this.fireEvent('morph', to);
		}
		return this;
	}

});
/*
Script: BarackSlideshow.js
	Lightweight slideshow script, based on Fx.MorphList

	License:
		MIT-style license.

	Authors:
		Guillermo Rauch
*/

var BarackSlideshow = new Class({
  
  Extends: Fx.MorphList,
  // Implements: [Events, Options],
  
  options: {/*
    onShow: $empty,*/
    auto: true,
    autostart: false,
    autointerval: 2000,
    transition: 'fade',
    tween: { duration: 700 }
  },
  
  initialize: function(menu, images, loader, options){
      this.parent(menu, options);
    this.images = $(images);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;      
      $(loader).fade('out');
      if (this.current) this.show(this.items.indexOf(this.current));
      else if (this.options.auto && this.options.autostart) this.progress();
    }.bind(this) });
    if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  },
  
  auto: function(){
    if (!this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
  			
  onClick: function(event, item){
    this.parent(event, item);
    event.stop();
    this.show(this.items.indexOf(item));
    $clear(this.autotimer);
  },
  
  show: function(index) {
    if (!this.loaded) return;
    var image = this.imagesitems[index];    
		if (image == this.curimage) return;
    image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
		image.getElement('img').setStyle('display', 'block');
    var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide': 
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function(){ 
      this.auto();
      this.fireEvent('show', image); 
    }.bind(this));
    this.curimage = image;
    this.setCurrent(this.items[index])
    this.morphTo(this.items[index]);
		return this;
  },
  
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  }
  
});
new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true,autostart:false});
*/THANKS*/