const loading = 1
const slide = 5
const animation = 1.5
const onlyText = 1

$$(".carroussel").each(function(carroussel){
    var images = carroussel.getElements('li')

    // images.fade('hide')
    carroussel.getElements('li img').fade('hide').set('tween', {duration: animation*1000}).set('morph', {duration: animation*1000})
    carroussel.getElements('li span').fade('hide').set('tween', {duration: 500})
    var currentIndex = 0
    
    carroussel.showImage = function(index){
      // hide former text
      images[currentIndex].getElement('span').fade('hide')
      // fade out former image
      images[currentIndex].getElement('img').fade('out')
      currentIndex = index
      // show text
      images[currentIndex].getElement('span').fade('in')
      // fade in image
      setTimeout(function(){
        images[currentIndex].getElement('img').setStyles({height:0, width:0, marginTop:0, marginLeft:0, opacity: 0}).morph({opacity:1, height: 450, width: 1050, marginTop: -225, marginLeft: -525})
      }, onlyText * 1000)
    }
    
    setTimeout(function(){
      images[currentIndex].getElement('span').fade('in')
      setTimeout(function(){
        images[currentIndex].getElement('img').setStyles({height:0, width:0, marginTop:0, marginLeft:0, opacity: 0}).morph({opacity:1, height: 450, width: 1050, marginTop: -225, marginLeft: -525})
      }, onlyText * 1000)

      setInterval(function(){carroussel.showImage((currentIndex+1)%images.length)}, slide*1000)  
    }, loading*1000)
    
})