script breaks after more than two links: don't know why

script breaks after more than two links: don't know why

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.

It is an old slideshow but I really like the look for what I'm 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. If needed I will provide the .js for the two scripts for mootools-1.2.5-core-nc and mootools-1.2.5.1-more

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. I have another sites that I am going to change to jQuery as soon as I finish this. BabiesNMovies.com & SBHorizons.com. jQuery are the perfect platforms for these types of presentations it so appears.
Thank you, all.

GoGreen Computer Services Partners

It takes so much to bring about the results we hope to achieve:

sustaining our environment by extending the life of our computers just that much longer.

 

Many assist us on our mission to get to our goal and are soon to be partners, not just assists

We Thank all of our assistant for getting us there.

Join us and be listed as one who really takes an active stance to really sustain our environment

 

 

 

 

 

 

 

 

 

  1.  */the BarackSlideshowWithMorphlist.js */ 
  2. /*
  3. Script: Fx.MorphList.js
  4. Animates lists of objects with a morphing background.

  6. License:
  7. MIT-style license.

  9. Authors:
  10. Guillermo Rauch
  11. */

  13. Fx.MorphList = new Class({   
  15. Implements: [Events, Options],
  17. options: {/*             
  18. onClick: $empty,
  19. onMorph: $empty,*/
  20. bg: {'class': 'background', html: '<div class="inner"></div>', morph: {link: 'cancel'}}
  21. },
  23. initialize: function(element, options){
  24. var self = this;
  25. this.setOptions(options);
  26. this.element = $(element);
  27. this.items = this.element.getChildren().addEvents({
  28. mouseenter: function(){ self.morphTo(this); },
  29. mouseleave: function(){ self.morphTo(self.current); },
  30. click: function(ev){ self.onClick(ev, this); }
  31. });       
  32. this.bg = new Element('li', this.options.bg).inject(this.element).fade('hide');
  33. this.setCurrent(this.element.getElement('.current'));
  34. },

  36. onClick: function(ev, item){
  37. this.setCurrent(item, true).fireEvent('click', [ev, item]);
  38. },
  40. setCurrent: function(el, effect){  
  41. if (el && !this.current){
  42. this.bg.set('styles', el.getCoordinates(this.element));
  43. (effect) ? this.bg.fade('in') : this.bg.fade('show');
  44. }
  45. if (this.current) this.current.removeClass('current');
  46. if (el) this.current = el.addClass('current');    
  47. return this;
  48. },         
  49.          
  50. morphTo: function(to){
  51. if (to){
  52. var c = to.getCoordinates(this.element);
  53. delete c['right']; delete c['bottom'];
  54. this.bg.morph(c);
  55. this.fireEvent('morph', to);
  56. }
  57. return this;
  58. }

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

  65. License:
  66. MIT-style license.

  68. Authors:
  69. Guillermo Rauch
  70. */

  72. var BarackSlideshow = new Class({
  73.   
  74.   Extends: Fx.MorphList,
  75.   // Implements: [Events, Options],
  76.   
  77.   options: {/*
  78.     onShow: $empty,*/
  79.     auto: true,
  80.     autostart: false,
  81.     autointerval: 2000,
  82.     transition: 'fade',
  83.     tween: { duration: 700 }
  84.   },
  85.   
  86.   initialize: function(menu, images, loader, options){
  87.       this.parent(menu, options);
  88.     this.images = $(images);
  89.     this.imagesitems = this.images.getChildren().fade('hide');
  90.     $(loader).fade('in');
  91.     new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
  92.       this.loaded = true;      
  93.       $(loader).fade('out');
  94.       if (this.current) this.show(this.items.indexOf(this.current));
  95.       else if (this.options.auto && this.options.autostart) this.progress();
  96.     }.bind(this) });
  97.     if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  98.   },
  99.   
  100.   auto: function(){
  101.     if (!this.options.auto) return false;
  102.     $clear(this.autotimer);
  103.     this.autotimer = this.progress.delay(this.options.autointerval, this);
  104.   },
  105.  
  106.   onClick: function(event, item){
  107.     this.parent(event, item);
  108.     event.stop();
  109.     this.show(this.items.indexOf(item));
  110.     $clear(this.autotimer);
  111.   },
  112.   
  113.   show: function(index) {
  114.     if (!this.loaded) return;
  115.     var image = this.imagesitems[index];    
  116. if (image == this.curimage) return;
  117.     image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
  118. image.getElement('img').setStyle('display', 'block');
  119.     var trans = this.options.transition.run(null, this).split('-');
  120.     switch(trans[0]){
  121.       case 'slide': 
  122.         var dir = $pick(trans[1], 'left');
  123.         var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
  124.         image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
  125.         break;
  126.       case 'fade': image.fade('in'); break;
  127.     }
  128.     image.get('tween').chain(function(){ 
  129.       this.auto();
  130.       this.fireEvent('show', image); 
  131.     }.bind(this));
  132.     this.curimage = image;
  133.     this.setCurrent(this.items[index])
  134.     this.morphTo(this.items[index]);
  135. return this;
  136.   },
  137.   
  138.   progress: function(){
  139.     var curindex = this.imagesitems.indexOf(this.curimage);
  140.     this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  141.   }
  142.   
  143. });
  144. new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true,autostart:false});


  2. */the css*/
  3. #slideshow * { margin: 0; padding: 0; }
  4. #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; }
  5. #slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
  6. #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; }
  7. #slideshow #pictures { background: url('http://dummyimage.com/437x277&text=Start+Poster+(437x277)'); width: 437px; height: 277px; left: 0; overflow: hidden; }
  8. #slideshow #pictures li { display: block; position: absolute; top: 0; width: 437px; }
  9. #slideshow #pictures li img { display: block; position: relative; bottom: 0; }
  10. #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; }
  11. #slideshow #menu li { display: block; z-index: 1000; position: relative; zoom: 1; }
  12. #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; }
  13. #slideshow #menu li a:focus { outline: 0; }
  14. #slideshow #menu li a:hover { color: #fff; }
  15. #slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; }
  16. #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; }

  18. */THANKS!!!*/