var Banner = new Class ({
 loadedcount: 0,
 imgcount:0,
 
 elements: {
  mainDiv: null,
 },
 
  
 initialize: function(imgArray, divId) {
  this.elements.mainDiv = $(divId);
  this.elements.mainDiv.setStyles( {
   "position": "relative",
   "z-index": 0
  });
  for (a in imgArray) {
   if (typeof(imgArray[a]) == 'function') continue;
   if (typeof(imgArray[a]) == 'object') continue;
   this.imgcount++;
   var img = new Element("img", {
        src: "/images/banners/" + imgArray[a], 
        alt: "", 
        "class": "bannerImg",
        events: {
            load: function() {
                this.loadedcount++;
                if (this.loadedcount == this.imgcount) this.nextImg();
            }.bind(this)
        }
   });
   img.setStyles({
    position :"absolute",
    opacity: 0
   });
   img.inject(this.elements.mainDiv, "bottom");
  }
  this.elements.mainDiv.getElements("img.bannerImg")[0].setStyle("opacity","1").addClass("current");
  
 },
 
 nextImg: function() {
  var curimg = this.elements.mainDiv.getElement("img.bannerImg.current");
  var newimg = false;
  if (curimg.getNext()) newimg = curimg.getNext();
  else newimg = this.elements.mainDiv.getElement("img.bannerImg");
  var t = new Fx.Morph(newimg,{duration: "long", transition: Fx.Transitions.Linear});
  var t1 = new Fx.Morph(curimg,{duration: 2000, transition: Fx.Transitions.Linear});
  
  var size = curimg.getSize().y;
  var divsize = curimg.getParent().getSize().y;
  
  t1.start({"margin-top":divsize - size}).wait(1000).chain(function() {
    t.start({"opacity": 1}).chain(function() {
       curimg.setStyles({
        "opacity": 0,
        "margin-top": 0
       });
       curimg.removeClass("current");
       newimg.addClass("current");
       this.nextImg.delay(1000,this);
    }.bind(this))
  }.bind(this));
 }
 
});