var SlideShow = Class.create({
  current:0,
  image_array:null,
  initialize: function(images){
   //i need to get the first image and fade it in.
   var t = this;
   t.image_array = images;
    t.loadImage();
   new PeriodicalExecuter(function(pe){
     t.current = (t.current == images.length-1)?0:t.current+1;
     t.loadImage();
     }, 8);
  },
  loadImage : function(){
    var image = new Image();
    var t = this;
     image.onload = function() {
       t.response(image);
     };
     image.src = t.image_array[t.current];
  }, 
  response : function(image){
    var t = this;
    if($('listOfImages').down()){
      var old_li = $('listOfImages').down(0);
    }
    var new_li = new Element('li');
    new_li.setStyle({
        opacity:0, 
        right:"100px"})
    var new_image = new Element("img",{"src":image.src});
    new_li.insert(new_image);
    $('listOfImages').insert(new_li);
    new_li.morph('opacity:1; right:0px;', { duration: .75 });
    if(old_li){
      old_li.morph('opacity:0; top:300px;', { 
        duration: .65, 
        after : function( ) {
                t.dispose(old_li);
              }
        });
    }
  },

  dispose:function(garbage){
    var nullable = garbage.remove();
    nullable = null;
  }
  
});